Vue—组件实例之$nextTick

一、概述

DOM更新循环结束后，执行延迟回调。

二、详解

$nextTick有两个使用场景。

场景一

钩子函数created中进行的DOM操作一定要放在$nextTick的回调函数中。因为created执行时，DOM并未进行任何渲染，无法操作DOM。与之对应的钩子函数mounted中可以进行任何DOM操作，因为该钩子执行时，已完成DOM渲染。

<script>
export default {
  created() {
    this.$nextTick(() => {
      console.log('DOM渲染完成');
    });
  }
}
</script>

场景二 

修改数据之后立即使用$nextTick，可以在其回调函数中获得更新后的DOM。 

<template>
  <div>
    <div ref="root" v-for="(item, index) in msg" :key="index">{{item}}</div>
    <button @click="edit">按钮</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: [1, 2]
    }
  },
  methods: {
    edit() {
      console.log(this.$refs.root);   // [div, div]
      this.msg = [1];
      console.log(this.$refs.root);   // [div, div], 数据虽修改, 但DOM未完成重新渲染
      this.$nextTick(() => {
        console.log(this.$refs.root); // [div]
      });
    }
  }
}
</script>