【Vue3】2-11 : 生命周期钩子函数及原理分析

本书目录：点击进入

一、组件生命周期概述

1.1 官方生命周期

1.2 钩子函数（回调函数）

▶  生命周期可划分为三个部分(- >表示执行循序)：

二、实战：测试生命周期流程

＞  代码 

＞  效果

---

一、组件生命周期概述

每个组件在被创建时都要经过一系列的初始化过程——例如，

• 设置数据监听

• 编译模板

• 将实例挂载到 DOM 并在数据变化时更新 DOM 等

同时在这个过程中也会运行一些叫做生命周期钩子的函数（回调函数），这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子函数就是回调函数，在Vue的某个时机去调用对应的回调函数

1.1 官方生命周期

• 官方提供的 生命周期图示

1.2 钩子函数（回调函数）

▶  生命周期可划分为三个部分(- >表示执行循序)：

1. 初始阶段：beforeCreate -> created -> beforeMount -> mounted

2. 更新阶段：beforeUpdate -> updated

3. 销毁阶段：beforeUnmout -> unmounted

注：一般在，created，mounted 中都可以发送数据请求，但是，大部分时候，会在created发送请求。因为这样可以更短的时间去响应数据。

二、实战：测试生命周期流程

＞  代码 

    {{ message }}

＞  效果