《Vue3企业级应用开发实战（微课版）》 第9章 组合式API

第九章组合式APIContents9.1组合式API的动机与优势组合式API核心概念9.29.3组合式API与混入比较本章小结9.4组合式API的动机与优势9.1动机9.1.1

动机

3.更好的类型推断CompositionAPI支持更好的TypeScript类型推断。

2.更好的重用CompositionAPI提供了更灵活的函数式编程方式，使得组件逻辑可以更容易地抽象和复用。在Vue2中是使用选项式API（OptionsAPI）来编写组件逻辑，开发者需要在不同的选项中分散定义数据、计算属性、方法、生命周期钩子等。随着应用规模的增长，组件逻辑变得越来越复杂，导致代码难以维护和理解。为了解决这个问题，Vue3中引入了组合式API。1.更好的组织组合式API允许将相关逻辑组织在一起，而不是按照选项的方式分散定义。为了更好地理解组合式API的动机，请参照教材的两种实现代码的对比优势9.1.2

优势3.更好的TypeScript支持组合式API对TypeScript提供了更好的支持。2.更灵活的逻辑复用组合式API提供了更灵活的逻辑复用方式。开发者可以根据需求将相关逻辑封装为自定义的函数，然后在不同的组件中进行复用。1.组织和重用逻辑组合式API通过将相关逻辑组织在一起，提供了更好的代码组织结构。4.更好的代码组织与可读性组合式API使得代码的组织更加直观和一致。

参照教材中代码对比示例体会使用组合式API所带来的优势。

组合式API核心概念

Setup函数

reactiveAPI

refAPI

9.2Setup函数9.2.1

2.返回值setup函数可以返回一个对象或一个渲染函数。1.接受的参数（1）Props组件的属性对象，它包含了从父组件传递给子组件的属性值。（2）Context组件的上下文对象，它包含了一些有用的属性和方法，如attrs、slots、emit等。Vue3中引入一个新的特性setup函数是在组件创建过程中调用的一个函数，用于设置组件的状态、行为和生命周期钩子函数，取代了Vue2中选项式API的data、computed、methods等方法。setup函数是一个标准的JavaScript函数，它接收两个参数props和context，及一个返回值。Setup函数Setup语法糖reactiveAPI9.2.212

使用方式

使用reactiveAPI，首先从vue模块导入reactive函数。

import{reactive}from'vue';

然后，使用reactive函数来创建一个响应式的对象。

conststate=reactive({ count:0,

message:'HelloVue3!',});此时，state对象就成为一个响应式对象，可以在Vue组件中使用。当state对象的属性发生变化时，Vue会自动重新渲染相关的组件。reactiveAPI还提供了其他辅助函数，用于处理响应式对象。（1）toRefs将响应式对象转换为普通的引用对象。这对于将响应式对象作为props传递给子组件时非常有用。（2）isRef检查一个值是否是一个引用对象。（3）isReactive检查一个对象是否是一个响应式对象。（4）isReadonly检查一个对象是否是一个只读对象。（5）readonly创建一个只读的响应式对象。

2.使用场景（3）全局状态管理。reactiveAPI可以用于创建全局的状态管理。（2）表单处理。在表单中使用reactiveAPI可以轻松地跟踪表单字段的值和状态。（1）组件状态管理。reactiveAPI可以用于管理组件的状态。（4）数据驱动的动态UI。reactiveAPI使构建数据驱动的动态UI更加容易。（5）插件和扩展开发。reactiveAPI还为开发插件和扩展提供了强大的基础。refAPI9.2.3

返回值：ref函数返回一个响应式的引用对象。引用对象的属性：value：引用对象的value属性包含了实际的值。可以通过读取或修改value属性来访问和更新值。1.使用方式首先导入ref函数。import{ref}from'vue'constmyRef=ref(initialValue)refAPI也是用于创建可变的、被包装的响应式对象。ref对象的主要优势在于可以通过修改value属性来更改其内部值，而这种更改会被视为响应式的，从而触发相关的视图更新。refAPI

（2）reactive函数的使用场景适用于复杂对象的响应式数据。reactive函数主要用于创建复杂对象的响应式数据，如对象、数组等。它会返回一个包装了传入对象的响应式代理对象。在模板和JS代码中使用。reactive函数创建的响应式数据在模板和JavaScript代码中都可以直接使用，不需要通过特定的属性访问。2.与reactive使用场景的区别（1）ref函数的使用场景

适用于基本类型的响应式数据。ref函数主要用于创建基本类型的响应式数据，如数字、字符串、布尔值等。它会返回一个包装了初始值的响应式引用对象。

17区别总结：ref函数适用于简单的基本类型数据，需要通过.value访问数据。在模板中使用时无需.value。reactive函数适用于复杂的对象类型数据，可以直接访问数据，适合在模板和JavaScript代码中使用。通常情况下，当需要创建单个的简单数据，如一个计数器变量时，可以使用ref函数。而当需要创建一个包含多个属性或需要进行深层次的嵌套观察的对象时，则可以使用reactive函数。需要注意的是，尽管reactive函数在很多情况下更为灵活，但在性能方面可能会稍微逊色于ref函数。因此，在选择使用ref还是reactive时，可以根据具体的需求和场景来决定。组合式API与混入比较9.3两者区别9.3.1组合式API与混入都是Vue中用于组合和复用代码的特性，但它们在实现方式和使用方式上有一些区别。1.实现方式（1）组合式API是Vue3中的一种新的API。它允许将组件的逻辑拆分成更小的可重用函数，这些函数可以通过setup方法来定义。（2）混入是Vue2中的特性，通过将一组选项对象混入组件来实现代码的复用。2.使用方式（1）组合式API允许以函数的形式组织代码，可以根据功能将相关逻辑组合在一起。（2）混入通过在组件中使用混入选项来引入。可以同时引入多个混入，并被合并到组件选项中。213.依赖解决（1）组合式API使用了更先进的响应式系统，可以更好地处理组件间的依赖关系。（2）混入的依赖解决是通过简单的选项合并实现的。如果多个混入之间有相同的选项，后面的混入的选项会覆盖前面的选项。综上所述，组合式API更加灵活和强大，可以更好地组织和复用组件的代码，而混入则是一种简单的代码复用机制。因此，Vue3开发中建议优先考虑使用组合式API。代码示例9.3.2本章小结9.4通过本章的学习可以知道组合式API是一种灵活、可组合的编写Vue组件的方式。它通过引入setup函数和一系列核心函数（如reactive、ref、computed和watch）来改变组件的编写方式，为Vue开发提供了许多优势。首先，组合式API使代码逻辑更直观。通过将相关逻辑封装到setup函数中，开发者可以按照功能组织代码，而不是按照生命周期钩子函数的顺序。这使代码更易于理解和维护。其次，组合式API促进了代码的重用。开发者能够将可复用的逻辑封装到函数中，并在不同的组件中进行重用。这提高了代码的可维护性和可扩展性，减少了重复编写代码的工作量。第三，组合式API提供了更好的类型推导和IDE支持。它使用了严格的静态类型推导，使IDE能够更好地理解代码并提供准确的代码补全和错误检查。这提高了开发效率并减少了潜在的错误。此外，组合式API还有助于更好地组织和测试代码。开发人员可以更容易地进行单元测试，同时也可以更容易地对逻辑进行拆分和组合。这提高了代码的可测试性和可组织性。与传统的混入相比，组合式API具有明显的区别。组合式API使用setup函数和函数式的方式来组织代码，而混入通过将共享