说明

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

组件创建时

Vue2中生命周期	Vue3中生命周期
beforeCreate	setup
create	setup

组件挂载时

Vue2中生命周期	Vue3中生命周期
beforeMount	onBeforeMount
mounted	onMounted

onBeforeMount

说明

组件挂载前

onMounted

说明

组件挂载后，可以访问DOM

数据修改时

Vue2中生命周期	Vue3中生命周期
beforUpdate	onBeforeUpdate
updated	onUpdated

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

onBeforeUpdate

说明

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

onUpdated

说明

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

组件卸载时

Vue2中生命周期	Vue3中生命周期
beforeDestory	onBeforeUnmount
destroyed	onUnmounted

keep-alive

Vue2中生命周期	Vue3中生命周期
activated	onActivated
deactivated	onDeactivated

捕获错误

Vue2中生命周期	Vue3中生命周期
errorCaputered	onErrorCaptured

说明

用来捕获子级组件错误

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更新之后
  */

*/