$nextTick的理解

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新

简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

原理： 1.首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及DOM。

2.Vue开启一个异步队列，并缓冲在此事件循环中发生的所有数据变化。

3.同步任务执行完毕，开始执行异步队列的任务，更新DOM

什么时候用：

为了在数据变化之后等待 Vue 完成更新 DOM 可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用。

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

<template>
  <div>
    <h1>nexttick</h1>
    <h1 ref="demoh">{{ text }}</h1>
  </div>
</template>

<script>
export default {
  created() {
    //   在这个实例创建完毕的钩子函数中  我如果想获取到h1里面的显示内容可以吗？
    // 但是我就是想获取怎么办？

    this.$nextTick(()=>{
        console.log(this.$refs.demoh.innerText)
    })
  },
  data() {
    return {
      text: "你好",
    };
  },
};
</script>

<style>
</style>