$mol
搜索
⌘ K
文档
演练场
对比
生态系统
关于
ZH
状态与响应式
Getting Started
介绍
心智模型
快速上手
从 TypeScript 到 view.tree
项目结构
工具链
Essentials
安装
视图
状态与响应式
路由
渲染
测试
部署
故障排查
Data
数据获取
数据模式
Giper Baza
More
展示
来自 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
装饰的方法是一个带缓存的响应式单元。它只运行一次,记住结果,仅当它读取过的某个值发生变化时才重新计算。
1
namespace
$
.
$$
{
2
export class
$my_counter
extends
$
.
$my_counter
{
3
@ $mol_mem
count
(
)
{
return
0
}
4
5
@ $mol_mem
doubled
(
)
{
6
return
this
.count
(
)
*
2
7
}
8
}
9
}
doubled
读取了
count
,所以它会自动订阅
count
。改变
count
,每个显示
doubled
的视图都会刷新——无需手动订阅任何东西。
读取与写入
一个属性既是 getter 也是 setter:不带参数调用它来读取,带一个参数调用它来写入。
1
@ $mol_action
2
increment
(
)
{
3
this
.count
(
this
.count
(
)
+
1
)
4
}
动作与计算
这一个区别让响应式代码保持可预测:
@ $mol_mem
是
纯计算
——只读取其他单元并返回一个值。
@ $mol_action
是
副作用
——写入状态、网络调用和定时器都属于这里。
在
@ $mol_mem
内部写入单元会造成反馈循环(写入使某个依赖失效,从而重新计算,又再次写入)。$mol 会将其报告为
循环订阅
。修复方法始终相同:把副作用放在动作里,让计算保持纯净。
在
@ $mol_mem
中你可以
但不能
按钮处理器在基类上生成为
@ $mol_mem
;用
@ $mol_action
覆盖它们,使它们能安全地写入:
1
@ $mol_action
2
submit
(
)
{
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.