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;
}