Vue生命周期

生命周期

​ 概念:从Vue实例创建、运行、销毁时,总伴随着各种事件,而那些事件统称为生命周期

​ 生命周期钩子 = 生命周期函数 = 生命周期事件

在这里插入图片描述
此图来源于Vue官网

初始化阶段

new Vue() ->初始化一个空的Vue实例,仅有一些默认的生命周期函数和默认方法-> 初始化数据和方法

模板编译

会校验el属性,再查看是否具有template -->辨别是将html模块编译成模板还是直接模板

此时该模板字符串便被渲染为 内存中的DOM,即还未被加载于页面

页面渲染

将刚才的模板字符串渲染到浏览器的页面中来

运行阶段

本阶段会查看数据是否有变化–>Yes,则重新渲染、挂载页面

销毁阶段

相关钩子函数

var vm = new Vue({
				el: "#app",
				data:{},
				beforeCreate(){//实例被完全创建出来前执行
					//在该周期,data和method都还未被初始化
				},
				created(){ //
					//此时,data和method都已初始化
				},
				beforeMount(){
					//模板已编译于内存中,但未被页面渲染
					//即{{}} 还未有效
				},
				mounted(){
					//当执行该函数时,实例已被完全创建好了。若没有后续操作,则一直放置于内存中
				},
				beforeUpdate(){
					//数据发生改变时,this.data已发生变化,但html的value未改变
				},
				updated(){
					//数据的变化,页面也已渲染完成
				},
				beforeDestroy(){
					//此时,实例的相关内容仍然有效
				},
				destroyed(){
					//实例已被销毁,相关内容已无效
				}
				
			})
			
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值