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