React 與 Vue 對比指南 - 上

本文將展示如何在 React 和 Vue 中實現常見功能，從基礎渲染到高級狀態管理

Hello

分別使用 react 和 vue 寫一個 Hello World！

react

export default () => {return <div>Hello World!</div>;
}

vue

<template><div>Hello World!</div>
</template>

屬性綁定

react

通過 {} 綁定屬性

export default () => {const url = "https://liuyuyang.net"return <a href={url}>跳轉</a>;
}

vue

通過 : 綁定屬性

<script setup lang="ts">
const url = "https://liuyuyang.net"
</script><template><!-- <a href="https://liuyuyang.net"></a> --><a :href="url">跳轉</a>
</template>

表達式

react

react 的表達式是單括號

export default () => {const value = "Hello World!"const getValue = () => "Hello"const getImage = () => "https://liuyuyang.net"return (<><div>{value}</div><div>{true ? 'yes' : 'no'}</div><div>{getValue()}</div><img src={getImage() + '/1.jpg'} /><div style={{ background: true ? 'red' : 'blue' }}>{value}</div></>)
}

vue

vue 的表達式是雙括號

<script setup lang="ts">
const value = "Hello World!"
const getValue = () => "Hello"
const getImage = () => "https://liuyuyang.net"
</script><template><div>{{ value }}</div><div>{{ true ? 'yes' : 'no' }}</div><div>{{ getValue() }}</div><img :src="getImage() + '/1.jpg'" /><div :style="{ background: true ? 'red' : 'blue' }">{{ value }}</div>
</template>

動態類名

react

react 定義類名的方式為 className

export default () => {return <div className={`${true ? 'aaa' : 'bbb'}`}>Hello World!</div>
}

vue

vue 定義類名的方式為 class

<script setup lang="ts">
</script><template><div :class="`${true ? 'aaa' : 'bbb'}`">Hello World!</div><div :class="{ aaa: true }">Hello World!</div><div :class="{ 'aaa-bbb': true }">Hello World!</div>
</template>

條件渲染

react

react 大多數語法都比較偏向原生

export default () => {const active = 1return (<>{active === 1? <div>aaa</div>: active === 2? <div>bbb</div>: <div>ccc</div>}</>)
}

vue

vue 可以使用 v-if 或 v-show 進行條件渲染

<script setup lang="ts">
const active = 1
</script><template><div v-if="active === 1">aaa</div><div v-else-if="active === 2">bbb</div><div v-else="true">ccc</div>
</template>

渲染數據

react

react 雖然有點語法寫起來沒有 vue 簡單，但他的有點在于更加靈活、自由，非常受益于大型復雜的項目

export default () => {const list = ['aaa', 'bbb', 'bbb']return (<ul>{list.map((item, index) => {return <li key={index}>{item}</li>})}</ul>)
}

vue

vue 使用 v-for 進行數據渲染

<script setup lang="ts">
const list = ['aaa', 'bbb', 'bbb']
</script><template><ul><li v-for="(item, index) in list" :key="index">{{ item }}</li></ul>
</template>

事件處理

react

react 的 onClick 需要的是一個函數

export default () => {const func = () => alert("Hello World!")// return <button onClick={() => alert("Hello World!")}>點擊彈框</button>;return <button onClick={func}>點擊彈框</button>;
}

react 事件傳參方式

export default () => {const func = (msg: string) => {alert(msg)}return <button onClick={() => func('Hello World!')}>點擊彈框</button>;
}

vue

vue 的 @click 需要的是實例上已有的函數，比如在當前文件以及全局定義或內置的函數。因為 alert 不在實例上，因此不能直接 @click="alert('Hello World!')"，但我們可以在當前文件定義一個函數，在函數里面使用 alert，然后調用這個函數

<script setup lang="ts">
const func = () => {alert('Hello World!')
}
</script><template><!-- <button v-on:click="func">點擊彈框</button> --><button @click="func">點擊彈框</button>
</template>

vue 事件傳參方式

<script setup lang="ts">
const func = (msg: string) => {alert(msg)
}
</script><template><button @click="func('Hello World!')">點擊彈框</button>
</template>

狀態處理

react

react 通過 useState 進行狀態管理

import { useState } from "react";export default () => {const [count, setCount] = useState(0)return (<><button onClick={() => setCount(count + 1)}>+1</button><div>{count}</div></>);
}

vue

vue 通過 ref 或 reactive 進行狀態管理

<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0)// count.value = 100 在腳本中需要加.value，在模板中則不需要
</script><template><button @click="count++">+1</button><button @click="() => count++">+1</button><div>{{ count }}</div>
</template>

表單處理

react

表單處理這一點個人感覺 react 要比 vue 麻煩些

import { useState } from "react";export default () => {const [value, setValue] = useState("")return (<><input type="text" value={value} onChange={e => setValue(e.target.value)} /><div>{value}</div></>);
}

vue

雙向數據綁定，vue 的一大特性，這個語法糖非常好用

<script setup lang="ts">
import { ref } from 'vue'
const value = ref("")
</script><template><input type="text" v-model="value"><div>{{ value }}</div>
</template>

數據偵聽

react

react 通過 useEffect 監聽數據的變化

import { useEffect, useState } from "react"export default () => {const [count, setCount] = useState(0)useEffect(() => {console.log(count)}, [count])return <button onClick={() => setCount(count + 1)}>+1</button>
}

vue

vue 通過 watch 監聽數據的變化

<script setup lang="ts">
import { ref, watch } from 'vue';
const count = ref(0)// watch(() => count.value, (newValue, oldValue) => { 
watch(count, (value) => { console.log(value);
})
</script><template><button @click="count++">+1</button>
</template>

計算屬性

react

react 通過 useMemo 實現計算屬性

import { useMemo, useState } from "react"export default () => {const [count, setCount] = useState(0)const newCount = useMemo(() => count * 2, [count])return (<><h1>{count} {newCount}</h1><button onClick={() => setCount(count + 1)}>+1</button></>)
}

vue

vue 通過 computed 實現計算屬性

<script setup lang="ts">
import { ref, computed } from 'vue';
const count = ref(0)
const newCount = computed(() => count.value * 2)
</script><template><h1>{{ count }} {{ newCount }}</h1><button @click="count++">+1</button>
</template>

下期內容

下一期內容為：組件、路由、全局狀態管理、以及兩種框架完成相同的 Demo