Vue高级特性「五」--$nextTick

$nextTick

data改变之后，DOM不会立刻渲染，获取不到最新的DOM节点；
$nextTick会在DOM渲染之后被触发，以获取最新DOM节点

<template>
  <div>
    <ul ref="ul1">
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
    <button @click="add">添加项</button>
  </div>
</template>

<script>
export default {
  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; //获取ul的DOM节点
      console.log(ulElem.childNodes.length); //此时data改变之后，DOM不会立刻渲染，获取不到最新的DOM节点

      // $nextTick会在DOM渲染之后被触发，以获取最新DOM节点
      this.$nextTick(() => {
        const ulElem = this.$refs.ul1; //获取ul的DOM节点
        console.log(ulElem.childNodes.length); //$nextTick会在DOM渲染之后被触发,此时已经是最新的DOM节点
      });

      // 1. 异步渲染，$nextTick 待DOM渲染完再回调
      // 2. 页面渲染是，会将data的修改做整合，多次data修改只会渲染一次
    },
  },
};
</script>