vue3.0生命周期详细解析

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

• beforeCreate => setup()
• created => setup()
• beforeMount => onBeforeMount
• mounted => onMounted
• beforeUpdate => onBeforeUpdate
• updated => onUpdated
• beforeDestroy => onBeforeUnmount
• destoryed => onUnmounted
• errorCaptured => onErrorCaputed

二、解析图示的改变
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

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

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

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }