vue的生命周期是什么?有哪些流程?

60 篇文章 0 订阅
22 篇文章 0 订阅

生命周期就是

vue实例从创建、初始化数据、编译模板、挂载DOM、数据变化时更新DOM、卸载等一系列过程。

钩子函数:

是一种系统在不同阶段自动执行,用户无需干预的函数。

过程:

beforeCreate 实例刚在内存中被创建(初始化),this指向创建的实例,数据没有初始化,不能访问到data和methods;
Created	 实例创建完成,可以访问到data和methods,模版没有编译{{}}
beforeMount 完成模板的编译,但是没有挂载到页面
Mounted 将编译好的模板,挂载到页面中
beforeUpdate 状态更新前执行此函数,此时data中的状态值是最新的,界面显示的值是旧的,没有重新渲染dom
update  实例更新完毕后调用此函数,dom重新渲染
beforeDestory 实例销毁前调用,实例仍然可用
destroy   实例销毁后调用,所有都销毁

在哪个生命周期可以操作dom:

mounted:只有在此时,模块才挂载到容器中

在哪个生命周期可以请求数据:

Created、beforeMount、Mounted均可

关于异步请求数据:(都可以,推荐created)

1.对于作为子组件被调用的组件里,异步请求应当在mounted中调用,因为这个时候子组件可能涉及到对dom的操作;
2.对于页面级,当我们需要使用ssr的时候,只有created是可用的,所以这个时候请求数据只能用created
3.对于页面级组件,当我们做异步操作时,涉及到访问dom的操作,只能使用mounted

数据请求在created和mounted的区别:

Created是在组件实例 一旦创建完成的时候调用,此时dom节点并未生成;
Mounted是在页面dom节点渲染完之后立即执行的;触发时机上created是比mounted更早的;
如果我们的请求不需要获取、借助、依赖、改变dom,可以将请求放在created中,反之放在mounted中;

在created中调用异步请求的好处:

1.能更快获取到服务端数据,减少页面loading时间;
2.ssr不支持beforeMount、mounted;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值