欢迎光临
我们一直在努力

$nextTick 与 Vue DOM异步更新

  • Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新。

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

  • $nextTick 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick ,可以在回调函数中获取更新后的DOM。

Vue API 文档示例:

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
  • Vue 实现响应式并不是数据发生变化后DOM立即变化,而是按照一定的策略进行DOM 的更新。

因为$nextTick()返回一个Promise对象 ,所以可以使用ES2017 async/await语法:

<template>
    <p ref="msg">{{message}}</p>
</template>
data(){
    return {
        mesage="aaa"
    }
}
methods:{
    updaMessage: async function(){
        this.message = 'bbb'
        console.log(this.$refs.msg.innerHTML) 
        // aaa 未更新
        await this.$nextTick()
        console.log(this.$refs.msg.innerHTML) 
        //bbb 已更新
    }
}
赞(1) 打赏
未经允许不得转载:散人研 » $nextTick 与 Vue DOM异步更新
分享到: 更多 (0)

评论 抢沙发

5 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