0%

Understanding of Vue.nextTick

Vue.nextTick

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

获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM会出问题,所以就衍生出了这个获取更新后的 DOMVue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码


使用场景
  • vue 生命周期的 created() 钩子进行 DOM 操作一定要放在 Vue.nextTick() 的回调函数中 ,原因是在 created() 钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

  • 在数据变化后要执行的某个操作,当你设置 vm.someData = 'new value'DOM并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

  • mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

    1
    2
    3
    4
    5
    6
    7
    mounted () {
    this.$nextTick(function () {

    // Code that will run only after the
    // entire view has been rendered
    })
    }
  • 由于 Vue.nextTick() 是异步执行的, 所以可以使用 async / await 将代码写成同步的形式。