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

시작하기에서 시작하세요.표의 어떤 행이 여러분이 의지하던 것의 이름을 바꿔 놓았다면,

멘탈 모델이 그 새 이름 뒤의 발상과, 찾고 있는 훅이 왜 거기에 없는지를 설명합니다.GitHub에서 이 페이지 편집도움이 되었나요?예아니요이전쇼케이스 다음쿡북이 페이지에서개념 대응 대개 새롭게 느껴지는 것 당신이 해결하는가, 프레임워크가 해결하는가 번역을 시도해 보세요