Vue 进阶面试题, 使用 Object.defineProperty 来进行数据劫持有什么缺点?
Vue 进阶面试题, 使用 Object.defineProperty 来进行数据劫持有什么缺点?
QA
Step 1
Q:: 使用 Object.defineProperty 进行数据劫持的缺点是什么？
A:: 使用 Object.defineProperty 进行数据劫持的主要缺点包括以下几点：
1. **无法监听数组的变化**：Object.defineProperty 只能劫持对象的属性，对数组的操作如 push、pop 等无法监听，需手动对数组方法进行重写。
2. **无法监听新增或删除属性**：对于对象新增或删除的属性，Object.defineProperty 不能自动劫持，需对属性进行重新定义。
3. 性能问题：由于它需要递归遍历对象的每一个属性，因此在处理嵌套深度较大的对象时，可能会导致性能问题。
4. 代码复杂度增加：需要手动编写 getter 和 setter 方法来处理每一个属性，这可能会使代码变得复杂且难以维护。
Step 2
Q:: Vue 3 中为什么引入 Proxy 替代 Object.defineProperty？
A:: Vue 3 中引入 Proxy 替代 Object.defineProperty 主要是为了克服 Object.defineProperty 的局限性。Proxy 能够直接监听对象的整体变化，包括属性的增删、数组的变化等，不再需要手动覆盖数组方法或遍历对象的每个属性。另外，Proxy 的语法更简洁，且能直接拦截更多操作，如函数调用、属性访问等，提供了更强大的功能和更好的性能。
Step 3
Q:: Object.defineProperty 和 Proxy 的使用场景有何不同？
A:: Object.defineProperty 主要适用于对已有对象的属性进行劫持和定义，是 ES5 引入的旧方法。而 Proxy 是 ES6 引入的新特性，能够代理整个对象或函数的行为，提供更广泛的操作拦截功能。通常，Proxy 更适合用于需要对对象进行深度劫持或动态操作的场景，而 Object.defineProperty 可能更适合简单的属性定义或兼容性要求较高的项目。
Step 4
Q:: Vue 数据响应式系统的核心原理是什么？
A:: Vue 的数据响应式系统基于数据劫持和发布-订阅模式。当数据被劫持时，Vue 通过 getter 收集依赖（即观察者），通过 setter 在数据变化时通知依赖进行更新。在 Vue 2.x 中，数据劫持是通过 Object.defineProperty 实现的；在 Vue 3 中，则改为使用 Proxy 进行数据劫持。