1. 這究竟是個什麼問題 ？
在Vue 中， 視圖的渲染是由數據驅動的， Vue 不鼓勵我們直接去操作 Dom，它讓我們僅關注業務層面的邏輯。
數據驅動視圖，也就意味着：
graph LR
數據發生變動 ====> Dom發生改變
但是， Dom 的更新渲染是一個異步的過程，這也就意味着，當你在修改可能會導致視圖改變的數據後，如果立刻用同步代碼去訪問視圖，那麼由於視圖的異步渲染問題。 在你訪問Dom的時刻，Dom還沒有完成更新渲染。
這將導致，你只能訪問到還未來得及更新的Dom。 如果這個訪問過程是重複的，那麼從表現上看，就像你始終在訪問上一次的 Dom。 也就是 數據和視圖 好像並不 “同步”。
而 $nextTick() ， 解決了什麼問題呢 ？
vm.nextTick 又叫做異步更新隊列。它的作用，就是將你對 Dom 的訪問 延遲到下一輪視圖更新完成後，再去執行，這樣，就能解決上述的因爲異步渲染導致的 Dom 訪問問題了。
2. 什麼時候需要注意到這個問題？
當你需要訪問由數據驅動渲染的視圖 Dom 的時候，你始終應該注意這個問題。
3. 實驗示例
以下是一個實驗示例：
<template>
<div>
<button @click="handleClick">加一個</button>
<ol ref="ol">
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
list: ["apple", "pear", "banana"],
};
},
methods: {
handleClick() {
this.list.push("加一個");
console.log(this.$refs.ol.childNodes.length, "--line19");
},
},
};
</script>
nextTick
<template>
<div>
<button @click="handleClick">加一個</button>
<ol ref="ol">
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
list: ["apple", "pear", "banana"],
};
},
methods: {
handleClick() {
this.list.push("加一個");
this.$nextTick(() => {
console.log(this.$refs.ol.childNodes.length, "--line19");
});
},
},
};
</script>
