中式美食的菜谱卡片最早写在列表页里代码虽然长一点但状态还算直观菜名、封面、评分、收藏按钮、点击跳详情都在一个地方。后面为了复用我把卡片拆成了RecipeCard组件问题也跟着来了。最明显的几个现象是列表页点了收藏详情页状态没变收藏页取消收藏后返回列表还显示已收藏更麻烦的是点卡片右上角收藏按钮时有时会同时触发整张卡片的详情跳转。这个问题不只是 UI 写法问题本质是组件拆分以后状态来源和事件边界没有说清楚。子组件不要自己决定收藏状态我一开始容易把favorited放进卡片组件内部。卡片自己维护一个布尔值点击按钮时自己取反。这样写起来很快Componentstruct RecipeCard{Statefavorited:booleanfalsebuild(){Button(this.favorited?已收藏:收藏).onClick((){this.favorited!this.favorited})}}这段代码的问题是卡片不知道收藏事实到底来自哪里。首页推荐、搜索结果、收藏列表、详情页都可能用同一个菜谱。如果每个卡片都在自己里面维护收藏状态页面之间一定会不同步。更稳的做法是让卡片只接收状态不拥有状态。exportinterfaceRecipeCardModel{id:stringname:stringcover:ResourceStr score:numberfavorited:boolean}卡片拿到什么就展示什么点击以后只把事件抛出去。Componentstruct RecipeCard{recipe:RecipeCardModelonOpen:(id:string)void(){}onToggleFavorite:(id:string)void(){}build(){Row(){Text(this.recipe.name)Text(${this.recipe.score})Button(this.recipe.favorited?已收藏:收藏).onClick((){this.onToggleFavorite(this.recipe.id)})}.onClick((){this.onOpen(this.recipe.id)})}}这时RecipeCard的职责就很单纯展示菜谱把用户动作告诉外层。它不直接写 Repository不直接改收藏表也不关心列表怎么刷新。收藏按钮和卡片点击要分开上面的写法还有一个坑收藏按钮在卡片里面卡片外层也有点击事件。如果事件没有处理好点收藏按钮可能会同时打开详情页。我会把点击区域拆开别让一个动作承担两个含义。Componentstruct RecipeCard{recipe:RecipeCardModelonOpen:(id:string)void(){}onToggleFavorite:(id:string)void(){}build(){Row(){Column(){Text(this.recipe.name)Text(评分${this.recipe.score})}.layoutWeight(1).onClick((){this.onOpen(this.recipe.id)})Button(this.recipe.favorited?已收藏:收藏).onClick((){this.onToggleFavorite(this.recipe.id)})}}}这里不是为了写得花而是为了让用户动作不含糊点内容区域就是打开详情点收藏按钮就是切换收藏。动作分开后后面加长按、分享、更多菜单也不会互相抢事件。ForEach 的 key 不能用 index菜谱列表一定会筛选、排序、刷新。这个时候如果ForEach用 index 当 key就很容易出现卡片状态串行。错误写法大概是这样ForEach(this.vm.visibleRecipes,(item:RecipeCardModel,index:number){RecipeCard({recipe:item,onOpen:(id:string)this.openDetail(id),onToggleFavorite:(id:string)this.vm.toggleFavorite(id)})},(item:RecipeCardModel,index:number)${index})筛选前第 3 个是“番茄炒蛋”筛选后第 3 个变成“红烧茄子”index 还是 2组件复用时就可能把旧状态带过去。这个问题很隐蔽因为不是每次都出现。更稳的写法是用业务 id。ForEach(this.vm.visibleRecipes,(item:RecipeCardModel){RecipeCard({recipe:item,onOpen:(id:string)this.openDetail(id),onToggleFavorite:(id:string)this.vm.toggleFavorite(id)})},(item:RecipeCardModel)item.id)菜谱 id 不会因为排序、筛选、分页而变化。组件复用也能跟着正确的数据走。ViewModel 负责刷新同一份列表收藏状态切换以后不能只改当前卡片。否则列表页好了收藏页可能还是旧的详情页好了搜索页又没同步。我的处理方式是收藏操作由 ViewModel 发起Repository 写入事实然后 ViewModel 更新当前列表。动作由谁处理为什么用户点收藏按钮ViewModel要同时更新页面状态和数据事实写入收藏状态FavoriteRepository收藏是持久化事实不是卡片临时变量当前列表立即变化ViewModel给用户即时反馈详情页状态回读Repository 或统一状态源避免详情页和列表页各维护一份收藏asyncfunctiontoggleFavorite(recipeId:string):Promisevoid{constnextawaitthis.favoriteRepository.toggle(recipeId)this.visibleRecipesthis.visibleRecipes.map((item){if(item.id!recipeId)returnitemreturn{...item,favorited:next}})}这个写法解决的是当前列表立即反馈。至于详情页、收藏页是否同步可以继续通过 Repository 回读或者统一的状态通知处理。关键是不能让子组件越过 ViewModel 自己写数据。如果收藏页里取消收藏还要考虑是否把这一条从当前列表移走asyncfunctionremoveFavoriteInFavoritePage(recipeId:string):Promisevoid{awaitthis.favoriteRepository.setFavorite(recipeId,false)this.visibleRecipesthis.visibleRecipes.filter((item)item.id!recipeId)}同样是取消收藏首页里可能只是按钮变灰收藏页里可能要移除卡片。这个差异属于页面逻辑不应该塞进RecipeCard。评分展示不要和收藏状态混在一起菜谱卡片里除了收藏还有评分、浏览量、推荐理由。它们看起来都在卡片上但来源不一样。信息来源是否能在卡片里直接改菜名、封面菜谱基础数据不能评分菜谱统计或推荐结果通常不能收藏状态收藏 Repository通过外层回调改点击详情路由动作通过外层回调处理推荐理由推荐算法或排序结果不能卡片组件越通用越应该少做决定。它展示recipe.score但不计算评分它展示recipe.favorited但不保存收藏事实它触发onOpen但不自己决定路由栈怎么跳。我会用这些动作验收这个问题不能只看页面有没有渲染出来要用操作把边界压一遍。验收动作预期结果首页点收藏当前卡片立即更新不卡详情跳转点卡片内容区域只打开详情不改变收藏搜索后再收藏收藏状态跟着菜谱 id不串到别的卡片切换排序收藏状态仍然绑定原菜谱收藏页取消收藏当前收藏列表移除或状态刷新按页面规则执行返回详情页详情页能读到最新收藏状态尤其要看“筛选后状态是否串行”。如果ForEachkey 写错这个验收很容易暴露问题。这次留下的经验组件拆分不是把一段 UI 剪出去就结束了。拆出去以后要同时回答三个问题这个组件拥有哪些状态哪些状态只是从外面传进来展示用户动作应该回到哪里处理对中式美食的菜谱卡片来说RecipeCard只适合做展示和事件出口。收藏事实在 Repository列表状态在 ViewModel页面路由在外层页面。边界拆清楚以后代码会多几个回调但后面排查状态不同步时会比“组件里什么都做”好很多。