前言
簡單驗(yàn)證一下 vue 中各選項(xiàng)(生命周期、watch钩乍、 computed等）
代碼驗(yàn)證
單個(gè)組件的運(yùn)行順序
- 代碼
created() {
console.log(this.isComputed);
console.log("父組件 -- created初始化");
this.num = 10;
},
mounted() {
console.log("父組件 -- DOM生成");
this.$nextTick(() => {
this.num = 100;
});
},
computed: {
async isComputed() {
console.log("父組件 -- 計(jì)算屬性 -- 計(jì)算屬性是不支持異步的");
return this.num;
}
},
watch: {
num() {
console.log(
"父組件 -- 監(jiān)聽數(shù)據(jù)變化 -- 初始時(shí), 是不會監(jiān)聽的, 所以在created生命周期中手動改變了數(shù)據(jù)"
);
}
}
- 結(jié)果
console.png
-
從打印結(jié)果中總結(jié)
個(gè)人總結(jié)(沒有深究細(xì)節(jié)以及原理):
- 初始化data數(shù)據(jù)
- watch: 會在DOM渲染后才會監(jiān)聽, 先于computed執(zhí)行
- computed: 惰性加載, 如果在created中使用計(jì)算屬性, 就會立即同步執(zhí)行
父子組件運(yùn)行順序
-
代碼
props: { msg: String }, data() { return { num: 5 }; }, created() { console.log("子組件 -- created初始化"); console.log("這里props已經(jīng)由父組件派發(fā)下來", this.msg); console.log(this.isComputed); }, mounted() { console.log("子組件 -- DOM生成"); }, computed: { isComputed() { console.log("子組件 -- 計(jì)算屬性"); return "計(jì)算屬性"; } }, watch: { msg() { console.log( "子組件 -- 監(jiān)聽數(shù)據(jù)變化 -- 初始時(shí), 是不會監(jiān)聽的, 所以在created生命周期中手動改變了數(shù)據(jù)" ); } } 結(jié)果
console1.png
-
個(gè)人總結(jié)
個(gè)人總結(jié)(沒有深究細(xì)節(jié)以及原理):
- 在父組件中, 生成data - 計(jì)算屬性 - 以及執(zhí)行created生命周期(以及生命周期中的方法) -- 都是以同步方式執(zhí)行
- 在父組件執(zhí)行created生命周期后, 就會執(zhí)行子組件的data渲染 - 計(jì)算屬性 - created生命周期 - mounted生命周期等
- 子組件的DOM生成后, 就會執(zhí)行父組件的mounted生命周期
總結(jié)
暫時(shí)還沒有技術(shù)水平查看vue源碼, 只能通過簡單的驗(yàn)證來驗(yàn)證vue的數(shù)據(jù)執(zhí)行順序
初學(xué)階段, 不嚴(yán)謹(jǐn)驗(yàn)證, 權(quán)當(dāng)個(gè)人學(xué)習(xí)文章
