Vue学习第8天——生命周期函数
目录
- 一、生命周期函数图
- 二、对生命周期进行类比
- 三、生命周期三个阶段
-
- 1、初始化阶段
- 2、更新数据
- 3、销毁实例
- 四、代码演示
-
- 1、初始化页面时
- 2、点击更新数据时
- 3、点击销毁实例
- 4、细节
- 五、总结
-
- 1、两个重要钩子
- 2、关于销毁Vue实例
- 六、进阶教程
-
- 1、el配置项
- 2、template与html的优先级
- 七、路由组件独有的2个生命周期函数
-
- 1、作用
- 2、具体钩子
- 3、用法
一、生命周期函数图
将Vue官网的图进行详解说明，了解生命周期的流程
二、对生命周期进行类比
| vm的生命周期 | 张三的一生 |
|---|---|
将要创建：调用beforeCreate函数（无法通过vm访问到data中的数据和methods中的方法） |
准备备孕 |
创建完毕：调用created函数（初始化data数据和methods方法） |
备孕成功 |
将要挂载：调用beforeMount函数（内存中已经编译好页面，但页面中呈现的是未经编译的DOM结构） |
将要出生 |
挂载完毕：调用mounted函数（页面显示真实数据，初始化的工作在这里进行）重要的钩子 |
呱呱落地（检查身体各项指标） |
将要更新：调用beforeUpdate函数（data中的数据是新的，但页面是旧数据） |
将要结婚（彩礼已准备好但还没给） |
更新完毕：调用updated函数（数据是新的，页面也是新的，页面和数据保持同步） |
结婚完成 |
将要销毁：调用beforeDestroy函数（vm实例还能运行，能访问到data和methods，但对数据的所有操作，数据不更新，收尾的工作在这里进行）重要的钩子 |
弥留之际 |
销毁完毕：调用destroy函数 |
已经永别 |
三、生命周期三个阶段
1、初始化阶段
beforeCreate
vm中的data数据和methods方法等都为undefined
created
vm已经完成数据检测、属性和方法的运算，watch事件的回调，此时还没完成挂载
主要应用：调用异步函数、调用方法、调用数据
beforeMount
data中的数据是新的，但是data中数据还没挂到BOM节点上，页面是旧数据
mounted
vm中的data里的数据挂载到BOM节点中去，页面显示真实数据
主要应用： 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等
2、更新数据
beforeUpdate
data中的数据已更新，但页面是旧数据，Vue中上次的虚拟DOM会与新构建的虚拟DOM进行diff算法对比
updated
页面更新完成，页面和数据保持同步
3、销毁实例
beforeDestroy
vm实例还能运行，能访问到data和methods，但对数据的所有操作，数据不更新
主要应用：清除定时器、解绑自定义事件、取消订阅消息
destroyed
Dom元素存在，只是再也不受vue控制
四、代码演示
进行代码测试，可以用debugger断点测试每一个生命周期函数，更好的理解生命周期函数
<body>
<div id="app">
<p>{{name}}p>
<button @click="changeName">将名字变成波妞button>
<button @click="bye">点我销毁vmbutton>
div>
<script>
//1.理解vue的生命周期
const vm = new Vue({
el: "#app",
data: {
name: "憨瓜",
},
methods: {
changeName() {
this.name = "波妞"
},
bye() {
this.$destroy()
}
},
//这个阶段无法访问到data和methods
beforeCreate() {
console.log('beforeCreate函数被调用', this._data); //undefined
//debugger断点测试
},
//这个阶段可以通过vm访问data中的数据和methods中方法
created() {
console.log('created函数被调用', this._data);
},
//这个阶段内存中已经存在编译过的DOM，但是页面中还没有显示，依然是假页面
beforeMount() {
console.log('beforeMount函数被调用');
},
//这个阶段页面展示经过编译的DOM，一般在这个阶段开启定时器
mounted() {
console.log('mounted函数被调用');
},
//这个阶段data中的数据已经更新，但是页面依然是旧页面
beforeUpdate() {
console.log('beforeUpdate函数被调用', this.name); //数据是波妞，但页面是憨瓜
},
//数据是新的，页面也是新数据，页面和数据保持同步
updated() {
console.log('updated函数被调用', this.name); //数据是波妞，页面也显示波妞
},
//vm实例被销毁，依然能访问到data和methods；对数据进行操作，数据不更新；自定义事件销毁，但原生DOM事件还在
beforeDestroy() {
console.log('beforeDestroy函数被调用');
},
destroyed() {
console.log('destroy函数被调用');
},
})
script>
body>
html>
1、初始化页面时
依次调用了beforeCreate、created、beforeMount、mounted钩子
运行结果
2、点击更新数据时
依次调用了beforeUpdate、updated钩子
运行结果（点击左边按钮）
3、点击销毁实例
依次调用beforeDestroy、destroyed钩子
运行结果（点击右边按钮）
打开vue调试工具可以看到实例被销毁
4、细节
① 当我们先点击销毁按钮，再打开vue调试工具面板时，没有数据
② 当我们先打开vue调试工具面板，再点击销毁按钮时，数据存在，这个数据存在是因为页面没有刷新
五、总结
1、两个重要钩子
生命周期函数中两个比较重要的钩子：mounted和beforeDestroy
1、mounted： 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2、beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
2、关于销毁Vue实例
1、销毁后借助Vue开发者工具看不到任何信息；
2、销毁后自定义事件会失效，但原生DOM事件依然有效；
3、一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
六、进阶教程
1、el配置项
el配置项的作用
表明我们要将当前vue组件生成的实例插入到页面的哪个元素中
无el配置项
如果在实例化时存在这个选项，实例将立即进入编译过程；否则停止编译，也意味着暂时停止了生命周期，需要显式调用
vm.$mount(el)手动开启编译。
代码演示
new Vue({
beforeCreate() {
console.log('beforeCreate函数被调用');
},
created() {
console.log('created函数被调用');
},
beforeMount () {
console.log('beforeMount函数被调用');
},
mounted() {
console.log('mounted函数被调用')
}
})
运行结果
2、template与html的优先级
<body>
<h2>测试优先级：结果如下h2>
<div id="app">
<p>我是html渲染出来的，我的名字是：{{name}}p>
div>
<script>
new Vue({
el:"#app",
data: {
name: "憨瓜",
},
template:`我是template渲染出来的，我的名字是：{{name}}
`
})
script>
body>
运行结果
结论：当template与html模板同时存在时，优先级：template > HTML
七、路由组件独有的2个生命周期函数
1、作用
用于捕获路由组件的激活状态
2、具体钩子
当组件在 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
① activated：路由组件被激活时触发
② deacivated：路由组件失活时触发
3、用法
activated和deacivated2个生命周期钩子都必须配合activated 和 deactivated 将会在 ）