Vue生命周期

Vue2--------------vue3

beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

• 在Vue3中，去掉了beforeCreate、created两个生命周期函数，用setup来替代（也就是说在setup中写的代码，相当于之前在这两个函数中写的代码）；
• 在Vue3中，将beforeDestroy、destroyed两个生命周期函数更名为onBeforeUnmount、onUnmounted；
• 在Vue3中，其它生命周期函数并没有改变，只是在每个生命周期函数前面加上了一个on。

<template>
	<div class="cont">

	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: "张三",
			};
		},
		// 实例创建前-(比 否儿 克瑞特)
		beforeCreate(){
			console.log('vue3中是setup')
		},
		// 实例创建后-(克瑞得特)
		created(){
			console.log('vue3中是setup')
		},
		// 实例挂载前-(比 否儿 忙熬特)
		beforeMount(){
			console.log('vue3中是onBeforeMount')
		},
		// 实例挂载后-(忙得特)
		mounted(){
			console.log('vue3中是onMounted')
		},
		// vue2中定义方法-麦瑟词
		methods:{

		},
		// 数据更新前-(比 否儿 阿普得特)
		beforeUpdate(){
			console.log('vue3中是onBeforeUpdate')
		},
		// 数据更新后-(阿普得特)
		updated(){
			console.log('vue3中是onUpdated')
		},
		// 实例销毁前-(比 否儿 抵死角瑞)
		beforeDestroy() {
			console.log('vue3中是onBeforeUnmount') - (昂 比否儿 昂忙特)
		},
		// 实例销毁后-(抵死角瑞)
		destroyed() {
			console.log('vue3中是onUnmounted')-(昂愣 忙贴特)
		},
		// keepAlive 组件被插入到 DOM时候调用
		// 注：这个钩子在服务器端渲染期间不会被调用
		activated(){
			console.log('vue3中是onActivated')
		},
		// keepAlive 组件从 DOM 中被移除时候调用
		// 注：这个钩子在服务器端渲染期间不会被调用
		deactivated(){
			console.log('vue3中是onDeactivated')
		},
		// 捕获了后代组件传递的错误时调用
		errorCaptured(){
			console.log('vue3中是onErrorCaptured')
		}
	};
</script>

<style scoped lang="scss"></style>