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); }
本文来互联网采集,已注明来源,如未注明来源可能来源未知,如有侵权请联系站长删除处理。