vue2.0和vue3.0生命周期对比

一、图示vue2.0到vue3.0改变​​​​​​​

beforeCreate -> use setup()

created -> use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeUnmount -> onBeforeUnmount

unmounted -> onUnmounted

errorCaptured -> onErrorCaptured

renderTracked -> onRenderTracked

renderTriggered -> onRenderTriggered

activated -> onActivated

deactivated -> onDeactivated

二、解析图示的改变

1、去掉了vue2.0中的 beforeCreate 和 created 两个阶段，同样的新增了一个 setup

2、beforeMount 挂载之前    改名  onBeforeMount

3、mounted 挂载之后    改名  onMounted

4、beforeUpdate 数据更新之前    改名  onBeforeUpdate

5、updated 数据更新之后    改名  onUpdated

6、beforeDestroy 销毁前    改名  onBeforeUnmount

7、destoryed 销毁后    改名  onUnmounted

8、errorCaptured 报错    改名  onErrorCaptured

三、官方对生命周期钩子的解释
你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。

下表包含如何在 setup () 内部调用生命周期钩子：

选项式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
TIP

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

// MyBook.vue

import {
   
   onMounted} from 'vue'
export default {
   
   
  setup() {