心智模型 — $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 上编辑此页这有帮助吗？是否上一页介绍下一页快速上手本页内容拉取，而非推送没有生命周期属性就是一个单元会等待的同步代码一切都是覆盖如何阅读源码命名下一步