简单理解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,可是屡次修改会进行整合，最后渲染一次，这也说明渲染也是异步的，若是是同步，就没办法整合。