1.vue—nextTick()

vue原理：

• 通過數據驅動視圖更新的，該更新的過程是異步的，數據變化視圖不一定變化，數據變化後會專門放到一個隊列中，視圖需要等隊列中同一事件循環中的所有數據變化完成之後，再統一進行更新。

1、使用場景

• created和mounted鉤子函數中，均需要使用 $ nextTick,created()DOM元素沒有渲染，所以進行DOM操作無用，在created()中不使用$nextTick報錯，mounted不能夠承諾所有子組件全部加載完畢，所以需要使用

created(){
    this.$nextTick(()=>{
        this.$refs.myP.innerText = "哈哈，你好";
    });
}

不使用$nextTick，報錯

//  Error in created hook: "TypeError: Cannot set property 'innerText' of undefined"
created(){
    this.$refs.myP.innerText = "哈哈，你好";
}

• 藉助第三方插件的時候，插件需要dom動態變化後重新應用該插件

比如：
    輪播圖的插件，動態的插入輪播dom元素，dom元素變化
    

• 更細視圖後，基於新的視圖進行操作

new Vue({

    el: '.app',
    
    data: { 
    msg: 'Hello Vue.', 
    msg1: '', 
    msg2: '', 
    msg3: '' 
    },
    
    methods: {
        changeMsg() {
        
            // 修改數據
            this.msg = "Hello world.";
            
            // 數據雖然改變，但是視圖還沒有更新
            // Hello world.
            this.msg1 = this.$refs.msgDiv.innerHTML; 
            
            // this.$nextTick(callback),回調函數，確保DOM更新之後，執行回調函數
			// Hello Vue.
            this.$nextTick(() => {
                this.msg2 = this.$refs.msgDiv.innerHTML;
            })
            
            // Hello world.
            this.msg3 = this.$refs.msgDiv.innerHTML; 
            
        }
    }
})