Vue3中的生命周期

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
- beforeDestroy改名为 beforeUnmount
- destroyed改名为 unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
- beforeCreate[页面创建前]===>setup()
- created[页面创建后]=======>setup()
- beforeMount[页面挂载前] ===>onBeforeMount
- mounted[页面挂载后]=======>onMounted
- beforeUpdate[页面更新前]===>onBeforeUpdate
- updated[页面更新后] =======>onUpdated
- beforeUnmount[卸载前] ==>onBeforeUnmount
- unmounted[卸载后] =====>onUnmounted

代码展示:

<script>
	// 引入生命周期函数(组合api形式)
	import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			console.log('---setup---')
			//数据
			let sum = ref(0)

			//通过组合式API的形式去使用生命周期钩子(需要引入)
			onBeforeMount(()=>{
				console.log('---onBeforeMount---')
			})
			onMounted(()=>{
				console.log('---onMounted---')
			})
			onBeforeUpdate(()=>{
				console.log('---onBeforeUpdate---')
			})
			onUpdated(()=>{
				console.log('---onUpdated---')
			})
			onBeforeUnmount(()=>{
				console.log('---onBeforeUnmount---')
			})
			onUnmounted(()=>{
				console.log('---onUnmounted---')
			})

			//返回一个对象（常用）
			return {sum}
		},
		
		//通过配置项的形式使用生命周期钩子(不需要引入)
		//#region 
		beforeCreate() {
			console.log('---beforeCreate---')
		},
		created() {
			console.log('---created---')
		},
		beforeMount() {
			console.log('---beforeMount---')
		},
		mounted() {
			console.log('---mounted---')
		},
		beforeUpdate(){
			console.log('---beforeUpdate---')
		},
		updated() {
			console.log('---updated---')
		},
		beforeUnmount() {
			console.log('---beforeUnmount---')
		},
		unmounted() {
			console.log('---unmounted---')
		},
		//#endregion
	}
</script>