Vue各生命周期及相关功能触发的研究

唠叨一句

用了很长时间Vue了，但是对于它的各种生命周期及钩子时而清楚，时而糊涂，时常会掉进这些钩子的坑里不能自拔，今天干脆研究一下他们的顺序，给自己和与我有相同经历的同学们解惑。这里只用很简短的示例，演示了一些执行顺序，不涉及整个的Vue应用。这些顺序很重要。

代码一套

先放上示例代码，有兴趣的同学可以贴去自己查看，加深印象，其实可以不用看代码，直接去后面看结论。

<script>
	let app = new Vue({
		el:"#app",
		data:{
			test: 0,
			filter : 1,
			compute:2,
			flag: false
		},
		created(){
			console.log("同步的created开始 ")
			this.test++;  //不会激活updated,filters,watch，但是会改变数据，说明此时可观测数据，且仅做数据前期处理。
			//模拟异步
			setTimeout(()=>{
				console.log("异步的created开始 ")
				this.test++;   //会激活updated,filters,watch
			},100)
		},
		mounted(){
			console.log("mounted开始 ")
			this.test++;  //会激活updated,filters,watch，随后所有的操作都按如下顺序激活:操作方法->watch,filters(computed如果有则在此之后),beforeUpdate,updated
		},
		updated(){
			console.l