Vue.nextTick()【问题引入和分析】

Vue.nextTick()

前言

在此之前，你需要了解：事件循环，重排和重绘，Diff算法，会让你更好的理解本文

内容

先引入一个问题

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Updated Message'
      console.log(this.$el.textContent) // 输出 "Hello Vue!"
      this.$nextTick(function () {
        console.log(this.$el.textContent) // 输出 "Updated Message"
      })
    }
  }
}
</script>

在 changeMessage 方法中，更改了组件的 message 数据，并尝试记录 $el.textContent 的值。

但是，由于 Vue 在进行数据更改后不会立即更新DOM(虚拟DOM异步处理)，所以在记录文本内容时 $el.textContent 仍然是旧值 Hello Vue!

那么为什么进行数据更改后不会立即更新呢？

首先，修改一个就更新一个话，会引起大量的浏览器的重排和重绘

Vue想到了这一点，它把大量更新操作合并成一个更新队列，在一个事件循环结束之前统一执行

当第一次打印的时候，虽然你改变了DOM，但是这次事件循环还未结束，还未更新，所以获取的是默认值

当第二次打印的时候，通过Vue.nextTick()等待事件循环结束，才获取的值，也就是更新后的值

nextTick作用：

将回调函数延迟到下次DOM更新循环之后执行，来观察本次DOM产生的变化

拓展：

• vue把大量更新操作合并成了一个更新队列

• 在事件循环中，执行更新任务，就是执行这个更新队列中的任务

• 更新队列中的事件如何去执行的，是通过nextTick函数去执行的（执行过程：对更新进行差异比较，返回回调函数，加入渲染队列）
  注意：这里的nextTick和Vue.nextTick()可不一样哈

结语

感谢读者阅读并关注博客文章，并对文章中提到的观点、建议或批评表示感谢