站长

<p>大致比较，根据具体情况会有不一样的情况</p><h2 id="heading-0">API比较</h2><table><thead><tr><th>Vue.js 3 Composition API</th><th>React.js Hooks API</th><th>Svelte.js</th></tr></thead><tbody><tr><td>生命周期</td><td>useEffect</td><td>生命周期</td></tr><tr><td>watch/watchEffect</td><td>useEffect</td><td>$: {  }</td></tr><tr><td>computed</td><td>useMemo/useEffect</td><td>$: {  }</td></tr><tr><td>ref/reactive</td><td>useState</td><td>$:</td></tr><tr><td>v-html</td><td>dangerouslySetInnerHTML</td><td>{ @html }</td></tr><tr><td>v-if</td><td>js三元运算</td><td>{ #if }</td></tr><tr><td>v-for</td><td>map()</td><td>{ #each }</td></tr><tr><td>v-model</td><td>useState+onChange</td><td>bind:value</td></tr><tr><td>@click</td><td>onClick</td><td>on:click</td></tr><tr><td>ref</td><td>useRef</td><td>this</td></tr><tr><td>:class</td><td>className</td><td>class:</td></tr><tr><td>provide/inject</td><td>useContext</td><td>context API</td></tr><tr><td>eventbus*</td><td>publish/subscribe*</td><td>publish/subscribe*</td></tr></tbody></table><p>*：需要第三方库</p>

大致比较，根据具体情况会有不一样的情况API比较*：需要第三方库

Vue.js 3 Composition API	React.js Hooks API	Svelte.js
生命周期	useEffect	生命周期
watch/watchEffect	useEffect	$: { }
computed	useMemo/useEffect	$: { }
ref/reactive	useState	$:
v-html	dangerouslySetInnerHTML	{ @html }
v-if	js三元运算	{ #if }
v-for	map()	{ #each }
v-model	useState+onChange	bind:value
@click	onClick	on:click
ref	useRef	this
:class	className	class:
provide/inject	useContext	context API
eventbus*	publish/subscribe*	publish/subscribe*

以Vue.js为标准来比较React.js，Svelte.js的API

API比较