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先于配置项执行

 代码：

<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);

    //通过组合式API的形式去使用生命周期钩子
    //#region
    onBeforeMount(() => {
      console.log("---onBeforeMount---");
    });
    onMounted(() => {
      console.log("---onMounted---");
    });
    onBeforeUpdate(() => {
      console.log("---onBeforeUpdate---");
    });
    onUpdated(() => {
      console.log("---onUpdated---");
    });
    onBeforeUnmount(() => {
      console.log("---onBeforeUnmount---");
    });
    onUnmounted(() => {
      console.log("---onUnmounted---");
    });
    //#endregion
    //返回一个对象（常用）
    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>

参考链接：

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