vue2.x与vue3.x生命周期的比较

vue2.x 生命周期图示：

new Vue()
   |
   v
Init Events & Lifecycle
   |
   v
beforeCreate
   |
   v
created
   |
   v
beforeMount
   |
   v
mounted
   |
   v
beforeUpdate (when data changes)
   |
   v
updated
   |
   v
beforeDestroy (when vm.$destroy() is called)
   |
   v
destroyed

vue3.x 生命周期图示：

setup()
   |
   v
Init Events & Lifecycle
   |
   v
onBeforeMount
   |
   v
onMounted
   |
   v
onBeforeUpdate (when data changes)
   |
   v
onUpdated
   |
   v
onBeforeUnmount (when component is unmounted)
   |
   v
onUnmounted
   |
   v
onErrorCaptured (when an error is captured)

vue 2.x 版本生命周期与 vue 3.x 版本生命周期相对应的组合式 API

• 2.x 版本使用 beforeCreate -> 3.x 版本使用 setup()
• 2.x 版本使用 created -> 3.x 版本使用 setup()
• 2.x 版本使用 beforeMount ->  3.x 版本使用 onBeforeMount
• 2.x 版本使用 mounted ->  3.x 版本使用 onMounted
• 2.x 版本使用 beforeUpdate ->  3.x 版本使用 onBeforeUpdate
• 2.x 版本使用 updated ->  3.x 版本使用 onUpdated
• 2.x 版本使用 beforeDestroy -> 3.x 版本使用 onBeforeUnmount
• 2.x 版本使用 destroyed ->  3.x 版本使用 onUnmounted
• 2.x 版本使用 errorCaptured ->  3.x 版本使用 onErrorCaptured

vue 3.x 新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

• onRenderTracked
• onRenderTriggered

vue 2.x 版本生命周期与 vue 3.x 版本生命周期示例代码：

<template>
<div class="about">
  <h2>msg: {{msg}}</h2>
  <hr>
  <button @click="update">更新</button>
</div>
</template>

<script lang="ts">
import {
  ref,
  onMounted,
  onUpdated,
  onUnmounted, 
  onBeforeMount, 
  onBeforeUpdate,
  onBeforeUnmount
} from "vue"

export default {
  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')
  },
  

  setup() {
    
    const msg = ref('abc')

    const update = () => {
      msg.value += '--'
    }

    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 {
      msg,
      update
    }
  }
}
</script>

<template>
  <h2>App</h2>
  <button @click="isShow=!isShow">切换</button>
  <hr>
  <Child v-if="isShow"/>
</template>

<script lang="ts">
import Child from './Child.vue'
export default {

  data () {
    return {
      isShow: true
    }
  },

  components: {
    Child
  }
}
</script>