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

本文来互联网采集,已注明来源,如未注明来源可能来源未知,如有侵权请联系站长删除处理。

发表回复

后才能评论