Vue3与Vue2响应式原理差异

考察点分析 link

• 核心能力维度：框架机制理解、响应式原理深度、API设计思想
• 技术评估点：

1. 对象属性检测的全面性（新增/删除属性）
2. 数组监听机制差异
3. 响应式初始化性能特征
4. 数据结构支持范围扩展
5. 依赖收集与触发效率优化

技术解析 link

关键知识点 link

Proxy拦截能力 > Object.defineProperty局限性 > 数组方法重写机制

原理剖析 link

1. 检测能力：
   Vue2通过Object.defineProperty劫持已有属性，新增/删除属性需Vue.set/Vue.delete。Vue3的Proxy代理整个对象，通过get/set/deleteProperty拦截器自动捕获所有属性变动。

2. 数组处理：
   Vue2重写数组原型方法（push/pop等）并手动触发更新，但无法检测索引赋值（arr[2]=x）和length修改。Vue3的Proxy可直接捕获数组索引赋值、方法调用及长度变化。

3. 性能优化：
   Vue2在初始化时递归遍历所有属性设置getter/setter，深层对象性能损耗大。Vue3的Proxy采用惰性劫持，仅在访问时创建响应式关联，减少初始化开销。

常见误区 link

• 误以为Proxy一定更快（大规模属性访问场景Proxy开销可能更大）
• 忽略Vue3仍需ref处理基础类型（Proxy无法代理原始值）
• 混淆数组响应式实现方式（Vue3仍需要特殊处理部分数组操作）

问题解答 link

Vue3的Proxy方案相比Vue2有以下关键改进：

1. 属性检测：Proxy原生支持属性增删检测，无需特殊API，解决Vue2的动态属性追踪痛点。
2. 数组处理：直接响应索引赋值和length变化，无需重写数组方法，代码更简洁。
3. 性能优势：惰性劫持减少初始化消耗，嵌套对象性能提升约50%（Vue官方数据）。
4. 数据结构：支持Map/Set等ES6集合类型，扩展响应式系统适用范围。

改进意义在于提升开发体验（减少手动干预）、降低内存占用（统一依赖存储）、提高框架性能基准。

解决方案 link

  // Vue2数组处理示例  
const vm = new Vue({  
  data: {  
    list: [1,2,3]  
  },  
  methods: {  
    update() {  
      this.list[1]5 = 5;       // 不触发更新  
      this.$set(this.list, 1, 5); // 必须使用API  
    }  
  }  
});  

// Vue3等效实现  
const state = reactive({ list: [1,2,3] });  
state.list[1] = 5; // 自动触发响应  
  

可扩展性建议：

• 大数据场景：结合shallowRef避免深层响应式转换
• 低端设备：使用markRaw跳过非必要响应式对象

深度追问 link

1. Proxy为何能提升依赖收集效率？
   答：统一存储依赖关系，无需为每个属性维护Dep实例。

2. Vue3如何处理Map类型响应式？
   答：通过Proxy+递归reactive实现嵌套结构代理。

3. Vue2数组重写具体实现？
   答：创建含变异方法的自定义数组原型链拦截。