-
app是應(yīng)用實例，vm是根組件實例
image.png
<div id="app">
<fieldset>
<legend>組件實例</legend>
{{ message }}
<button @click="change">Click</button>
</fieldset>
</div>
<script>
const App = {
data() {
return {
message: 'Hello Vue!!'
}
},
methods: {
change() {
console.log(this)
this.message += '!'
}
},
}
const app = Vue.createApp(App)
console.log(app)
const vm = app.mount('#app')
console.log(vm)
</script>
image.png
生命周期
- mounted: 這時實例已被掛載，數(shù)據(jù)會出現(xiàn)在頁面中嗜诀，Vue.createApp({}).mount() 被新創(chuàng)建的 vm.$el 替換了；也就是說你可以通過vm.$el獲取到根DOM元素；
- beforeUpdate: 數(shù)據(jù)更新時調(diào)用绵估，雖然這時內(nèi)存中的數(shù)據(jù)被更新了，但是視圖中的數(shù)據(jù)還沒有更新卡骂；
問題
1国裳、鉤子函數(shù)
- beforeCreate、created全跨、beforeMount缝左、mounted、beforeUpdate浓若、updated渺杉、
beforeUnmount、unmounted - 與Vue2不同的是beforeDestroy挪钓、destroyed變成了beforeUnmount是越、unmounted
2、如果需要發(fā)送Ajax請求碌上，最好放在哪個鉤子函數(shù)?
發(fā)送請求當(dāng)然越早越好倚评，而最早只能放在created鉤子里；因為在created時已經(jīng)完成以下配置：數(shù)據(jù)檢測馏予、屬性和方法的運算天梧，watch和event回調(diào)；
3霞丧、??組件嵌套時呢岗，?組件視圖和?組件視圖渲染完成誰先誰后？
（注意問的是渲染完成的先后，即在視圖中出現(xiàn)的順序敷燎，不是父子組件聲明周期執(zhí)行的順序啊喂Ｔ蒹荨！Ｓ补帷）
- 答：不確定焕襟。因為雖然根據(jù)父子生命周期執(zhí)行順序來看，父組件mounted之前子組件就以mounted完成饭豹，但是子組件是在父組件里面的鸵赖，父組件不出現(xiàn)，子組件也不可能出現(xiàn)拄衰，所以它倆誰先誰后并不確定它褪；
4、父子組件的生命周期執(zhí)行順序
加載渲染過程
父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted子組件更新過程
父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated父組件更新過程
父beforeUpdate —> 父updated銷毀過程
父beforeUnmount—> 子beforeUnmount—> 子unmounted—> 父unmounted
可以發(fā)現(xiàn)翘悉，子組件的生命周期都在父組件beforeXxx和xxxed之間去執(zhí)行的
5茫打、??組件嵌套時，如果希望在所有組件視圖都渲染完成后再執(zhí)?操作妖混，該如何做老赤？
mounted() {
this.$nextTick(function () {
// 僅在渲染整個視圖之后運?的代碼
})
}
