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