Vue 3 响应式 API 可独立于组件在任意 JS 环境使用：Node.js 安装 @vue/reactivity，浏览器通过 CDN 引入，ESM 项目按需导入；ref 适用于基础类型（需 .value），reactive 适用于对象/数组（直接访问属性但解构失响应）；effect 自动追踪执行，watch 适合需清理逻辑的场景；须避免直接添加属性、索引赋值等非响应式操作。
Vue 3 的响应式核心（ref、reactive、watch、effect 等）完全独立于组件系统，可在任意 JavaScript 环境中直接使用，无需 .vue 文件、setup 或挂载逻辑。
纯 JS 环境中直接调用响应式 API
只要能导入或访问 Vue 的响应式模块，就能创建和追踪响应式状态：
-
Node.js 中：安装
@vue/reactivity（更轻量）或vue，然后解构使用 -
浏览器普通脚本中：通过 CDN 引入 Vue 全局版本（如
vue.global.prod.js），全局变量Vue下可直接取ref、effect、watch等 -
ESM 项目中：按需导入
import { ref, reactive, watch } from 'vue'或from '@vue/reactivity'
ref 和 reactive 的正确用法与区别
两者都返回可被追踪的响应式数据，但适用场景不同：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
-
ref(0)适合基础类型（数字、字符串、布尔）；读写必须用.value，模板中自动解包 -
reactive({ name: 'Alice' })仅接受对象/数组；属性可直接访问（user.name），但解构会丢失响应性（const { name } = user不响应） -
ref也支持传入对象，内部会自动转为reactive，因此ref({})和reactive({})在行为上基本一致，只是访问方式不同
手动触发副作用：effect 和 watch
在非组件上下文中，effect（Vue 3.4+ 中 watchEffect 的新名）是最简洁的响应式执行入口：
立即学习“前端免费学习笔记（深入）”；
-
effect(() => console.log('count is', count.value))会在count变化时自动重跑 -
watch(count, (n) => {...})更适合有明确触发时机或需要清理逻辑的场景 - 注意：
watch依赖当前 active effect，若不在setup或effect内部调用，需确保已有响应式上下文，否则不会建立依赖
避开常见响应式陷阱
即使脱离组件，Vue 响应式机制的底层限制依然存在：
- 向
reactive对象添加新属性（如obj.newKey = val）不会触发更新，应使用Object.assign(reactive({}), obj, { newKey: val })或替换整个对象 - 数组索引赋值（
arr[0] = x）或修改length不响应，优先用arr.splice()、push()、pop()等变异方法 - 初始未定义的字段，后续无论怎么赋值都不会变响应——务必在创建时声明完整结构
