Vue nextTick 学习历程

nextTick 详解

这是官网的解释，比较简洁精炼，反正我是第一遍什么都没看懂

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

经过我一步步测试，我觉得应该是dom操作的最后一帧的意思

1. 测试代码

	<div id="app" @click="handler">{{ msg }}</div>

	new Vue({
		el: '#app',
		data: {
			msg: "hello world"
		}
		methods: {
			handler() {
				this.msg = "改变dom的顺序1"
			    this.$nextTick(()=>{   //最后一帧 ,所有的dom操作都更新完成后
				   console.log(this.msg, "最后一帧")
			    })
			}
		}
	})

此时运行代码，控制台输出 “改变dom的顺序1” 正常

1. 在测试代码的handler方法中添加

	handler() {
		this.msg = "改变dom的顺序1"
		this.$nextTick(()=>{   //最后一帧 ,所有的dom操作都更新完成后
		   console.log(this.msg, "最后一帧")
		})
		his.msg = "改变dom的顺序2 "
	}

此时运行代码，控制台输出 “改变dom的顺序2 最后一帧" 看到输出结果肯定开始觉得有点奇怪了

但是如果理解最后一帧的意思，就觉得正常了，所有dom操作都更新完成后

1. 给vue实力添加一个watch 方法, 代码如下

    watch: {
	   'msg': function(a,b){
			console.log(a,b,"监视数据的新值，旧值得变化")
	   }
   },

此时运行代码，控制台输出

改变dom的顺序2 hello world 监视数据的新值，旧值得变化

改变dom的顺序2 最后一帧

看到这里就会非常奇怪，为什么最后一帧， 会在watch监视数据后面打印出来

个人见解是： 当整个组件都没事了之后，下一帧（最后一帧）

1. 最后我们来修改一下handler的代码

	handler() {
	   this.msg = "改变dom的顺序1"
	   this.$nextTick((a,b,c)=>{   //最后一帧 ,所有的dom操作都更新完成后
		   console.log(this.msg, "最后一帧")
	   })
	   console.log("非dom操作1")     //第四步增加的
	   this.msg = "改变dom的顺序2"
	   console.log("非dom操作2")	//第四步增加的
   }

此时控制台输出的是

非dom操作1
非dom操作2
改变dom的顺序2 hello world 监视数据的新值，旧值得变化
改变dom的顺序2 最后一帧

此时的输出结果比较符合这个结论===当整个组件都没事了之后，下一帧（最后一帧）