Vue3 学习笔记 —— 生命周期

• 目录结构如下：
  
• App.vue

<template>
  <Child :count="count" v-if="isShow" @addCount="addCount"/>
  <button @click="isShow=!isShow">切换显示</button>
</template>

<script lang="ts">

import { defineComponent, ref} from 'vue';
import Child from './components/Child.vue';

export default defineComponent({
  components: { Child },
  name: 'App',
  setup() {
    let isShow = ref(true)
    let count = ref(0)

    let addCount = () => {
      count.value++
    }

    return {
      isShow,
      count,
      addCount
    }
  }

});
</script>

• Child.vue

<template>
Child {{count}}
<button @click="addCount">+1</button>
</template>

<script lang="ts">

// 需要引入
import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue';

export default defineComponent({
  name: 'Child',
  props: ['count'],
  // vue 2.x 生命周期钩子
  beforeCreate() {
    console.log('2.x---beforeCreate')
  },
  created() {
    console.log('2.x---created')
  },
  beforeMount() {
    console.log('2.x---beforeMount')
  },
  mounted() {
    console.log('2.x---mounted')
  },
  beforeUpdate() {
    console.log('2.x---beforeUpdate')
  },
  updated() {
    console.log('2.x---updated')
  },
  // 2.x 的 组件卸载钩子被更名
  beforeUnmount() {
    console.log('2.x---beforeUnmount')
  },
  unmounted() {
    console.log('2.x---unmounted')
  },

  // vue 3.x 生命周期 Composition Api
  setup (props, {emit}) {
    console.log('3.x---setup')

    onBeforeMount(()=>{
      console.log('3.x---onBeforeMount')
    })
    onMounted(()=>{
      console.log('3.x---onMounted')
    })
    onBeforeUpdate(()=>{
      console.log('3.x---onBeforeUpdate')
    })
    onUpdated(()=>{
      console.log('3.x---onUpdated')
    })
    onBeforeUnmount(()=>{
      console.log('3.x---onBeforeUnmount')
    })
    onUnmounted(()=>{
      console.log('3.x---onUnmounted')
    })

    let addCount = ()=>{
          emit('addCount')
    }

    return {
      addCount
    }
  },
});
</script>

• 测试截图：
  

• 点击 +1
  

• 点击切换显示
  

• 结论：

1. vue3.x 生命周期钩子比 vue2.x生命周期钩子先执行
2. 在 vue3.x 中使用 setup 代替 beforeCreate 和 created
3. 在 vue2.x 中 关于组件卸载的钩子被更名为 beforeUnmount和 unmounted