请解释 Vue 框架中响应式变量的概念及其工作原理是怎样的？

回答思路

1. 【回答框架 1】响应式变量是 Vue 数据驱动视图更新的核心，指当数据变化时依赖该数据的视图或计算属性会自动更新。
2. 【回答框架 2】Vue 2 通过 Object.defineProperty 对 data 已有属性做 getter/setter 拦截，在 getter 中收集依赖，在 setter 中触发更新；Vue 3 改用 Proxy 代理整个对象，支持新增删除属性和数组索引变化检测。
3. 【回答框架 3】依赖收集通过全局的依赖追踪机制（如 Dep 和 Watcher）实现，组件渲染 Watcher 会在访问响应式变量时被记录为该属性的订阅者。
4. 【回答框架 4】修改变量时触发 setter 或 Proxy 拦截，通知对应 Watcher 执行更新，从而重渲染组件，实现数据与视图同步。
5. 【关键点 1】响应式变量的核心是依赖收集与派发更新机制
6. 【关键点 2】Vue 2 与 Vue 3 的实现差异：defineProperty vs Proxy
7. 【关键点 3】只有被追踪的依赖变化才会触发视图更新
8. 【易错点 1】Vue 2 中直接新增属性或通过索引修改数组无法触发响应，需用 Vue.set 或重写数组方法
9. 【易错点 2】过度细粒度的响应式可能带来性能开销，需注意大型数据结构的优化