vue组件状态流转须遵循单向数据流：状态唯一归属、props只读、变更通过emit/dispatch向上反馈，响应式更新自动完成，复杂逻辑应封装为组合式函数。
Vue 组件的状态流转必须遵循单向数据流原则：状态由唯一源头定义和修改，变更通过明确路径向上反馈、向下同步。这不是开发约束，而是可维护性的基础设施。
状态归属必须唯一
每个状态只能有一个明确的拥有者——要么是某个组件的本地 ref/reactive，要么是全局 store 中的字段。多个组件“共管”同一份数据（比如都直接改一个 sharedObj.name）会立刻引发竞态和视图不一致。常见错误包括：把 API 返回对象直接赋给多个子组件 props、在多个 setup 中同时调用同一个 reactive 对象的 mutating 方法。
- 判断标准：该状态变化是否需要被其他组件感知？若需要，它就不该是纯局部状态
- 若状态仅用于控制子组件内部 UI（如折叠面板开关、输入框聚焦态），就定义在子组件内部，不用上提
- 若两个兄弟组件需同步某值（如筛选条件），必须提升到它们共同的父组件或 store 中管理
props 只读，变更必经 emit 或 dispatch
子组件接收到的 props 是只读契约。哪怕传入的是引用类型（如 { count: 1 }），也不应直接 this.props.item.count++；这虽不报错，但破坏了数据流向的可追溯性，调试时无法定位谁改了它。
- 简单同步场景：用 v-model 或 @update:xxx 触发父组件更新
- 含校验或副作用的变更：子组件 emit 事件，父组件在事件回调中执行业务逻辑后再更新状态
- 跨层级或复杂流程：交由 Vuex/Pinia 处理，通过 actions 封装异步操作，mutations 同步更新 state
响应式同步靠 Vue 自动完成，无需手动触发
只要状态源头是响应式的（ref、reactive、store.state），且组件正确使用了该状态（如 template 中绑定、setup 中解构后未丢失响应性），视图就会自动更新。不必调用 forceUpdate 或 this.$forceUpdate()。
- 避免解构破坏响应性：const { count } = toRefs(props) ✅；const { count } = props ❌（丢失响应链接）
- 数组/对象新增属性需用 Vue.set 或 set()（Vue 2）或直接赋值（Vue 3 + reactive）
- 异步获取的数据，确保赋值发生在响应式上下文中（如 await api().then(res => data.value = res)）
复杂状态建议封装为组合式函数
当多个组件共享同一组逻辑（如表单校验、分页控制、权限判断），不要复制粘贴代码，而应抽离为 useXxx() 函数。它内部可管理自己的 reactive 状态、调用 API、暴露计算属性和方法，对外只提供清晰接口。
- useSearch({ api, debounce: 300 }) 返回 search、results、loading、triggerSearch
- useAuth() 返回 user、isLoggedIn、login、logout，内部自动监听 token 变更
- 组合函数之间也可嵌套，形成逻辑分层，而非状态分层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
