Vue3 支持 Options API 和 Composition API 。

一、Options API 的生命周期（基本与 Vue2 生命周期一致）

类似于 Vue2 中的生命周期，只做了一点更改。

beforeDestroy 改为 beforeUnmount，destroyed 改为 unmounted，其他沿用 Vue2 的生命周期。

Options API 就是在一个 vue 文件中的 methods、computed、watch、data 中等等定义属性和方法，共同处理页面逻辑。

用法如下：

export default {

  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  BeforeMount() {
    console.log('BeforeMount')
  },
  Mounted() {
    console.log('Mounted')
  },
  BeforeUpdata() {
    console.log('BeforeUpdata')
  },
  Updated() {
    console.log('Updated')
  },
  BeforeUnMount() {
    console.log('BeforeUnMount')
  },
  UnMounted() {
    console.log('UnMounted')
  }
}

缺点： 一个功能往往需要在不同的 vue 配置项中定义属性和方法，比较分散，项目小还好，清晰明了；但是项目大了后，一个 methods 中可能包含非常多个方法，往往难以分清哪个方法对应着哪个功能。

vue3 中的 Composition API 就是用来解决上述缺点的。

二、Composition API 的生命周期（Vue3 新提出）

在 Vue3 Composition API 中，我们的代码是根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）。这样做，即时项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API，而不像 Vue2 Options API，一个功能所用到的 API 都是分散的，需要改动功能，到处找API的过程是很费劲的。

用法如下：

import { onBeforeMount, onMounted, onBeforeUpdata, onUpdated, onBeforeUnMount, onUnMounted }

export default {

  // 在生命周期的角度上等价于 beforeCreate 和 created
  setup() {
    console.log('setup')

    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdata(() => {
      console.log('onBeforeUpdata')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnMount(() => {
      console.log('onBeforeUnMount')
    })
    onUnMounted(() => {
      console.log('onUnMounted')
    })
  }
}

Composition API 带来了什么？

• 更好的代码组织，根据逻辑相关性组织代码，提高可读性和可维护性

• 更好的逻辑复用，是基于函数组合的 API （在 Vue2 Options API 中通过 Mixins 重用逻辑代码，容易发生命名冲突且关系不清）

• 更好的类型推导

注意，Composition API 带来的好处并不是刚需，是给比较大比较复杂的项目使用的。

三、如何选择？

• 不建议 Options API 与 Composition API 共用，会引起混乱
• 小型项目、业务逻辑简单，用 Options API
• 中大型项目、逻辑复杂，用 Composition API（Composition API 就是为了解决复杂场景的业务逻辑而设计的）