vue3之选项式 API (Options API)与组合式 API (Composition API)
选项式 API
选项式 API 是 Vue 2 中的传统方式，通过在组件对象中定义多个选项（如 data、methods、computed、mounted 等）来描述组件的逻辑。这些选项所定义的属性都会暴露在 this 上，this 指向当前的组件实例。
<template>
<div>
<p>{{ fullName }}</p>
<button @click="updateName">Update Name</button>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe',
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
},
},
methods: {
updateName() {
this.firstName = 'Jane';
this.lastName = 'Smith';
},
},
mounted() {
console.log('Component mounted');
},
};
</script>
在这个示例中，data、computed、methods 和 mounted 都是选项式 API 的一部分，它们定义了组件的状态、计算属性、方法和生命周期钩子。
组合式 API
组合式 API 是 Vue 3 中引入的新方式，通过导入 Vue 的 API 函数（如 ref、computed、watch 等）来描述组件的逻辑。组合式 API 通常与 <script setup> 搭配使用，这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。
涵盖了以下方面的 API：
- 响应式 API：例如
ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。 - 生命周期钩子：例如
onMounted()和onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。 - 依赖注入：例如
provide()和inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。
组合式 API 是 Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本，可以使用官方维护的插件 @vue/composition-api。
<template>
<div>
<p>{{ fullName }}</p>
<button @click="updateName">Update Name</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => {
return `${firstName.value} ${lastName.value}`;
});
const updateName = () => {
firstName.value = 'Jane';
lastName.value = 'Smith';
};
</script>
在这个示例中，我们使用了 <script setup> 和组合式 API。ref 用于定义响应式状态，computed 用于定义计算属性，updateName 是一个普通的函数。所有这些变量和函数都可以在模板中直接使用。
虽然这套 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。
选项式 API vs 组合式 API
| 特性 | 选项式 API | 组合式 API |
|---|---|---|
| 代码组织 | 通过选项分组（data, methods 等） | 通过逻辑分组（组合相关逻辑） |
this 绑定 | 需要使用 this 访问组件实例 | 不需要 this，直接使用变量 |
| 类型推断 | 需要手动添加类型 | 更好地支持 TypeScript 类型推断 |
| 代码复用 | 通过 mixins 和继承 | 通过组合函数（composables） |
| 学习曲线 | 对 Vue 2 用户更友好 | 对新用户可能有些复杂 |
组合式 API 的优势
- 更好的代码组织：可以将相关逻辑组合在一起，而不是分散在不同的选项中。
- 更好的类型推断：组合式 API 更好地支持 TypeScript，提供更好的类型推断。
- 更灵活的代码复用：可以通过组合函数（composables）来复用逻辑，而不是依赖 mixins 和继承。
- 更简洁的语法：使用
<script setup>可以让代码更简洁，减少样板代码。
可以在同一个组件中使用两种 API 吗？
可以。可以在一个选项式 API 的组件中通过 setup() 选项来使用组合式 API。
然而，只推荐你在一个已经基于选项式 API 开发了很久、但又需要和基于组合式 API 的新代码或是第三方库整合的项目中这样做。
原文地址：https://blog.csdn.net/daoshen1314/article/details/142899048
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！