“Vue 之父”最新采訪：我是第一個(gè)吃螃蟹的人

前言

或者，你是否需要一個(gè)“多面手框架”，例如 Next 或 Angular，它們兼具 SSR（服務(wù)端渲染）、路由和導(dǎo)航，以及更強(qiáng)大的狀態(tài)管理等內(nèi)置功能？

當(dāng)然，這取決于你要構(gòu)建的網(wǎng)站的規(guī)模。

但如果你是 Vue 愛好者，那其實(shí)你已經(jīng)是漸進(jìn)式框架的擁護(hù)者了。如果你確實(shí)需要更復(fù)雜的功能，可以使用其他配置或第三方工具。

舉個(gè)栗子，你可以選擇使用 Node 通過 Vue 實(shí)現(xiàn) SSR，或者可以直接使用基于 Vue 構(gòu)建的 Nuxt 框架。事實(shí)上，Nuxt 就是專門為處理 SSR 和其他高級(jí)功能而設(shè)計(jì)的。

漸進(jìn)式框架

在 Vue 的官網(wǎng)上，Vue 將自己定位為“漸進(jìn)式 JS 框架”。

“漸進(jìn)式”這個(gè)術(shù)語正在處理某些繁重的需求，但簡(jiǎn)而言之，這意味著 Vue 適用于各種場(chǎng)景，且誠(chéng)如官網(wǎng)所言，“Vue 可被漸進(jìn)式采用”。

在最近的 Vue Live 大會(huì)上，“Vue 之父兼首席維護(hù)者”尤大強(qiáng)調(diào)了漸進(jìn)式框架概念。

KISS 原則

KISS 原則是“Keep it Simple and Stupid”的首字母縮寫，意思是“通俗易懂”。KISS 原則是用戶體驗(yàn)的高層境界，把一個(gè)產(chǎn)品做得連白癡都會(huì)用，因而也被稱為“懶人原則”。

KISS 原則源于大衛(wèi)·馬麥特的電影理論，后來被逐漸延伸擴(kuò)展到編程等領(lǐng)域。

Vue 的關(guān)鍵是其 SFC（單文件組件）功能，這允許開發(fā)者“使用駕輕就熟的 HTML + CSS + JS 語法創(chuàng)作模塊化組件”。

Vue 和 React 都是組件筑基模型（component-based models），但語法卻一龍一豬。

React 使用 JSX 語法，它糅合了 HTML 和 JS，而 Vue 使用“HTML 筑基的模板語法”。重點(diǎn)在于，“所有 Vue 模板都是語法有效的 HTML，可以被符合規(guī)范的瀏覽器和 HTML 解析器進(jìn)行解析。”

Vue 的語法旨在讓熟悉標(biāo)準(zhǔn) HTML 的 Web 開發(fā)者駕輕就熟 —— 期望服務(wù)的目標(biāo)用戶是所有 Web 開發(fā)者！而 JSX 要求用戶擁有一定的 JS 知識(shí)儲(chǔ)備。

實(shí)際上，Vue 的 KISS 語法是在 2014 年發(fā)布早期能夠人氣爆漲的關(guān)鍵原因。

“實(shí)際上，Vue 的唯一功能就是為你提供了這個(gè)模板語法。然后你可以使用純 JS 對(duì)象聲明狀態(tài)。當(dāng)你更改對(duì)象時(shí)，Vue 會(huì)自動(dòng)更新視圖。這就是 Vue 生態(tài)系統(tǒng)的開端。”

當(dāng)被問及在當(dāng)時(shí)已經(jīng)有 AngularJS 等眾所周知的替代品可用時(shí)，為什么 Vue 卻開始人氣爆漲時(shí)，尤大的回答極具啟發(fā)，且提供了一個(gè)線索，說明了為什么大家對(duì) React 的復(fù)雜性越來越不滿。

“AngularJS 當(dāng)時(shí)已經(jīng)橫空出世了，”尤大在談到十年前發(fā)布 Vue 時(shí)說道。

“但我認(rèn)為對(duì)于很多用戶而言，AngularJS 令人望而生畏，因?yàn)樵谟行褂?AngularJS 之前，你需要先了解所有其他概念。所以我認(rèn)為 Vue 誕生的時(shí)候，我們基本上提煉了任何從事前端的用戶都共同關(guān)注的部分。本質(zhì)上，我們只是以此為開端，并做減法“斷舍離”。我認(rèn)為這種簡(jiǎn)單性確實(shí)讓用戶更容易 get 到 Vue 是什么，也充分理解 Vue 能夠解決的問題。”

