vue中的$nextTick的使用及原理概述

官方对其的定义：

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

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

Vue渲染是一个异步渲染，当在对数据进行修改时，Vue不会马上去渲染，而是在下一个tick的时候做渲染，这时候我们去获取dom元素属性的时候，获取的数据还是上一个tick渲染出来的值，此时就会出现数据更改与渲染慢一拍的情况。为此Vue给我们提供了一个 API-->  $nextTIck;

this.$nextTick 中的回调函数，会在dom异步渲染完毕之后来执行，所以此时获取的值是改变之后的值；

<template>
  <div id="app" ref="refh">
    <h1 @click="changeMsg" v-for="(v, i) in msg" :key="i" ref="refh">
      {{ v }}
    </h1>
    <comp-swiper></comp-swiper>
  </div>
</template>

<script>
import CompSwiper from "@/components/CompSwiper.vue";
export default {
  name: "App",
  components: {
    CompSwiper,
  },
  data() {
    return {
      msg: ["我是原始值1", "我是原始值2"],
    };
  },
  methods: {
    changeMsg() {
      this.msg.push("我是点击过后的加入值1");
      //此时获取的 dom元素的值是没有增加之前的值
      console.log(this.$el.textContent);//"我是原始值1", "我是原始值2"
      //获取dom节点的中的元素长度
      console.log(this.$el.childNodes.length); // 3

      // 使用 $nextTick
      this.$nextTick(() => {
       this.msg.push("我是点击过后nextTick加入的值2");
       console.log(this.$el.textContent); //我是原始值1  我是原始值2  我是点击过后的加入值1
      });
    },
  },
};