请解释 Vue 中 observable 的概念及其作用机制。
考察说明
考察对 Vue 响应式系统核心 API 的理解。
回答思路
- 【回答框架 1】Vue 的 observable 是响应式系统的底层核心，它接收一个普通对象，并返回该对象的响应式版本。Vue 2 通过 Object.defineProperty 遍历对象属性并重写 getter/setter 来实现依赖收集和变更通知，而 Vue 3 使用 Proxy 代理整个对象，支持动态新增属性和更高效的响应式处理。
- 【回答框架 2】具体机制是，当响应式对象的属性被读取时，会触发 getter，将当前正在执行的副作用（如渲染 watcher 或 computed）收集为该属性的依赖；当属性被修改时，会触发 setter，通知所有依赖执行更新。这样便实现了数据变化自动驱动视图更新。
- 【回答框架 3】在 Vue 2 中，Vue.observable 是全局 API，可直接将对象转为响应式，常用于创建跨组件共享的最小状态管理器；Vue 3 中则对应 reactive API，功能类似但基于 Proxy 实现。两者都要求传入普通对象，并返回新对象。
- 【回答框架 4】使用 observable 时需注意，Vue 2 的 defineProperty 无法检测对象属性的新增或删除，也不支持数组索引直接赋值；Vue 3 的 Proxy 解决了这些问题，但仍需在创建时传入完整的响应式对象，若后续整体替换对象需重新包装。
- 【关键点 1】observable 返回对象的响应式版本，Vue 2 基于 defineProperty，Vue 3 基于 Proxy。
- 【关键点 2】读取属性收集依赖，修改属性触发更新，实现数据驱动视图。
- 【关键点 3】Vue 2 的 Vue.observable 与 Vue 3 的 reactive 功能对应，可用于共享状态。
- 【关键点 4】Vue 2 无法检测属性新增和删除，Vue 3 通过 Proxy 支持。