vue 小知识总结

1. v-if

用于切换元素(组件)是否存在

在切换时元素(组件)及它的数据绑定被销毁并重建，值为false时关闭数据劫持，值为true时开启数据劫持，依据此特性，我们可以达到重新渲染(将当前state变成初始state)的效果

<component v-if="isShow"></component>

this.isShow = false;
this.$nextTick(() => {
  this.isShow = true;
})

2. watch 

当同步频繁修改数据，并不会触发与改变相等次数的事件回调（每次事件循环只执行一个订阅者的更新回调）

data(){
    return {
        prop: 1
    }
},
watch: {
    prop(val){
        console.log(val)
    }
},

// 情况1，会触发一次事件回调，打印出一条 '4'
mounted(){
    this.prop = 1;
    this.prop = 2;
    this.prop = 3;
    this.prop = 4;
}

// 情况2，不会触发事件回调
mounted(){
    this.prop = 4;
    this.prop = 3;
    this.prop = 2;
    this.prop = 1;
}