面試提問：說說 vue 父子組件加載順序
這我知道答案
- 父 beforeCreate
- 父 created
- 父 beforeMount
- 子 beforeCreate
- 子 created
- 子 beforeMount
- 子 mounted
- 父 mounted
子組件若有 props 的話更新順序是四步，若無的話兩步不觸發父親的鈎子。
- 父 beforeUpdate
- 子 beforeUpdate
- 子 updated
- 父 updated
父組件更新順序是
- 父 beforeUpdate
- 子 deactivated
- 父 updated
銷毀過程是
- 父 beforeDestroy
- 子 beforeDestroy
- 子 destroyed
- 父 destroyed
再問，如果有多個子組件呢？我不太能確定。
加載多個子元素
回頭寫了一個簡單的vue視圖，父調用子，以下代碼復制可用。
<!DOCTYPE html>
<html>
<head>
<title>Form Demo</title>
</head>
<body>
<div id="app">
<input-group :forms="forms" v-for="(forms, index) in options" :key="index"></input-group>
</div>
<!-- Vue.js v2.6.11 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('input-group', {
props: ['forms'],
beforeCreate() {
console.log('child beforeCreate');
},
created() {
console.log('child created');
},
beforeMount() {
console.log('child beforeMount');
},
mounted() {
console.log('child mounted');
},
template: `<div>
<template v-for="item in forms">
<input type="text" v-model="item.data">
</template>
</div>`
})
let options = []
for (let i = 0; i < 2; i++) {
for (let j = 0; j < 2; j++) {
options[i] = options[i] || [];
options[i].push({
data: '',
})
}
}
var app = new Vue({
el: '#app',
beforeCreate() {
console.log('parent beforeCreate');
},
created() {
console.log('parent created');
},
beforeMount() {
console.log('parent beforeMount');
},
mounted() {
console.log('parent mounted');
},
data: {
options: options,
},
})
window.app = app;
console.log(app);
</script>
</body>
</html>
控制台打印結果如下
parent beforeCreate
parent created
parent beforeMount
child beforeCreate
child created
child beforeMount
child beforeCreate
child created
child beforeMount
(2) child mounted
parent mounted
能得出結論，第一個子元素在 beforeMount 后不會直接 mounted，而是進入下一個子元素的 beforCreate。