メンタルモデル

React や Vue から来たなら、$mol での最初の数日は、そこにないものを探すことに費やされます。computed、watch、useEffect、onMounted、ライフサイクルフックの中の fetch。それらは API のどこかに隠れているのではありません。モデルにそれらの居場所がないのです。このページはそのモデルの 5 分版です。

ビューの前に読み、見知った名前が見当たらなくなったら戻ってきてください。

プッシュではなくプル

誰かが読むまで、何も計算されません。ビューは自分のプロパティを読むことで描画され、各プロパティは必要なものを読み、依存の連鎖はそれらの読み取りから自ずと組み上がります。宣言すべき購読も、登録すべき 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() を読まず、セルはビューとともに解放されます。「マウント時に fetch」というパターンの代わりは、これで全部です。ビューは必要なものを求め、いつ求めるかはフレームワークが決めます。読み込みはページのイベントに結び付いているのではなく、見えていることに結び付いています。

プロパティはセルである

省略可能な引数を一つ取るメソッドが、ゲッターであり、セッターであり、計算値であり、状態でもあります。1@ $mol_mem2count( next?: number ) {3 return next ?? 04}引数なしで呼べば読み取り、引数を付けて呼べば書き込みです。@ $mol_mem はメソッドを、読み取ったものが変化したときに再計算されるキャッシュされたセルに変えます。計算値とは、他のメソッドを読む @ $mol_mem メソッドにすぎません。ウォッチャーは要りません。副作用はイベントに属し、イベントハンドラーは @ $mol_action を付けたメソッドです。1@ $mol_mem2doubled() {3 return this.count() * 24}5 6@ $mol_action7increment() {8 this.count( this.count() + 1 )9}GitHub でこのページを編集役に立ちましたか？はいいいえ前へはじめに次へはじめかたこのページの内容プッシュではなくプルライフサイクルはないプロパティはセルである待つ同期コードすべてはオーバーライドソースの読みかた名前次へ