props响应式的基础

本节目标：理解“props响应式的基础”的核心思路，并能把它用于实际开发或面试表达。

• Vue 3 使用了 ES6 的 Proxy 来劫持对象的访问（get）和修改（set），并在访问时进行依赖收集（track），在修改时触发更新（trigger）。

• reactive(obj) 会“深度”劫持整个对象，shallowReactive(obj) 则只对顶层属性劫持。props 在内部其实是 shallowReactive（或 shallowReadonly），只保证最外层属性的响应性。 解构赋值的本质

• JavaScript 的解构赋值只是读取了一次对应的属性值，然后赋给一个全新的普通变量，后续这个变量并不再与原来被劫持的对象有任何联系。

toRefs 的作用

• toRefs(props) 会把每个属性都包成一个 ref。这个 ref 的内部就是一个带有 get/set 的 Proxy，当你读取和修改这个 ref 的 .value 时，都会触发和原来 props 的对应属性相同的依赖收集和更新逻辑。
• 简单说：toRefs 把 “浅响应式对象的各个属性” → “真正的响应式 ref”，从而既保留了响应式，也能用解构赋值拿到各个属性。