Vue 实践过程当中的几个问题

前言

本篇是我在使用vue过程当中，遇到的几个小问题和以前不了解的东西，记录下来，但愿可以帮助各位踩坑。若是喜欢的话能够点波赞，或者关注一下，但愿本文能够帮到你们。html

本文首发于个人我的blog：obkoro1.comvue

本篇记录我的遇到的问题以下:

路由变化页面数据不刷新问题
setTimeout/setInterval this指向改变，没法用this访问VUe实例
setInterval路由跳转继续运行并无销毁
vue 滚动行为(浏览器回退记忆位置)用法
vue路由拦截浏览器后退实现草稿保存相似需求
v-once 只渲染元素和组件一次，优化更新渲染性能
vue框架风格指南推荐

路由变化页面数据不刷新问题

场景：好比文章详情数据，依赖路由的params参数获取的(ajax写在created生命周期里面)，由于路由懒加载的关系，退出页面再进入另外一个文章页面并不会运行created组件生命周期，致使文章数据仍是上一个文章的数据。ajax

解决方法：watch监听路由是否变化

watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.articleId){//是否有文章id
      //获取文章数据
    }
  }
}
复制代码

setTimeout/setInterval this指向改变，没法用this访问VUe实例

场景：

mounted(){ 
        setTimeout(function () { //setInterval同理 
          console.log(this);//此时this指向Window对象
        },1000);
    }
复制代码

解决方法：使用箭头函数或者

//箭头函数访问this实例 由于箭头函数自己没有绑定this
     setTimeout(() => { 
       console.log(this);
    }, 500);
    //使用变量访问this实例
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self变量访问this实例
        },1000);
复制代码

setInterval路由跳转继续运行并无销毁

场景：

好比一些弹幕，走马灯文字，这类须要定时调用的，路由跳转以后，由于组件已经销毁了，可是setInterval尚未销毁，还在继续后台调用，控制台会不断报错，若是运算量大的话，没法及时清除，会致使严重的页面卡顿。vue-router

解决办法：在组件生命周期beforeDestroy中止setInterval

组件销毁前执行的钩子函数，跟其余生命周期钩子函数的用法相同。api

beforeDestroy(){
     //我一般是把setInterval()定时器赋值给this实例，而后就能够像下面这么暂停。
    clearInterval(this.intervalid);
},
复制代码

vue 滚动行为(浏览器回退记忆位置)用法

这个我当时作的时候觉得很难，后来作好了才发现就是一个设置而已（前提是要开启路由的History 模式），下面作一个简单的分享。浏览器

路由设置

要使用这一功能，首先须要开启vue-router的 history模式

若是以前一直使用的是hash模式(默认模式)，项目已经开发了一段时间，而后转history模式极可能会遇到：这些问题缓存

滚动行为具体设置以下：markdown

const router = new VueRouter({
   mode: 'history',
 scrollBehavior (to, from, savedPosition) {
     if (savedPosition) { //若是savedPosition存在，滚动条会自动跳到记录的值的地方
       return savedPosition
     } else {
       return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
      }
     }，
   routes: [...]
 })
复制代码

vue滚动行为文档，能够进到这里看看更详细的信息。框架

vue路由拦截浏览器后退实现草稿保存相似需求

场景：

为了防止用户忽然离开，没有保存已输入的信息。ide

用法：

//在路由组件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(用户已经输入信息){
    //出现弹窗提醒保存草稿，或者自动后台为其保存
    
  }else{
    next(true);//用户离开
  }
复制代码

相似的还有beforeEach、beforeRouteUpdate，也分为全局钩子和组件钩子，见路由文档。

v-once 只渲染元素和组件一次，优化更新渲染性能

以为v-once这个api蛮6的，应该不少小伙伴都没有注意到这个api。

文档介绍：

这个api在我看来主要用于那些一次性渲染，而且不会再有操做更改这些渲染的值，这样就能够优化双向绑定的更新性能。

文档推荐：对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，能够考虑使用 v-once 将渲染结果缓存起来，就像这样：

Vue.component('terms-of-service', {
  template: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ...不少静态内容...\
    </div>\
  '
})
复制代码

vue风格指南推荐：

写到这里想到vue框架还有一个风格指南推荐，以下图所示，你们也能够学习一波。

小结

上面就是我分享的几个小问题，但愿你们看了可以有所收获！另：明年准备去上海，若是小伙伴的公司有坑，能够联系一下我。

最后：如需转载，请放上原文连接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的很差之处，不撕逼，可是欢迎指点。而后就是但愿看完的朋友点个喜欢，也能够关注一下我。 我的blog and 掘金我的主页

以上2018.1.17