“听说你研究过 Vue 的响应式？”

“是的，Vue2 的 Object.defineProperty 和 Vue3 的 Proxy 都了解过。”

面试官点点头：“那你觉得 Vue3 的响应式，为什么比 Vue2 更强？”

我沉思了一下，脑子里浮现出 defineProperty、Proxy、Effect、track、trigger……

但忽然意识到：我虽然知道底层实现细节，但宏观上，Vue3 响应式到底‘强’在哪？我好像说不太清……

今天，我们就不卷源码，来从设计思想和实际开发体验出发，看看 Vue3 的响应式系统，到底强在哪里？

Vue2 的局限

Vue2 的响应式系统用的是 Object.defineProperty()，这也是大家老生常谈的一个方法了。

Object.defineProperty(obj, 'key', {
  get() { ... },
  set(val) { ... }
})

它能做到监听对象属性的访问与变更，但问题也不少：

• 新增/删除属性无法触发视图更新，必须通过 Vue.set 或 this.$set 处理。
• 数组变更监听不完全，比如直接用索引赋值或修改 length，Vue2 是无法感知的。
• 只能追踪到对象最外层，嵌套对象需要递归劫持，每一层对象都得遍历并手动设置 getter/setter，性能瓶颈明显。
• 只支持对象，不能劫持 Map、Set、WeakMap 等结构

总体而言：

Vue2 响应式的核心是属性劫持，它解决了早期前端双向绑定的刚需，但随着需求复杂化，这套系统逐渐显得力不从心。

Vue3 的响应式系统做了什么？

Vue3 基于 ES6 的 Proxy 重写了整个响应式系统，解决了 Vue2 中 Object.defineProperty 只能监听对象最外层的问题。

const proxy = new Proxy(target, {
  get(target, key, receiver) {
    // track
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    // trigger
    return Reflect.set(target, key, value, receiver)
  }
})

相比 Vue2，它做了：

• get 读取数据时，执行 track 追踪数据。
• set 改变数据时，通过 trigger 触发数据相应逻辑执行。
• 使用 Reflect 更好的配合 proxy 去使用。

它不是 劫持属性，而是 代理对象 本身。

Vue3 响应式甚至能追踪 Map.set()、Set.add()，这是 Vue2 完全做不到的。

这套新系统相比 Vue2，有哪些本质优势？

Vue2 vs Vue3 响应式设计对比

可以发现，Vue3 并不仅仅是换了个底层 API，同时还系统性重构了整个响应式模型，它可扩展、性能更好，并且为 Composition API 奠定了基础。

Vue3 响应式更强，背后的三个关键改变

Vue3 的响应式厉害，不只是因为用了 Proxy。更重要的是它相比 Vue2 做出的逻辑变化。

你可以把它理解为三大升级：

从“逐个监听”到“一次打包监听”

在 Vue2 里，它是怎么监听数据变化的？

是一层层地“劫持”每个属性，每个字段都得手动处理。对象一多、嵌套一深，性能就跟不上了。

而 Vue3 用了 Proxy，只要一层代理就能搞定整棵对象树：

• 不用再递归监听每个属性。
• 动态新增属性也能自动追踪。
• 还能轻松做“只读”、“浅层监听”等拓展配置。

更高效、更灵活，也更容易维护。

从“到处埋点”到“集中处理”

Vue2 的依赖追踪，埋得很分散：

组件里读数据的时候，会收集依赖；更新数据时，再触发更新。这种逻辑藏得比较深，不好统一管理。

Vue3 就清爽多了：

effect(() => {
  console.log(state.count) // 自动追踪依赖
})

数据一变化，自动触发 effect 里的逻辑。追踪、触发都交给了 track / trigger 两个模块去做。

响应式逻辑 集中起来、模块化了，更好调试、更易扩展。

为组合式 API 打好底层地基

Vue3 响应式系统的设计初衷之一，就是为组合式 API 打好地基。

过去 Vue2 是 选项式 API：你要在组件里写 data、methods、computed，功能分散在不同配置里。

而 Vue3 推出的组合式 API，比如：

const count = ref(0)
const doubled = computed(() => count.value * 2)
watchEffect(() => {
  console.log(doubled.value)
})

是不是更灵活、更自由？

这些写法能成立，就是因为 Vue3 的响应式系统更强大了：

• ref、reactive 可以包裹任何值，变成响应式对象。
• watchEffect 能自动追踪你访问的值。
• 不用依赖组件生命周期，逻辑可以拆分封装，更容易复用。

