props

本节目标：理解“props”的核心思路，并能把它用于实际开发或面试表达。 直接用 ...props 生成的新对象，拿到的是“当下快照”，大多数键的响应性会丢失。

细化说明（不写代码，只讲机制与做法）：

• 为什么会丢：props 是一个受 Vue 代理追踪的只读响应式对象；当你用展开语法创建新字面量对象时，拷贝的是各键当前的值，新对象本身不受代理追踪，所以父级后续改动不会再推动这些键。
• 哪些情况“看似还会动”：
  • 若某个 prop 的值本身是Ref，你把它的“值”拷过去就变成普通值了（失去响应）。
  • 若某个 prop 的值是对象/数组，拷贝的是同一个引用，对象内部被就地修改可能仍然“动”，但一旦父级整体替换这个对象，你的快照感知不到。这会制造“有时动、有时不动”的错觉——最危险。

保持响应的思路：

1. 不要快照：优先让组合函数直接接收 props（保持只读、可追踪），以及单独接收需要写回的 model。
2. 按键传递“活的引用”：若只要几项，用“逐键引用”的方式（针对某个键做引用化）传给组合函数，而不是值的拷贝。
3. 统一“可写模型”路径：defineModel() 返回的是可写 ref，应当以它作为单一事实来源传入组合函数，而不是把 model.value拍平成普通值。
4. 明确语义：如果组合函数只需要初始值（不关心后续变更），那才用快照；否则一律传“活的引用”。

实践建议：

• 读数据 → 传可追踪的只读来源（props 或逐键引用）。
• 写数据 → 传可写的模型引用（model），在组合函数里通过它“原子写回”。
• 避免把“读写语义”混在一次 ... 展开里，否则很容易一半失活、一半可写，埋下隐患。

一句话结论：...props = 静态快照；要响应式，就传活的源（props 本体 / 逐键引用 / 模型 ref），把“写回”集中走 defineModel。