尤大繼續(xù)解釋道，Vue 在過去十年里日新又新，包含了許多新功能，包括 SPA（單頁應(yīng)用程序）路由器、狀態(tài)管理工具、CLI 工具鏈、開發(fā)工具、文檔等等。

React 還是一個(gè)前端框架嗎？

盡管 Vue 的工具集已經(jīng)擴(kuò)展，但尤大表示 Vue 的使用范圍仍然集中在前端，他認(rèn)為 React 的情況并非如此。

“即使是在 React 中，所有新功能也都以 RSC 為中心，”他說，“這明顯擴(kuò)展了你所認(rèn)知的前端框架的范圍，我認(rèn)為 RSC 誕生之后，React 不再是純粹的前端框架。但 Vue，目前我們?nèi)匀徽J(rèn)為自己聚焦于前端。”

尤大表示使用 HTML 模板的 Vue 方案也吸引了需要做某些前端工作、但又不想處理復(fù)雜前端框架的后端開發(fā)者。

Angular 和 React 等前端框架通常涉及使用 Node 服務(wù)器進(jìn)行 SSR，這在服務(wù)器上生成 HTML，并將其發(fā)送到客戶端。RSC 是 React 推陳出新的功能，它通過在將內(nèi)容交付給客戶端之前，在服務(wù)端處理某些邏輯和渲染，進(jìn)一步輔助渲染過程。

但根據(jù)尤大的說法，后端開發(fā)者不一定需要這種類型的功能。

“對(duì)于 PHP 開發(fā)者或其他后端語言而言，世界觀天差地別，”他說。“對(duì)它們而言，世界觀是后端框架將所有 HTML 發(fā)送到前端，然后它們考慮如何使其具備交互性。”

JS 的后遺癥

在過去的幾年里，JS 框架眾口囂囂，這不僅僅是因?yàn)榍岸丝蚣芘c日俱增的復(fù)雜性。許多開發(fā)者認(rèn)為現(xiàn)在使用 JS 做了太多事情。

“JS 開發(fā)者絕對(duì)會(huì)想方設(shè)法來避免編寫非 JS 的代碼。它們首先將 CSS 放入 JS 中，然后將 HTML 放入 JSX，現(xiàn)在還要將 SQL 放入 JS 中！”

某些開發(fā)者認(rèn)為，過度依賴 JS 不僅會(huì)貶低 Web 生態(tài)系統(tǒng)的價(jià)值，還會(huì)使開發(fā)者的工作面臨風(fēng)險(xiǎn)。

“React 對(duì)于絕大多數(shù)制作面向 Web 軟件的組織而言，客觀上比許多替代方案更糟糕。”

此外，React 和構(gòu)建在其之上的框架導(dǎo)致了一代開發(fā)者“沒有接受過排除 DOM 代碼故障或使用 CSS 解決問題的培訓(xùn)”。這使得科技公司在就業(yè)需求不高時(shí)更容易解雇這些員工，比如現(xiàn)在的行業(yè)現(xiàn)狀。

與 Next 和 Remix 等 React 更現(xiàn)代的框架不同，Vue 不會(huì)嘗試將所有內(nèi)容強(qiáng)加到 JS 中。不過，誠(chéng)如尤大所言，如果 Vue 用戶確實(shí)需要的話，它們可以進(jìn)階使用“萬物皆可 JS”的方案。

參考文獻(xiàn)

1. Blog：https://thenewstack.io/want-out-of-react-complexity-try-vues-progressive-framework
2. Vue：https://vuejs.org
3. React：https://react.dev

往期推薦

通過可視化徹底搞懂 Promise執(zhí)行邏輯

都應(yīng)該會(huì)的前端代碼規(guī)范 - 日志打印規(guī)范

又一次變革，Vue 更徹底的擁抱了函數(shù)式

最后

• 歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

前端Q

本公眾號(hào)主要分享一些技術(shù)圈(前端圈為主)相關(guān)的技術(shù)文章、工具資源、學(xué)習(xí)資料、招聘信息及其他有趣的東西...

公眾號(hào)

點(diǎn)個(gè)在看支持我吧