Vue是基于JavaScript的渐进式框架，其响应式系统通过Proxy（Vue 3）或Object.defineProperty（Vue 2）实现自动依赖追踪与视图更新，需用ref()或reactive()包装数据才能启用响应式。
Vue 不是 JavaScript 的一个“功能”，而是基于 JavaScript 构建的渐进式前端框架；响应式不是靠手动刷新实现的，而是靠 Vue 的响应式系统自动追踪依赖并更新视图。
Vue 响应式原理靠的是 Proxy（Vue 3）或 Object.defineProperty（Vue 2）
Vue 会把 data 选项或 setup() 中用 ref()、reactive() 定义的数据包装成响应式对象。一旦这些数据被读取（getter）或修改（setter），Vue 就能捕获并
- Vue 2 只能劫持已存在的属性，动态新增属性不会触发更新，需用
Vue.set()或this.$set() - Vue 3 的
Proxy支持数组索引赋值、length修改、新增属性等全部操作，但不支持 IE - 原始 JS 对象（如直接写
const obj = {}）没有响应性，必须经过reactive()或ref()处理
ref() 和 reactive() 怎么选？
二者都创建响应式数据，但适用场景不同：
-
ref()适合基础类型（string、number、boolean）和需要在模板中解包使用的值；在setup()中使用时必须用.value赋值/读取 -
reactive()只接受对象，返回的是代理对象，不能直接赋值替换（如state = {}会丢失响应性），适合结构较深的状态对象 - 模板中使用
ref无需.value，Vue 会自动解包；但reactive的属性访问仍是普通点语法
const count = ref(0)
const state = reactive({ name: 'Alice', age: 30 })
// ✅ 正确
count.value++
state.name = 'Bob'
// ❌ 错误：这会让 state 失去响应性
state = { name: 'Charlie' }
为什么改了数据，视图没更新？常见漏点
这不是 Vue “失效”了，大概率是绕过了响应式系统：
- 直接给响应式对象添加新属性（
state.newField = 'xxx'）→ Vue 3 允许，Vue 2 需用Vue.set(state, 'newField', 'xxx') - 用数组原生方法如
arr.length = 0或arr[10] = 'x'→ 应改用arr.splice(0)或arr.push()等 Vue 包装过的方法（Vue 2），Vue 3 中Proxy已支持大部分操作 - 解构响应式对象（
const { name } = state）→ 解构后变量脱离响应式，后续修改无效 - 在
setTimeout、Promise.then等异步回调里修改数据，但忘记确保修改发生在当前组件实例有效期内（比如组件已卸载）
响应式不是万能的——哪些情况要手动控制？
Vue 的响应式系统有边界，复杂逻辑仍需开发者干预：
- 第三方库创建的对象（如
Map、Set、Canvas 上下文、WebSocket 实例）不会被自动代理，需用shallowRef或markRaw()显式标记 - 大量数据实时更新（如每秒 60 次的传感器值）建议用
shallowRef+ 手动triggerRef()控制更新时机，避免过度重渲染 - 深层嵌套对象若只读不常变，可用
readonly()防止意外修改，也提升调试可预测性
响应式的核心价值在于“声明数据如何变”，而不是“让一切自动动起来”。真正难的，是判断什么时候该让 Vue 动，什么时候该自己管。
