一.Vue3 生命周期 钩子函数 总结
1. 介绍:
Vue组件简介: Vue是组件haul编程 从一个组件诞生到消亡 会经历很多过程 这些过程就叫做生命周期
例如: 生命周期就是人出生到入土是一样的 有少年时期 青年时期 中年时期 老年时期 每个时期都应该有不同的任务 每个时期可以做不同的任务
钩子函数: 伴随生命周期 给用户使用的函数 操控的生命周期 主要操控钩子函数
Vue3 的生命周期比较多 然后需要一个概念 "钩子函数"
2.Vue3 内 主要 钩子函数
steup( ) 开始创建组件之前 在beforeCreate 和 created 之前执行 创建的是 data 和 method
onBeforeMount( ) 组件挂载到节点上之前执行的函数
onMouted( ) 组件挂载完成后执行的函数
onBeforeUpdate( ) 组件更新之前执行的函数
onUpdated( ) 组件更新完成之后执行的函数
onBeforeUnmount( ) 组件死亡(卸载)之前执行的函数
onUnmounted( ) 组件完全死亡(卸载)后执行的函数
onActivated( ) 被包含在 <keep-alive> 中的组件 会多出两个生命周期钩子函数 被激活时执行
onDeactivated( ) 从A组件 切换 到 B 组件 A组件消失时执行
onErrorCaptured( ) 当前捕获一个子孙组件的异常时激活钩子函数
需注意问题:
使用<keep-alive> 组件会将数据保留在内存中 比如不想每次看到一个页面都重新加载 这种场景下就可以使用 <keep-alive> 解决
二. Vue2.x 和 Vue3.x 生命周期钩子函数对比
Vue2------------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
总结:
通过这样可以对比出 ,Vue的钩子函数基本是在 Vue2 的基础上加了一个 on , 但也有两个钩子函数发生了 变化 分别是 ↓
- BeforeDestroy ==> onBeforeUnmount 组件死亡(卸载)之前执行的函数
- destroyed ==> onUnmounted 组件完全死亡(卸载)后执行的函数