Vue.js响应式基于Object.defineProperty（Vue 2）或Proxy（Vue 3）劫持读写；Vue 2需Vue.set新增属性，Vue 3 Proxy全面支持数组、Map等且无需set，ref/reactive分工保障类型安全与解构可用性。
Vue.js 的响应式数据绑定不是靠轮询或脏检查，而是通过 JavaScript 的 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据的读取和修改过程，自动触发视图更新。
Vue 2 中的 Object.defineProperty 是怎么用的
Vue 2 把 data 对象的每个属性都用 Object.defineProperty 重新定义，为它们添加 getter 和 setter：
-
getter被读取时，会把当前正在执行的渲染函数（Watcher）收集为依赖 -
setter被触发时，会通知所有已收集的 Watcher 重新求值，从而更新 DOM - 这个机制只对初始化时就存在的属性生效；新增属性默认不响应，需用
Vue.set()或this.$set()
例如，直接写 this.newProp = 'hello' 不会触发更新，但 this.$set(this, 'newProp', 'hello') 可以。
Vue 3 的 Proxy 带来了哪些实际变化
Proxy 替代 Object.defineProperty 后，响应式能力更完整：
立即学习“前端免费学习笔记（深入）”；
- 支持数组索引赋值（
arr[0] = 1）、length修改、新增/删除属性，全部自动响应 - 能监听
Map、Set、WeakMap等原生集合类型（Vue 2 完全不支持） - 不再需要
Vue.set，也不再有“初始化后无法响应新属性”的限制 - 但
Proxy无法被 polyfill，所以 Vue 3 不支持 IE
const state = reactive({ count: 0 });
state.count++; // 触发更新
state.list = [1, 2]; // 新增属性，也响应
state.list.push(3); // 数组方法调用，同样响应
为什么 ref() 和 reactive() 要分开设计
这是为了覆盖不同使用场景下的类型安全与语法便利性：
-
reactive()接收对象，返回响应式代理，但不能直接解构（解构后失去响应性） -
ref()可包装任意类型（包括原始值），暴露.value属性，适合在组合式 API 中配合解构、传参、逻辑复用 - 模板中使用
ref时可省略.value（Vue 自动展开），但 JS 逻辑里必须显式写
常见错误：在 setup() 里解构 reactive 对象后赋值，比如 const { name } = reactive({ name: 'Alice' }); name = 'Bob' —— 这不会触发更新。
响应式失效的典型场景和绕过方式
即使用了 ref 或 reactive，以下情况仍会丢失响应性：
- 用解构、展开运算符（
{...obj}）、Object.assign复制响应式对象 → 得到的是普通对象 - 将响应式对象作为参数传入普通函数，且该函数内部直接赋值（未通过
.value或set） - 异步回调中修改响应式数据，但回调没在组件实例或
setup()作用域内（比如全局定时器、第三方 SDK 回调）
绕过方式：始终通过原始引用操作（如 state.count++），或用 toRaw() + markRaw() 显式排除某些对象进入响应式系统（比如大型不可变数据或 DOM 元素）。
真正难的不是理解“谁变了谁更新”，而是搞清什么时候引用断了、什么时候代理丢了、什么时候 Vue 根本没机会拦截——这些地方一错，控制台安静得可怕，但界面就是不动。
