前言
Vue 3 的引入带来了许多新的特性，其中最为显著的便是 Composition API。虽然 Vue 3 对于许多新项目来说是一个理想的选择，但许多现有项目仍运行在 Vue 2 上。为了让这些项目也能享受到 Composition API 带来的优势，Vue 官方提供了 @vue/composition-api 插件，使得 Vue 2 用户也能轻松上手这项新功能。
本文将详细介绍如何在 Vue 2 项目中使用 Composition API，从插件的安装配置，到具体的使用方法，并通过多个实例展示其强大的功能和灵活的用法，旨在帮助开发者更好地组织和管理 Vue 组件的逻辑。
什么是 Composition API？
在了解如何在 Vue 2 中使用 Composition API 之前，我们先来快速了解一下它是什么。简单来说，Composition API 是一种新的方式来组织 Vue 组件的逻辑。相比于 Vue 2 中的选项式 API（Options API），Composition API 更加灵活和模块化，允许我们在一个地方集中处理相关逻辑，从而提高代码的可读性和可维护性。
使用步骤
1. 安装 Composition API 插件
首先，我们需要安装 @vue/composition-api 插件。打开终端，在你的 Vue 2 项目根目录下运行以下命令：
npm install @vue/composition-api --save
安装完成后，在你的 main.js 文件中引入并使用这个插件：
import Vue from 'vue';
import App from './App.vue';
import VueCompositionAPI from '@vue/composition-api';Vue.config.productionTip = false;Vue.use(VueCompositionAPI);new Vue({render: h => h(App),
}).$mount('#app');
2. 创建一个简单的组件
安装并配置好插件后，我们就可以开始在 Vue 2 中使用 Composition API 了。下面我们通过创建一个简单的计数器组件来演示如何使用 Composition API。
首先，我们在 components 文件夹下创建一个名为 Counter.vue 的文件：
<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from '@vue/composition-api';export default {setup() {// 定义一个响应式变量const count = ref(0);// 定义一个方法来增加计数const increment = () => {count.value++;};// 返回模板中需要使用的变量和方法return {count,increment,};}
};
</script>
在这个例子中，我们使用了 ref 来定义一个响应式变量 count，并定义了一个方法 increment 来增加计数。我们将这两个变量和方法返回，以便在模板中使用。
3. 使用组件
接下来，我们在 App.vue 中使用这个组件：
<template><div id="app"><Counter /></div>
</template><script>
import Counter from './components/Counter.vue';export default {components: {Counter,}
};
</script>
这样，我们就成功地在 Vue 2 项目中使用了 Composition API 创建的组件。
优化扩展
接下来，我们将展示一些更高级的用法和优化方法，以帮助你更好地掌握 Composition API。
使用 watch 监听数据变化
有时候我们需要在数据发生变化时执行某些操作，这时可以使用 watch。我们将在计数器达到某个值时触发一个提醒。
首先，在 Counter.vue 中引入 watch：
import { ref, watch } from '@vue/composition-api';
然后，我们在 setup 函数中添加 watch 逻辑：
setup() {const count = ref(0);const increment = () => {count.value++;};// 监听 count 的变化watch(count, (newCount) => {if (newCount === 5) {alert('Count reached 5!');}});return {count,increment,};
}
现在，当 count 的值达到 5 时，浏览器将弹出一个提醒。
使用 computed 计算属性
有时候我们需要基于某些响应式数据计算出一个新的值，computed 可以帮助我们实现这一点。我们将基于 count 的值来计算是否为偶数。
首先，在 Counter.vue 中引入 computed：
import { ref, computed, watch } from '@vue/composition-api';
然后，我们在 setup 函数中添加 computed 逻辑：
setup() {const count = ref(0);const increment = () => {count.value++;};// 监听 count 的变化watch(count, (newCount) => {if (newCount === 5) {alert('Count reached 5!');}});// 计算 count 是否为偶数const isEven = computed(() => {return count.value % 2 === 0;});return {count,increment,isEven,};
}
在模板中使用 isEven：
<template><div><p>Count: {{ count }}</p><p>{{ isEven ? 'Even' : 'Odd' }}</p><button @click="increment">Increment</button></div>
</template>
现在，当 count 发生变化时，页面上会显示它是偶数还是奇数。
组合逻辑
Composition API 的一个强大之处在于可以将逻辑拆分成更小的可复用函数。我们将计数器逻辑抽取出一个独立的函数 useCounter。
创建一个 useCounter.js 文件：
import { ref, watch, computed } from '@vue/composition-api';export function useCounter() {const count = ref(0);const increment = () => {count.value++;};watch(count, (newCount) => {if (newCount === 5) {alert('Count reached 5!');}});const isEven = computed(() => {return count.value % 2 === 0;});return {count,increment,isEven,};
}
在 Counter.vue 中使用 useCounter：
import { useCounter } from '../useCounter';export default {setup() {const { count, increment, isEven } = useCounter();return {count,increment,isEven,};}
};
这样，我们就把计数器的逻辑提取到了 useCounter 中，使得代码更加模块化和可复用。
实战经验
在实际项目中，使用 Composition API 可以让复杂组件变得更加清晰和易于维护。接下来，我们将展示如何在一个稍微复杂一点的场景中应用 Composition API。
示例：Todo 应用
我们将创建一个简单的 Todo 应用，包含添加、删除和标记任务完成的功能。这个例子将展示如何组织状态、方法和计算属性。
创建 useTodos 逻辑
首先，我们创建一个 useTodos.js 文件来管理 Todo 应用的核心逻辑：
import { ref, computed } from '@vue/composition-api';export function useTodos() {const todos = ref([]);const newTodo = ref('');const addTodo = () => {if (newTodo.value.trim() !== '') {todos.value.push({text: newTodo.value,completed: false,});newTodo.value = '';}};const toggleTodo = (index) => {todos.value[index].completed = !todos.value[index].completed;};const deleteTodo = (index) => {todos.value.splice(index, 1);};const remainingTodos = computed(() => {return todos.value.filter(todo => !todo.completed).length;});return {todos,newTodo,addTodo,toggleTodo,deleteTodo,remainingTodos,};
}
创建 TodoApp 组件
接下来，我们使用 useTodos 来创建 Todo 组件。新建一个 components/TodoApp.vue 文件：
<template><div><h1>Todo List</h1><input v-model="newTodo" @keyup.enter="addTodo" placeholder="What needs to be done?"><ul><li v-for="(todo, index) in todos" :key="index"><span :style="{ textDecoration: todo.completed ? 'line-through' : 'none' }">{{ todo.text }}</span><button @click="toggleTodo(index)">Toggle</button><button @click="deleteTodo(index)">Delete</button></li></ul><p>{{ remainingTodos }} remaining</p></div>
</template><script>
import { useTodos } from '../useTodos';export default {setup() {const { todos, newTodo, addTodo, toggleTodo, deleteTodo, remainingTodos } = useTodos();return {todos,newTodo,addTodo,toggleTodo,deleteTodo,remainingTodos,};}
};
</script>
在这个组件中，我们使用 useTodos 提供的状态和方法来创建一个功能齐全的 Todo 应用。
在主应用中使用 TodoApp 组件
最后，我们在 App.vue 中使用 TodoApp 组件：
<template><div id="app"><TodoApp /></div>
</template><script>
import TodoApp from './components/TodoApp.vue';export default {components: {TodoApp,}
};
</script>
进阶方法
1. 模块化逻辑
一个项目可能会变得非常复杂，我们可以进一步模块化逻辑。例如，为了管理不同的状态和功能，可以使用多个 use* 函数：
import { ref, computed } from '@vue/composition-api';export function useTodos() {const todos = ref([]);const newTodo = ref('');const addTodo = () => {if (newTodo.value.trim() !== '') {todos.value.push({text: newTodo.value,completed: false,});newTodo.value = '';}};const toggleTodo = (index) => {todos.value[index].completed = !todos.value[index].completed;};const deleteTodo = (index) => {todos.value.splice(index, 1);};return {todos,newTodo,addTodo,toggleTodo,deleteTodo,};
}export function useRemainingTodos(todos) {const remainingTodos = computed(() => {return todos.value.filter(todo => !todo.completed).length;});return {remainingTodos,};
}
在组件中：
import { useTodos, useRemainingTodos } from '../useTodos';export default {setup() {const { todos, newTodo, addTodo, toggleTodo, deleteTodo } = useTodos();const { remainingTodos } = useRemainingTodos(todos);return {todos,newTodo,addTodo,toggleTodo,deleteTodo,remainingTodos,};}
};
2. 使用 Vuex 结合 Composition API
如果你的应用非常复杂且需要使用 Vuex 管理状态，你可以在 Vuex 的动作和状态中使用 Composition API。
例如：
import Vue from 'vue';
import Vuex from 'vuex';
import { ref, computed } from '@vue/composition-api';Vue.use(Vuex);const store = new Vuex.Store({state: {todos: [],},mutations: {addTodo (state, todo) {state.todos.push(todo);},toggleTodo (state, index) {state.todos[index].completed = !state.todos[index].completed;},deleteTodo (state, index) {state.todos.splice(index, 1);},},
});export function useStore() {const todos = computed(() => store.state.todos);const newTodo = ref('');const addTodo = () => {if (newTodo.value.trim() !== '') {store.commit('addTodo', { text: newTodo.value, completed: false });newTodo.value = '';}};const toggleTodo = (index) => {store.commit('toggleTodo', index);};const deleteTodo = (index) => {store.commit('deleteTodo', index);};const remainingTodos = computed(() => {return store.state.todos.filter(todo => !todo.completed).length;});return {todos,newTodo,addTodo,toggleTodo,deleteTodo,remainingTodos,};
}
总结
通过本文的学习，我们深入了解了如何在 Vue 2 项目中使用 Composition API。我们从基础的插件安装与配置开始，逐步探讨了如何利用 Composition API 创建和组织组件逻辑，并通过具体的 Todo 应用实例展示了其在实际项目中的应用。我们还讨论了如何将逻辑模块化以及在 Vuex 状态管理中结合使用 Composition API，从而进一步提升代码的可维护性和可扩展性。