vue3中的生命周期

​

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

• 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

语法如下：

            import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
            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}
		}

例子： 

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

由如下例子可知：setup是优于 beforeCreate的

3、组合式API形式和配置项的形式对比

可以看见 组合式API先于配置项执行

 代码：

参考链接：

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=155&spm_id_from=pageDriver​​​​​​​