vue 中 $nextTick 的作用

$nextTick

因为vue数据变化更新视图是异步的，所以更新数据后获取的不是最新的dom

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

比如 this.arr.push(4) 那么使用 v-for 循环出的li会增加一个， 此时获取ul的高度，获取不到最新的，需要使用$nextTick 来获取更新后的dom 元素的高度，或者创建swiper的时候，由于数据是调用接口 是异步的，所以在$nextTick里面 在创建 new Swiper ，才能保证seiper 正常运行

<template>
  <div>
    <ul id="ul">
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <button @click="add">添加数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4],
    };
  },
  methods: {
    add() {
      console.log(document.querySelector("#ul").offsetHeight);
      this.arr.push(5); //vue 数据变化后更新dom 是异步的 （会有延迟）

      this.$nextTick(function () {  //等待dom 更新完成之后的回调函数
        console.log(document.querySelector("#ul").offsetHeight); //获取到最新的dom
      });
    },
  },
};
</script>