vue 中 this.nextTick()

最新推荐文章于 2024-07-30 16:49:30 发布

我想当话家

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量549

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_50148250/article/details/127354404

版权

为什么要使用this.$nextTick()：

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。
然后Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。（这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。）

以下内容来自Vue官网

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM 还未更新
      console.log(document.getElementById('counter').textContent) // 0

      await nextTick()
      // DOM 此时已经更新
      console.log(document.getElementById('counter').textContent) // 1
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>