vue组件生命周期每个阶段的作用和是否挂载组件会不会影响钩子函数的执行

组件生命周期中每个阶段都完成了哪些事情?

组件声明周期中有8个核心的钩子函数,分为初始化阶段,更新阶段和销毁阶段

1.初始化阶段:

(1)beforeCreate :    主要是初始化事件和声明周期

这个阶段还不能操作真实dom,也不能发送数据请求赋值给data

(2) created:主要是初始化注入data和对data做响应式拦截

这个阶段可以发送数据请求然后赋值给data,但是还不能操作真实dom

(3)beforeMount:主要是通过render函数去生成虚拟dom

这个阶段只是生成了虚拟dom,还不能操作真实dom

(4) mounted:主要是挂载dom

这个阶段可以操作真实dom、可以发送数据请求赋值给data、第三方实例化,是用的比较多的一个钩子函数

2.更新阶段(组件数据发生了变化之后进行的阶段)

(1) beforeUpdate:主要是重新生成虚拟dom

这个阶段还不能操作要更新后的真实dom

(2) updated:主要是diff算法比对新旧vdom,然后得到patch补丁对象,然后渲染为真实dom

这个阶段可以操作更新后的真实dom

3.销毁阶段

(1)beforeDestroy

(2)destroyed:主要是用来清除组件无法删除的实例或是事件

组件是否挂载会不会影响钩子函数的执行?

1.组件挂载时

    

这初始化阶段的四个钩子函数都会执行。

vue组件生命周期每个阶段的作用和是否挂载组件会不会影响钩子函数的执行_第1张图片

 

2.当组件不挂载时

    

初始化阶段的四个钩子函数只会执行前两个(beforeCreate、created) ,因为beforeMount和mounted是跟dom有关的,没有挂载dom就不会执行这两个钩子函数。

 

你可能感兴趣的:(vue)