vue-$nextTick-等待页面渲染完毕的回调

vue-cli中$nextTick的作用

• 作用：等待页面渲染完毕回调
• 场景：操作dom的时候，数据修改，页面还没渲染完毕，就去获取数据，会有延迟，获取的是之前的数据

案例–切换标签内容

• 当我们需要切换标签的内容时，可能会因为没有渲染完毕，直接调用赋值时，会复制到最初没有改变的数据

  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
	<h1 ref="msg">msg1：{{msg1}}</h1>
	<h2>msg2：{{msg2}}</h2>
	<h3>msg3：{{msg3}}</h3>
	<button @click="changeMsg()">切换</button>
  </div>

name: 'Home',
	data() {return {
		msg1 : "你好",
		msg2 : '',
		msg3 : ''
	}},
methods : {
	changeMsg() {
		// 第一种
		// 改变了msg1的值，触发了更新，开始渲染，不一定渲染完毕，
		// 所以在下面获取的时候获取更新的数据可能有延迟
		this.msg1 = "我爱我的祖国";
			this.msg2 = this.$refs.msg.innerHTML;
			this.msg3 = this.$refs.msg.innerHTML;

第一种解决方法–使用定时器

• 改变了msg1的值，触发了更新，开始渲染，不一定渲染完毕，
• 所以在下面获取的时候获取更新的数据可能有延迟
• 当然我们可以使用定时器或者计时器，设置0毫秒，但是当数据变多时，
• 就不是很友好

<div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
	<h1 ref="msg">msg1：{{msg1}}</h1>
	<h2>msg2：{{msg2}}</h2>
	<h3>msg3：{{msg3}}</h3>
	<button @click="changeMsg()">切换</button>
  </div>

export default {
	name: 'Home',
	data() {return {
		msg1 : "你好",
		msg2 : '',
		msg3 : ''
	}},
	methods : {
	changeMsg() {
		// 第一种
		// 改变了msg1的值，触发了更新，开始渲染，不一定渲染完毕，
		// 所以在下面获取的时候获取更新的数据可能有延迟
		// 当然我们可以使用定时器或者计时器，设置0毫秒，但是当数据变多时，
		// 就不是很友好
		this.msg1 = "我爱我的祖国";
		setTimeout(function() {
			this.msg2 = this.$refs.msg.innerHTML;
			this.msg3 = this.$refs.msg.innerHTML;
		},0)
		}
	}
}	

第二种方法（重要）—$nextTick

• 第二种
• 所以为了解决这个问题，应该使用$nextTick

export default {
	name: 'Home',
	data() {return {
		msg1 : "你好",
		msg2 : '',
		msg3 : ''
	}},
	methods : {
		changeMsg() {
			// 第一种
			// 改变了msg1的值，触发了更新，开始渲染，不一定渲染完毕，
			// 所以在下面获取的时候获取更新的数据可能有延迟
			// 当然我们可以使用定时器或者计时器，设置0毫秒，但是当数据变多时，
			// 就不是很友好
			this.msg1 = "我爱我的祖国";
			setTimeout(function() {
				this.msg2 = this.$refs.msg.innerHTML;
				this.msg3 = this.$refs.msg.innerHTML;
			},0)
			
			
			// 第二种
			// 所以为了解决这个问题，应该使用$nextTick
			this.msg1 = "我爱我的祖国";
			this.$nextTick( () => {
			// 渲染完毕再执行这个，所以才能没有延时的更改
				this.msg2 = this.$refs.msg.innerHTML;
			})
			this.msg3 = this.$refs.msg.innerHTML;
		}
	}
}
</script>