Vue20 生命周期
转:https://blog.csdn.net/weixin_45791692/article/details/124045505
1 简介
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。
钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数
2 生命周期示意图
3 勾子函数
3.1 beforeCreate
这个时候,实例被创建出来,el和data都没有初始化,不能访问data、method,一般在这个阶段不进行操作
beforeCreate() {
console.log('----beforeCreate----')
console.log(this.msg) //undefined
console.log(this.$el) //undefined
},
3.2 created
这个时候,vue实例中的data、method已被初始化,属性也被绑定,但是此时还是虚拟dom,真是dom还没生成,$el 还不可用。这个时候可以调用data和method的数据及方法,createf钩子函数是最早可以调用data和method的,故一般在此对数据进行初始化
created() {
console.log('----created----')
console.log(this.msg) //msg
console.log(this.$el) //undefined
},
3.3 beforeMount
此时模板已经编辑完成,但还没有被渲染至页面中(即为虚拟dom加载为真实dom),此时el存在则会显示el。在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取。
当vue实例中,el为挂在目标,未对el进行定义,则this.el显示undefined,但页面中存在template也能识别挂载目标,因为template可以被看成占位符。如果对其进行定义则显示<div id="app"></div>,故所以,beforeMount读取不了真实的el,在mounted才能读取到真实的el,因为el只有渲染完成后才会存在。这里讲的el是真实的el。在真实的el之前存在前,在beforeMount中的其实是页面中的#app,是挂载的目标。
beforeMount() {
console.log('----beforeMount----')
console.log(this.msg) //msg
console.log(this.$el) //undefined
},
3.4 Mounted
此时模板已经被渲染成真实DOM,用户已经可以看到渲染完成的页面,页面的数据也是通过双向绑定显示data中的数据。 这实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的躺在我们的内存中,一动不动
mounted() {
console.log('----mounted----')
console.log(this.msg) //msg
console.log(this.$el) //<div id="app"><span model="msg"></span></div>
},
3.5 示例
<template>
<div id="app">
<span :model="msg"></span>
</div>
</template> <script>
export default {
name: 'App',
data() {
return {
msg: 'msg',
}
},
beforeCreate() {
console.log('----beforeCreate----')
console.log(this.msg) //msg
console.log(this.$el) //undefined
},
created() {
console.log('----created----')
console.log(this.msg)
console.log(this.$el)
},
beforeMount() {
console.log('----beforeMount----')
console.log(this.msg)
console.log(this.$el)
},
mounted() {
console.log('----mounted----')
console.log(this.msg)
console.log(this.$el)
},
}
</script>
3.6 beforeUpdate
更新前状态(view层的数据变化前,不是data中的数据改变前),重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发
3.7 updated
数据已经更改完成,dom也重新render完成
3.8 更新示例
<template>
<div id="app">
<div style="height:50px"
ref="spanRef">{{msg}}</div>
<button @click="clickBtn"></button>
</div>
</template> <script>
export default {
name: 'App',
data() {
return {
msg: 'msg',
}
},
methods: {
clickBtn() {
this.msg = 'newMsg'
},
},
beforeUpdate() {
console.log('----beforeUpdate----')
console.log(this.$refs.$el)
console.log(this.msg) //msg
},
updated() {
console.log('----updated----')
console.log(this.$refs.$el) console.log(this.msg) //msg
},
}
</script>
添加一个按钮,给按钮绑定点击事件,点击后更新数据
在这里跟vue图示有出入,vue图示中说明在beforeUpdate阶段,只有data中的数据改变,而试图的还未更新,视图中还是旧的数据,但在示例中,beforeUpdate钩子函数打印el可看出试图中的数据已更新。查阅资料后发现,视图层的数据更新才会触发beforeUpdate以及updated。如果data中的某数据更新,但这个数据并没有绑定在视图层,这个时候就不会触发钩子函数。但在思考后发现还是不对,上文所解释的是,当视图层所应用的data更新时,触发钩子函数。
这个时候压力就来到了我这边,百思不得其姐之后,我突然想到 console.log(this.$refs.$el)这个输出代码,在给beforeUpdate中添加延时代码后我顿悟了,console.log(this.$refs.$el)输出的是数据完成更新时候的el。
beforeUpdate() {
console.log('----beforeUpdate----')
console.log(this.$el)
console.log(this.msg) //msg
for (var i = 0; i <= 10000; i++) {
console.log(1)
}
},
this.$el会等到数据更新完成才对el进行输出
3.9 beforeDestroy
销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)
3.10 destroyed
销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher,事件监听,子组件
Vue20 生命周期的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- C# MVC 5 - 生命周期(应用程序生命周期&请求生命周期)
本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...
- UIViewController生命周期-完整版
一.UIViewController 的生命周期 下面带 (NSObject)的方法是NSObject提供的方法.其他的都是UIViewController 提供的方法. load (NSObje ...
- angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation
今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:
- Spring中Bean的作用域、生命周期
Bean的作用域.生命周期 Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).protot ...
- Autofac - 生命周期
实例生命周期决定在同一个服务的每个请求的实例是如何共享的. 当请求一个服务的时候,Autofac会返回一个单例 (single instance作用域), 一个新的对象 (per lifetime作用 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- Xamarin.Android活动的生命周期
一.前言 用过Android手机的人一定会发现一种现象,当你把一个应用置于后台后,一段时间之后在打开就会发现应用重新打开了,但是之前的相关的数据却没有丢失.可以看出app的“生命”是掌握在系统手上的, ...
- Mono产品生命周期
软件生命周期 同任何事物一样,一个软件产品或软件系统也要经历孕育.诞生.成长.成熟.衰亡等阶段,一般称为软件生命周期(软件生存周期) .软件生命周期模型是指人们为开发更好的软件而归纳总结的软件生命周期 ...
随机推荐
- Mysql InnoDB多版本并发控制MVCC
参考书籍<mysql是怎样运行的> 系列文章目录和关于我 一丶为什么需要事务隔离级别 mysql是一个客户端/服务断软件,对于同一个服务器来说,可以有多个客户端进行连接,每一个客户端进行连 ...
- Go语言核心36讲05
你已经使用过Go语言编写了小命令(或者说微型程序)吗? 当你在编写"Hello, world"的时候,一个源码文件就足够了,虽然这种小玩意儿没什么用,最多能给你一点点莫名的成就感. ...
- Karmada跨集群优雅故障迁移特性解析
摘要:在 Karmada 最新版本 v1.3中,跨集群故障迁移特性支持优雅故障迁移,确保迁移过程足够平滑. 本文分享自华为云社区<Karmada跨集群优雅故障迁移特性解析>,作者:Karm ...
- 关于在linux上vm virtualbox读取不到U盘问题的解决
1.设置usb2.0模式 如果你没安装拓展插件的话,调成usb2.0就会出现无效的配置这个提示,并且启动虚拟机会报 Implementation of the USB 2.0 controller n ...
- 一次MTU问题导致的RDS访问故障
导语 VPN是一种通过公网连接两个或多个私网站点的专用网络,使得这些站点仿佛是通过专线连接在一起.IPSec是一套协议框架,用于保证数据传输的私密性,完整性,真实性.但是VPN网络经常会带来一些连通性 ...
- day15 Socket网络编程 & 反射
day15 知识点浅记一下 ping 使用来icmp来检查网络是否连通,并没有记录路径. tracert 使用icmp包记录并确定数据包访问目标所经过的路由,因此可以依据此命令判断故障发生的位置 n ...
- 数电第11周周结_by_yc
Lab7_时序逻辑验证 一.简易电子时钟 功能描述: 设计一简易电子时钟,支持时.分.秒显示,其中HEX7-HEX6显示时,HEX5-HEX4显示分,HEX1-HEX0显示秒,假设进制为:18秒= ...
- Spring IOC源码(一):IOC容器启动流程核心方法概览
Spring有两种方式加载配置,分别为xml文件.注解的方式,对于xml配置的方式相信大家都不陌生,往往通过new ClassPathXmlApplicationContext("*.xml ...
- lv逻辑卷
一.逻辑卷的使用 1.逻辑卷的概念 LVM(逻辑卷管理) 适合于管理大存储设备,并允许用户动态调整文件系统的大小.此外,LVM 的快照功能可以帮助我们快速备份数据.LVM 为我们提供了逻辑概念上的磁盘 ...
- troubleshoot:PVC动态扩容报错
目录 一.问题描述 二.解决方法 一.问题描述 动态扩容PVC的时候报错(kubectl edit pvc pvcname):"error: persistentvolumeclaims & ...