Vue 3：Options API 与 Composition API 的对比 - DeadSimpleChat

Vue 3 引入了全新的 Composition API，与传统的 Options API 一起，为开发者提供了更灵活的组件开发方式。在本文中，我们将对比这两种 API 的特点，探讨它们的适用场景，并通过示例展示如何使用它们。

选项 API 简介

Options API 是 Vue 2 中默认的组件开发方式，其核心思想是通过组件选项（如 data、methods、computed 等）来组织组件逻辑。每个选项对应组件的某一部分功能，例如：

• data：定义组件的状态。
• methods：定义组件的方法。
• computed：定义派生状态。

这种基于选项的结构自 Vue 创建以来一直是其核心，以下是一个使用 Options API 的简单组件示例：

export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
};

Composition API 简介

代码的可维护性和可读性。

以下是一个使用 Composition API 的简单示例：

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);    function increment() {
      count.value++;
    }    return {
      count,
      doubleCount,
      increment
    };
  }
};

通过 Composition API，组件逻辑可以按功能分组，而不是按选项类型分散在不同的部分。

创建项目以对比 Options API 和 Composition API

第一步：创建一个新的 Vite 项目

首先，使用 Vite 创建一个新的 Vue 项目：

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

在代码编辑器中打开项目，您可以通过本地 URL 访问运行的应用程序。

第二步：使用 Options API 创建任务列表组件

在 components 文件夹中创建一个名为 TaskList.vue 的文件，并实现以下功能：

数据处理

使用 data 函数定义组件的状态：

data() {
  return {
    tasks: [],
    newTask: ''
  };
}

方法处理功能

在 methods 中定义以下功能：

• 添加任务：

addTask() {
  if (this.newTask.trim()) {
    this.tasks.push({
      id: Date.now(),
      title: this.newTask,
      completed: false
    });
    this.newTask = ''; // 重置输入字段
  }
}

• 删除任务：

deleteTask(taskId) {
  this.tasks = this.tasks.filter(task => task.id !== taskId);
}

• 标记任务为完成或未完成：

completeTask(taskId) {
  const task = this.tasks.find(t => t.id === taskId);
  if (task) task.completed = !task.completed;
}

计算属性和观察者

使用计算属性过滤任务：

computed: {
  incompleteTasks() {
    return this.tasks.filter(task => !task.completed);
  },
  completedTasks() {
    return this.tasks.filter(task => task.completed);
  }
}

第三步：使用 Composition API 重建任务列表组件

数据处理

在 Composition API 中，使用 ref 和 reactive 定义响应式数据：

import { ref } from 'vue';

export default {
  setup() {
    const tasks = ref([]);
    const newTask = ref('');    return {
      tasks,
      newTask
    };
  }
};

方法处理功能

方法可以直接定义为普通的 JavaScript 函数：

function addTask() {
  if (newTask.value.trim()) {
    tasks.value.push({
      id: Date.now(),
      title: newTask.value,
      completed: false
    });
    newTask.value = ''; // 重置输入字段
  }
}

function deleteTask(taskId) {
  tasks.value = tasks.value.filter(task => task.id !== taskId);
}function completeTask(taskId) {
  const task = tasks.value.find(t => t.id === taskId);
  if (task) task.completed = !task.completed;
}

计算属性和观察者

使用 computed 定义派生状态：

import { computed } from 'vue';

const incompleteTasks = computed(() => tasks.value.filter(task => !task.completed));
const completedTasks = computed(() => tasks.value.filter(task => task.completed));

高级用例：状态管理与路由

使用 Pinia 进行状态管理

Pinia 是 Vue 3 的默认状态管理库，其 API 简单易用。以下是一个使用 Pinia 创建状态管理的示例：

import { defineStore } from 'pinia';

export const useMyStore = defineStore({
  id: 'mystore',
  state: () => ({
    someStateValue: ''
  }),
  actions: {
    setSomeStateValue(value) {
      this.someStateValue = value;
    }
  }
});

在组件中使用该状态：

import { useMyStore } from '@/stores/mystore';

export default {
  setup() {
    const store = useMyStore();
    return {
      someStateValue: store.someStateValue
    };
  }
};

使用 Vue Router 进行路由

以下是一个使用 Vue Router 的示例：

import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();    function navigate() {
      router.push({ name: 'BestRouteEver' });
    }    return {
      navigate
    };
  }
};

结论

Composition API 提供了更灵活的代码组织方式，适用于复杂项目的开发，能够提升代码的可读性和可维护性。然而，对于小型项目或新手开发者，Options API 仍然是一个简单易用的选择。

无论选择哪种 API，都可以根据项目需求和团队熟悉程度进行权衡。Vue 3 的灵活性为开发者提供了更多可能性。

原文链接: https://deadsimplechat.com/blog/vue-3-options-api-vs-composition-api/