就在前幾天，字節(jié)跳動(dòng)開(kāi)源的“大殺器”--Lynx.js 火了。

號(hào)稱(chēng)要把 Vue 帶進(jìn)原生世界，讓全球 200 萬(wàn) Vue 開(kāi)發(fā)者直接“零成本”變身 Native 工程師。

Weex 之后，Vue 移動(dòng)端「空白十年」

嚴(yán)格來(lái)說(shuō)，Vue 官方從未發(fā)布過(guò)名為 "Vue Native" 的框架。

2017 年阿里 Weex 曾讓 Vue 寫(xiě)原生成為現(xiàn)實(shí)，但維護(hù)力度遞減；

2018 年社區(qū)出現(xiàn)的「vue-native-core」只是基于 React Native 的薄層封裝，2021 年便停更。

自此，Vue 開(kāi)發(fā)者想在移動(dòng)端打出「原生體驗(yàn)」這張牌，只能投向第三方方案：

• NativeScript-Vue
• Ionic Vue + Capacitor
• uni-app / uni-appx

老牌選手集體升級(jí)——「Vue Native」儲(chǔ)備軍

就在字節(jié) Lynx 刷屏的同一個(gè)月，幾條「低調(diào)卻重磅」的更新悄悄發(fā)布：

NativeScript-Vue 3.0 正式支持 Vite 熱重載與 esbuild 構(gòu)建，啟動(dòng)時(shí)間從 10s 級(jí)降到 1s 級(jí)；全新 @nativescript/tailwind 讓原生控件也能用 Tailwind 語(yǔ)法，開(kāi)發(fā)體驗(yàn)直追 Web。

Ionic Vue 7 帶來(lái) Standalone Components，完全擺脫 Angular 影子；配合 Capacitor 5 的 background-runner 插件，可在后臺(tái)線(xiàn)程跑 JS，卡頓問(wèn)題大幅緩解。

uni-app 正式開(kāi)放 uni-appx —— 把 Vue SFC 編譯成 Kotlin/Swift 的原生代碼，脫離 WebView，性能對(duì)標(biāo) Flutter；華為、阿里小程序已率先接入。

換句話(huà)說(shuō)，「Vue 寫(xiě)原生」這條賽道從未消失，只是從「單選題」變成了「多選題」。

黑馬入場(chǎng)：字節(jié) Lynx 的「王炸」在哪里？

與上面「WebView → 原生」的漸進(jìn)路線(xiàn)不同，Lynx 一出生就是原生渲染 + 雙線(xiàn)程架構(gòu)：

• UI 線(xiàn)程：自研 PrimJS 引擎 + Rspeedy（Rust 版 Rspack）→ 首幀瞬間直出。
• 后臺(tái)線(xiàn)程：跑業(yè)務(wù)邏輯、網(wǎng)絡(luò)請(qǐng)求，復(fù)雜計(jì)算不卡界面。
• 框架中立：模板語(yǔ)法依舊是 HTML/CSS，但渲染端是 iOS/Android 原生控件，性能與 Flutter 同一梯隊(duì)。
• 真實(shí)戰(zhàn)績(jī)：TikTok 搜索、直播、剪映（CapCut）部分頁(yè)面已用 Lynx 重構(gòu)，月活 10 億+ 場(chǎng)景驗(yàn)證。

更關(guān)鍵的是，Lynx 團(tuán)隊(duì)公開(kāi)喊話(huà)：

"We'd love to see Vue on Lynx. PRs are welcome!"

于是 GitHub 出現(xiàn) vue-lynx-prototype，目標(biāo)只有一個(gè)——讓 Vue SFC 直接編譯成 Lynx 的雙線(xiàn)程包。

搶先嘗鮮：Vue + Lynx 代碼長(zhǎng)什么樣？

下面給出一段可直接跑通的 Hello World 示例，方便大家感受「Vue 語(yǔ)法 + Lynx 原生渲染」的寫(xiě)法。

注意：<view>、<text>、<image> 為 Lynx 原生標(biāo)簽，會(huì)被編譯成對(duì)應(yīng)平臺(tái)的真實(shí)組件；

其余語(yǔ)法與標(biāo)準(zhǔn) Vue 完全一致。

<!-- HelloLynx.vue -->
<script>
// 支持 ESModule，可直接 import 圖片、JSON 等靜態(tài)資源
import lynxLogo from'./assets/lynx-logo.png'

exportdefault {
name: 'HelloLynx',
  data() {
    return {
      title: 'Hello Vue-Lynx',
      msg: '雙線(xiàn)程原生渲染，首幀直出！',
      count: 0
    }
  },
methods: {
    increment() {
      this.count++
      // 這里運(yùn)行在后臺(tái)線(xiàn)程，不會(huì)阻塞 UI
      console.log(`[background] count = ${this.count}`)
    }
  }
}
</script>

