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