$mol
搜尋
⌘ K
文件
遊樂場
比較
生態系統
關於
ZH_HK
狀態與響應式
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.