Vue3生命周期

Vue2.x中的生命周期

beforeCreate

created

beforeMount    

mounted

beforeUpdate  

updated

beforeDestroy  

destroyed

activated     

deactivated   

errorCaptured

Vue3.x的生命周期

setup

beforeMount     

mounted

beforeUpdate    

updated

beforeUnmount   

Unmounted

区别：vue3里面没有creat那两个函数，官方的建议是使用setup函数代替

然后destroy的两个函数 是用更名为了unmount函数

Vue2中生命周期函数本身是自带在组件里面的 和data methods等并且的，但是在vue3中，setup函数和data method函数才是并列的，所以，使用的是生命周期函数，vue2自带的生命函数是系统自己调用的，但是setup里面是传的回调函数，这个回调函数什么时候运行，也是传进去的回调函数决定的，这个回调函数也是，在vue3中必须要引进你想用的生命周期函数，在再setup中使用，vue3中也就大大减少了系统中这些自带的属性和功能，当需要使用的时候再按需导入，提高了性能。

第一种引入方法：

<script setup>
	import {ref,reactive,computed,watch,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,} from "vue"
	onBeforeMount(()=>{
		console.log('onBeforeMount')
	})
	onMounted(()=>{
		console.log('onMounted')
	})
	onBeforeUpdate(()=>{
		console.log('onBeforeUpdate')
	})
	onUpdated(()=>{
		console.log('onUpdated')
	})
	onBeforeUnmount(()=>{
		console.log('onBeforeUnmount')
	})	
	onUnmounted(()=>{
		console.log('onUnmounted')
	})
	</script>

第二种引入方法：

<script>
	import {ref,reactive,computed,watch,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,} from "vue"
	export default {
		setup() {
			onBeforeMount(()=>{
				console.log('onBeforeMount')
			})
			onMounted(()=>{
				console.log('onMounted')
			})
			onBeforeUpdate(()=>{
				console.log('onBeforeUpdate')
			})
			onUpdated(()=>{
				console.log('onUpdated')
			})
			onBeforeUnmount(()=>{
				console.log('onBeforeUnmount')
			})	
			onUnmounted(()=>{
				console.log('onUnmounted')
			})
		}
	}
	</script>
	<template>

	</template>