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()
        }
    }
})