React 与 Vue 组件状态边界：同一份数据只留一个主人

React 与 Vue 组件状态边界：同一份数据只留一个主人

组件难维护，常见原因不是框架选错，而是同一份状态同时出现在 props、本地 state 和全局 store。更新从三个方向进来，谁覆盖谁只能靠运气。

先分业务状态和展示状态

表单值、筛选条件等需要跨组件一致的数据，由上层或 store 持有；展开、hover、临时输入可留在组件内部。受控组件只通过回调请求修改，不再复制一份 props。

type SearchProps = { value: string; onChange(next: string): void; };

副作用跟着数据来源走

请求由拥有查询条件的层发起，组件卸载或条件变化时取消旧请求。不要在 render 或 computed 中偷偷写外部状态。缓存键包含真正影响结果的参数。

测试用户行为

覆盖输入、清空、重复提交、异步失败和父级重置。测试关注界面与回调，不依赖内部 state 名称。状态主人明确后，React 和 Vue 的写法差异就不再是主要问题。