Vue3的组合API——vue3的生命周期

vue3声明周期图示

与vue2生命周期的两点区别：

• vue3先创建app实例挂载到el模块上才执行Create操作。
  vue2是先create再将app实例挂载到el模块
• vue3组件生命周期的最后是卸载（unmount），与挂载mount对应；
  而vue2组件生命周期的最后是销毁destory

vue3的声明周期流程演示

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

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

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

Demo.vue

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

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

App.vue

<template>
  <button @click="isShowDemo = !isShowDemo ">显示/隐藏</button>
  <!-- 如果v-if的值为false直接将组件卸载掉 -->
  <demo v-if="isShowDemo" />
</template>

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

效果：

组合式api向setup中编写生命周期钩子

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

• beforeCreate ===> setup() （即setup()默认引入beforeCreate 和created无需手动编写）
• created =======> setup()
• beforeMount===> onBeforeMount
• mounted =======> onMounted
• beforeUpdate ===> onBeforeUpdate
• updated =======> onUpdated
• beforeUnmount ==> onBeforeUnmount
• unmounted=====> onUnmounted

eg：
Demo.vue

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

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

效果：

扫描二维码关注公众号，回复： 14522317 查看本文章

组合式api和配置项编写方法的优先级

组合式api编写方法比配置项编写方法的优先级高一些，但是一般只写一种即可