>[danger]Vue2和Vue3区别，对数组如何处理，如果直接object.defineproperty劫持数组会发生什么情况 [Vue3相对于Vue2进行了哪些优化？](https://www.kancloud.cn/hanxuming/interview/3136672) 1. **更灵活的响应式系统**：Vue 2.x 中响应式系统的核心是**Object.defineProperty**，劫持整个对象，然后进行深度遍历所有属性，给每个属性添加`getter`和`setter`，实现响应式。Vue 3.x 中使用**Proxy**对象重写响应式系统。 2. **更快的渲染速度**：Vue3 的编译器生成的渲染函数比 Vue2 生成的更高效。 3. **编译阶段**：Vue 2.x 通过标记静态节点，优化 diff 的过程。Vue 3.x中**标记和提升**所有的静态节点，diff的时候**只需要对比动态节点**内容。 4. **更小的体积**：Vue3 将源码拆分为多个独立的模块，这样就可以按需导入所需的模块，从而减小了整个库的体积。 5. **更好的 TypeScript 支持**：Vue3 对 TypeScript 的支持更加友好，内部使用了更先进的 TypeScript 特性，并为其提供了更好的声明文件。 6. **更好的组件系统**：比如，Vue3中引入了一个新的`Fragment`组件，它可以替代原来的`template`标签作为根节点 7. **新增了setup组合式API** >对于数组的处理，Vue2和Vue3的响应式系统都支持对数组的监听，但是它们的实现方式略有不同。 在Vue2中，为了监听数组的变化，需要通过Object.defineProperty来对数组进行劫持，即重写数组的一些方法（如push、pop、splice等），以便在数组发生变化时通知依赖更新。而在Vue3中，由于使用了Proxy，可以直接监听数组的方法，无需对其进行重写。 >如果直接使用Object.defineProperty对数组进行劫持会发生什么情况呢？ 具体而言，当我们使用Object.defineProperty对数组进行劫持时，重写了数组的一些方法，但是如果在代码执行过程中直接调用了原生的数组方法，就会导致响应式失效。例如，我们为了监听数组的变化，重写了数组的push方法，在代码执行过程中如果使用了数组的concat方法，就无法触发更新。另外，当数组长度很大时，重写数组方法也会影响性能，导致页面卡顿。因此，Vue3使用Proxy替代了Object.defineProperty来实现对数组的监听，使得在处理数组时更加方便和高效。