素材巴巴 > 程序开发 >

❤ vue组件的生命周期

程序开发 2023-09-14 08:47:30

❤ vue组件的生命周期

介绍

在vue组件中,生命周期指的是从组件创建开始,到组件销毁,所经历的整个过程;在这个过程中的一些不同的阶段,vue会调用指定的一些组件方法。基本生命周期函数有下面几个阶段:创建阶段、挂载阶段、更新阶段、卸载阶段、其它。

认识

生命周期函数—本质上是钩子函数(也就是回调函数)

vue2 组件的生命周期

概括为:
四个阶段八个方法:初始,挂载,更新,销毁
在这里插入图片描述

created

在模板渲染成DOM(即html)前调用,即通常初始化某些属性值,然后再渲染成视图

mounted

在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

created 和 mounted区别
created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行;而mounted可以

vue3 组件的生命周期

1、setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数;

3、onMounted() : 组件挂载完成后执行的函数;

4、onBeforeUpdate(): 组件更新之前执行的函数;

5、onUpdated(): 组件更新完成之后执行的函数;

6、onBeforeUnmount(): 组件卸载之前执行的函数;

7、onUnmounted(): 组件卸载完成后执行的函数;

8、onActivated(): 被包含在 中的组件,会多出两个生命周期钩子函数,被激活时执行;

9、onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
————————————————


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。