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>