概念：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，

           Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新！

使用场景：

虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

代码示例：

<template>
  <section>
    <div ref="box">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="lcClick">点我</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      lcClick() {
      }
    },
    mounted() {
      console.log(3);
      console.log(this.$refs['box']);
      this.$nextTick(() => {
        console.log(4);
        console.log(this.$refs['box']);
      });
    },
    created() {
      console.log(1);
      console.log(this.$refs['box']);
      this.$nextTick(() => {
        console.log(2);
        console.log(this.$refs['box']);
      });
    }
  }
</script>