生命周期
- 概念：生命周期，指的是组件从开始创建，到最终销毁，所经历的整个过程
- 也就是从这个对象开始到浏览器页面关闭称为一个生命周期
- 这个过程中会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会
- 图示
生命周期钩子
create 阶段
- beforeCreate()：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用（初始化el节点）
- created()：在实例创建完成后被立即同步调用
mount 阶段
- beforeMount()：在挂载开始之前被调用（初始化组件）
- mounted()：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
update 阶段
- beforeUpdate()：在数据发生改变后，DOM 被更新之前被调用（更改信息）
- updated()：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
destroy 阶段（Vue3中将这个改为了unmount阶段）
- beforeDestroy()：实例销毁之前调用
- destroyed()：实例销毁后调用
- 通常会销毁：启动的定时器、未完成的网络请求、打开的网络socket连接等
执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{
{message}}
<son></son>
</div>
<script src="../libs/vue.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
message:'hello vue2.js'
},
components:{
son:{
template:`
<div>{
{info}}</div>
` ,
data(){
return {
info:"hello vue3.js"
}
},
beforeCreate(){
console.log("子元素：beforeCreate")
},
created(){
console.log("子元素：created")
},
beforeMount(){
console.log("子元素：beforeMount")
},
mounted(){
console.log("子元素：mounted")
},
beforeUpdate(){
console.log("子元素：beforeUpdate")
},
updated(){
console.log("子元素：updated")
},
beforeDestroy(){
console.log("子元素：beforeDestroy")
},
destroyed(){
console.log("子元素：destroyed")
}
}
},
beforeCreate(){
console.log("父元素：beforeCreate")
},
created(){
console.log("父元素：created")
},
beforeMount(){
console.log("父元素：beforeMount")
},
mounted(){
console.log("父元素：mounted")
},
beforeUpdate(){
console.log("父元素：beforeUpdate")
},
updated(){
console.log("父元素：updated")
},
beforeDestroy(){
console.log("父元素：beforeDestroy")
},
destroyed(){
console.log("父元素：destroyed")
}
})
</script>
</body>
</html>
控制台输出如下测试信息
父元素：beforeCreate
父元素：created
父元素：beforeMount
子元素：beforeCreate
子元素：created
子元素：beforeMount
子元素：mounted
父元素：mounted
vm.message=“hello wordle”
父元素：beforeUpdate
父元素：updated
‘hello wordle’
vm.$children[0].info=“hello world2”
子元素：beforeUpdate
子元素：updated
‘hello world2’
vm.$destroy()
父元素：beforeDestroy
子元素：beforeDestroy
子元素：destroyed
父元素：destroyed
undefined