Vue 3 的 ref 在非组件环境中完全可用，它是纯函数，只需引入 @vue/reactivity 包即可使用；需通过 .value 访问和修改值，并配合 effect 实现响应式副作用追踪。
Vue 3 的 ref 在非组件环境中完全可用，它本身是纯函数，不依赖组件、setup 或模板系统，只要引入了 @vue/reactivity 包就能直接使用。
直接导入并创建 ref 实例
ref 来自 @vue/reactivity，不是 vue 全量包的专属 API。在普通 JS 环境（如浏览器控制台、Node.js 脚本、CMS 插件逻辑）中可这样用：
- 安装依赖：
npm install @vue/reactivity - 导入使用：
import { ref } from '@vue/reactivity' - 创建响应式变量：
const count = ref(0)，后续通过count.value读写 - 值变更会触发依赖它的副作用（需配合
effect手动追踪）
搭配 effect 实现自动响应
没有组件上下文时，Vue 不会自动渲染或更新 DOM，但你可以用 effect 主动建立响应式关联：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
import { ref, effect } from '@vue/reactivity'- 定义数据：
const message = ref('Hello') - 定义副作用：
effect(() => console.log('当前消息：', message.value)) - 修改数据：
message.value = 'World'→ 控制台立刻输出新值 - 这种模式适合做状态监听、日志同步、表单联动等轻量响应逻辑
注意 ref 在 JS 中必须带 .value
无论环境是否为组件，ref 在 JavaScript 代码中始终是对象，访问和赋值都必须显式使用 .value：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
count.value++、user.value.name = 'Alice' - ❌ 错误：
count++（只是操作数字字面量，不触发响应）、user.name = 'Alice'（user是 ref 对象，不是原始对象） - 即使你用
ref({})包裹对象，也要先取.value才能当普通对象操作
与 reactive 的协同使用场景
在非组件环境中，ref 和 reactive 可混合使用，各取所长：
- 用
ref管理基础类型或需要被解构/传递的独立值（如开关状态const loading = ref(false)） - 用
reactive管理结构较深的对象或数组（如表单数据const form = reactive({ name: '', email: '' })） - 两者都能被
effect追踪，且可互相嵌套（ref(reactive({...}))合法，但通常没必要） - 避免对
reactive对象做解构（const { name } = user），否则丢失响应性；若需解构，改用toRefs(user)（需从@vue/reactivity导入）