<template>
<!-- <view> 等價(jià)于原生容器，支持 flex 布局 -->
<view class="container">
    <!-- <image> 會(huì)被編譯成 UIImageView / android.widget.ImageView -->
    <image :src="lynxLogo" class="logo" />

    <!-- <text> 對(duì)應(yīng) UILabel / TextView，只能包裹文本 -->
    <text class="h1">{{ title }}</text>
    <text class="p">{{ msg }}</text>

    <!-- 事件綁定與 Web 一致 -->
    <button class="btn" @click="increment">
      點(diǎn)我：{{ count }}
    </button>
</view>
</template>

四種技術(shù)路線(xiàn)，怎么選？

NativeScript-Vue：

• 渲染：真正的 iOS/Android 原生控件
• 性能天花板：★★★★(接近原生)
• 開(kāi)發(fā)體驗(yàn)：剛接入 Vite，秒級(jí)熱重載 + Tailwind 支持，"寫(xiě) Vue 就像寫(xiě) Web"
• 生態(tài)/插件：直接調(diào)用原生 API，Cordova/Capacitor 插件也能復(fù)用
• 適合場(chǎng)景：需要 100% 原生 UI 和原生能力，且團(tuán)隊(duì)對(duì) NativeScript 無(wú)抵觸

Ionic Vue：

• 渲染：WebView(可疊加 PWA)
• 性能天花板：★★★(足夠展示類(lèi)、電商類(lèi)應(yīng)用)
• 開(kāi)發(fā)體驗(yàn)：最貼近 Web，組件庫(kù)成熟，一鍵生成 App/小程序/PWA
• 生態(tài)/插件：靠 Capacitor 打通相機(jī)、藍(lán)牙、推送等原生功能
• 適合場(chǎng)景：追求"同一套代碼覆蓋 Web + 多平臺(tái)小程序 + App"，對(duì)極致性能不敏感

uni-app / uni-appx：

• 渲染：默認(rèn) WebView，uni-appx 可編譯為 Kotlin/Swift 原生代碼
• 性能天花板：★★★☆(uni-appx 可到 ★★★★)
• 開(kāi)發(fā)體驗(yàn)：CLI、云開(kāi)發(fā)、插件市場(chǎng)一條龍，國(guó)內(nèi)文檔最友好
• 生態(tài)/插件：微信、支付寶、百度、QQ、抖音小程序全覆蓋
• 適合場(chǎng)景：業(yè)務(wù)主戰(zhàn)場(chǎng)在國(guó)內(nèi)，需要一次發(fā)布多端小程序，同時(shí) App 也要能上架

Vue + Lynx(社區(qū)原型)：

• 渲染：真正的雙線(xiàn)程原生渲染(iOS/Android)
• 性能天花板：★★★★☆(TikTok 億級(jí)驗(yàn)證)
• 開(kāi)發(fā)體驗(yàn)：即將對(duì)接 Vite/Rspeedy，目前需手動(dòng)配置;生態(tài)幾乎為零
• 適合場(chǎng)景：從 0 開(kāi)始的新項(xiàng)目、對(duì)首幀和動(dòng)畫(huà)極度挑剔、字節(jié)系流量場(chǎng)景或愿意共建生態(tài)的團(tuán)隊(duì)

一句話(huà)總結(jié)：

• "現(xiàn)在就要" → 選 1 或 3
• "最像 Web" → 選 2
• "性能極致 + 愿意嘗鮮" → 沖 4

「Vue Native」真的要來(lái)了？

如果你今天就要上線(xiàn)，NativeScript-Vue 3 的 Vite 版已是生產(chǎn)可用；uni-appx 則適合國(guó)內(nèi)小程序+App 一起發(fā)。

如果你追求極致性能且能接受早期生態(tài)，Lynx 社區(qū)正在招募貢獻(xiàn)者：編譯器、路由、DevTools、TypeScript 聲明……每個(gè) PR 都可能成為官方標(biāo)準(zhǔn)。

也許再過(guò)一年，我們不用再討論「該選哪個(gè)框架」——npm create vue-native@latest 一條命令，自動(dòng)生成 Lynx + Vue 雙線(xiàn)程模板，或者 NativeScript-Vue 的 Vite 腳手架，亦或 uni-appx 的原生工程。

無(wú)論哪條路線(xiàn)，「Vue 寫(xiě)原生」不再是空白——Weex 的遺憾，終將在 2025 被填補(bǔ)！

參考鏈接：https://www.vuemastery.com/blog/vue-native-vue-lynx#2-ionic-vue-with-capacitor