【JS】深度揭秘！Vue3 Composition API全面教程与实战案例，助你轻松把握前 ...

随着前端技能的不停发展，组件化编程已经成为主流。在 Vue2 中，Options API 的方式虽然直观，但在大型应用中轻易导致代码冗余和逻辑分散。而 Vue3 引入的 Composition API 则提供了一种更灵活、高效的组件逻辑组织方式，使得代码更易于维护和复用。那么，Composition API 究竟有哪些优势？如何在现实项目中应用呢？让我们一起深入探究！
更多实用工具

【OpenAI】获取OpenAI API Key的多种方式全攻略：从入门到精通，再到详解教程！！
【VScode】VSCode中的智能AI-GPT编程利器，全面揭秘ChatMoss & ChatGPT中文版
【GPT-o1系列模型！支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！】>>>点击跳转 - CodeMoss & ChatGPT-AI中文版

什么是 Composition API

Composition API 是 Vue3 引入的一组新的 API，用于组织和复用组件逻辑。与传统的 Options API（如 data、methods、computed 等）不同，Composition API 通过函数式的方式将相关的逻辑组合在一起，使代码更具可读性和可维护性。
主要特点包罗：

• 逻辑复用更便捷：通过组合函数（Composable Functions），可以轻松复用和共享逻辑。
  
• 代码组织更清晰：将相关的状态和行为放在同一个函数中，减少了逻辑分散的问题。
  
• TypeScript 更友好：更好地支持范例推导，提升开发体验。
  

Composition API 与 Options API 的对比

在 Vue2 中，Options API 是主要的组件定义方式，使用 data、methods、computed 等选项来组织组件逻辑。然而，随着组件规模增大，Options API 的代码轻易变得痴肥，逻辑分散难以维护。
特性Options APIComposition API逻辑复用通过 mixins 或高阶组件实现，较为复杂通过组合函数实现，简洁直观代码组织按选项组织（data、methods 等）按功能组织，逻辑更聚焦TypeScript 支持限定较多，范例推导困难更加友好，范例推导更精准可读性简单组件易读，复杂组件易乱无论组件大小，都保持良好可读性 Composition API 的核心概念

要全面把握 Composition API，起首需要理解其核心概念和根本用法。下面，我们将逐一解析这些关键点。
Setup 函数

setup 函数是 Composition API 的入口，用于替换 Options API 中的 data、methods 等选项。setup 在组件创建之前执行，是一个用于定义组件逻辑的地方。
示例：

1. <template>
2.   <div>
3.     <p>{{ count }}</p>
4.     <button @click="increment">增加</button>
5.   </div>
6. </template>
8. <script>
9. import { ref } from 'vue'
11. export default {
12.   setup() {
13.     const count = ref(0)
14.     const increment = () => {
15.       count.value++
16.     }
17.     return {
18.       count,
19.       increment
20.     }
21.   }
22. }
23. </script>

复制代码

响应式数据：ref 和 reactive

响应式是 Vue 的核心特性之一。Composition API 提供了 ref 和 reactive 两种方式来定义响应式数据。

• ref：用于创建根本范例的响应式数据。
  
• reactive：用于创建对象或数组的响应式数据。
  

示例：

1. import { ref, reactive } from 'vue'
3. // 使用 ref 创建响应式基本类型
4. const count = ref(0)
6. // 使用 reactive 创建响应式对象
7. const user = reactive({
8.   name: '张三',
9.   age: 25
10. })

复制代码

盘算属性和侦听器：computed 和 watch

computed 用于创建盘算属性，基于其他响应式数据自动盘算其值，并在依靠变化时自动更新。watch 则用于侦听响应式数据的变化，并在变化时执行回调函数。

示例：

1. import { ref, computed, watch } from 'vue'
3. const count = ref(0)
5. // 计算属性
6. const doubleCount = computed(() => count.value * 2)
8. // 侦听器
9. watch(count, (newVal, oldVal) => {
10.   console.log(`count 从 ${oldVal} 变为 ${newVal}`)
11. })

复制代码

生命周期钩子

Composition API 提供了一系列生命周期钩子，如 onMounted、onUnmounted 等，用于在组件的不同生命周期阶段执行相应的逻辑。
示例：

1. import { onMounted, onUnmounted } from 'vue'
3. export default {
4.   setup() {
5.     onMounted(() => {
6.       console.log('组件已挂载')
7.     })
8.    
9.     onUnmounted(() => {
10.       console.log('组件已卸载')
11.     })
12.   }
13. }

复制代码

实战案例：使用 Composition API 开发 Todo 应用

