vue3个人心得---功能详解（四）生命周期钩子

生命周期钩子

生命周期与生命周期钩子是两个不同的概念
生命周期：一个Vue实例的生命周期包括每个组件从创建 ->运行（渲染、更新）-> 销毁的一个过程，每一阶段都会自动执行许多的默认函数。
生命周期钩子：除了默认函数外,有时需要在不同的生命周期阶段执行自定义函数，这就需要一个钩子来指定函数在哪个生命周期阶段执行，这个起钩链作用的函数也就叫生命周期钩子，也叫生命周期函数。
生命周期图：如下，中间有填充颜色的过程是生命周期，两边无填充颜色的是生命周期函数：我草,怎么图片居中呀,这破网站!!

生命周期

创建阶段: 初始化声明周期、初始化事件；初始化响应式变量数据。
渲染阶段: 渲染组件内的模版，在内存中生成DOM；把内存中的DOM放到网页上。
更新阶段: 接受更新请求，在内存中更新渲染DOM；把新渲染DOM放到网页上。
销毁阶段: 接受销毁请求，在内存中销毁DOM；把DOM从网页上销毁。

生命周期函数 （vue2与vue3不同）

beforeCreate ===>vue3:setup() 创建阶段的初始化声明周期、初始化事件之后执行 （此时data、props里的数据还没有生成是不能使用的）。
created ===>vue3:setup() 创建阶段的初始化响应式变量数据之后执行（此时data、props里的数据已经可以使用了）。
beforeMount ===>vue3:onBeforeMount 渲染阶段的内存中渲染生成DOM之后执行。
mounted ===>vue3:onMounted 渲染阶段的DOM放到网页上之后执行。
beforeUpdate ===>vue3:onBeforeUpdate 更新阶段的内存中生成DOM之后执行。
updated ===>vue3:onUpdated 更新阶段的的DOM放到网页上之后执行。
beforeDistroy ===>vue3:BeforeUnmount 销毁阶段的在内存销毁DOM之后执行​。
distroyed ===>vue3:Unmounted 销毁阶段的在网页上销毁DOM之后执行​。

几个特殊的生命周期函数（vue3）

Activated(激活)若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
Deactivated(停用)若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
ServerPrefetch(服务器预取)在组件实例在服务器上被渲染之前调用。如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。
ErrorCaptured(错误捕获)暂不解
RenderTracked(渲染追踪)暂不解
RenderTriggered(渲染触发)暂不解

生命周期函数的用法

使用之前需要先导入,如下:

import { onMounted, onUpdated, onUnmounted } from 'vue'

生命周期函数的参数为箭头的回调函数,如下:

onMounted(() => {console.log('onMounted')});

应用场景:

详情见生命周期函数应用场景

监听函数watchEffect在生命周期的执行

默认在初始化响应式变量数据时（在onBeforeMount渲染阶段的内存中渲染生成DOM之前）首次执行,之后每次依赖更新时（在onBeforeUpdate更新阶段的内存中生成DOM之前）执行一次。
如果第二参数加上{flush: 'post'}，则在初始化响应式变量数据时（在onBeforeMount渲染阶段的内存中渲染生成DOM之后）首次执行,之后每次依赖更新时（在onBeforeUpdate更新阶段的内存中生成DOM之后）执行一次。