vue组件中props只读且单向流动，需通过computed响应变化、watch处理副作用、$emit事件通知父组件更新，禁止直接修改props或污染父级响应式状态。
Vue.js 组件中，属性（props）本身是只读的、单向流动的，不能直接在子组件内修改。所谓“动态响应”，关键不是让 props 可写，而是让子组件能感知变化、安全使用、合理反馈——既要响应父组件传入数据的更新，也要在需要时把变更意图正确回传给父组件。
确保 props 变化能被正确响应
Vue 默认会对 props 做响应式追踪，只要父组件传的是响应式数据（比如 data 或 computed 的返回值），子组件模板或计算属性中引用它就会自动更新。但要注意：
- 避免用字面量或常量覆盖 props：例如
data() { return { localName: this.name } }这样初始化后，localName就和this.name断开连接，后续 props 更新不会同步 - 如需派生状态，优先用
computed：比如computed: { fullName() { return this.firstName + ' ' + this.lastName } }，天然响应 props 变化 - 深层嵌套对象或数组的变更可能触发不了视图更新（尤其用索引赋值或 length 修改数组），此时应配合
vm.$forceUpdate()或改用Vue.set / vm.$set（Vue 2）或使用响应式 API（Vue 3）
需要修改 props 数据时的正确做法
子组件不能直接改 props，但可以主动通知父组件去改。标准模式是“事件驱动”：
- 用
$emit触发自定义事件，携带新值：例如this.$emit('update:visible', false) - 父组件用
v-model或.sync（Vue 2）/v-model:xxx（Vue 3）语法监听并响应，保持双向绑定语义 - 对复杂对象，不要尝试深拷贝后局部修改再 emit 全量——应明确粒度，比如只 emit
change:item并附带 id 和字段名，由父组件做精准更新
处理初始值不存在或后期新增字段
如果 props 是一个对象，且父组件可能在运行时添加新属性（如 user.role 后续才传入），Vue 默认无法检测：
- 不推荐在子组件里用
Vue.set(this.user, 'role', 'admin')——这会污染父级响应式状态，违背单向数据流原则 - 正确方式是父组件负责补全结构：初始化时预留字段（哪怕设为
null或undefined），或通过 watch + $emit 协同补充 - 若必须兼容松散结构，可在子组件用
computed包一层默认值：role() { return this.user?.role ?? 'guest' }
依赖变化时执行副作用逻辑
当某个 prop 改变需触发请求、动画、校验等操作，用 watch 比 computed 更合适：
- 监听单个 prop：
watch: { userId(newVal, oldVal) { if (newVal) this.fetchUser() } } - 监听嵌套字段（Vue 2 需加
deep: true）：watch: { 'userInfo.name': { handler() { /* ... */ }, deep: true } } - 避免在 watch 中直接修改 props 对应的数据源；如有必要，应 emit 事件交由父组件决策
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
