【每天学点小知识】关于vue2.0与vue3.0生命周期那点事今天莫名的感觉很累，不想上班，那就来写稿子吧。整理并分享一

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天

今天莫名的感觉很累，不想上班，那就来写稿子吧。整理并分享一下vue2,vue3的声明周期变化，纯属复习，大神请绕路。

什么是生命周期

这里仅仅给小白同学科普一下生命周期的概念，有人给了一个通俗地理解：“从摇篮到坟墓”的整个过程”。vue给每一个生命周期阶段都定义了钩子函数，代表每一个阶段都干了什么事，而vue2与vue3的升级，就是把这些钩子函数进行了优化。

# vue2和vue3生命周期对比

我们先来看看官网给出的声明周期流程图吧！

图片.png

图片.png

具体改变如下：

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

解析图示的变化：

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 无疑了，下边来详细说一哈：

(1)首先 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以你不需要显式地定义它们就可以像使用上述钩子一样定义事件。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

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

可能还不够直观哈，那就继续看……

(2)其次vue2 中的生命周期与 data / methods 同级别以函数方式使用，比如 created() {}

data() {
    return {}
},
created() {
    ...
}

而 vue3 中的生命周期 setup 是在最外层，可以直接使用而不需要按需加载，但是其他的生命周期得按需加载才能使用哦

import { omMounted } from  ``'vue'

setup() {

    onMounted(() => { ... })

}

欧了，结束，拜拜。