“寫一次，到處跑?！?這句話咱們前端人已經(jīng)說了十多年了。

從 Weex、React Native、Flutter，到 UniApp、Taro ...... 每一代跨端框架都說自己可以 一次開發(fā)，到處運(yùn)行，但是那么多年過去了，也沒有真的實(shí)現(xiàn)這件事。

但就在本月，字節(jié)跳動(dòng)之前投投放出了一個(gè)新框架：Lynx.js 突然火了！

圖片

Lynx.js 號稱可以 完全以 Vue 的寫法，來實(shí)現(xiàn) android、ios、鴻蒙、web 的 4 端開發(fā)。

甚至連尤雨溪都為其站臺，并提出：“Vue 團(tuán)隊(duì)愿意全力配合 Vue + Lynx 的落地。”

圖片

幾天后，在 vuemastery 中，vue 團(tuán)隊(duì)就發(fā)表了針對 Vue + Lynx 的構(gòu)建方案。

圖片

那問題來了：跨端框架這么多，Lynx 憑什么特別？ 它到底怎么實(shí)現(xiàn)“Web 開發(fā)體驗(yàn) + 原生性能”的平衡？Vue 開發(fā)者又該不該“上車”呢？

今天，我們就來好好聊聊這件事。

Vue 的跨平臺之路

其實(shí)，用 Vue 寫移動(dòng) App，咱們早就試過了。過去幾年，社區(qū)里陸續(xù)出現(xiàn)過幾條主流路線。

第一條：NativeScript-Vue

圖片

這是老一輩的跨端代表，從 2018 年推出第一版之后，一直到現(xiàn)在的 V3.X 版本。

在最初時(shí)，NativeScript-Vue 只支持 webpack 構(gòu)建，最近在 V3 版本中增加了 Vite 熱重載與 esbuild 構(gòu)建方案。

第二條：Ionic Vue + Capacitor

圖片

這條路線更偏「Web」。用 HTML + CSS + Vue 去渲染 UI，然后通過 Capacitor 插件 調(diào)原生能力。適合做 PWA、H5殼子 App。

第三條：Quasar Framework

圖片

這算是 Vue 生態(tài)里的全家桶王者。一套代碼，能打 Web、移動(dòng)端、桌面端（基于 Electron）。但問題就是，你得學(xué)一整套 Quasar 的邏輯。太復(fù)雜了。

第四條：uniapp

圖片

國產(chǎn)之光了，就算你再怎么說它難用，但是也不能不承認(rèn) uniapp 已經(jīng)是一套目前最好的解決方案之一了。

所以說，你看，用 Vue 寫跨端應(yīng)用的路，很多人都走過，但是卻又都沒有走好。

Lynx 到底特別在哪？

跨端框架雖然不是什么新鮮事，可 Lynx 的思路，確實(shí)也和咱們上面說的框架不太一樣。

Lynx 期望是：做到「寫得像 Web」「跑得像原生」。

它憑啥敢這么說？核心有四點(diǎn)：

1. 雙線程架構(gòu)，保證性能

傳統(tǒng)的跨端框架，JS 邏輯和界面渲染都在一個(gè)線程里跑。當(dāng)邏輯計(jì)算一多，UI 就卡。

而 Lynx 直接搞了兩套線程：

• UI 主線程：專門負(fù)責(zé)渲染和事件響應(yīng)，由 Prim JS 引擎 驅(qū)動(dòng)。
• 后臺線程：處理邏輯、計(jì)算、請求、狀態(tài)管理。

它們通過消息機(jī)制通信，不互相阻塞。

什么意思呢？

就是你的接口再慢、計(jì)算再復(fù)雜，也不會(huì)拖 UI 的后腿。頁面能做到 首幀即渲染，交互毫無延遲 。

2. Web 優(yōu)先，保證開發(fā)習(xí)慣

Lynx 依然寫 HTML-like 的標(biāo)記語法，用原生 CSS。不用重新學(xué) DSL，也不用適配一堆奇怪語法。

并且它直接支持現(xiàn)代 CSS 能力，比如 漸變、裁剪、遮罩、濾鏡 等特效。

換句話說，你在 Web 上那一套寫法，在 Lynx 里幾乎不用改。

3. 組件化

Lynx 提供和 vue 一樣的組件化思維。

每個(gè)組件都是一個(gè)可復(fù)用的 UI 模塊，自己管理狀態(tài)、生命周期、樣式。

4. 已經(jīng)有了實(shí)戰(zhàn)場景

TikTok 搜索頁、Studio、Live 等模塊，已經(jīng)使用 Lynx 這套方案進(jìn)行了重構(gòu)。這可是過億級別的流量真實(shí)運(yùn)行場景了。

Lynx + Vue 嘗鮮版

目前 Lynx + Vue 雖然還沒有徹底落地，但是咱們可以看下 vuemastery 公布出來的原型項(xiàng)目：

<script>
import lynxLogo from './assets/lynx-logo.png'

export default {
  data() {
    return {
      title: "Hello VueLynx",
      message: "Welcome to Vue 3 in Lynx!",
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

<template>
  <view>
    <image :src="lynxLogo" className="Logo--lynx" />
    <text className="Title">Vue</text>
    <text className="Subtitle">on Lynx</text>
    <button @click="increment">Count: {{ count }}</button>
  </view>
</template>

注意：這個(gè)代碼看起來雖然像普通的 Vue 文件，但 <view>、<text>、<image> 這些標(biāo)簽，其實(shí)并不是 DOM 元素，而是 Lynx 的原生組件映射。 也就是說，Lynx 會(huì)自動(dòng)把它們渲染成 iOS / Android / Web 各平臺的真實(shí) UI。

但是，目前 Vue + Lynx 想要徹底融合可用，目前還有三個(gè)問題需要解決：

1. 編譯器適配 Rspeedy

Vue 的單文件組件需要在編譯階段被拆分成兩個(gè)線程：

• <template> + <style>主線程（負(fù)責(zé)渲染）
• <script>后臺線程（處理邏輯）

這一步由 Rspeedy（Rust 版 Rspack）完成，它需要可以自動(dòng)拆解并生成：

/dist
 ├── main-thread.js     // 渲染層  
 ├── worker-thread.js   // 邏輯層  
 └── style.css

2. 運(yùn)行時(shí)適配

Vue 原本操作的是 DOM，而 Lynx 沒有 DOM。所以需要新增一個(gè)運(yùn)行時(shí)包：

vue/runtime-lynx

它會(huì)把 document.createElement('div') 替換為 lynx.createElement('view')。Vue 繼續(xù)負(fù)責(zé)數(shù)據(jù)響應(yīng)，Lynx 負(fù)責(zé)把 UI 渲染到原生層。

3. 分線程編譯工具

最后一步，是在編譯階段區(qū)分邏輯歸屬。

未來 Vue 可能需要支持類似下面的語法：

<script main>
  // 在主線程運(yùn)行的邏輯（如動(dòng)畫、手勢）
</script>

<script>
  // 默認(rèn)后臺線程邏輯
</script>

通過這種標(biāo)注式控制，Vue 能精準(zhǔn)分配線程，既保性能又好調(diào)試。

最后

最后的最后，說到底，Lynx 還只是個(gè)新生兒。

雖然在 TikTok 搜索、Live、Studio 等模塊里已經(jīng)驗(yàn)證過性能，但就生態(tài)層面來說，它目前還很早。

所以，如果你現(xiàn)在希望通過 vue 去開發(fā)原生 APP 的話，那么還是建議參考「Vue 的跨平臺之路」中提到的四種方案進(jìn)行。