关于Vue3中对于响应式API和组合式API的理解

Vue3经过多个版本的更新迭代已经逐渐的趋于稳定，在看官方的文档中发现了官方所有的文档都有两种格式的API，响应式API和组合式API。

响应式API（Options API）

这是官方文档对于响应式API的解释：

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

简单的说就是vue2中的语法，比如在实现一个不怎么复杂的功能中，你需要在data中定于变量，在method中定义函数，在wathc中监听变量值的变化，简单的应用中感觉不到复杂性，在复杂的应用中，大量的代码堆积，代码的可读性和可维护性就会变差。

如下图所示：

 组合式API（Composition API）

引用官方的解释：

组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。

组合式 API 是根据逻辑相关性组织代码的，提高可读性和可维护性，基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清）。

最大的优点：通俗的讲就是把跟一个功能相关的东西放在一个地方，它是目前最合理也是最容易维护的，你可以随时将功能的一部分拆分出去，你可以将每一个功能相关所有的东西比如methods，computed都放在如上图的function中，这个function可以独立的存在，可以放在一个TS文件中，也可在npm中单独发布，最终组合式API把他们组合起来。

 

 官方给出的代码对比

选项式API

 
<template>
  <button @click="increment">Count is: {{ count }}button>
template>

组合式API

 
<template>
  <button @click="increment">Count is: {{ count }}button>
template>