smalljs$mol検索⌘ Kドキュメントプレイグラウンド比較エコシステム概要JA
React、Vue、Svelte からGetting 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 で UI を作ったことがあるなら、$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 / provideストア@ $mol_mem を持つ任意のオブジェクトルーティングReact RouterVue RouterSvelteKit$mol_state_argスタイリングCSS-in-JSスコープ付き <style><style>型付き .view.css.ts

たいてい新しく感じるところ

自分で解くか、フレームワークが解くか

より深い違いは上の語彙ではなく、繰り返し現れる問題を誰が解くかにあります。React、Vue、Svelte では、その多くはすべてのコンポーネントで再実装し、それぞれのやり方で壊してしまうパターンです。$mol ではそれらは一つのメカニズムの性質なので、より使いやすい API を得るのではなく、その種の作業ごと消えてなくなります。上の表が名前を付け替えるのに対し、$mol が実際にそれらを取り除くのはここです。

翻訳を試す

対応を身につける一番速い方法は、両方を少し書いてみることです。 プレイグラウンドを開き、知っている小さなコンポーネントを移植して、どう収まるか見てみましょう。あるいは はじめにから始めてください。表のある行が、あなたの頼りにしてきたものを別の名前に置き換えているなら、 メンタルモデルがその新しい名前の背後にある考えと、探しているフックがそこにない理由を説明します。GitHub でこのページを編集役に立ちましたか？はいいいえ前へショーケース次へクックブックこのページの内容概念の対応たいてい新しく感じるところ自分で解くか、フレームワークが解くか翻訳を試す
Type to search the documentation.