vue.js 一个超简单的例子让你搞懂nextTick的使用场景(转载)
对vue中nextTick()的理解及使用场景说明
1.0 理解 nextTick 是什么,有什么用?
作用: 可以以通过$nextTick() 获取到更新之后的DOM (通过 this.refs.xxx 获取 dom,data发生变化,查看dom是否更新,打印一下dom)
注意点: 什么是 更新之后的Dom?
*** vue是依靠数据驱动视图更新的,该更新的过程是异步的 ,当侦听到你的数据发生变化时,
Vue将开启一个队列(该队列被Vue官方称为异步更新队列)。视图需要等队列中所有数据变化
完成之后,再统一进行更新Dom,(Vue 实现的响应式并不是数据发生变化之后视图立即变化)
***
2.0 理解 nextTick 的执行时机
数据更新完成到 ---------> 视图更新完毕之后被调用
3.0 应用场景
1.0: 如果要在created()钩子函数中进行的DOM操作,由于created()钩子函数中还未对DOM进行任何渲染,
所以无法直接操作,需要通过$nextTick()来完成(注:在created()钩子函数中进行的DOM操作,不使用
$nextTick()会报错)
2.0 :更新数据后,想要使用js对新的视图进行操作时(视图更新是异步的,不管在哪里使用nextTick,都会等待在mounted
钩子之后执行,或者updated钩子之后执行 )
3.0:在使用某些第三方插件时 ,这些插件需要dom动态变化后重新应用该插件,这时候就需要使用$nextTick()来重新应用插件的方法
4.0 注意点:$nextTick() 返回一个 Promise 对象,所以我们也可以使用async/await语法完成相同的事情
// .then的方式
changeStr: function() {
this.str = "我爱你中国,我亲爱的母亲!"
this.nextTick().then(()=> {
console.log(this.$refs.myP.innerText);
})
}
// async/await语法,awiat以同步的方式书写代码,async修饰awit说在的函数
changeStr:async function(){
this.str = "我爱你中国,我亲爱的母亲!"
await this.$nextTick();
console.log(this.$refs.myP.innerText);
}