生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段
生命周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行
注意:生命周期强调的是时间段,生命周期函数强调的是时间点
1.1组件生命周期函数的分类
1.2生命周期图示
1.3详解
1. Init Events & Lifecycle(初始化事件与生命周期)环节
在new Vue() => beforeCreate这个阶段:初始化生命周期、事件;但是数据代理还没有开始:在这个环境new Vue传入的data:{xxx},vm还没有收到,vm._data还不存在
这个环境之后,vm实例会调用beforeCreate钩子
2.new Vue() => beforeCreate
此时:组件的props、data、methods尚未被创建,都处于不可用状态
在数据监测(数据代理、数据劫持)之前
经过初始化事件与生命周期环节,此时vm身上还没有_data
(1).验证(代码截取关键部分)
new Vue({
el:'#root',
data:{
num: 1
},
methods: {
test() {
console.log("test")
}
},
beforeCreate() {
console.log("beforeCreate")
console.log(this)
debugger
}
})
证明:beforeCreate生命周期钩子执行了,且data、props、methods都未生成
vm身上无_data、method test()方法也没有、props为undefined
3.beforeCreate => created(Init injections & reactivity环节)
初始化:数据监测、数据代理,监测数据变化、监测数组变化,给对象里的属性匹配get、set方法的,对数组的那些方法进行二次包装,一旦完成了就调用created生命周期函数
此时:可以通过vm访问到data、methods、props,但模板结构还未生成
在数据监测、数据代理之后
(1)验证
new Vue({
el: "#root",
data: {
num: 1
},
methods: {
test() {
console.log("test")
}
},
beforeCreate() {
console.log("beforeCreate")
},
created() {
console.log("created")
console.log(this)
debugger
}
})
可以看见,先输出了:beforeCreate、created
且vm身上有_data、get、set、test()、props(这里为undefined,其实是因为没定义props,props也会生成)
4.Has "el" options ?
在执行完created生命周期函数之后,会先去判断:有没有el配置项,也就是new Vue的时候有没有传el配置项。
(1)传了:走YES路线,会进行下一个步骤,到Has "template" option?
(2)没传:走No路线,到 when vm.$mount(el) is called
这里又有两种情况:
① 写了vm.$mount(el),会进行下一个步骤,到 Has "template" option?
②没写vm.$mount(el),直接报错
5.Has "template" option ?
如果在new Vue实例时,写了template配置项,那么会进行 Compile template into render function:基于数据和模板在内存中编译生成HTML结构
这些操作基于的代码如下(创建vm实例,未涉及到子组件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
num: 1
},
methods: {
test() {
console.log("test")
}
},
beforeCreate() {
console.log("beforeCreate")
},
created() {
console.log("created")
console.log(this)
debugger
}
})
</script>
如果在new Vue实例时,没写template配置项,那么会将el对应的DOM最为模板进行编译:基于数据和模板在内存中编译生成HTML结构
正确执行完如上操作,会进入到下一个生命周期函数阶段:beforeMount
6.beforeMount
将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构
7.Create vm.$el and replace "el" with it
用内存中编译生成的HTML结构,替换掉el属性指定的DOM元素
8.Mounted
此时:已经把内存中的HTML结构,成功的渲染到了浏览器中。在此阶段,浏览器中已经包含了当前组件的DOM结构
9.beforeUpdate(在执行完mounted生命周期函数之后,发生了数据变化、且需要重新渲染组件的模板结构的操作)
将要根据变化过后、最新的数据,重新渲染至组件的模板结构时会触发
10.Virtual DOM re-render and patch(在执行完mounted生命周期函数之后,发生了数据变化、且需要重新渲染组件的模板结构的操作)
根据最新的数据,重新渲染组件的DOM结构
11.updated(在执行完mounted生命周期函数之后,发生了数据变化、且需要重新渲染组件的模板结构的操作)
此时:已经根据最新的数据,完成了组件DOM结构的重新渲染
12.beforeDestory
将要销毁此组件,此时尚未销毁,且组件还处于正常工作的状态时会触发该生命周期函数
13.Teardown watchers, child compnents and event listners
在执行完beforeDestory生命周期函数之后,执行该操作:销毁当前组件的数据侦听器、子组件、事件监听
14.destroyed
组件已经被销毁,此组件在浏览器中对应的DOM结构已被完全移除后触发该生命周期函数