vue的状态更新（异步更新解决方案）

最新推荐文章于 2025-07-02 14:43:07 发布

原创最新推荐文章于 2025-07-02 14:43:07 发布 · 6.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue状态异步更新解决方案

vue 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了Vue中状态更新的异步性质，与React的setstate行为相似。为解决此问题，文章提出了使用vm.$nextTick()实例方法，它在DOM更新后执行回调，支持Promise和async/await语法，确保在正确的时间访问最新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中状态更新是异步的，这一点和react中的setstate类似。

解决方案

非组件解决方案：

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue ，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2016 async/await 语法完成相同的事情：

methods: {
  updateMessage: async function () {
    this.message = 'updated'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}