Vue生命周期示例详解
作者:浅白 时间:2024-04-28 09:25:46
首先看看Vue文档里关于实例生命周期的解释图
那么下面我们来进行测试一下
<section id="app-8">
{{data}}
</section>
var myVue=new Vue({
el:"#app-8",
data:{
data:"aaaaa",
info:"nono"
},
beforeCreate:function(){
console.log("创建前========")
console.log(this.data)
console.log(this.$el)
},
created:function(){
console.log("已创建========")
console.log(this.info)
console.log(this.$el)
},
beforeMount:function(){
console.log("mount之前========")
console.log(this.info)
console.log(this.$el)
},
mounted:function(){
console.log("mounted========")
console.log(this.info)
console.log(this.$el)
},
beforeUpdate:function(){
console.log("更新前========");
},
updated:function(){
console.log("更新完成========");
},
beforeDestroy:function(){
console.log("销毁前========")
console.log(this.info)
console.log(this.$el)
},
destroyed:function(){
console.log("已销毁========")
console.log(this.info)
console.log(this.$el)
}
})
代码如上,浏览器开始加载文件
由上图可知:
1、beforeCreate 此时$el、data 的值都为undefined
2、创建之后,此时可以拿到data的值,但是$el依旧为undefined
3、mount之前,$el的值为“虚拟”的元素节点
4、mount之后,mounted之前,“虚拟”的dom节点被真实的dom节点替换,并将其插入到dom树中,于是在触发mounted时,可以获取到$el为真实的dom元素()
myVue.$el===document.getElementById("app-8") // true
接着,在console中修改data,更新视图
触发beforeUpdata 和updated
接着,执行myVue.$destroy()
总结一下,对官方文档的那张图简化一下,就得到了这张图
来源:http://www.cnblogs.com/gagag/p/6246493.html
标签:Vue,生命周期
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
微信小程序使用uni-app一键获取用户信息
2024-05-05 09:07:09
![](https://img.aspxhome.com/file/2023/1/130851_0s.png)
Python中列表的基本操作汇总
2021-08-20 23:21:27
使用Python pandas读取CSV文件应该注意什么?
2022-06-26 16:05:50
![](https://img.aspxhome.com/file/2023/3/94093_0s.png)
Go语言的Windows下环境配置以及简单的程序结构讲解
2023-08-26 16:04:10
![](https://img.aspxhome.com/file/2023/7/89037_0s.png)
windows10更换mysql8.0.17详细教程
2024-01-26 19:56:19
![](https://img.aspxhome.com/file/2023/7/115317_0s.png)
Flask框架学习笔记之模板操作实例详解
2023-10-16 12:40:05
![](https://img.aspxhome.com/file/2023/8/95198_0s.png)
python爬虫之urllib库常用方法用法总结大全
2023-12-25 21:55:52
python获取指定目录下所有文件名列表的方法
2022-03-24 08:05:39
![](https://img.aspxhome.com/file/2023/9/104879_0s.png)
双屏显示提升前端开发10%工作效率
2009-03-16 18:22:00
![](https://img.aspxhome.com/file/UploadPic/20093/16/screen-34s.jpg)
Mysql字段为null的加减乘除运算方式
2024-01-17 23:35:40
![](https://img.aspxhome.com/file/2023/8/108888_0s.png)
使用ajax开发的五大误区
2008-09-03 12:46:00
CSS元素类型
2009-04-27 12:25:00
数据库查询的分页优化技巧
2009-05-17 10:31:00
Mysql 本地计算机无法启动 mysql 服务 错误 1067:进程意外终止。
2024-01-27 19:30:56
基于jQuery实现的立体文字渐变效果
2009-05-18 19:15:00
![](https://img.aspxhome.com/file/UploadPic/20095/18/pic-22s.jpg)
一个简单的python程序实例(通讯录)
2023-05-16 06:49:11
oracle锁表该如何解决
2024-01-23 20:28:38
关于go-zero单体服务使用泛型简化注册Handler路由的问题
2023-08-30 20:19:08
![](https://img.aspxhome.com/file/2023/7/101047_0s.png)
python 根据时间来生成唯一的字符串方法
2022-12-25 14:49:48
Python进行特征提取的示例代码
2021-04-07 15:59:12