通过一个现实的应用案例，我们将全面展示如何使用 Composition API 开发一个简单的 Todo 应用。这不仅可以大概资助你理解 Composition API 的根本用法，还能让你看到其在现实项目中的强大之处。
项目结构

为了保持项目的清晰和可维护性，我们将采用以下的项目结构：

1. src/
2. |-- components/
3. |   |-- TodoList.vue
4. |   |-- TodoItem.vue
5. |-- composables/
6. |   |-- useTodos.js
7. |-- App.vue
8. |-- main.js

复制代码

实现步调

创建响应式数据

起首，我们需要定义 Todo 项目的数据结构，并创建响应式的数据源。在 composables 目录下创建 useTodos.js，用于管理 Todo 相关的逻辑。

1. // src/composables/useTodos.js
2. import { ref, computed } from 'vue'
4. export function useTodos() {
5.   const todos = ref([
6.     { id: 1, text: '学习 Vue3', completed: false },
7.     { id: 2, text: '编写 Composition API 教程', completed: false }
8.   ])
10.   const newTodo = ref('')
12.   const addTodo = () => {
13.     if (newTodo.value.trim()) {
14.       todos.value.push({
15.         id: Date.now(),
16.         text: newTodo.value,
17.         completed: false
18.       })
19.       newTodo.value = ''
20.     }
21.   }
23.   const removeTodo = (id) => {
24.     todos.value = todos.value.filter(todo => todo.id !== id)
25.   }
27.   const completedCount = computed(() => {
28.     return todos.value.filter(todo => todo.completed).length
29.   })
31.   const totalCount = computed(() => todos.value.length)
33.   return {
34.     todos,
35.     newTodo,
36.     addTodo,
37.     removeTodo,
38.     completedCount,
39.     totalCount
40.   }
41. }

复制代码

添加和删除 Todo

在 TodoList.vue 中，我们将使用 useTodos 组合函数，来管理 Todo 项目的添加和删除逻辑。

1. <!-- src/components/TodoList.vue -->
2. <template>
3.   <div>
4.     <h2>我的 Todo 列表</h2>
5.     <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新的 Todo" />
6.     <button @click="addTodo">添加</button>
7.     <ul>
8.       <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" @remove="removeTodo" />
9.     </ul>
10.     <p>已完成：{{ completedCount }}/总数：{{ totalCount }}</p>
11.   </div>
12. </template>
14. <script>
15. import { useTodos } from '../composables/useTodos'
16. import TodoItem from './TodoItem.vue'
18. export default {
19.   components: { TodoItem },
20.   setup() {
21.     const { todos, newTodo, addTodo, removeTodo, completedCount, totalCount } = useTodos()
22.     return { todos, newTodo, addTodo, removeTodo, completedCount, totalCount }
23.   }
24. }
25. </script>

复制代码

过滤和盘算功能

在 useTodos.js 中，我们已经实现了 completedCount 和 totalCount 这两个盘算属性，用于统计已完成的 Todo 数量和总数量。在 TodoList.vue 中，我们展示了这些统计数据。
代码详解

通过上述步调，我们已经开端构建了一个功能完备的 Todo 应用。下面，我们将深入解析其中的关键代码，了解 Composition API 如何让代码更简洁、高效。
组合函数：useTodos.js

组合函数 useTodos 封装了全部与 Todo 相关的逻辑，包罗数据的管理、添加和删除功能、以及统计盘算。这种封装方式使得逻辑高度聚合，易于维护和复用。

1. import { ref, computed } from 'vue'
3. export function useTodos() {
4.   const todos = ref([
5.     { id: 1, text: '学习 Vue3', completed: false },
6.     { id: 2, text: '编写 Composition API 教程', completed: false }
7.   ])
9.   const newTodo = ref('')
11.   const addTodo = () => {
12.     if (newTodo.value.trim()) {
13.       todos.value.push({
14.         id: Date.now(),
15.         text: newTodo.value,
16.         completed: false
17.       })
18.       newTodo.value = ''
19.     }
20.   }
22.   const removeTodo = (id) => {
23.     todos.value = todos.value.filter(todo => todo.id !== id)
24.   }
26.   const completedCount = computed(() => {
27.     return todos.value.filter(todo => todo.completed).length
28.   })
30.   const totalCount = computed(() => todos.value.length)
32.   return {
33.     todos,
34.     newTodo,
35.     addTodo,
36.     removeTodo,
37.     completedCount,
38.     totalCount
39.   }
40. }

复制代码

关键点解析：

