vue3之选项式 API (Options API)与组合式 API (Composition API)

最新推荐文章于 2025-05-06 18:01:22 发布

小鱼爱吃火锅

最新推荐文章于 2025-05-06 18:01:22 发布

阅读量845

点赞数 10

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/daoshen1314/article/details/142899048

版权

前端专栏收录该内容

21 篇文章

订阅专栏

选项式 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 用户更友好	对新用户可能有些复杂