🧭第3节：Vue 3 Composition API 封装基础
引言
🌟 大家好，我是老曹！在前两节课中，我们学习了组件封装的基础概念以及 Vue 和 React 的组件模型对比。今天我们将深入探讨 Vue 3 的核心特性之一------Composition API。Composition API 是 Vue 3 中引入的一种新的代码组织方式，它通过
setup函数将逻辑与模板分离，使得复杂组件的开发更加灵活和可维护。本节课我们将全面解析setup、ref、reactive、watch、生命周期钩子以及自定义 Hook 的封装方法，并结合实际案例帮助你掌握最佳实践。
🔑 1. setup 函数的核心作用
-
🔹 什么是
setup？
setup是 Vue 3 中用于替代 Options API 的入口函数，所有组件的逻辑都可以在setup中定义。它的主要特点是：- 提供了一个集中管理组件逻辑的地方。
- 支持 TypeScript 类型推断，提升开发体验。
-
🔹 基本用法
在
setup中，我们可以通过返回值将数据、方法等暴露给模板使用。-
示例代码
html<template> <div> <p>{{ count }}</p> <button @click="increment">增加</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const count = ref(0); const increment = () => { count.value++; }; return { count, increment }; } }; </script>
-
-
🔹 最佳实践
- 在
setup中尽量避免直接操作 DOM，保持逻辑的纯度。 - 使用 TypeScript 定义接口或类型，增强代码的可读性和健壮性。
- 在
📌 2. ref 和 reactive 的区别与使用
2.1 ref 的特点
-
🔹 核心思想
ref是一个用于创建响应式数据的函数，适用于单个值（如数字、字符串）或简单的对象。 -
🔹 使用场景
-
当需要处理基本类型的响应式数据时，优先使用
ref。 -
访问
ref的值时，需通过.value属性。 -
示例代码
javascriptimport { ref } from 'vue'; const count = ref(0); console.log(count.value); // 输出 0 count.value++; // 更新值
-
2.2 reactive 的特点
-
🔹 核心思想
reactive是一个用于创建响应式对象的函数，适用于复杂的嵌套数据结构。 -
🔹 使用场景
-
当需要处理对象或数组时，优先使用
reactive。 -
不需要通过
.value访问属性。 -
示例代码
javascriptimport { reactive } from 'vue'; const state = reactive({ count: 0 }); console.log(state.count); // 输出 0 state.count++; // 更新值
-
-
🔹 最佳实践
- 对于简单数据，使用
ref；对于复杂数据，使用reactive。 - 避免直接解构
reactive对象，否则会失去响应性。
- 对于简单数据，使用
🦖 3. watch 的使用与优化
-
🔹 核心思想
watch用于监听响应式数据的变化，并执行相应的副作用逻辑。 -
🔹 基本用法
-
监听单个数据。
-
监听多个数据。
-
示例代码
javascriptimport { ref, watch } from 'vue'; const count = ref(0); watch(count, (newValue, oldValue) => { console.log(`count 从 ${oldValue} 变为 ${newValue}`); }); count.value++; // 触发监听器
-
-
🔹 最佳实践
- 避免在
watch中执行耗时操作，以免影响性能。 - 使用
immediate: true立即触发回调。 - 使用
deep: true深度监听复杂对象的变化。
- 避免在
🚀 4. 生命周期钩子的迁移与使用
-
🔹 核心思想
Vue 3 中的生命周期钩子被重新设计为组合式 API，通过
onMounted、onUnmounted等函数实现。 -
🔹 常用钩子
-
onMounted：组件挂载完成后执行。 -
onUnmounted：组件卸载时执行。 -
onUpdated：组件更新时执行。 -
示例代码
javascriptimport { onMounted, onUnmounted } from 'vue'; onMounted(() => { console.log('组件已挂载'); }); onUnmounted(() => { console.log('组件已卸载'); });
-
-
🔹 最佳实践
- 将生命周期逻辑封装到独立的函数中，提高复用性。
- 避免在生命周期钩子中直接操作 DOM，优先使用 Vue 提供的指令或工具。
⚡ 5. 自定义 Hook 的封装与使用
-
🔹 核心思想
自定义 Hook 是一种将逻辑提取到独立函数中的方式，类似于 React 的自定义 Hook。通过自定义 Hook，可以显著提升代码的复用性和可维护性。
-
🔹 封装示例
-
创建一个计数器 Hook。
javascriptimport { ref } from 'vue'; export function useCounter(initialValue = 0) { const count = ref(initialValue); const increment = () => { count.value++; }; const decrement = () => { count.value--; }; return { count, increment, decrement }; } -
在组件中使用自定义 Hook。
html<template> <div> <p>{{ count }}</p> <button @click="increment">增加</button> <button @click="decrement">减少</button> </div> </template> <script> import { useCounter } from './useCounter'; export default { setup() { const { count, increment, decrement } = useCounter(10); return { count, increment, decrement }; } }; </script>
-
-
🔹 最佳实践
- 自定义 Hook 的命名应以
use开头，便于识别。 - 将通用逻辑提取到独立的文件中，形成模块化结构。
- 自定义 Hook 的命名应以
🐻 6. 重难点分析
-
🔹 重点
掌握
setup、ref、reactive、watch和生命周期钩子的基本用法，理解自定义 Hook 的设计理念。 -
🔹 难点
- 如何在复杂组件中合理组织逻辑，避免
setup函数过于臃肿。 - 如何在
watch中优化性能，避免不必要的副作用。
- 如何在复杂组件中合理组织逻辑，避免
-
🔹 解决方案
- 使用 TypeScript 明确类型，减少运行时错误。
- 将逻辑拆分为多个小函数或自定义 Hook，提高代码的可读性。
📚 7. 总结
-
🔹 回顾
本节课我们全面解析了 Vue 3 Composition API 的核心特性，包括
setup函数、ref和reactive的使用、watch的优化方法、生命周期钩子的迁移以及自定义 Hook 的封装技巧。这些知识点是构建高效、可维护组件的基础。 -
🔹 展望
下一节课我们将深入探讨如何利用 Composition API 实现复杂的状态管理和跨组件通信。
课后练习
💡 请完成以下任务：
- 使用
ref和reactive分别实现一个计数器组件，比较两者的差异。- 编写一个自定义 Hook，用于监听窗口大小变化，并在组件中展示当前宽度和高度。
希望老曹这节课能为你提供清晰的技术指导！🚀