$nextTick的使用场景

NextTick是什么?

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

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

作用

你想想如果你一个方法里要修改十个data里的值，那是不是要更新十次视图啊，是不是要做十次diff呢？？显然不是。
首先Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓存在同一事件循环中发生的所有数据变更。这种在缓存时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的)工作。所以就有了nextTick()，是将回调函数延迟在下一次dom更新数据后调用,即当数据更新了在DOM中渲染后自动执行该函数，简单点说就算数据更新了，在dom中渲染后，自动执行该函数。

应用场景

需要在created中进行dom操作

在vue生命周期的created()里进行DOM的操作一定要使用nextTick()，因为created()执行的时候DOM还未进行任何渲染。

<template>
  <div class="hello">
    <button ref="text">{{ msg }}</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '我是按钮的文字',
    }
  },
  created() {
  	console.log(this.$refs.text.innerHTML) //TypeError: Cannot read property 'innerHTML' of undefined
    that.$nextTick(function () {
      console.log(this.$refs.text.innerHTML) //我是按钮的文字
    })
  },
}
</script>

再比如重置组件的操作

<template>
  <div>
    <!-- nextTick: 下一个渲染周期 -->
    <my-tick v-if="show" />
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import MyTick from './components/MyTick.vue'
export default {
  components: { MyTick },
  data() {
    return {
      show: true,
    }
  },
  methods: {
    reset() {
      // 刷新: 先移除 再添加
      // vue的设计: 方法执行到结尾, 把最终的效果更新DOM, 所以false没执行
      // 原生DOM: 每行代码的执行都会刷新DOM
      this.show = false
      // 在本次渲染完毕后, 立刻执行下一个任务:  nextTick
      this.$nextTick(() => (this.show = true))

      //$nextTick: 在本次渲染结束后的下一次渲染中, 例如执行 true 的操作
    },
  },
}
</script>

<style lang="scss" scoped></style>