vue中容易被忽略的那些小细节【持续更新中】

1. 定时器

很多时候我们可能会有写定时器的需求（比如有个轮播图的任务），当我们离开这个页面时，你会发现定时任务还在跑，浏览器的性能炸了。 我们可以这么解决：

 data() {
     return {
         timer: null
     }
 }
 methods: {
     timing() {
         this.timer = setInterval(() => {
         // dosomething
         }, 100)
     }
 }
 beforeDestroy() {
     clearInterval(this.timer) // 在组件即将销毁时清掉定时任务
     this.timer = null // 变量释放
 }
 

最重要的就是 就在当我们离开这个页面（组件销毁前）时清掉定时任务。

2. nextStick是什么，怎么理解他呢？

Vue异步修改DOM的过程中，遇到数据更改时，需要对DOM元素做出相应的处理， 但获取的数据不是修改之后的，所以要用到nextStick。 this.nextStick()原理是Vue通过异步队列控制DOM的更新和nextStick回调函数的先后执行顺序来进行的，代码如下：

<button @click="change()">按钮</button><h1 ref="gss">{{msg}}</h1>
//JS
export default{
    name:"app",
    data(){
        return {
            msg:"123"
        }
    },
    methods:{
        change(){
            this.msg = "456";
            console.log(this.refs["gss"].innerHTML)//123
            this.$nextTick(function(){
                console.log(this.refs["gss"].innerHTML)//456
            })
        }
    }

}

3.vue怎么重置data

使用object.assign(),vm.d a t a 可 以 获 取 当 前 状 态 下 的 d a t a , v m . data可以获取当前状态下的data, vm.data可以获取当前状态下的data,vm.options.data可以获取到组件初始化状态下的data

object.assign(this.$data,this.$options.data())

4. 按需加载（懒加载）

components: {
    'my-component': () => import('./my-async-component')
  }

5. v-if和v-for的层级

不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。