vue响应式系统在非组件环境下完全可用，关键在于绕过组件封装直接创建独立响应实例，支持createapp+setup或ref/reactive手动挂载，适用于传统页面增强等轻量场景。
Vue 响应式系统在非组件环境下完全可用，关键在于绕过组件封装，直接创建具备响应能力的独立实例。它不依赖 .vue 文件或 setup 语法糖，而是通过 createApp + setup 选项 或 ref/reactive 配合手动挂载实现，适用于传统页面增强、微前端嵌入、CMS 插件等轻量场景。
用 createApp 创建无组件响应式实例
这是 Vue 3 替代 Vue 2 中 new Vue() 的标准方式，适合直接控制某块 DOM：
- 调用
createApp({ setup() { ... } })，在 setup 中返回响应式数据和方法 - setup 返回的对象属性会自动暴露给模板，无需 .value（仅在 JS 中读写 ref 时需 .value）
- 使用
.mount('#app')挂载到已有元素，Vue 会编译其内部 HTML 作为模板 - 示例中可直接写
{{ count }}，无需{{ count.value }}
单独使用 ref 和 reactive 管理状态
即使不创建应用实例，ref 和 reactive 本身也是纯函数，可在任意 JavaScript 环境中创建响应式数据：
-
ref(1)适合基本类型（数字、字符串、布尔），脚本中读写必须带.value，模板中自动解包 -
reactive({ name: 'Alice' })适合对象，直接访问属性，但解构后会丢失响应性（如const { name } = user不响应） - 两者都可配合
effect（来自@vue/reactivity）实现手动副作用追踪，用于非 Vue 上下文的响应逻辑
处理对象/数组的响应式限制
非组件环境同样面临 Vue 对原生对象和数组的检测限制，需主动规避：
- 向已有响应式对象添加新字段，不能直接赋值
obj.newKey = val，应使用Vue.set(obj, 'newKey', val)或vm.$set（Vue 2）；Vue 3 中推荐用reactive({...obj, newKey: val})替换整个对象 - 数组索引直接赋值（
arr[0] = newVal）或修改 length 不触发更新，应改用arr.splice(0, 1, newVal)或arr.push()等变异方法 - 初始化时未声明的 property 永远不会变响应，务必在 reactive 对象或 ref 初始值中定义完整结构
与 Vue 2 的兼容思路对比
Vue 2 的 new Vue({ data: {...}, methods: {...} }) 是命令式入口，而 Vue 3 的 createApp 更强调配置+挂载分离：
- Vue 2 实例挂载后，data 中所有属性立即响应；Vue 3 需确保 setup 返回值被模板引用，否则不会建立依赖追踪
- Vue 2 支持
vm.$watch手动监听；Vue 3 推荐用watch函数，但它依赖当前 active effect，所以在非 setup 环境需搭配effectScope或显式调用 - CDN 引入时，Vue 3 全局提供
Vue.createApp和Vue.ref，无需额外安装，开箱即用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
