大家好，这里是大家的林语冰。
响应式 API 赋予了组合式 API 一大坨可能性的同时，代码精简。虽然但是，我们应该意识到响应性的某些陷阱，比如丢失响应性。
在本文中，我们将学习如何正确解构 Vue 组件的 props，使得 props 不会丢失响应性。
1. 解构 props
编译器宏 defineProps() 可以辅助读写提供给 中的组件的 props：
图片
上述示例中，props 是一个响应式对象，包含了提供给组件的 props。如果组件 props 变化了，props 响应式对象也会随之变化。
读写 props 对象时，我们要做的第一件事可能是，解构 props 对象，然后读写各个属性。但当我学习 Vue 组合式 API 时，令我大吃一惊的是，解构的 props 丢失了响应性！
让我们来看一个例子。下述组件 接受 count 属性作为数字，并显示一条消息，无论 count 是偶数还是奇数。
在解构 props 对象 const { count } = defineProps() 之后，访问该 count 属性：
图片
单击几次增加按钮。您会注意到，尽管 count 属性不断累加，但 "The number is even" 消息始终保持不变。
当解构 props 对象 const { count } = defineProps() 时，响应性就会丢失。
响应性之所以会丢失，是因为在解构时 count 变异为具有原始值的变量（一个平平无奇的数字罢了）。但 Vue 的响应性不能直接作用于原始值：Vue 必须诉诸 ref 或响应式对象。
粉丝请注意，在 Vue 中将原始值直接赋值给变量时要小心：此乃丢失响应性的前提。
2. 解决方案 1：使用“props”对象
第一个显而易见的解决方案是，不要解构 props 对象，并使用属性读写器直接读写 props： props.count。
图片
上述示例中，读写 computed() 内的 props.count 可以在 props.count 变更时保留响应性。props 对象是响应式的，对其进行任何变更都会被正确追踪。
这种方案的短板是，我们必须始终使用属性读写器（比如 props.count）来读写
