浅谈 Vue React Flutter 框架

前言

最近学习了Vue.js、React、Flutter这三个框架，如果用一句话来总结，那么：

# Web 端Vue: 一切皆模板 React: 一切皆方法# 移动端Flutter: 一切皆对象

如果让我这个后端开发出身的人来选，Web 端我会选React，移动端我会选Flutter，我比较偏爱对象，方法，看到它们会感到很亲切。

框架概述对比

创建项目

Vite + Vue,React 项目创建

创建一个 vite 项目，可以选择React，Vue框架，这样我们就能得到一个基础的项目结构来运行对比，例如 Vue 项目创建：

$pnpmcreate vite@latest │ ◇ Project name: │ vite-project │ ◆ Select a framework: │ ○ Vanilla │ ● Vue │ ○ React │ ○ Preact │ ○ Lit │ ○ Svelte │ ○ Solid │ ○ Qwik │ ○ Angular │ ○ Marko │ ○ Others ◆ Select a variant: │ ● TypeScript │ ○ JavaScript │ ○ Official Vue Starter ↗ │ ○ Nuxt ↗ │ ○ Vike ↗ ◆ Use rolldown-vite(Experimental)?: │ ○ Yes │ ● No ◆ Install withpnpmand start now? │ ○ Yes / ● No │ └ Done. Now run:cdvite-projectpnpminstallpnpmdev

Flutter 项目创建

创建一个 Flutter 项目，例如counter_app：

flutter create counter_app

1. 计数器应用示例

Vue 3 (Composition API)

src/components/HelloWorld.vue

<!-- src/components/HelloWorld.vue --><scriptsetuplang="ts">import{ref}from"vue";defineProps<{msg:string}>();constcount=ref(0);</script><template><h1>{{ msg }}</h1><divclass="card"><buttontype="button"@click="count++">count is {{ count }}</button></div></template>

src/components/index.ts

importHelloWorldfrom"./HelloWorld.vue";export{HelloWorld};

src/App.vue

<!-- src/App.vue --><scriptsetuplang="ts">import{HelloWorld}from"./components";</script><template><HelloWorldmsg="Vite + Vue"/></template>

React (函数组件 + Hooks)

src/App.tsx

import{useState}from"react";importreactLogofrom"./assets/react.svg";importviteLogofrom"/vite.svg";import"./App.css";functionApp(props:{name:string}){const[count,setCount]=useState(0);return(<><h1>{props.name}</h1><div className="card"><button onClick={()=>setCount((count)=>count+1)}>countis{count}</button></div></>);}exportdefaultApp;

src/main.tsx，调用App组件<App name="Vite + React" />，其实，可以这样看待App(xxx)，就像调用函数一样

import{StrictMode}from"react";import{createRoot}from"react-dom/client";import"./index.css";importAppfrom"./App.tsx";createRoot(document.getElementById("root")!).render(<StrictMode><App name="Vite + React"/></StrictMode>,);

运行对比:

Flutter (Dart)

lib/main.dart

import'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'Flutter Demo',theme:ThemeData(colorScheme:.fromSeed(seedColor:Colors.deepPurple)),home:constMyHomePage(title:'Flutter Demo Home Page'),);}}classMyHomePageextendsStatefulWidget{constMyHomePage({super.key,requiredthis.title});finalStringtitle;@overrideState<MyHomePage>createState()=>_MyHomePageState();}class_MyHomePageStateextendsState<MyHomePage>{int _counter=0;void_incrementCounter(){setState((){_counter++;});}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(backgroundColor:Theme.of(context).colorScheme.inversePrimary,title:Text(widget.title),),body:Center(child:Column(mainAxisAlignment:.center,children:[constText('You have pushed the button this many times:'),Text('$_counter',style:Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton:FloatingActionButton(onPressed:_incrementCounter,tooltip:'Increment',child:constIcon(Icons.add),),);}}

Flutter 就像是在做 java 开发，全是对象，通过对象的组合来构建 UI，我想后端应该可以无缝切换到 Flutter 开发吧。

运行效果：

2. 列表数据展示示例

Vue 列表渲染

<template><div><ul><liv-for="item in items":key="item.id">{{ item.name }} - {{ item.price }}元</li></ul></div></template><scriptsetuplang="ts">constitems=[{id:1,name:"苹果",price:5},{id:2,name:"香蕉",price:3},{id:3,name:"橙子",price:4},];</script>

React 列表渲染

functionItemList(){constitems=[{id:1,name:"苹果",price:5},{id:2,name:"香蕉",price:3},{id:3,name:"橙子",price:4},];return(<ul>{items.map((item)=>(<li key={item.id}>{item.name}-{item.price}元</li>))}</ul>);}

Flutter 列表渲染

ListView.builder(itemCount:items.length,itemBuilder:(context,index){finalitem=items[index];returnListTile(title:Text(item.name),subtitle:Text('${item.price}元'),);},);

核心差异分析

1. 语法差异

• Vue: 模板语法，分离的HTML/CSS/JS
• React: JSX，JavaScript中写HTML
• Flutter: Widget树，完全用代码构建UI

2. 数据绑定

• Vue: 双向绑定（v-model）

<inputv-model="message"/>

• React: 单向数据流

<input value={message}onChange={(e)=>setMessage(e.target.value)}/>

• Flutter: 通过Controller

TextEditingController_controller=TextEditingController();TextField(controller:_controller);

3. 样式处理

<!-- Vue：Scoped CSS --><stylescoped>.button{background:blue;}</style>

// React：CSS-in-JSconststyles={button:{background:"blue",},};<button style={styles.button}>Click</button>;

// Flutter：完全代码化ElevatedButton(style:ElevatedButton.styleFrom(backgroundColor:Colors.blue,),child:Text('Click'),)

对比总结

用 Vue 或 React 开发 Web 端应用，用浏览器访问，用 Flutter 开发移动端应用，可以在不同系统手机上运行。

1. Vue就像是模板中填充数据，React就像是在 JS 中拼装 HTML，它们本质上还是html，通过浏览器渲染出来
2. Flutter或原生（Android, iOS）开发就像是以前用 VB 开发应用一样，控件要用它们自己的，而不是用 html 来写