Vue 的响应式原理中 Object.defineProperty 有什么缺陷? 为什么在Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty?React / Vue

Object.defineProperty 的缺陷

在 Vue 2.x 中，响应式原理主要依赖于 Object.defineProperty。虽然 Object.defineProperty 为 Vue 的响应式系统提供了强大的功能，但它也有一些明显的缺陷和局限性：

1. 无法检测到数组的变化： Object.defineProperty 无法直接监听数组元素的变化。Vue 2.x 中通过重写数组的方法（如 push、pop 等）来解决这个问题，但这种方式并不完美，且增加了复杂性。

2. 深度监听性能问题： Object.defineProperty 的深度监听需要递归遍历对象的每一个属性，如果对象层级很深或者对象很大，初始化时会消耗大量的性能。

3. 新增和删除属性的问题： Object.defineProperty 无法监听对象属性的新增和删除。这意味着 Vue 2.x 需要通过 Vue.set 和 Vue.delete 来处理这种情况，这样的 API 设计不够优雅且容易让开发者困惑。

4. 需要遍历所有属性： 在初始化响应式系统时，Vue 需要遍历对象的所有属性来设置 getter 和 setter，这在对象较大时效率较低。

Vue 3.0 使用 Proxy 的原因

Vue 3.0 引入了 Proxy 来实现响应式系统，解决了 Object.defineProperty 的上述缺陷：

1. 直接监听数组变化： Proxy 可以直接监听数组的变化，不需要像 Vue 2.x 那样重写数组方法，从而简化了实现。

2. 动态属性的支持： Proxy 可以监听到对象属性的新增和删除，不再需要额外的 API（如 Vue.set 和 Vue.delete）来处理这些操作。

3. 更好的性能： Proxy 不需要递归遍历对象所有属性进行绑定，可以在属性被访问时进行拦截，从而提高性能，特别是在处理深层嵌套对象时。

4. 统一的接口： Proxy 提供了统一的拦截接口，使得响应式系统的实现更加简单和一致，减少了代码复杂性。

列表组件中使用 key 的作用

在 React 和 Vue 中，当渲染一个列表时，通常需要为每个列表项添加一个唯一的 key 属性。key 的作用主要有以下几点：

1. 唯一标识列表项： key 是每个列表项的唯一标识，帮助框架在更新列表时能够正确地识别每个列表项。

2. 高效更新： 有了 key，框架在进行 DOM diff 时，可以快速判断哪些项发生了变化、哪些项需要移动、添加或删除，从而高效地更新 DOM，提升性能。

3. 避免不必要的重渲染： 如果没有 key 或 key 不唯一，框架在更新时可能会进行不必要的重渲染，导致性能问题和状态丢失。

4. 保持组件状态： key 有助于保持组件的内部状态。例如，如果你在一个列表中有表单输入框，当重新排序列表时，有 key 可以确保每个输入框的内容不会丢失。

在实际开发中，key 通常使用列表数据中的唯一标识符（如 ID）来设置，确保每个列表项的 key 唯一且稳定。