Vue: 解构 props 后响应性丢失

修复 Vue 3 中解构响应式对象或 props 导致的响应性丢失，并在 toRefs、toRef 与响应式解构间做选择。

症状

子组件收到更新的 props，但模板始终显示旧值。依赖该值的计算属性也从不重新求值。

诊断

检查解构后该值是否仍是 ref：

import { isRef } from 'vue';

const { title } = defineProps(['title']); // plain value, not a ref
console.log(isRef(title)); // false

修复

用 toRefs 保留引用：

import { toRefs } from 'vue';

const props = defineProps(['title', 'count']);
const { title, count } = toRefs(props); // reactive refs
// template reads stay reactive; in script use title.value

对 reactive 对象，应通过对象访问字段或使用 toRefs 包装。

验证

修改父组件传入的值，确认子组件随之重新渲染。此时 isRef(title) 返回 true，证明响应式链接得以保留。