Vue的实现原理 proxy

Vue 3 的 Proxy 实现原理

Vue 3 使用 Proxy 替代 Vue 2 中的 Object.defineProperty 来实现响应式系统。Proxy 是 ES6 提供的原生对象，能够拦截对目标对象的操作，从而实现更强大的响应式能力。

Proxy 的基本概念

Proxy 可以创建一个对象的代理，拦截并重新定义对象的基本操作。例如属性读取、设置、删除等。Proxy 的构造函数接受两个参数：

• target：要代理的目标对象
• handler：包含拦截操作的对象

const proxy = new Proxy(target, handler)

Vue 3 的响应式实现

Vue 3 的响应式系统主要通过以下步骤实现：

1. 创建响应式对象 Vue 使用 reactive() 函数创建响应式对象，内部使用 Proxy 进行包装。

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key) // 依赖收集
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver)
      trigger(target, key) // 触发更新
      return result
    }
  })
}

1. 依赖收集与触发更新 Vue 3 使用 track 和 trigger 函数来管理依赖关系。

• track：在 get 操作时收集当前正在运行的 effect（副作用函数）
• trigger：在 set 操作时触发所有相关的 effect 重新执行

1. Effect 系统 Vue 3 的 effect 函数用于创建响应式副作用，类似于 Vue 2 的 Watcher。

let activeEffect
function effect(fn) {
  activeEffect = fn
  fn()
  activeEffect = null
}

Proxy 相比 Object.defineProperty 的优势

1. 可以检测到对象属性的添加和删除 Object.defineProperty 无法检测到新增或删除的属性，而 Proxy 可以。

   

2. 支持数组的响应式 Proxy 可以直接拦截数组的操作（push、pop 等），无需特殊处理。

3. 性能更好 Proxy 是语言层面的实现，比 Object.defineProperty 的遍历属性方式更高效。

4. 支持嵌套对象 Proxy 可以递归代理嵌套对象，实现深层响应式。

   

响应式系统的局限性

1. 原始值需要 ref 包装 对于原始值（number、string 等），需要使用 ref() 进行包装。

2. 解构可能丢失响应性 直接解构响应式对象可能导致属性失去响应性，需要使用 toRefs。

3. 浏览器兼容性 Proxy 无法被 polyfill，在旧版浏览器中无法使用。

实际应用示例

import { reactive, effect } from 'vue'

const state = reactive({
  count: 0
})

effect(() => {
  console.log('count changed:', state.count)
})

state.count++ // 触发 effect 执行

总结

Vue 3 使用 Proxy 实现的响应式系统更加灵活和高效，解决了 Vue 2 中的诸多限制。通过 Proxy 的拦截能力，Vue 能够精确地追踪依赖关系，并在数据变化时高效地更新视图。