页面加载阶段
父组件代码
<template>
<div>
<MyCom />
</div>
</template>
<script>
import MyCom from "./MyCom.vue";
export default {
data() {
return {
msg:"我是变量"
}
},
components: {
MyCom
},
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>
子组件代码
<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 {
props:['num'],
data () {
return {
msg: "我是变量",
arr: [1, 2, 3, 4, 5]
}
},
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>
页面加载时控制台输出结果
小结
页面加载时先执行父组件，待父组件执行到挂载DOM时，子组件开始执行，子组件挂载完毕后，接着父组件 挂载完毕。
更新销毁阶段
子组件动态添加元素控制台输出结果
小结
子组件动态更新时，子组件只会触发更新阶段，子组件不会被销毁并重新创建，父组件也不会被触发。
子组件内容被修改控制台输出结果
//向子组件添加一个p标签
<p>我是子组件新加的p</p>
小结
- 子组件文件更被修改重新加载时
- 父组件会触发更新阶段，子组件实例会被重新创建，在子组件被挂载时，之前的子组件会被销毁。
父组件中更新数据时
// 在父组件代码中添加一个p
<p>我是父组件新加的p</p>
小结
- 父组件文件内容被修改重新加载时
- 父组件、子组件都会被重新创建，在子组件挂载阶段，父组件、子组件之前的实例会被销毁。
总结
- 初始化和挂载阶段
- 1.父组件实例初始化前——>2.父组件实例初始化后——>3.父组件的vue虚拟 DOM ，挂载到真实的网页前——>4.子组件初始化前——>5.子组件实例初始化后——>6.子组件vue的虚拟DOM挂载到真实的网页前——>7.自组件的虚拟DOM挂载到真实的网页上——>8.父组件的vue虚拟DOM挂载到真实的网页上。
- 更新和销毁阶段
- 子组件动态更新
- 触发子组件更新，子组件不会重新创建并销毁，父组件不会被触发。
- 子组件文件内容被修改
- 父组件会触发更新阶段，子组件实例会被重新创建，在子组件被挂载时，之前的子组件会被销毁。
- 父组件文件内容被修改时
- 父组件、子组件都会被重新创建，在子组件挂载阶段，父组件、子组件之前的实例会被销毁。
- 子组件动态更新
