您现在的位置是:首页 >其他 >Vue.nextTick()【问题引入和分析】网站首页其他

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

明月落乌江 2024-06-17 10:22:18
简介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函数去执行的(执行过程:对更新进行差异比较,返回回调函数,加入渲染队列)
    注意:这里的nextTickVue.nextTick()可不一样哈

结语

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

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。