Outlook feed:
1. There is a pair of parent-child components
2. Both parent and child components have 8 hook functions
3. Observe the execution sequence and logic
First come to the conclusion, if you want to see the process, you can continue to read below
in conclusion:
When the page is first rendered:
1. First trigger the three hooks of beforeCreate, created and beforeMount of the parent component
2. Trigger the four hooks of beforeCreate, created, beforeMount and mounted of the subcomponent
3. Finally, trigger the mounted hook of the parent component after mounting
When the page is updated:
1. Two hooks beforeUpdate and updated are triggered before and after the update of the subcomponent
When the page is destroyed:
1. Subcomponents are destroyed
BeforeUpdate and updated two hooks before and after triggering its own destruction
2. When the parent component destroys the child component
First trigger the beforeUpdate hook of the parent component
Then trigger the beforeDestroy and destroyed hooks before and after the destruction of the subcomponent
Finally, the updated hook of the parent component is triggered
Knowledge points:
1.beforeCreate hook
At this time, data el has not yet initialized data, and methods have not yet appeared
2.created hook
At this time, the data items in data can be obtained but there is no real DOM, this.$data can also obtain data, and methods also appear
3. beforeMount hook
At this point the template has been rendered in memory , but not yet rendered to the page
4.mounted hook
At this point, replace the template rendered in memory into the browser
5. beforeUpdate hook
Called before the virtual DOM is re-rendered and patched , modifying data here will not trigger re-rendering
6.updated hook
Called after the virtual DOM is re-rendered and patched , do not modify the data at this time , otherwise it will always be triggered
The two life cycles of beforeUpdate and updated enter an infinite loop
7. beforeDestroy hook
At this point, the instance is ready to enter the destruction phase, and the data methods instructions can still be used normally
8.destroyed hook
At this point, the instance has been destroyed , and the data methods instructions cannot be used
important point:
Life cycle of global variables: live: when the page loads die: when the page closes
The life cycle of local variables: life: when the function is called, death: when the function is called
Reference code (vue)
father:
<template>
<div>
<h1>hello</h1>
<MySon/>
</div>
</template>
<script>
import MySon from './MySon.vue'
export default {
components:{
MySon
},
beforeCreate () {
// 1. 创建前
console.log("beforeCreate --- 实例初始化前 父")
console.log(this.msg) // undefined
},
created () {
// 2. 创建后=> 发送ajax请求
console.log("created --- 实例初始化后 父")
console.log(this.msg) // "我是变量"
},
beforeMount () {
// 3. 挂载前
console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前 父")
console.log(document.getElementById("myUl")) // null
// console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
},
mounted () {
// 4. 挂载后=> 操作dom
console.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 父")
// console.log(document.getElementById("myUl").children[1].innerHTML)
console.log(document.querySelector('#myUl').children[1].innerText)
},
beforeUpdate () {
// 5. 更新前
console.log("beforeUpdate --- 数据更新, 页面更新前 父")
// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
// console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
},
updated () {
// 6. 更新后
console.log("updated --- 数据更新, 页面更新后 父")
console.log(document.getElementById("myUl").children[4].innerHTML)
},
beforeDestroy () {
// 7. 销毁前
// (清除定时器 / 解绑js定义的事件)
console.log("beforeDestroy --- 实例销毁之前调用 父")
},
destroyed () {
// 8. 销毁后
// (清除定时器 / 解绑js定义的事件)
console.log("destroyed --- 销毁完成 父")
},
}
</script>
<style>
</style>Child:
<template>
<div>
<ul id="myUl">
<li v-for="(item, ind) in arr" :key="ind">{
{ item }}</li>
</ul>
<button
@click="arr.push(Math.random() * 10)"
>
增加一个元素
</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是变量",
arr: [1, 2, 3, 4],
isShow: true,
}
},
beforeCreate () {
// 1. 创建前
console.log("beforeCreate --- 实例初始化前")
console.log(this.msg) // undefined
},
created () {
// 2. 创建后=> 发送ajax请求
console.log("created --- 实例初始化后")
console.log(this.msg) // "我是变量"
// this.time = setInterval(() =>
// console.log(new Date), 1000)
},
beforeMount () {
// 3. 挂载前
console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前")
console.log(document.getElementById("myUl")) // null
// console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
},
mounted () {
// 4. 挂载后=> 操作dom
console.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 ")
// console.log(document.getElementById("myUl").children[1].innerHTML)
console.log(document.querySelector('#myUl').children[1].innerText)
},
beforeUpdate () {
// 5. 更新前
console.log("beforeUpdate --- 数据更新, 页面更新前")
// 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
// console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
},
updated () {
// 6. 更新后
console.log("updated --- 数据更新, 页面更新后")
console.log(document.getElementById("myUl").children[4].innerHTML)
},
beforeDestroy () {
// 7. 销毁前
// (清除定时器 / 解绑js定义的事件)
console.log("beforeDestroy --- 实例销毁之前调用")
},
destroyed () {
// 8. 销毁后
// (清除定时器 / 解绑js定义的事件)
console.log("destroyed --- 销毁完成")
// clearInterval(this.time)
},
};
</script>
<style>
</style>See the effect directly
analyze:
1. From here, you can see that the data cannot be obtained before it is mounted on the web page
2. The execution order of the parent and the child, the initial rendering is to trigger the beforeCreate, created, beforeMount of the parent component in turn, then trigger the beforeCreate, created, beforeMount, mounted of the child component in turn, and finally trigger the mounted of the parent component
Click the button to update the page and observe the follow-up effect
analyze:
1. Here you can see that the beforeUpdate and updated hooks of the subcomponent are triggered
2. At this time, the subcomponent has obtained the data
3. The update hook of the parent component is not triggered
question:
So how does the destroy hook trigger?
It literally means destroy, so how to trigger it?
//在子组件的ul上添加 v-if="isShow"
<ul id="myUl" v-if="isShow">
//在子组件的data新增
isShow:true
//在父组件也进行相同操作
<MySon v-if="isShow"/>
data() {
return {
isShow:true
}
},See the effect directly
The first is to operate on subcomponents
Found that killing itself can only trigger its own beforeUpdate, updated
Then operate on the parent component
It was found that the beforeUpdate of the parent component, beforeDestroy and destroyed of the child component were triggered in turn, and then the updated of the parent component was triggered