Vue.nextTick的原理和用途

Vue.nextTick的原理和用途

vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

测试：  点击，按钮，查看 数据更新后，dom节点里的文本信息：

		<div id="app">
			<h1>Vue.nextTick的原理和用途</h1>
			
			<h2 class="test">{{egData}}</h2>
			<button @click="changeData">改变</button>
		</div>
		
		
	<script src="./js/vue.js"></script>
	<script src="./js/jquery-3.5.1.min.js"></script>
	<script>
		var vm = new Vue({
			// 模板选择器
			el:'#app',
			// 数据中心
			data(){
				return {
					egData:'old message'
				}
			},
			// 方法中心
			methods:{
				 changeData(){
				 	this.egData = 'new message';
					console.log($('.test').html(),'-------------------------');
				 }
			},
			
			
			
		})
	</script>

结果： 第一次点击输出 old Message -----------------------，第二次点击输出 new Message -----------------------

测试：  点击，按钮，，当我们把数据更新，放置在nextTick()方法里，执行的时候， 我们 再  查看 数据更新后，dom节点里的文本信息：

		<div id="app">
			<h1>Vue.nextTick的原理和用途</h1>
			
			<h2 class="test">{{egData}}</h2>
			<button @click="changeData">改变</button>
		</div>
		
		
	<script src="./js/vue.js"></script>
	<script src="./js/jquery-3.5.1.min.js"></script>
	<script>
		var vm = new Vue({
			// 模板选择器
			el:'#app',
			// 数据中心
			data(){
				return {
					egData:'old message'
				}
			},
			// 方法中心
			methods:{
				changeData(){
					this.egData = 'new message';
					// 修改数据之后,立即使用它
					this.$nextTick(()=>{
						console.log($('.test').html(),'-------------------------');
					})
				}
				
				
			},

		})
	</script>

结果：不管第几次点击，都输出 new Message -----------------------

 vm.$nextTick()的应用场景

1、数据更新后想要马上操作新的DOM，需要把操作写在nextTick的回调里

2、在created钩子函数里需要操作DOM，也可以把操作写在nextTick的回调里,(created钩子函数里还没有挂载dom，所以直接操作会有问）