Vue3 响应式 Props 解构怎么用？(3.5+)

Question

仓乃文 · Accepted Answer

Vue 3.5 之前直接解构 defineProps 会丢失响应式，必须写 props.xxx。3.5 支持响应式 Props 解构，解构后的变量自动保持响应式，且可以直接在解构中设置默认值，告别 withDefaults。新旧写法对比： ```javascript // 旧写法：必须通过 props 对象访问 const props = withDefaults(defineProps<{ count?: number; msg?: string; }>(), { count: 0, msg: "hello" }); console.log(props.count); // 需要 props. 前缀 // 新写法：直接解构，自动响应式 const { count = 0, msg = "hello" } = defineProps<{ count?: number; msg?: string; }>(); console.log(count); // 直接访问，有响应式 ``` watch 中的注意事项： ```javascript // 不能直接 watch 解构变量 watch(count, (v) => {}); // 编译报错 // 需要包裹为 getter watch(() => count, (v) => {}); // 正确 ``` 补充说明： - 解构变量本质是 props 的代理编译，访问时自动追踪依赖 - 默认值直接用 = 赋值，不再需要 withDefaults - 传递给 Composable 时需用 toValue() 或 getter 包裹 - 需要 @vue/language-tools 2.1+ 才有完整的类型提示 - 模板中直接使用解构变量，无需 props. 前缀