[[236020]]

• 從React遷移到Vue，使用兩年后的感受總結(jié)。

使用新的框架和庫(kù)總是會(huì)讓人興奮，但也有壓力。即使經(jīng)過一些測(cè)評(píng)，你也永遠(yuǎn)不知道以后會(huì)遇到什么意外發(fā)現(xiàn)。

我跟Vue.js的蜜月期結(jié)束了。在幾乎每天使用Vue2年之后，我終于決定要寫點(diǎn)關(guān)于它的事情了。

提示：下面內(nèi)容純屬個(gè)人觀點(diǎn)。

Vue.js的優(yōu)秀部分

機(jī)動(dòng)性

在前端世界，數(shù)據(jù)綁定是一件大事。我們不再像使用jQuery那樣對(duì)DOM進(jìn)行微觀管理，而是關(guān)注數(shù)據(jù)。Vue使用雙向反應(yīng)數(shù)據(jù)綁定系統(tǒng)來處理這個(gè)問題。

為了實(shí)現(xiàn)這個(gè)能動(dòng)性, Vue在狀態(tài)(state)中的每個(gè)變量添加了一些getter和setter，以便它能夠跟蹤、更改，并自動(dòng)更新DOM(咳咳this. setstate()咳咳)。這種方法并不完美，我們將在后面看到。

自己供電

使用Vue，不需要使用非正式的包，比如MobX或response Router來處理應(yīng)用程序的關(guān)鍵部分。Vue提供Vue Router和Vuex——一個(gè)受redu啟發(fā)的反應(yīng)性中央狀態(tài)管理器。它們本身就是很棒的庫(kù)，但它們是為Vue定制的，這一點(diǎn)使它們變得更好。

速度

Vue真的是太快了。也許不是最快的，但它的性能對(duì)絕大多數(shù)web項(xiàng)目來說是頂級(jí)的。您上一次需要每秒呈現(xiàn)和更新數(shù)千個(gè)DOM元素是什么時(shí)候?

HTML模板

這在JavaScript開發(fā)人員中是一個(gè)有爭(zhēng)議的話題。不管您喜歡什么，HTML模板已經(jīng)在許多語言中進(jìn)行了幾十年的打磨，并且是在Vue中編寫動(dòng)態(tài)標(biāo)記的首選。

而且，嘿，Vue也支持JSX。

其他的好東西

• HTML、CSS和JavaScript單個(gè)文件組件。
• 輕量。大約20KB(縮小+ gzip)。
• 可擴(kuò)展高(mixins、插件等)。
• 優(yōu)秀的文檔(除了下面提到的一些例外)。
• 可以漸進(jìn)接入，甚至可以作為jQuery的替代品。
• 容易上手。

Vue.js中讓人“呵呵”的部分

組件模板

從React遷移到Vue，我似乎感受到一股清新的空氣。不再到處bind(this) 或 setState()。哎!但是在一段時(shí)間之后，我開始質(zhì)疑Vue的組件語法的有效性。

Vue組件是用對(duì)象創(chuàng)建的，這里有一個(gè)定義組件函數(shù)的例子:

export default { 
 methods: { 
  increment () { 
   this.count++; 
  } 
 } 
} 

您需要為計(jì)算屬性、組件狀態(tài)、監(jiān)視程序等添加類似的模板文件。幾乎所有Vue中的內(nèi)容都有自己的特殊語法和更多的模板文件。

相比之下，Marko也有同樣的事情，它更干凈:

class { 
 increment() { 
  this.state.count++; 
 } 
} 

我這里的重點(diǎn)不是使用類或不使用類，而是Vue使用任意的對(duì)象結(jié)構(gòu)而不是語言特性。

如果你覺得我有點(diǎn)想找事，我不會(huì)怪你的。Vue還提供了基于類的語法，但它實(shí)際上更多的是事后考慮。

社區(qū)更像是個(gè)聊天室

Vue社區(qū)的人都喜歡使用一種叫Discord的工具閑聊。這是一種游戲社區(qū)里才會(huì)有的聊天工具。如果你遇到問題，聊天可能是你最好的選擇，因?yàn)楣俜秸搲且黄臎龅耐恋?，可為什么，你不敢在Github上問問題嗎?

聊天很亂，主要的問題是聊天內(nèi)容不能被搜索引擎索引。同樣的問題(及其相關(guān)的討論)注定要一遍又一遍地重復(fù)。

