Vue 教程：使用 Vue 的响应式 API 构建非组件化的响应式模块

快速概述

在 Vue 3 中，响应式 API 不仅服务于组件内部，还能脱离组件上下文独立使用，构建非组件化的响应式模块。这类模块适合封装全局状态、业务逻辑或工具函数，让数据变化自动驱动视图更新，无需依赖组件树。前置环境要求是 Node.js 与 Vue 3 项目（通过 vue create 创建），并理解组合式 API 的基本用法。

核心概念与原理

Vue 的核心库专注于视图层，其响应式系统通过依赖追踪实现数据与视图的同步更新。在非组件化场景中，我们利用 ref 创建基础响应式数据，computed 派生计算属性，watch 监听变化并执行副作用。这些 API 在模块顶层调用时，会创建独立的响应式作用域，供多个组件或普通 JavaScript 代码共享。

实战步骤与代码

1. 初始化项目

1. 创建 Vue 3 项目：vue create vue-demo。
2. 进入项目目录：cd vue-demo。
3. 运行 npm run serve 启动开发服务器。

2. 创建响应式模块

新建 src/modules/counter.js，使用组合式 API 封装状态与逻辑：

// 引入响应式 API
import { ref, computed } from 'vue'
// 定义响应式状态 const count = ref(0)
// 派生计算属性 const doubleCount = computed(() => count.value * 2)
// 定义操作方法 function increment() { count.value++ }
// 导出供外部使用 export { count, doubleCount, increment } 

3. 在组件中使用模块

<template>
  <div>
    <p>计数：{{ count }}</p>
    <p>双倍：{{ doubleCount }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
<script setup> import { count, doubleCount, increment } from '../modules/counter' </script> 

该模块可在任意组件中导入，共享同一份响应式状态，实现跨组件数据同步。

常见坑点与优化

• 忘记 .value：在模板中 ref 自动解包，但在 JavaScript 中必须使用 count.value 访问值，否则无法触发响应式更新。
• 模块级副作用：避免在模块顶层执行 watch 的异步回调，防止内存泄漏。建议在组件卸载时手动停止监听。
• 性能优化：对于高频更新的数据，使用 shallowRef 或 markRaw 减少深层响应式开销；computed 会缓存结果，仅在依赖变化时重新计算，适合复杂派生逻辑。
• 命名冲突：多个模块导出同名变量时，使用命名空间导入（如 import * as counter）避免覆盖。

通过以上方式，你可以将 Vue 的响应式能力扩展到组件之外，构建清晰、可测试的业务逻辑层。