• 响应式数据定义：使用 ref 创建 todos 和 newTodo，确保它们的变化可以大概触发视图更新。
  
• 添加 Todo：addTodo 方法查抄输入内容是否为空，制止添加空的 Todo 项目。
  
• 删除 Todo：removeTodo 方法通过过滤掉指定 ID 的 Todo 项目实现删除功能。
  
• 盘算属性：completedCount 和 totalCount 使用 computed 来自动盘算已完成的数量和总数量，制止手动管理状态。
  

组件中的组合函数应用

在 TodoList.vue 中，通过调用 useTodos，我们将全部的逻辑和数据引入组件，使得组件本身保持简洁，只负责展示和用户交互。

1. import { useTodos } from '../composables/useTodos'
3. export default {
4.   setup() {
5.     const { todos, newTodo, addTodo, removeTodo, completedCount, totalCount } = useTodos()
6.     return { todos, newTodo, addTodo, removeTodo, completedCount, totalCount }
7.   }
8. }

复制代码

这种方式不仅提高了代码的复用性，还使得组件逻辑更加清晰，便于测试和维护。
Composition API 的高级用法

把握了根本的 Composition API 用法后，我们可以进一步探索其高级特性，提升开发效率。
自定义组合函数（Composable）

组合函数是 Composition API 的核心概念，通过将相关的逻辑封装在一个函数中，实现逻辑的复用和模块化。
示例：
假设我们有多个组件需要使用表单验证逻辑，我们可以创建一个组合函数 useFormValidation 来复用这部分逻辑。

1. // src/composables/useFormValidation.js
2. import { ref, computed } from 'vue'
4. export function useFormValidation() {
5.   const form = ref({
6.     username: '',
7.     email: ''
8.   })
10.   const errors = ref({})
12.   const validate = () => {
13.     errors.value = {}
14.     if (!form.value.username) {
15.       errors.value.username = '用户名不能为空'
16.     }
17.     if (!form.value.email) {
18.       errors.value.email = '邮箱不能为空'
19.     } else if (!/\S+@\S+\.\S+/.test(form.value.email)) {
20.       errors.value.email = '邮箱格式不正确'
21.     }
22.     return Object.keys(errors.value).length === 0
23.   }
25.   return {
26.     form,
27.     errors,
28.     validate
29.   }
30. }

复制代码

在组件中使用：

1. <script>
2. import { useFormValidation } from '../composables/useFormValidation'
4. export default {
5.   setup() {
6.     const { form, errors, validate } = useFormValidation()
8.     const submit = () => {
9.       if (validate()) {
10.         // 提交逻辑
11.       }
12.     }
14.     return { form, errors, submit }
15.   }
16. }
17. </script>

复制代码

依靠注入：provide 和 inject

provide 和 inject 允许组件在层级结构中共享依靠，而无需通过 props 或事件传递。这在大型应用中非常有效，特别是在需要跨多个层级传递数据时。
示例：

1. // 父组件
2. import { provide, ref } from 'vue'
4. export default {
5.   setup() {
6.     const appName = ref('我的应用')
7.     provide('appName', appName)
8.   }
9. }
11. // 子组件
12. import { inject } from 'vue'
14. export default {
15.   setup() {
16.     const appName = inject('appName')
17.     return { appName }
18.   }
19. }

复制代码

最佳实践与性能优化

应用 Composition API 时，遵循一些最佳实践不仅能提升代码质量，还能优化应用性能。
组织和复用代码

• 组合函数模块化：将相关逻辑封装在独立的组合函数中，提升代码的可复用性和可维护性。
  
• 制止过分抽象：虽然组合函数可以复用逻辑，但过分抽象可能导致代码难以理解，应在复用性和可读性之间找到均衡。
  

制止不须要的响应式

响应式数据会引入一定的性能开销，特别是在处理大量数据时。因此，合理选择响应式数据的范围和深度非常紧张。

• 使用 shallowRef 和 shallowReactive：在不需要深度响应时，使用浅响应式引用。
  
• 惰性盘算：仅在需要时进行盘算，制止不须要的盘算属性。
  

示例：

1. import { shallowRef } from 'vue'
3. const user = shallowRef({
4.   name: '张三',
5.   age: 25
6. })

复制代码

更多实用工具

【OpenAI】获取OpenAI API Key的多种方式全攻略：从入门到精通，再到详解教程！！
【VScode】VSCode中的智能AI-GPT编程利器，全面揭秘ChatMoss & ChatGPT中文版
【GPT-o1系列模型！支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！】>>>点击跳转 - CodeMoss & ChatGPT-AI中文版

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。