面试题：Vue响应式原理中Object.defineProperty的作用及局限性

Question

在Vue的响应式原理里，Object.defineProperty扮演了很重要的角色，请阐述它是如何实现数据劫持从而让Vue能够追踪数据变化的。同时，说明一下使用Object.defineProperty来实现响应式有哪些局限性。

Answer 1

数据劫持实现原理

1. 基本概念：Object.defineProperty 是 JavaScript 中用于定义对象属性特性的方法。在 Vue 的响应式原理中，利用它对对象的属性进行劫持，从而实现对数据变化的追踪。
2. 具体过程：
   • 初始化阶段：Vue 在初始化数据时，遍历 data 对象的所有属性，使用 Object.defineProperty 将每个属性转换为 getter 和 setter。例如：

   let data = {
       message: 'Hello Vue'
   };
   Object.defineProperty(data, 'message', {
       get() {
           // 这里可以添加依赖收集等逻辑
           return value;
       },
       set(newValue) {
           if (newValue!== value) {
               value = newValue;
               // 这里触发视图更新等操作
           }
       }
   });
   

   • 依赖收集：在 getter 中，当访问属性时，会收集依赖。例如，在模板中使用了某个数据，那么这个模板的渲染函数就是一个依赖。当数据变化触发 setter 时，会通知这些依赖进行更新。
   • 更新阶段：当数据发生变化，即 setter 被调用时，Vue 会检测到新值与旧值不同，然后触发相关的更新操作，比如重新渲染视图。

使用 Object.defineProperty 实现响应式的局限性

1. 新增和删除属性问题：
   • 使用 Object.defineProperty 定义的属性，当在对象上新增属性时，Vue 无法自动追踪其响应式变化。例如：

   let vm = new Vue({
       data: {
           user: {
               name: 'John'
           }
       }
   });
   // 新增属性，Vue 不会自动追踪
   vm.user.age = 25;
   

   • 同样，删除对象属性时，Vue 也不会自动更新视图。例如 delete vm.user.name，视图不会因这个删除操作而更新。
2. 数组变化检测问题：
   • 对于数组，Object.defineProperty 不能很好地检测数组的变化。虽然 Vue 对数组的一些方法（如 push、pop、shift、unshift、splice、sort、reverse）进行了包裹，使得这些方法调用时能触发视图更新，但对于直接通过索引修改数组元素（如 vm.array[0] = 'new value'）或者修改数组长度（如 vm.array.length = 0）的操作，Vue 无法自动检测到变化并更新视图。
3. 深度嵌套对象问题：
   • 对于深度嵌套的对象，需要递归地使用 Object.defineProperty 进行数据劫持。这会增加性能开销，尤其是对象嵌套层次很深时，初始化时递归遍历和设置 getter、setter 的操作会非常耗时。