本文详解 vue 3 `
在 Vue 3 的组合式 API 中，
✅ 正确的 Props 声明方式
应始终将 defineProps() 的返回值赋给语义清晰、统一的常量名 —— 推荐使用 props（99% 官方示例与社区约定）：
此时，模板中可直接使用 film（Vue 自动解构 props），无需写 props.film：
@@##@@{{ film.year }}
⚠️ 关键注意事项
- 禁止命名冲突：切勿声明 const film = defineProps({...}) —— 这会覆盖 props 的自动暴露机制，使模板中 film 指向一个包含 film 属性的对象，而非数据本身。
-
props 常量非必须，但强烈推荐：
- 仅在模板中使用时：可省略 const props =，直接 defineProps({...})（Vue 仍自动暴露 film）；
- 若需在
- 类型安全增强：建议配合 TypeScript 或运行时类型校验（如 Object.keys(film).length > 0）确保传入对象结构完整。
? 完整工作流程验证
ListFilms.vue 保持原样（已正确）：
films 是响应式数组，每个 film 对象结构完整（含 id, title, year, genre, imgSrc），FilmComp 通过 props.film 精准接收并渲染 —— 所有插值与属性绑定均生效。
✅ 总结
| 场景 | 写法 | 是否推荐 | 说明 |
|---|---|---|---|
| 仅模板使用 props | defineProps({ film: Object }) | ⚠️ 可行但不推荐 | 缺乏可维护性，无法在 script 中复用 |
| 模板 + script 均需访问 | const props = defineProps({ film: Object }) | ✅ 强烈推荐 | 清晰、安全、符合 Vue 官方范式 |
| 错误示范 | const film = defineProps({ film: Object }) | ❌ 绝对禁止 | 导致作用域污染与属性访问失效 |
遵循这一规范，不仅能解决当前渲染问题，更能构建出健壮、可调试、易协作的 Vue 3 组件体系。记住：props 是约定俗成的容器名，不是可选别名，而是工程化开发的基石。
