五、nextTick的使用

其内执行的函数可获得dom节点。

<!--src/components/Test/NextTickTest.vue-->
<template>
  <div>
    <ul ref="refElement">
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "NextTickTest",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.list = ["吃饭", "睡觉", "打豆豆"];
    }, 2000);
    console.log(this.$refs.refElement); // 获取不到li节点

    // list未更新，此时nextTick的回调，不可以获取到dom节点
    this.$nextTick(() => {
      console.log(this.$refs.refElement); // 获取不到li节点
    });
  },
  watch: {
    list(newValue, oldValue) {
      // list已经更新完毕，此时nextTick的回调即可获取到dom节点
      this.$nextTick(() => {
        console.log(this.$refs.refElement); // 可以获取li节点
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>