主要應用的場景及原因
1. 在Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中,在created()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調(diào)函數(shù)中。與之對應的就是mounted()鉤子函數(shù)，因為該鉤子函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數(shù)中進行任何DOM操作都不會有問題 。
2. 在數(shù)據(jù)變化后要執(zhí)行的某個操作，而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時候，這個操作都應該放進Vue.nextTick()的回調(diào)函數(shù)中。當數(shù)據(jù)更新的時候，視圖并不會立即渲染，這時候如果我們期望獲取到視圖更新后的數(shù)據(jù)，可以通過nextTick進行操作。
具體原因在Vue的官方文檔中詳細解釋：
Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環(huán)“tick”中，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。Vue 在內(nèi)部嘗試對異步隊列使用原生的?Promise.then?和MessageChannel，如果執(zhí)行環(huán)境不支持，會采用?setTimeout(fn, 0)代替。例如，當你設(shè)置vm.someData = 'new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在事件循環(huán)隊列清空時的下一個“tick”更新。多數(shù)情況我們不需要關(guān)心這個過程，但是如果你想在 DOM 狀態(tài)更新后做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員沿著“數(shù)據(jù)驅(qū)動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback)?。這樣回調(diào)函數(shù)在 DOM 更新完成后就會調(diào)用。
源碼解析：。。
以上from：Vue中的nextTick用法和原理詳解 - 路過春天的雨點 - 博客園
示例：
<body>
? ? <div id="app">
? ? ? ? <h1>{{title}}</h1>
? ? ? ? <button @click="setBoxContent">設(shè)置新的內(nèi)容</button>
? ? ? ? <hr>
? ? ? ? <div ref="box" style="background: red" v-html="content"></div>
? ? </div>
? ? <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
? ? <script>
? ? ? ? let app = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? title: '開課吧',
? ? ? ? ? ? ? ? n: 1
? ? ? ? ? ? },
? ? ? ? ? ? computed: {
? ? ? ? ? ? ? ? content() {
? ? ? ? ? ? ? ? ? ? return new Array(this.n).fill(this.title).join('<br>');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? setBoxContent() {
? ? ? ? ? ? ? ? ? ? this.n++;
? ? ? ? ? ? ? ? ? ? this.$nextTick(_=>{
? ? ? ? ? ? ? ? ? ? ? ? console.log( this.$refs.box.clientHeight );
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? </script>
? ? ?
