概述

$nextTick 是一个用于在DOM更新完成后执行回调函数的方法

vue的数据更新是一种延迟异步更新

在vue中修改数据后，页面不会立刻更新，而是开启一个队列，并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时，才开始更新。

此时通过DOM操作获取的数据仍然是未更新的数据

$nextTick能够监听的DOM更新完成

异步更新队列

Vue在观察到数据变化时，并不是直接更新DOM，而是开启一个队列，并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时，才开始更新。

应用场景

created阶段的DOM操作

使用

1.组件内通过this.$nextTick()调用

2.内部参数是一个回调函数，在DOM更新完成后执行

3.会返回一个Promise对象

4.支持async\await

<template>
  <section>
    <h1 ref="hello">{{ value }}</h1>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        value: 'Hello World ~'
      };
    },
    methods: {
      get() {
        this.value = '你好啊';
        console.log(this.$refs['hello'].innerText);
        this.$nextTick(() => {
          console.log(this.$refs['hello'].innerText);
        });
      }
    },
    mounted() {
    },
    created() {
    }
  }
</script>