SuperAPI AI 工具集

live-component

前端与建站

查看项目

更新于 10-16 01:12

技能介绍

用途:LiveComponent 用于组件的输出依赖用户交互的场景,如随输入更新的搜索结果、实时校验表单、筛选列表等,当界面变化需要服务端数据或逻辑时使用。若组件首次加载后不再重渲染,应改用 TwigComponent 以减少开销;纯客户端交互(开关、动画)应使用 Stimulus。

安装:composer require symfony/ux-live-component

主要能力:用 #[AsLiveComponent] 标记可 AJAX 重渲染的组件,#[LiveProp] 保存跨重渲染状态(writable 属性可由前端修改,url 绑定可同步到 URL 查询参数),#[LiveAction] 暴露可从前端调用的服务端方法,data-model 实现输入双向绑定(支持 debounce、on(blur)、norender、minlength 等修饰符),data-action="live#action" 触发动作,data-loading 显示加载状态。还支持表单集成(ComponentWithFormTrait)、实时校验、emit/LiveListener 组件通信、dispatchBrowserEvent、data-poll 轮询、defer/lazy 懒加载、data-live-ignore 与 data-live-preserve 数据保护、computed 属性缓存。

必要用法:根元素必须渲染 {{ attributes }},否则 Stimulus 控制器不会挂载,组件不会重渲染。每次交互都是一次服务器往返,组件状态会序列化发送到服务端并重新执行 PHP,再 morph DOM。

限制与建议:LiveComponent 不是客户端框架,高频交互(拖拽、实时绘图)应改用 Stimulus;组件应保持小而专注,通过 emit/listen 通信;用 norender 和 on(blur) 减少请求;Doctrine 实体按 ID 自动水合,自定义类型需指定 hydrateWith/dehydrateWith。完整 API、模式与常见陷阱参见 references/api.md、references/patterns.md、references/gotchas.md(具体内容本资料未提供)。