目录
案例: 编写入口js文件,创建Vue实例,并定义生命周期图内的钩子函数,测试钩子函数的各个运行时机?
生命周期:
- beforeCreate: Vue实例创建前,此时data 和 methods 中的 数据都还没有没初始化
- created:Vue实例已创建,data 和 methods 都已经被初始化好了
- beforeMount: html模板已准备内存中,但未渲染到页面,此时无法进行dom操作
- mounted: html模板已挂载到了页面中,此时可以进行 dom操作
- beforeUpdate:当data数据改变的时候执行的钩子函数, 此时,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
- updated:updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
- beforeDestory: vm实例被销毁前,此时data和methods等还可用
- destoryed:vm实例已销毁, data和methods等所有属性都已经不可用
案例: 编写入口js文件,创建Vue实例,并定义生命周期图内的钩子函数,测试钩子函数的各个运行时机?
1、创建项目(create+项目 / vue ui)
参考:
![](https://i-blog.csdnimg.cn/blog_migrate/359f7771f92050383491fe8393d8dcec.png)
在这里依然选择vue2创建项目
同样,我们修改package.json下的规则、以及启动方式,并将vue结构删除不用的部分,修改main.js中的基础结构。详细参考Vue指令综合案例——汽车品牌管理_Siobhan. 明鑫的博客-CSDN博客
删除完的结构如下图:
接下来我们来演示vue的生命周期:
1、验证beforeCreate
main.js:
index.html:
此时,我们启动项目:npm run dev
发生如下报错:
修改vue.config.js
启动成功后可以看到:
说明:Vue实例创建前,此时data 和 methods 中的 数据都还没有没初始化
2、验证created
created() {
// vue实例创建完成了,此时的data和methods都已经准备好了
console.log(this.msg);
this.show()
},
3、验证beforeMount
beforeMount() {
// vue实例绑定的html模板已经在内存中了,但还没有挂载到界面上
console.log(document.getElementById("h3").innerText);
},
说明:html模板已准备内存中,但未渲染到页面,此时无法进行dom操作
4、验证mounted
mounted() {
//vue实例绑定的html模板已经挂载到界面上
console.log(document.getElementById("h3").innerText);
},
说明:html模板已挂载到了页面中,此时可以进行 dom操作
5、验证beforeUpdate和updated
这里我们比较验证,更为直观,因为当我们data数据发生改变时,都会触发相应的改变
// 当data数据发生改变 beforeUpdate/updated
beforeUpdate() {
// data 已经改变成了最新的数据,但页面的数据还没有同步
console.log("data中的msg数据是:" + this.msg)
console.log("界面上元素的内容:" + document.getElementById("h3").innerText)
},
updated() {
// 页面的数据和data的数据都是最新的,已经保持同步了
console.log("data中的msg数据是:" + this.msg)
console.log("界面上元素的内容:" + document.getElementById("h3").innerText)
},
说明:beforeUpdate:当data数据改变的时候执行的钩子函数, 此时,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和最新的数据保持同步
6、验证beforeUpdate和updated
beforeDestory() {
console.log("vue实例被销毁前");
console.log(this.msg);
this.show();
},
destoryed() {
// 此时vue实例已经被销毁了,vue实例上的data和methods等已经不可用了
console.log("vue实例被销毁后");
console.log(this.msg);
this.show();
}
我们在这里不能采用这种方法验证销毁,于是我们清空控制台,然后在vscode中【ctrl+c】停止项目来看:
我们发现也是来不及打印的,于是在官网中,通过理解生命周期图,最终找的方法如下:
说明:beforeDestory: vm实例被销毁前,此时data和methods等还可用