【Vue3】第五部分 Vue3生命周期

【Vue3】第五部分 Vue3生命周期

---

---

5.Vue3生命周期

5.1 Vue3和Vue2对比图

vue2.x的生命周期

vue3.0的生命周期

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

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

• beforeDestroy改名为 beforeUnmount
• destroyed改名为 unmounted

具体代码

<template>
  <div>
    <h1>计数：{{sum}}</h1>
    <button @click="sum++">click me add</button>
  </div>
</template>

<script>
import {ref} from "vue"
export default {
  name:'TestDemo',
  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>

<style>

</style>

5.3 通过组合式API的形式去写生命周期钩子

Vue3.0也提供了 Composition API (组合式API )形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

需要注意的是：在setup没有提供beforeCreate和created生命周期钩子，将setup当做beforeCreate和created,其他生命周期钩子在setup中需要改名

• beforeCreate===>setup()
• created=======>setup()
• beforeMount ===>onBeforeMount
• mounted=======>onMounted
• beforeUpdate===>onBeforeUpdate
• updated =======>onUpdated
• beforeUnmount ==>onBeforeUnmount
• unmounted =====>onUnmounted

具体代码

<template>
  <div>
    <h1>计数：{{sum}}</h1>
    <button @click="sum++">click me add</button>
  </div>
</template>

<script>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from "vue"
export default {
  name:'TestDemo',
  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,
    }
  },

---

总结

以上就是今天要讲的内容，本文介绍了Vue3中的生命周期钩子，希望对大家有所帮助！！