Vue.js响应式系统中reactive实现对象劫持与深层监听原理-Vue.js-PHP中文网

vue 3 的 reactive 通过 proxy 实现响应式，支持深层监听、动态增删属性、数组索引赋值及 map/set 等结构，采用懒代理、依赖收集与触发更新闭环机制。

vue.js响应式系统中reactive实现对象劫持与深层监听原理

Vue 3 的 reactive 通过 Proxy 实现对象的响应式劫持，而非 Vue 2 的 Object.defineProperty。它能天然支持深层监听、动态属性增删、数组索引赋值、Map/Set 等原生数据结构，核心在于递归代理 + 依赖收集 + 触发更新的闭环机制。

Proxy 拦截对象操作，替代 defineProperty 的局限

Vue 2 中 Object.defineProperty 无法监听属性新增、删除、数组下标赋值（如 arr[0] = x）和 length 变更。而 reactive 使用 Proxy 拦截 13 种操作，关键包括：

get：读取属性时触发依赖收集（track）
set：设置属性时触发更新通知（trigger）
has、deleteProperty、ownKeys：支持 in、delete、for...in、Object.keys() 等操作的响应式
getOwnPropertyDescriptor 和 defineProperty：确保 Object.getOwnPropertyDescriptor 等元操作也受控

Proxy 对象本身不可遍历（无自有属性），因此 Vue 内部用一个“代理壳”包裹原始对象，所有访问都经由拦截器中转。

深层响应靠递归 reactive，不是一次性代理全部嵌套

reactive 并不会在初始化时递归代理所有嵌套对象，而是采用懒代理（lazy proxy）策略：

仅当某个嵌套属性被 get 访问时，才检查其值是否为对象/数组等可响应类型
若是，则调用 reactive() 递归处理，返回一个新的 Proxy，并缓存到内部 WeakMap（key 是原始对象，value 是对应 Proxy）
后续再次访问同一对象，直接复用已创建的 Proxy，避免重复代理

例如：const state = reactive({ user: { profile: { name: 'Alice' } } })。初始只代理 state；当执行 state.user.profile.name 时，依次触发 user 的 get → 代理 user → profile 的 get → 代理 profile。

vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

网站特效

网站源码

网站素材

前端模板