新聞中心
我喜歡 Vue。當(dāng)我在 2016 年第一次接觸它時,也許那時我已經(jīng)對 JavaScript 框架感到疲勞了,因?yàn)槲乙呀?jīng)具有Backbone、Angular、React 等框架的經(jīng)驗(yàn),沒有太多的熱情去嘗試一個新的框架。直到我在 Hacker News 上讀到一份評論,其描述 Vue 是類似于“新 jQuery” 的 JavaScript 框架,從而激發(fā)了我的好奇心。在那之前,我已經(jīng)相當(dāng)滿意 React 這個框架,它是一個很好的框架,建立于可靠的設(shè)計(jì)原則之上,圍繞著視圖模板、虛擬 DOM 和狀態(tài)響應(yīng)等技術(shù)。而 Vue 也提供了這些重要的內(nèi)容。

在這篇文章中,我旨在解釋為什么 Vue 適合我,為什么在上文中那些我嘗試過的框架中選擇它。也許你將同意我的一些觀點(diǎn),但至少我希望能夠給大家使用 Vue 開發(fā)現(xiàn)代 JavaScript 應(yīng)用一些靈感。
1、 極少的模板語法
Vue 默認(rèn)提供的視圖模板語法是極小的、簡潔的和可擴(kuò)展的。像其他 Vue 部分一樣,可以很簡單的使用類似 JSX 一樣語法,而不使用標(biāo)準(zhǔn)的模板語法(甚至有官方文檔說明了如何做),但是我覺得沒必要這么做。JSX 有好的方面,也有一些有依據(jù)的批評,如混淆了 JavaScript 和 HTML,使得很容易導(dǎo)致在模板中出現(xiàn)復(fù)雜的代碼,而本來應(yīng)該分開寫在不同的地方的。
Vue 沒有使用標(biāo)準(zhǔn)的 HTML 來編寫視圖模板,而是使用極少的模板語法來處理簡單的事情,如基于視圖數(shù)據(jù)迭代創(chuàng)建元素。
- {{ number }}
export default {name: 'app',methods: {addNumber() {const num = +this.newNumber;if (typeof num === 'number' && !isNaN(num)) {this.numbers.push(num);}}},data() {return {newNumber: null,numbers: [1, 23, 52, 46]};}}ul {padding: 0;li {list-style-type: none;color: blue;}}
我也喜歡 Vue 提供的簡短綁定語法,: 用于在模板中綁定數(shù)據(jù)變量,@ 用于綁定事件。這是一個細(xì)節(jié),但寫起來很爽而且能夠讓你的組件代碼簡潔。
2、 單文件組件
大多數(shù)人使用 Vue,都使用“單文件組件”。本質(zhì)上就是一個 .vue 文件對應(yīng)一個組件,其中包含三部分(CSS、HTML和JavaScript)。
這種技術(shù)結(jié)合是對的。它讓人很容易在一個單獨(dú)的地方了解每個組件,同時也非常好的鼓勵了大家保持每個組件代碼的簡短。如果你的組件中 JavaScript、CSS 和 HTML 代碼占了很多行,那么就到了進(jìn)一步模塊化的時刻了。
在使用 Vue 組件中的 標(biāo)簽時,我們可以添加 scoped 屬性。這會讓整個樣式完全的封裝到當(dāng)前組件,意思是在組件中如果我們寫了 .name 的 css 選擇器,它不會把樣式應(yīng)用到其他組件中。我非常喜歡這種方式來應(yīng)用樣式而不是像其他主要框架流行在 JS 中編寫 CSS 的方式。
關(guān)于單文件組件另一個好處是 .vue 文件實(shí)際上是一個有效的 HTML 5 文件。、 、 都是 w3c 官方規(guī)范的標(biāo)簽。這就表示很多如 linters (LCTT 譯注:一種代碼檢查工具插件)這樣我們用于開發(fā)過程中的工具能夠開箱即用或者添加一些適配后使用。
3、 Vue “新的 jQuery”
事實(shí)上,這兩個庫不相似而且用于做不同的事。讓我提供給你一個很精辟的類比(我實(shí)際上非常喜歡描述 Vue 和 jQuery 之間的關(guān)系):披頭士樂隊(duì)和齊柏林飛船樂隊(duì)(LCTT 譯注:兩個都是英國著名的樂隊(duì))。披頭士樂隊(duì)不需要介紹,他們是 20 世紀(jì) 60 年代最大的和最有影響力的樂隊(duì)。但很難說披頭士樂隊(duì)是 20 世紀(jì) 70 年代最大的樂隊(duì),因?yàn)橛袝r這個榮耀屬于是齊柏林飛船樂隊(duì)。你可以說兩個樂隊(duì)之間有著微妙的音樂聯(lián)系或者說他們的音樂是明顯不同的,但兩者一些先前的藝術(shù)和影響力是不可否認(rèn)的。也許 21 世紀(jì)初 JavaScript 的世界就像 20 世紀(jì) 70 年代的音樂世界一樣,隨著 Vue 獲得更多關(guān)注使用,只會吸引更多粉絲。
一些使 jQuery 牛逼的哲學(xué)理念在 Vue 中也有呈現(xiàn):非常容易的學(xué)習(xí)曲線但卻具有基于現(xiàn)代 web 標(biāo)準(zhǔn)構(gòu)建牛逼 web 應(yīng)用所有你需要的功能。Vue 的核心本質(zhì)上就是在 JavaScript 對象上包裝了一層。
4、 極易擴(kuò)展
正如前述,Vue 默認(rèn)使用標(biāo)準(zhǔn)的 HTML、JS 和 CSS 構(gòu)建組件,但可以很容易插入其他技術(shù)。如果我們想使用pug(LCTT譯注:一款功能豐富的模板引擎,專門為 Node.js 平臺開發(fā))替換 HTML 或者使用 Typescript(LCTT譯注:一種由微軟開發(fā)的編程語言,是 JavaScript 的一個超集)替換 js 或者 Sass (LCTT 譯注:一種 CSS 擴(kuò)展語言)替換 CSS,只需要安裝相關(guān)的 node 模塊和在我們的單文件組件中添加一個屬性到相關(guān)的標(biāo)簽即可。你甚至可以在一個項(xiàng)目中混合搭配使用 —— 如一些組件使用 HTML 其他使用 pug ——然而我不太確定這么做是最好的做法。
5、 虛擬 DOM
虛擬 DOM 是很好的技術(shù),被用于現(xiàn)如今很多框架。其意味著這些框架能夠做到根據(jù)我們狀態(tài)的改變來高效的完成 DOM 更新,減少重新渲染,從而優(yōu)化我們應(yīng)用的性能?,F(xiàn)如今每個框架都有虛擬 DOM 技術(shù),所以雖然它不是什么獨(dú)特的東西,但它仍然很出色。
6、 Vuex 很棒
對于大多數(shù)應(yīng)用,管理狀態(tài)成為一個棘手的問題,單獨(dú)使用一個視圖庫不能解決這個問題。Vue 使用 Vuex 庫來解決這個問題。Vuex 很容易構(gòu)建而且和 Vue 集成的很好。熟悉 redux(另一個管理狀態(tài)的庫)的人學(xué)習(xí) Vuex 會覺得輕車熟路,但是我發(fā)現(xiàn) Vue 和 Vuex 集成起來更加簡潔。最新 JavaScript 草案中(LCTT 譯注:應(yīng)該是指 ES7)提供了對象展開運(yùn)算符(LCTT 譯注:符號為 ...),允許我們在狀態(tài)或函數(shù)中進(jìn)行合并,以操縱從 Vuex 到需要它的 Vue 組件中的狀態(tài)。
7、 Vue 的命令行界面(CLI)
Vue 提供的命令行界面非常不錯,很容易用 Vue 搭建一個基于 Webpack(LCTT 譯注:一個前端資源加載/打包工具)的項(xiàng)目。單文件組件支持、babel(LCTT 譯注:js 語法轉(zhuǎn)換器)、linting(LCTT譯注:代碼檢查工具)、測試工具支持,以及合理的項(xiàng)目結(jié)構(gòu),都可以在終端中一行命令創(chuàng)建。
然而有一個命令,我在 CLI 中沒有找到,那就是 vue build。
如:
echo 'Hello World!
' > Hello.vue && vue build Hello.vue -o
vue build 命令構(gòu)建和運(yùn)行組件并在瀏覽器中測試看起來非常簡單。很不幸這個命令后來在 Vue 中刪除了,現(xiàn)在推薦使用 Poi。Poi 本質(zhì)上是在 Webpack 工具上封裝了一層,但我不認(rèn)我它像推特上說的那樣簡單。
8、 重新渲染優(yōu)化
使用 Vue,你不必手動聲明 DOM 的哪部分應(yīng)該被重新渲染。我從來都不喜歡操縱 React 組件的渲染,像在shouldComponentUpdate 方法中停止整個 DOM 樹重新渲染這種。Vue 在這方面非常巧妙。
9、 容易獲得幫助
Vue 已經(jīng)達(dá)到了使用這個框架來構(gòu)建各種各樣的應(yīng)用的一種群聚效應(yīng)。開發(fā)文檔非常完善。如果你需要進(jìn)一步的幫助,有多種渠道可用,每個渠道都有很多活躍開發(fā)者:stackoverflow、discord、twitter 等。相對于其他用戶量少的框架,這就應(yīng)該給你更多的信心來使用Vue構(gòu)建應(yīng)用。
10、 多機(jī)構(gòu)維護(hù)
我認(rèn)為,一個開源庫,在發(fā)展方向方面的投票權(quán)利沒有被單一機(jī)構(gòu)操縱過多,是一個好事。就如同 React 的許可證問題(現(xiàn)已解決),Vue 就不可能涉及到。
總之,作為你接下來要開發(fā)的任何 JavaScript 項(xiàng)目,我認(rèn)為 Vue 都是一個極好的選擇。Vue 可用的生態(tài)圈比我博客中涉及到的其他庫都要大。如果想要更全面的產(chǎn)品,你可以關(guān)注 Nuxt.js。如果你需要一些可重復(fù)使用的樣式組件你可以關(guān)注類似 Vuetify 的庫。
Vue 是 2017 年增長最快的庫之一,我預(yù)測在 2018 年增長速度不會放緩。
如果你有空閑的 30 分鐘,為什么不嘗試下 Vue,看它可以給你提供什么呢?
分享名稱:帶你了解我喜歡Vue的10個方面
網(wǎng)站路徑:http://www.fisionsoft.com.cn/article/dpopepj.html


咨詢
建站咨詢
