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 = 1
return (
<>
{
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
