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