vue生命周期前后都做了哪些事情?

Init Events&Lifecycle

进行vue实例初始化,在这个时候开始完成的是vue实例自身对象注入,内部使用相关事件和对应生命周期函数初始化

beforeCreate

当这个方法执行的时候,vue实例仅仅是完成内部事件和生命周期函数

Init injections & reactivity

数据的注入,跟语法的校验,我们编写的data,method开始注入

created

在这个时候函数执行的时候vue实例已经完成自定义data,method,computed属性初始化,以及语法效验,vue实例已经生成,但还没有生成dom

compile

开始编译,首先查看是否有预编译的template模版,有的话直接编译成render函数渲染内容,如果没有那么将el的innerHTML编译为模版,在进行渲染

beforeMount

在这个函数执行的时候vue实例仅仅是将el属性指向的html编译成vue模板,此时并没有完成模板内容渲染,{{}}还没被替换

mounted

在这个函数执行的时候vue实例会将data数据渲染到编译的模板中,并形成虚拟dom,替换el执行dom


beforeUpdate

在这个函数执行的时候,vue实例中data数据发生变化,但是页面中数据还是原始数据

update

在这个函数执行的时候,vue实例中data数据和页面中数据已经一致了


beforeDestory

在这个函数执行的时候,vue实例仅仅是开始销毁 events 、child component,listener监听机制

destroyed

在这个函数执行的时候,vue实例上的所有数据 events childcomponent 监听机制 … 全部清空(包括双向数据绑定机制)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Goat恶霸詹姆斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值