Vue3的生命周期函数

使用Vue3的生命周期钩子，有两种写法，

1. 通过配置项的形式使用生命周期钩子。
2. 通过组合式API的形式使用生命周期钩子。

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

Vue3有如下生命周期钩子，分别是，

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted

看具体例子吧。

• main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• App.vue

<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.vue

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

<script>
import {ref} from "vue";
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0);

    return {
      sum
    }
  },
  beforeCreate(){
    console.log("Demo Enter:  beforeCreate");
  },
  created(){
    console.log("Demo Enter:  created");
  },
  beforeMount(){
    console.log("Demo Enter:  beforeMount");
  },
  mounted(){
    console.log("Demo Enter:  mounted");
  },
  beforeUpdate(){
    console.log("Demo Enter:  beforeUpdate");
  },
  updated(){
    console.log("Demo Enter:  updated");
  },
  beforeUnmount(){
    console.log("Demo Enter:  beforeUnmount");
  },
  unmounted(){
    console.log("Demo Enter:  unmounted");
  }
}
</script>

• 启动应用，测试效果
  

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

选项式生命周期钩子和组合式API之间的映射关系是，

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

看具体例子。

• main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• App.vue

<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.vue

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

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0);

    onBeforeMount(() => {
      console.log("Demo enter:  onBeforeMount")
    })
    onMounted(() => {
      console.log("Demo enter:  onMounted")
    })
    onBeforeUpdate(() => {
      console.log("Demo enter:  onBeforeUpdate")
    })
    onUpdated(() => {
      console.log("Demo enter:  onUpdated")
    })
    onBeforeUnmount(() => {
      console.log("Demo enter:  onBeforeUnmount")
    })
    onUnmounted(() => {
      console.log("Demo enter:  onUnmounted")
    })


    return {
      sum
    }
  }
}
</script>

• 启动应用，测试效果