簡單理解vue中的nextTick

背景

vue是異步渲染的，當data改變以後，DOM不會馬上被渲染，頁面渲染時會將data的修改作整合，屢次data修改只會作整合最後一次性渲染出來，這也是異步渲染的緣由。只有異步渲染才能夠實現整合操做。

例子

methods: {
    update() {
        for (let i = 0; i < 10; i++) {
            this.testNum = this.testNum + i;
        }
    },
},

在你的 Vue 視圖中， testNum 會發生變化。不過須要注意的是這個變化的過程，雖然咱們把 firstNum 循環修改了 10 次，可是實際上它只會把最後一次的值更新到視圖上——這也是很是合理的，好比說咱們這個 demo 裏，每一次循環給 testNum 的賦值只不過是一個過程，最終的目的是拿到 10 次循環的計算結果而已。若是咱們硬去算 10 次，那麼沒必要要的性能開銷必然是使人肉疼的。

需求

咱們須要對data修改後並拿到DOM，對DOM進行操做解決，

例子

<template>
  <div id="app">
    <ul ref="ul1">
      <li v-for="(v, i) in list" :key="i">{{ v }}</li>
    </ul>
    <button @click="add">add DOM</button>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      list: ["a", "b", "c"],
    };
  },
  methods: {
    add() {
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      const ulElem = this.$refs.ul1;
      console.log(ulElem.childNodes.length);
    },
  },
};
</script>

原本點擊完以後數組長度應該輸出6個，可是實際上數組長度只有3個，由於data改變後，DOM並不會馬上改變，此時咱們是拿不到新增的節點的，這時候的DOM節點仍是一開始的a,b,c 。DOM操做執行完以後，它再異步渲染。

不過咱們的指望是點擊完以後馬上拿到後面的三個，這時候就須要請出咱們的主角nextTick。

add() {
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      const ulElem = this.$refs.ul1;
      this.$nextTick(() => {
        console.log(ulElem.childNodes.length);
      });
    },

這個例子也能夠看出，$nextTick會待DOM渲染完成再回調，同時也能夠看出，咱們雖然一次點擊有三次修改data,可是屢次修改會進行整合，最後渲染一次，這也說明渲染也是異步的，若是是同步，就沒辦法整合。