【Vue】关于Vue3的生命周期

Vue3中新增了一个setup生命周期函数：(1) setup执行的时机是在beforeCreate生命周期函数之前执行，在setup函数中是不能通过this来获取实例的；(2) 为了命名的统一性，将beforeDestroy 改名为 beforeUnmount，destroyed 改名为 unmounted

生命周期函数：

setup —— 不能通过this来获取实例
beforeCreate —— 建议使用setup来代替
created —— 建议使用setup来代替
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

新增加的生命周期函数（在setup中使用）可以在函数前加 on 来访问组件的生命周期

<script>
	import {onBeforeMount,onMounted,onBeforeUnmount,onUnmounted} from 'vue'
	export default {
		name:"AboutView",
		
		//生命周期钩子（新语法）
		setup(){
			console.log("setup------------------1");

			onBeforeMount(()=>{
				console.log("---onBeforeMount---")
			});
			onMounted(()=>{
				console.log("---onMounted---")
			});
			onBeforeUnmount(()=>{
				console.log("---onBeforeUnmount---")
			});
			onUnmounted(()=>{
				console.log("---onUnmounted---")
			})
		},

		//外面这些生命周期，旧语法虽然vue3也支持，感觉可以不用写了；只需要把setup中的钩子给它挂进去就已经够用了
		beforeCreate() {
			console.log("beforeCreate-----------------2")
		},
		created() {
			console.log("created-----------------3")
		},
		beforeMount() {
			console.log("beforeMount-----------------4")
		},
		mounted() {
			console.log("mounted-----------------5")
		},
		beforeUnmount() {
			console.log("beforeUnmount-----------------6")
		},
		unmounted() {
			console.log("unmounted-----------------7")
		},
	}