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>