带你了解Vue2和Vue3区别（三）——Vue3的组合式API

带你了解Vue2和Vue3区别（三）——Vue3的组合式API

组合式API

1.为什么出现了组合式API

1. 更好的逻辑复用

   vue2中通过mixin混入的方式存在很多缺点，而vue3的组合函数解决了其缺点，比如来源更明确了。

2. 更好的逻辑关注点

   vue2使用选项式API，而vue3多提供了组合式API。vue2逻辑关注点分散到不到行里（即不同的选项属性里），而组合式API将逻辑关注点集中，且可以将其抽取到一个可复用的工具函数中。

3. 更好的类型推导

   vue2使用TypeScript时复杂麻烦，而vue3更适合和TypeScript使用，因为其组合式API。

4. 更小的生产包体积

   搭配 <script setup> 使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。这是由于 <script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。选项式 API 需要依赖 this 上下文对象访问属性。而组合式API被编译的模板可以直接访问 <script setup> 中定义的变量，无需从实例中代理。这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

   参考链接：组合式 API 常见问答 | Vue.js (vuejs.org)

   该官方文档提到：选项式 API 会被废弃吗？

   不会，我们没有任何计划这样做。选项式 API 也是 Vue 不可分割的一部分，也有很多开发者喜欢它。我们也意识到组合式 API 更适用于大型的项目，而对于中小型项目来说选项式 API 仍然是一个不错的选择。

2.什么是组合式API

组合式 API (Composition API) 是一系列 API 的集合，是函数的形式书写Vue组件。

包括setup()，响应式API，生命周期钩子，依赖注入

3.setup()函数

setup()函数有两个参数，分别是

1. props对象：即组件的props）,

2. Setup上下文对象：上下文对象暴露了其他一些在 setup 中可能会用到的值，提供了attrs对象，slots对象，emit函数和expose函数，前三个等价于选项式API的组件属性$attrs、$slots和$emit()。

   expose 函数：用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容。

setup()函数的返回值，可以是对象，也可以是渲染函数。

1. 对象：返回的对象会暴露给模板和组件实例。即模版可以直接使用，同时选项式API可以通过组件实例this来使用。

2. 渲染函数

4.ref()和reactive()函数

ref()函数可以传入原始值，也可以是对象类型（本质上，就是调用reactive()函数），返回ref对象。

ref对象上，有"value"属性的取值器（getter）和赋值器（setter），如Vue官网的代码描述如下：

// 注意：ref的简单实现，未实现深层响应式等细节
function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value')
      return value
    },
    set value(newValue) {
      value = newValue
      trigger(refObject, 'value')
    }
  }
  return refObject
}

而，reactive()函数只能传入对象类型，使用的是代理Proxy，如Vue官网的代码描述如下：

// 注意：reactive的简单实现，未实现深层响应式，对象添加和删除属性时的代理等细节
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

ref()和reactive()的关系可以简单描述为：ref()有时调用了reactive()，比如在对象类型的时候。同时，reactive()函数在某种情况下，可以对ref对象进行解包。关于ref对象的解包，还有在模板中使用时，ref 会自动解包。

ref()和reactive()函数都具有深层响应性，而对应的浅层响应为函数shallowRef()和shallowReactive()。

四者的对比如下：

	ref()	reactive()	shallowRef()	shallowReactive()
参数	原始值，对象类型	对象类型	原始值，对象类型	对象类型
返回值	ref对象	Proxy代理对象	ref对象	Proxy代理对象
响应深浅	深层响应	深层响应	浅层响应	浅层响应

更多细节请参考官方文档：

响应式基础 | Vue.js (vuejs.org)

深入响应式系统 | Vue.js (vuejs.org)

5.侦听器

watch()，watchEffect()。

在回调时机上，watchEffect()有对应的watchPostEffect()和watchSyncEffect()

6.组合式函数

组合式函数主要用于逻辑复用。规定用驼峰命名法命名，并以“use”作为开头。组合式 API 最基本的优势是它使我们能够通过组合式函数来实现更加简洁高效的逻辑复用。在选项式 API 中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷。

下一章将给出Vue3的选项式API setup()函数