心智模型 — $mol

心智模型

如果你從 React 或 Vue 過來，在 $mol 的頭幾天多半會花在尋找那些根本不存在的東西上：computed、watch、useEffect、onMounted、生命週期鉤子裏的 fetch。它們不是被藏在 API 的某個角落，而是這套模型裏壓根沒有它們的位置。本頁是這套模型的五分鐘版本。請在讀

視圖之前先看它，日後每當一個熟悉的名字不見了，就回來翻翻。

拉取，而非推送

在有人讀取之前，甚麼都不會被計算。視圖透過讀取自己的屬性來渲染；每個屬性再讀取它需要的東西；依賴鏈就從這些讀取中自行組裝起來。沒有訂閱要宣告，也沒有 watch 要註冊：讀取本身就是訂閱。1$my_profile $mol_view2 sub /3 <= Name $mol_view4 sub / <= name \1namespace $.$$ {2 export class $my_profile extends $.$my_profile {3 @ $mol_mem4 user() {5 return this.$.$mol_fetch.json( 'https://api.example.com/me' ) as { name: string }6 }7 name() {8 return this.user().name9 }10 }11}渲染 Name 會讀取 name()，name() 讀取 user()，user() 發出網絡請求。沒有人告訴視圖有這個請求，也沒有人告訴請求有這個視圖。當 user() 變化時，讀取過它的一切都會重新計算，別的甚麼都不會。

沒有生命週期

沒有 mounted，沒有 useEffect，也沒有 created。資料是靠讀取一個屬性來請求的，而視圖在渲染時會讀取自己的屬性。所以上面的例子會在 $my_profile 出現在畫面上的那一刻載入用戶，不會更早。當視圖離開畫面，就再沒有人讀取 user()，那個單元會隨視圖一起被釋放。這就是「在 mount 時 fetch」這一模式的全部替代品：視圖索取它需要的東西，框架決定何時去要。載入不是掛在頁面事件上的，而是掛在「是否可見」上的。

屬性就是一個單元

一個帶選用參數的方法，同時是 getter、setter、計算值和狀態：1@ $mol_mem2count( next?: number ) {3 return next ?? 04}不帶參數呼叫它就是讀取，帶一個參數呼叫它就是寫入。@ $mol_mem 把方法變成一個帶快取的單元，當它讀取過的東西發生變化時重新計算。所謂計算值，不過是一個讀取了其他方法的 @ $mol_mem 方法。watcher 是不需要的：副作用屬於事件，而事件處理器就是一個標了 @ $mol_action 的方法。1@ $mol_mem2doubled() {3 return this.count() * 24}5 6@ $mol_action7increment() {8 this.count( this.count() + 1 )9}

狀態與響應式講清了這兩者各自內部容許發生甚麼。

會等待的同步程式碼

在 GitHub 上編輯此頁這有幫助嗎？是否上一頁介紹下一頁快速開始本頁內容拉取，而非推送沒有生命週期屬性就是一個單元會等待的同步程式碼一切都是覆寫如何閱讀原始碼命名下一步