vue 修改数据界面没有及时更新nextTick

最新推荐文章于 2023-03-15 14:26:27 发布

weixin_30613343

最新推荐文章于 2023-03-15 14:26:27 发布

阅读量480

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/cczlovexw/p/9560215.html

版权

使用场景：有些时候，我们使用vue修改了一些数据，但是页面上的DOM还没有更新，这个时候我们就需要使用到nextTick。

说明：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

this.$nextTick(function () {
    // DOM 现在更新了
    // `this` 绑定到当前实例
   this.doSomethingElse()
})

2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不是原生支持 Promise (IE：你们都看我干嘛)，你得自行 polyfill。

Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

nextTick的使用还有个小小的技巧，我们在生命周期mounted里面渲染的时候，不能百分百保证所有的自组件都能被渲染，所以我们可以在mounted里面使用 vm.$nextTick，这样就能确保所有的子组件都能被渲染到了。

（mounted钩子在服务器端渲染期间不被调用。）

同样的可以在updated这个钩子做一样的操作。

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

转载于:https://www.cnblogs.com/cczlovexw/p/9560215.html

关注