smalljs$mol搜索⌘ K文档演练场对比生态系统关于ZH
来自 React、Vue 和 SvelteGetting 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

来自 React、Vue 和 Svelte

如果你用 React、Vue 或 Svelte 构建过界面，你已经理解 $mol 所做的大部分事情——只是名字不同而已。这些框架优秀且流行是有充分理由的；本页是一张翻译对照表，而不是一场竞赛，帮你快速找到熟悉感。

概念对照

概念ReactVueSvelte$mol组件函数 / 类SFC（.vue）.svelte 文件.view.tree + .view.ts局部状态useStateref / reactivelet x@ $mol_mem派生值useMemocomputed$: y = …@ $mol_mem（读取其他单元）副作用useEffectwatchEffect$: { … }@ $mol_action（显式，永不自动）挂载时加载数据useEffect(fetch)onMounted(fetch)onMount(fetch)没有钩子：在属性里读取数据，视图渲染时自会去请求Propspropspropsexport letview.tree 中的绑定事件onClick@clickon:clickclick? <=> handler?双向输入受控输入v-modelbind:valuevalue? <=> field?列表items.map()v-for{#each}带键的 Row*条件cond && …v-if{#if}赋值 null 以移除共享状态Redux / ContextPinia / providestore任何带 @ $mol_mem 的对象路由React RouterVue RouterSvelteKit$mol_state_arg样式CSS-in-JS带作用域的 <style><style>带类型的 .view.css.ts

通常会感到新鲜的地方

由你解决 vs. 由框架解决

更深层的差别不在于上面的词汇，而在于谁来解决那些反复出现的问题。在 React、Vue 或 Svelte 中，它们大多是你在每个组件里重新实现、并以各自方式弄坏的模式。在 $mol 中，它们是同一套机制的属性，因此整类工作直接消失，而不是换来一个更好用的 API。上面的表格只是重命名了这些概念——而在这里，$mol 真正把它们移除了。

试试这种翻译

内化这套对应关系最快的方法是两边都写一点：打开 游乐场，移植一个你熟悉的小组件，看看效果如何。或者从 快速上手开始。当表格里的某一行把你依赖的东西改了名字， 心智模型会解释新名字背后的想法，以及你要找的那个钩子为什么不在这里。在 GitHub 上编辑此页这有帮助吗？是否上一页展示下一页食谱本页内容概念对照通常会感到新鲜的地方由你解决 vs. 由框架解决试试这种翻译
Type to search the documentation.