关于响应式的具体实现可以参考我之前的 Vue 源码解析 系列文章 。

我为什么更喜欢 Vue3 的响应式？

• 代码更直观，不用担心数据更新视图不渲染的问题。
• 调试友好，依赖追踪逻辑清晰。
• 组合式 API 配合响应式更优雅。
• TypeScript 支持更完善。

一个明显的例子：

const state = reactive({ count: 0 })

watchEffect(() => {
  console.log(state.count) // 自动追踪
})

更新 state.count++，就会触发 watchEffect。

无需手动声明依赖、无需担心深层嵌套属性监听不到。

你真的理解 Proxy 比 defineProperty 更强吗？

很多人一提起 Vue3 响应式为什么强，第一反应是：

“因为 Proxy 可以监听整个对象啊！”

确实没错，但如果你只停留在这个理解层面，那你对 Proxy 的认识还远远不够深。

有一个更容易被忽视、却非常关键的底层细节是 —— Vue3 为什么还要配合使用 Reflect？

来看下面这段 Proxy 的代码实现：

const proxy = new Proxy(target, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver)
  }
})

你可能会问：为啥不直接写 target[key] 呢？

get(target, key) {
  return target[key] // 这样不行吗？
}

还真的不行！

为什么必须用 Reflect？

Reflect 是 ES6 新增的内置对象，一般与 Proxy 组合使用。使用 Reflect.get 有几个好处：

• 保证 this 指向正确（特别是在 class 中访问 getter）
• 更准确地返回属性值，避免默认行为丢失
• 和 Proxy 内部行为保持一致

来看个示例对比：

class A {
  get value() {
    return this === proxy ? 'proxy called' : 'raw called'
  }
}

const a = new A()
const proxy = new Proxy(a, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver)
    // return target[key] 会让 this 变成 target，而不是 proxy
  }
})

console.log(proxy.value) // 'proxy called'

你会发现，如果不使用 Reflect.get，那么 this 会指向原始对象，而不是代理对象，导致 getter、setter 行为不一致。

所以说，Proxy 是 Vue3 响应式的关键核心，但是配合 Reflect 使用才会更安全稳定。

Vue3 响应式也有一些注意点

当然，Vue3 的响应式系统虽然强大，但也不是无敌的。在实际使用中，仍然有一些需要特别注意的坑和限制。

无法 Polyfill

Vue3 使用了 Proxy，这是 ES6 才引入的高级特性，而它 无法被降级或 Polyfill。

意味着如果你想支持 IE11 或更老的浏览器 —— Vue3 本身就无法运行。这也是 Vue 团队决定 Vue3 完全放弃 IE 支持的一个重要原因。

响应式过度追踪问题

在使用 watchEffect 时，Vue 会自动收集你访问的所有响应式数据作为依赖。

这听起来方便好用，但如果你在一个 effect 里访问了太多变量，每一个变量变化都会触发整个副作用函数重新执行。

watchEffect(() => {
  console.log(obj.a, obj.b, obj.c) // 都是依赖
})

假如这些变量变化频繁，或者你在其中做了复杂逻辑操作，性能就可能拉胯。

解决办法是更精准使用 watch，或者拆分多个 watchEffect，控制依赖粒度。

写过 React 的小伙伴可以说是颇有经验了 。

响应式丢失陷阱：结构赋值后就不是响应式了！

这是很多人会踩的坑，尤其是习惯了结构赋值的写法：

const state = reactive({ count: 0 })

const { count } = state // 断开响应式

console.log(count) // 这只是普通数值，变化不会响应式更新

为啥？

因为响应式代理的是对象本身，结构赋值相当于把值 复制 出来了，脱离了响应式系统。

正确做法：

• 用 toRefs() 保留响应式：
• ts
• 体验AI代码助手
• 代码解读
• 复制代码
• const { count } = toRefs(state)
• 或者干脆用 storeToRefs()（如果你在 Pinia 中）
• 或者不要结构赋值，直接用 state.count

小总结

Vue3 的响应式系统，远不止于 把 defineProperty 换成了 Proxy 这么简单。

真正让它 更强 的地方是：

• 响应式能力更强：对象、数组、Map、Set 统统支持；
• 代码逻辑层级清晰可控：track/trigger/effect 模块解耦；
• 支持更多编程范式：支持组合式、TS、服务端渲染等场景；
• 源码阅读体验感更好：语义清晰，调试方便，扩展性强。

所以，如果你在面试被问到：

“Vue3 的响应式到底强在哪？”