Vue、React、原生小程序的写法对比差异
以下是从 变量、方法、路由、状态管理、父子传值 等多个维度对 Vue、React、原生小程序 的对比表格：
技术对比表格
| 功能/技术 | Vue (Options/Composition API) | React (Hooks) | 原生微信小程序 |
|---|---|---|---|
| 变量定义 | data() { return { count: 0 } }(Options API)const count = ref(0)(Composition API) |
const [count, setCount] = useState(0); |
Page({ data: { count: 0 } }) |
| 方法定义 | methods: { increment() { this.count++ } }或 Composition API 直接定义函数 |
直接定义函数：const increment = () => setCount(count + 1); |
Page({ increment() { this.setData({ count: this.data.count + 1 }) } }) |
| 模板语法 | <div @click="increment">{
{ count }}</div> |
<div onClick={increment}>{count}</div> |
<view bindtap="increment">{
{ count }}</view> |
| 路由跳转 | 使用 vue-router：this.$router.push('/path') |
使用 react-router-dom：navigate('/path')(需用 useNavigate Hook) |
原生 API：wx.navigateTo({ url: '/path' }) |
| 路由参数获取 | this.$route.params.id |
const { id } = useParams();(需用 useParams Hook) |
onLoad(options) { const id = options.id } |
| 状态管 |