Vue的生命周期

南山隐士 2022年06月25日 24 0

new Vue()

创建了一个实例化对象


Init Events && Lifecycle

然后进行初始化一些事件,初始化一些生命周期函数,初始化渲染!
::: tip
这里的初始化渲染指的是给vm添加了虚拟dom,初始化了生命周期才能使我后面能调用beforeCreate()等生命周期函数,初始化事件的相关属性:on、off、emit
:::


beforeCreate()

然后就调用了我的beforeCreate函数了,这里需要注意的是,我的vue还没有相应的数据,所以我们不能在这里对数据进行操作
::: tip
我们可以在这个钩子函数中放置一些加载动画
:::


Init injections && reactivity

这里主要是依赖的注入和效验,我的理解是可以让我的父组件访问到子组件,无论我的子组件有多深

created()

太好了,我们现在终于来到了created函数了,这里我们终于可以操作我们的数据了,我们此时如果打印相应的数据的话,它是会显示的了,既然我们能读取到相应的数据,也就是证明了它已经完成了数据观测(data observer)
::: tip
这里我们可以发起ajax请求,需要注意的是,$el属性还没挂载,当然如果您的ajax请求过多,不建议您在这里进行发送,因为这样会导致您的页面初始化渲染就要耗时过多!
:::

检查是否有el属性、template等

el.png

到了这里vue会检查我的配置对象中是否有el属性,如果有的话,它就会继续判断是否有template,它接受的是字符串作为参数,可以是#id、模版字符串、dom元素,然后通过render函数进行编译,如果没有template那么就会将el以及其子内容作为模板进行编译!

渲染编译的优先级: render > template > el ,记住,必须要有el,因为vue需要知道我最终渲染完的东西需要挂载到哪里!

::: danger 注意
如果我的vm配置对象没有el属性,那么生命周期就会判断是否有el的时候就结束的了,如果想生命周期继续执行,只能通过vm.$mount来进行手动的挂载!
:::

beforeMount

经历千辛万苦,终于来到了beforeMount阶段了,这里主要是将我的刚刚编译完成的模板,把我的data里面的数据生成对应的html

::: danger 注意
此时我的页面还没有内容可以显示,因为我还没将我的html挂载到页面
:::

进行挂载并且给我的vm添加$el属性

mounting.png

这里主要是将我的编译好的模板挂载到页面上,并且给我的vm添加$el属性,这样您就可以通过this.$el的方式来读取我最终渲染的DOM结构了

mounted

到了这里,模板已经挂载完毕了,此时我已经将我的el属性替换成我最终编译好的DOM结构了,页面在此时已经可以正常的显示了

beforeUpdate

当我的vue中的data数据发生变化的时候,就会执行这个函数,此时需要注意的是我的页面还没有更新的,只是我的虚拟DOM已经配置了,此时我的data数据已经是我更改的数据!

通过diff算法渲染虚拟DOM

Updating.png

到了这里,将会重新渲染虚拟DOM,通过diff算法来对比我的节点之间的差异更新真实的DOM
这样就能提高性能!

updated

到了这里,就说明data里面的数据已经成功与页面进行同步了,页面此时已经展示了最新的数据信息了,view已经重新渲染了!

beforeDestroy

想要这个生命周期执行,必须通过调用实例对象的$destroy()方法,来执行销毁vue实例,在这个生命周期,您仍然可以访问实例调用其方法,因为此时它还没正在给销毁

::: tip
一般我们会在这里清理定时器等操作
:::

进行卸载等操作

destroy.png

在这个阶段,会卸载子组件,解除观察,卸载事件监听

destroyed

实例给卸载后调用,此时页面已经没有相应的内容了,也没办法调用实例的方法了,已经完全移除了!

Last Updated: 2022/06/25 19:09:03
MVC与MVVM的区别 谈谈Vuex