vue3的生命周期

一、vue2.x的生命周期

---

二、vue3.0的生命周期

---

1. 通过配置项的形式使用生命周期钩子

App组件

<template>
	<button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
	<Demo v-if="isShowDemo" />
</template>

<script>
import Demo from './components/Demo.vue'
import { ref } from 'vue'
export default {
	name: 'App',
	components: { Demo },
	setup() {
		let isShowDemo = ref(true)
		return { isShowDemo }
	}
}
</script>

Demo组件

<template>
	<h2>当前求和为：{{ sum }}</h2>
	<button @click="sum++">点我+1</button>
</template>

<script>
import { ref, reactive, watch } from 'vue'
export default {
	name: 'Demo',
	setup() {
		//数据
		let sum = ref(0)
		return {
			sum,
		}
	},
	// 通过配置项的形式使用生命周期钩子
	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');
	},
}
</script>

2. 通过组合式API的形式去使用生命周期钩子

Demo组件

<template>
	<h2>当前求和为：{{ sum }}</h2>
	<button @click="sum++">点我+1</button>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
	name: 'Demo',
	setup() {
		console.log('setup');
		let sum = ref(0)
		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 }
	},
}
</script>

3. 配置项和组合式API混合使用

• 组合式API的优先级大于配置项
  

三、vue3和vue2的对比

---

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