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 } |
| 状态管 |