【前端组件封装教程】第3节：Vue 3 Composition API 封装基础

🧭第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 属性。
- 示例代码
  javascript 复制代码
```
import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出 0
count.value++; // 更新值
```

2.2 `reactive` 的特点

🔹 核心思想
reactive 是一个用于创建响应式对象的函数，适用于复杂的嵌套数据结构。
🔹 使用场景
- 当需要处理对象或数组时，优先使用 reactive。
- 不需要通过 .value 访问属性。
- 示例代码
  javascript 复制代码
```
import { reactive } from 'vue';

const state = reactive({ count: 0 });
console.log(state.count); // 输出 0
state.count++; // 更新值
```
🔹 最佳实践
- 对于简单数据，使用 ref；对于复杂数据，使用 reactive。
- 避免直接解构 reactive 对象，否则会失去响应性。

🦖 3. `watch` 的使用与优化

🔹 核心思想
watch 用于监听响应式数据的变化，并执行相应的副作用逻辑。

🔹 基本用法

监听单个数据。
监听多个数据。

示例代码

javascript 复制代码

import { 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：组件更新时执行。
- 示例代码
  javascript 复制代码
```
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});

onUnmounted(() => {
  console.log('组件已卸载');
});
```
🔹 最佳实践
- 将生命周期逻辑封装到独立的函数中，提高复用性。
- 避免在生命周期钩子中直接操作 DOM，优先使用 Vue 提供的指令或工具。

⚡ 5. 自定义 Hook 的封装与使用

🔹 核心思想

自定义 Hook 是一种将逻辑提取到独立函数中的方式，类似于 React 的自定义 Hook。通过自定义 Hook，可以显著提升代码的复用性和可维护性。

🔹 封装示例

创建一个计数器 Hook。

javascript 复制代码

import { 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 开头，便于识别。
- 将通用逻辑提取到独立的文件中，形成模块化结构。

🐻 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，用于监听窗口大小变化，并在组件中展示当前宽度和高度。

希望老曹这节课能为你提供清晰的技术指导！🚀

【前端组件封装教程】第3节：Vue 3 Composition API 封装基础

🧭第3节：Vue 3 Composition API 封装基础

🔑 1. setup 函数的核心作用

📌 2. ref 和 reactive 的区别与使用

2.1 ref 的特点

2.2 reactive 的特点

🦖 3. watch 的使用与优化

🚀 4. 生命周期钩子的迁移与使用

⚡ 5. 自定义 Hook 的封装与使用

🐻 6. 重难点分析

📚 7. 总结

🔑 1. `setup` 函数的核心作用

📌 2. `ref` 和 `reactive` 的区别与使用

2.1 `ref` 的特点

2.2 `reactive` 的特点

🦖 3. `watch` 的使用与优化