编辑
2023-04-05
VUE3
0
请注意,本文编写于 470 天前,最后修改于 462 天前,其中某些信息可能已经过时。

目录

说明
组件创建时
组件挂载时
onBeforeMount
说明
onMounted
说明
数据修改时
onBeforeUpdate
说明
onUpdated
说明
组件卸载时
keep-alive
捕获错误
说明
EG

说明

都需要作为方法且在setup中使用,且需要从vue中引入

组件创建时

Vue2中生命周期Vue3中生命周期
beforeCreatesetup
createsetup

组件挂载时

Vue2中生命周期Vue3中生命周期
beforeMountonBeforeMount
mountedonMounted

onBeforeMount

说明

组件挂载前

onMounted

说明

组件挂载后,可以访问DOM

数据修改时

Vue2中生命周期Vue3中生命周期
beforUpdateonBeforeUpdate
updatedonUpdated

只有视图更新后,onBeforeUpdate、onUpdated生命周期才走

onBeforeUpdate

说明

在组件因响应式状态变更更新DOM之前被调用

onUpdated

说明

在组件因响应式状态变更更新DOM之后被调用

组件卸载时

Vue2中生命周期Vue3中生命周期
beforeDestoryonBeforeUnmount
destroyedonUnmounted

keep-alive

Vue2中生命周期Vue3中生命周期
activatedonActivated
deactivatedonDeactivated

捕获错误

Vue2中生命周期Vue3中生命周期
errorCaputeredonErrorCaptured

说明

用来捕获子级组件错误

ts
setup(){ ... onErrorCaptured((err)=>{ console.log("error",err) }) ... }

EG

vue
<template> <h1 @click="changeNum">{{ num }}</h1> <h1 @click="changeProple">{{people.hobby.love.age}}</h1> </template> <script> import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,ref, reactive} from "vue"; export default { name: 'HelloWorld', setup(){ console.log("setup执行了") let num = ref(1) function changeNum(){ num.value = 10 } let people = reactive({ name:"xm", hobby:{ gender:0, food:"chicken", love:{ gender:0, age:18 } } }) function changeProple(){ people.hobby.love.age = 24 } onBeforeMount(()=>{ console.log("组件挂载前") }) onMounted(()=>{ console.log("组件挂载后") }) onBeforeUpdate(()=>{ console.log("组件状态更新DOM更新之前") }) onUpdated(()=>{ console.log("组件状态更新DOM更新之后") }) return { num, changeNum, people, changeProple, } }, } </script> <style scoped> </style> /* setup执行了 组件挂载前 组件挂载后 /* 更新 组件状态更新DOM更新之前 组件状态更新DOM更新之后 */ */

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!