$nextTick的使用

$nextTick解决了什么问题：
当数据更新，dom没有更新，获取不到最新的dom问题

<template>
	<div>
		<p ref="myp">msg:{
     {
     msg}}</p>
		<p>msg1:{
     {
     msg1}}</p>
		<p>msg2:{
     {
     msg2}}</p>
		<button @click="changeIt">改变</button>
	</div>
</template>
<script>
	export default{
     
		data(){
     
			return{
     
				msg:"HI vue",
				msg1:'',
				msg2:''
			}
		},
		methods:{
     
			changeIt(){
     
				this.msg = '我爱 中国';
				this.msg1 = this.$refs.myp.innerHTML;
				//在浏览器运行然后点击改变按钮:msg的值为"我爱 中国"，而msg1的值还是"HI vue"
				//原因是msg的数据虽然已经改变，但新的dom却还没有渲染
				//改变这个问题要用到$nextTick方法
				this.$nextTick(()=>{
     
					this.msg2 = this.$refs.myp.innerHTML;
					//保存，点击改变按钮msg2的值成功变为"我爱 中国"
				})
			}
		}
	}
</script>

$nextTick 使用场景：

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构时侯，这个操作应该放进Vue.nextTick()的回调函数中。