Vue 生命周期执行顺序

Posted 2023-04-19

参考技术A 一、单组件执行顺序

二、父子组件执行顺序
_1为父组件 _2为子组件

对vue官网生命周期实际项目中vue执行顺序的理解

vue实际项目中会遇到很多对于画面显示及各个部分配合的顺序问题，后来发现是对vue生命周期没有理解透彻，现将vue生命周期简洁版理解记录如下：

我们都知道，vue的生命周期钩子函数有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

那么这些钩子函数在实际项目中怎么是什么时间调用的呢？可以结合官网的vue实例模块去理解

一、

new vue（）

此时实例化对象 、初始化事件和生命周期。

二、

beforeCreate

在初始化之后 也就是说、此时我们还无发的到 data、computed、methods、watch的值、一般用于非响应式初始化使用、

接下来就是我们的computed计算属性 在beforeCreate 与 Created之间调用、

三、

created

此时实例创建完成 在此时我们可以得到计算属性以及data等数据、因此我们做页面初始化时候 init方法一般都在created钩子中调用、

但是此时没有挂在到dom上不能访问$el 和$ref属性 ，此时调用$el会打印出undefined ，调用$ref会打印出空数组

接下来要判断有没有el如果没有的话生命周期停止，如果有el会去判断有没有template模版、如果有就会将template模版编译成render函数，如果没有就会把外部的HTML编译

四、

beforeMount

此时是挂载dom之前，我们已经找到了对应的template，此时$ref上有数据但是还没有在页面中显示，因此此时我们页面上的{{ }}还是没有被替换掉。

五、

Mounted

此时实例已经挂载dom 可以通过dom访问dom节点 $ref可以访问到属性

六、

beforeUpdate

此钩子函数是我们的组件更新之前调用 、数据已经发生改变 但是页面还没有变化、

适合在组件更新前访问已有的dom   可以在这个时点 添加画面项目等监听

七、

updated

此时组件dom已经更新完成 、页面已经发生改变、可执行依赖dom的操作了

八、

beforeDestroy

在实例销毁之前我们仍可以使用之前存在的实例

九、

destroyed

实例被销毁  跟实例有关的监听等都会销毁