Vue nextTick用法

VUE nextTick用法

在vue中,观察到数据改变后,会开启一个队列。Vue会把同一个事件循环当中观察到的数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。在下一个事件循环时,Vue会清空队列并进行必要的DOM更新。

DOM是异步更新的,所以当你需要改变数据后对DOM进行操作,或者在created 生命周期对DOM进行操作,是需要等到DOM更新完成后再操作的。此时就可以哟个 nextTick 方法解决问题。

使用情景

  • created 生命周期对DOM操作:

  • 当修改数据完成时,想基于最新DOM进行操作:

    例如:

    打开编辑模态框之前,先查询详情渲染更新到表单,等表单更新完毕需要立即设置表单验证。

    ajax 获取数渲染到DOM中展示出来后对DOM进行操作。(也可在 mounted 直接可以操作DOM,因为created 周期 DOM还未挂载,mounted 周期时DOM挂载渲染完成)

全局 nextTick

Vue.nextTick([callback, context])

参数:

{Function}[callback]:回调函数

{Object}[context]:

用法:

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

vm.$nextTick

vm.$nextTick([callback])

参数:

{Function}[callback]: 回调函数

用法:

将回调延迟到下次DOM更新循环之后执行。

在修改数据之后立即使用,然后等待DOM更新,更新完毕后会调用回调函数。

若没有提供回调函数且在支持 Promise 的环境中,会返回一个 Promise对象

new Vue({
    // ...
    methods: {
        //...
        test(){
            // 修改数据
            this.msg = 'new value' + new Date().getTime()
            // DOM 还未更新
            this.$nextTick(function(){
                // DOM 更新完成
                // `this` 绑定到当前实例
                this.doSomethingElse()
                
            })
            
        },
        test2(){
            // 修改数据
            this.msg = 'new value' + new Date().getTime()
            // DOM 还未更新
            this.$nextTick().then(function(){
                // DOM 更新完成
                // `this` 绑定到当前实例
                this.doSomethingElse()
            })
        },
        // this.$nextTick() 返回 Promise 对象,
        // 就可以用 es2017 的语法 async/await 实现相同的功能
        async test3(){
            // 修改数据
            this.msg = 'new value' + new Date().getTime()
            // DOM 还未更新
            await this.$nextTick()
            // 已更新
            this.doSomethingElse()
        }
    }
})
上一篇:vue中实现先请求数据再渲染dom


下一篇:Vue中$nextTick()用法