vue.js 一个超简单的例子让你搞懂nextTick的使用场景(转载)

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