smalljs$mol搜索⌘ K文档演练场对比生态系统关于ZH
状态与响应式Getting Started介绍心智模型快速上手从 TypeScript 到 view.tree项目结构工具链Essentials安装视图状态与响应式路由渲染测试部署故障排查Data数据获取数据模式Giper BazaMore展示来自 React、Vue 和 Svelte食谱Advanced插件模块元数据离线幽灵视图About常见问题团队发布API$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

状态与响应式

$mol 的状态像电子表格一样运作:你声明一个值如何计算,所有依赖它的东西都会自动更新。没有 store,没有 dispatch,没有 effect 钩子——依赖图会追踪需要重新计算的内容。

响应式属性

@ $mol_mem 装饰的方法是一个带缓存的响应式单元。它只运行一次,记住结果,仅当它读取过的某个值发生变化时才重新计算。1namespace $.$$ {2 export class $my_counter extends $.$my_counter {3 @ $mol_mem count() { return 0 }4 5 @ $mol_mem doubled() {6 return this.count() * 27 }8 }9}doubled 读取了 count,所以它会自动订阅 count。改变 count,每个显示 doubled 的视图都会刷新——无需手动订阅任何东西。

读取与写入

一个属性既是 getter 也是 setter:不带参数调用它来读取,带一个参数调用它来写入。1@ $mol_action2increment() {3 this.count( this.count() + 1 )4}

动作与计算

这一个区别让响应式代码保持可预测:@ $mol_mem纯计算——只读取其他单元并返回一个值。@ $mol_action副作用——写入状态、网络调用和定时器都属于这里。@ $mol_mem 内部写入单元会造成反馈循环(写入使某个依赖失效,从而重新计算,又再次写入)。$mol 会将其报告为循环订阅。修复方法始终相同:把副作用放在动作里,让计算保持纯净。@ $mol_mem 中你可以但不能按钮处理器在基类上生成为 @ $mol_mem;用 @ $mol_action 覆盖它们,使它们能安全地写入:1@ $mol_action2submit() {3 this.saved( true )4}

派生状态可组合

由于依赖会被自动追踪,派生值无需任何接线即可链式组合。每个都读取前一个;根部的一次变化恰好传播到需要的范围:1@ $mol_mem full_name() {2 return `${ this.first() } ${ this.last() }`.trim()3}4 5@ $mol_mem greeting() {6 return this.full_name() ? `Hello, ${ this.full_name() }!` : 'Hello!'7}
在 GitHub 上编辑此页这有帮助吗?上一页视图下一页路由
本页内容响应式属性读取与写入动作与计算派生状态可组合带键状态异步只是一个值事件之间的瞬时状态下一步
Type to search the documentation.