Unreachable code 代码不可达
在 Vue 组件中，data和props是同级关系。
它们都是定义在组件选项对象顶层的属性，与methods、computed等选项并列。
export default { // props 和 data 在这里是并列的同级选项 props: ['messageFromParent'], data() { return { messageFromMe: 'Hello!' } }, methods: { // ... } }🤔 为什么会感觉像“父子”？
你之所以会联想到“父子关系”，很可能是因为它们所承载的数据来源体现了组件间的父子关系：
props(properties)：用于接收来自父组件传递的数据。它像一个输入接口。data：用于管理组件自身的私有状态。它像组件的私有内存。
虽然数据流是从父到子（通过props），但在组件的定义内部，props和data这两个选项本身是平级的。
⚡datavsprops核心区别
尽管它们是同级，但职责截然不同。
| 特性 | data | props |
|---|---|---|
| 数据来源 | 组件内部定义 | 外部（通常是父组件）传入 |
| 所有权 | 组件自己拥有 | 父组件拥有，子组件只负责接收 |
| 可变性 | 可以在组件内部自由修改 | 不应在子组件内部直接修改（遵循单向数据流） |
| 主要用途 | 管理组件的私有状态（如表单输入、计数器） | 接收外部配置，使组件可复用 |
⚠️ 特殊情况：命名冲突
虽然它们是同级，但强烈不建议在data和props中使用相同的属性名。
如果发生命名冲突，Vue 会发出警告。在这种情况下，props的优先级更高，会覆盖data中的同名属性。为了避免混淆和潜在的错误，请始终为它们使用不同的名称。