這種用聊天來提問的趨勢(shì)正在困擾開源項(xiàng)目，我認(rèn)為它需要停止。這種聊天里沒有集體學(xué)習(xí)效果。

沒有那么神奇

只要你不偏離正道，就不會(huì)遇到麻煩，但一段時(shí)間后，你可能會(huì)在Vue周圍發(fā)現(xiàn)很多“如果”和“但是”。

一些例子:

reactivity系統(tǒng)只會(huì)在一定條件下跟蹤變化。不要指望向它能提供任何你想要的東西。通常，您可能需要盡可能地簡(jiǎn)化數(shù)據(jù)，以避免頭痛。當(dāng)然，所有這些都在文檔的小字中可以找到解釋。

transition 系統(tǒng)不適用于列表。您實(shí)際上需要使用，它的工作方式略有不同，而且會(huì)在DOM中引入新的元素。同樣，有些東西你也會(huì)認(rèn)為這是一件已經(jīng)解決的事情，但你發(fā)現(xiàn)必須自己去實(shí)現(xiàn)它。

如果您需要組件實(shí)例中的non-reactive狀態(tài)，那么您將進(jìn)入一個(gè)未知領(lǐng)域。

等等。

別誤會(huì)我的意思，這些都不是大問題，但似乎每次你開始動(dòng)手的時(shí)候，另一個(gè)小煩惱就會(huì)冒出來。

Vue.js中不好的部分

不清晰架構(gòu)模式

這里有一個(gè)例子:在組件中還是在Vuex中處理API請(qǐng)求更好?

該文檔提供了如何處理Vuex中的API邏輯的示例。甚至還有一個(gè)漂亮的彩色圖表:

這是否意味著驗(yàn)證邏輯也適用于Vuex ?狀態(tài)管理器現(xiàn)在將開始做為所有應(yīng)用程序邏輯的中介嗎?

這些都不是顯而易見的事情。大多數(shù)人喜歡將non-state邏輯插入到Vuex操作中，或者更糟的是，直接插入到組件中，因?yàn)閂ue主頁(yè)上有一段視頻這樣寫道:

回答我最初的問題：API邏輯不應(yīng)該放到Vuex或組件編寫。在一些官方代碼示例中，甚至還有一個(gè)很好的例子來說明如何做到這一點(diǎn)。

結(jié)論

Vue的使用率一直在不斷增加，我懷疑這種趨勢(shì)是否會(huì)很快停止。它的普及還遠(yuǎn)不及React(至少在中國(guó)以外)，而且還在需要和Angular競(jìng)爭(zhēng)遙遠(yuǎn)的第二名。

在過去，我認(rèn)為Vue是一個(gè)實(shí)用的庫(kù)，不同于React過于理想化的設(shè)計(jì)(“我們是純JavaScript!”)。我仍然認(rèn)為這是一個(gè)很好的比喻。另一方面，我現(xiàn)在覺得，Vue的實(shí)用主義需要在用戶層面上更加優(yōu)雅、專注、優(yōu)雅和簡(jiǎn)潔。

在使用了2年后，我對(duì)Vue的印象是正面積極的。我仍然認(rèn)為這是一個(gè)正確的決定——把我的團(tuán)隊(duì)從React帶到Vue。不是因?yàn)閂ue更好，而是因?yàn)樗m合我們。

Vue實(shí)現(xiàn)了它想做的目的，并且在其他人失敗的領(lǐng)域取得了成功，但是，今天，我并不認(rèn)為Vue客觀上比你想象中的其他選擇更好或更糟糕。

這些就是我要說的。

附錄:Vue CLI

我沒有在本文中包含Vue CLI，我想解釋一下原因。

Vue CLI是一個(gè)非常方便的工具，用于搭建Vue項(xiàng)目。在即將發(fā)布的新版本3中，它將更加出色，因?yàn)樗且粋€(gè)完整的項(xiàng)目管理解決方案。

但是，便利總是有代價(jià)的，在我看來，這里的代價(jià)是不合理的。Webpack并不像很多人說的那么難，創(chuàng)建自己的初始化配置可以減少大部分配置時(shí)間。

當(dāng)這樣做的成本如此之低時(shí)，定制自己的自定義產(chǎn)品就更有意義了。