kuikly-reactive-observer
Kuikly 响应式更新与指令系统开发助手(Kuikly DSL)。指导如何使用 observable、observableList、observableSet 实现 UI 响应式更新,以及 vfor、vforIndex、vforLazy、vif、velseif、velse、vbind 等指令的正确用法。当用户在 Kuikly 中需要以下场景时使用:(1) 声明响应式字段并绑定到 UI 属性 (2) 列表渲染(vfor/vforIndex/vforLazy) (3) 条件渲染(vif/velseif/velse) (4) 值绑定渲染(vbind) (5) 高效列表更新(diffUpdate)
By tencent-tds · 361 installs
npx skills add tencent-tds/kuiklyui-ai --skill kuikly-reactive-observer
Source repository · Upstream listing
Kuikly 响应式更新与指令系统
核心机制
attr {} 闭包中读取响应式字段时,框架自动收集依赖;字段值变化时,自动更新绑定的 UI 属性。 只需更新数据,UI 自动响应。
注意: observable 内部使用 == 比较新旧值, 相等时不触发更新 。
响应式字段声明
在 Pager (实现了 PagerScope 接口)或任何 PagerScope 子类中使用:
绑定到 UI
指令系统
循环指令:vfor / vforIndex
必须传闭包 { ctx.list } ,不是直接传值 ctx.list 。
循环指令:vforLazy(超大列表)
仅在 ListView 中使用(不含 PageList、WaterfallList),动态增删可见范围外的虚拟节点:
参数 类型 默认值 说明
itemList () ObservableList<T — 数据源闭包
maxLoadItem Int 30 内存中最大虚拟节点数,建议为一屏可见数的 2~3 倍
itemCreator (T, Int, Int) Unit — 构建闭包
条件指令:vif / velseif / velse
velseif / velse 必须紧跟 vif 或 velseif ,中间不能插入其他组件。
绑定指令:vbind
类似 when 语句,绑定值变化时 移除所有子组件并重建 :
vbind 绑定值为 null 时不执行 creator 闭包。
高效更新列表:diffUpdate
方式 行为 性能
clear() + addAll() 销毁所有 Item → 重建 差
diffUpdate(newList) 只增删变化的 Item 优
常见错误与约束规则
详见以下参考文件:
常见错误 :[COMMON MISTAKES.md](references/COMMON MISTAKES.md) — 响应式依赖断开、对象内部属性修改不触发更新、vfor 闭包传值而非传闭包、ViewBuilder 未 invoke 等 8 类典型错误
指令约束规则 :[DIRECTIVE RULES.md](references/DIRECTIVE RULES.md) — vfor 闭包必须且仅生成一个根节点、根节点不能是指令节点、vforLazy 仅限 ListView、velseif/velse 必须紧跟 vif、vforIndex 的 index/count 更新规则等