唠叨一句
用了很长时间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