框架概述
雖然我不是以Vue入門MVVM的闻鉴,Angular和React的經(jīng)驗(yàn)讓我初次接觸Vue的時(shí)候有很多不屑崇堵。這種情緒很不好裤纹,尤其是在我更換title之后,站在產(chǎn)品的角度看問題筑悴,Vue是非常非常偉大的。
Unix設(shè)計(jì)哲學(xué)之一便是稍途,數(shù)據(jù)結(jié)構(gòu)往往比算法重要得多阁吝,不論你多么精妙的算法,多么精妙的實(shí)現(xiàn)械拍,一旦出發(fā)點(diǎn)是錯(cuò)誤的突勇,數(shù)據(jù)結(jié)構(gòu)有問題,往往就會(huì)一錯(cuò)再錯(cuò)坷虑。
這時(shí)候再來看Vue甲馋,就會(huì)發(fā)現(xiàn)它的設(shè)計(jì)是多么的精妙。
筆者先來細(xì)數(shù)一下Vue在應(yīng)用上的優(yōu)點(diǎn)猖吴,相信會(huì)引起大家的共鳴:
相較于Angular的zone和Rxjs摔刁,Vue的抽象程度和靈活性確實(shí)低了非常多,但是從另外一個(gè)角度上說 海蔽,Vue更加簡(jiǎn)潔明了共屈,聰明人都知道代碼簡(jiǎn)潔易懂意味著什么。
Vue沒有采用Typescript党窜,不過也是因此代碼效率大大提高拗引,對(duì)V8類型足夠了解的程序員能夠更有效率地進(jìn)行工作。并且由于是Js幌衣,依賴注入只需要使用閉包矾削,而不需要像Angular那樣實(shí)現(xiàn)依賴聲明和依賴查找壤玫。
足夠簡(jiǎn)單,意味著在有限的生命尺度類一個(gè)正常人可以很清晰地了解框架的全部?jī)?nèi)容(有些夸張了)哼凯,視圖層在應(yīng)用中起的作用十分有限欲间,沒有必要加重它的地位,這不是產(chǎn)業(yè)發(fā)展的主流(精力應(yīng)該放在集群計(jì)算和人工智能上)断部。這方面Angular是極其不好的反面教材猎贴,增大api面積和抽象程度的確能增加“前端”程序員的能力,但是抱歉蝴光,技術(shù)都是為商業(yè)服務(wù)的她渴。
超大型項(xiàng)目適配上Vue確實(shí)是短板,但是想象一下蔑祟,如果你不是銀行趁耗,國有大型企業(yè),你的業(yè)務(wù)需要超大型應(yīng)用來解決疆虚,是不是你產(chǎn)品設(shè)計(jì)有問題苛败?即便設(shè)計(jì)沒有問題,類似Angular装蓬,Ember等框架也只會(huì)把你變成一顆螺絲釘著拭。Vue這一點(diǎn)就很好,捫心自問一下牍帚,市場(chǎng)上99.9999%的應(yīng)用都是小型應(yīng)用儡遮。
Vue大部分代碼是由一個(gè)人完成的,這就保證了其代碼核心的穩(wěn)定性暗赶,不會(huì)出現(xiàn)與設(shè)計(jì)初衷相違背的破壞性升級(jí)鄙币。Angular這里就做得非常不好,聰明人寧可與一位天才合作蹂随,也絕不與一群天才合作十嘿,沒有閑工夫等你們推諉扯皮。
若是真正功能密集的產(chǎn)品岳锁,你會(huì)發(fā)現(xiàn)采用靜態(tài)頁面绩衷,摒棄狀態(tài)管理是最好的方式。這時(shí)候激率,Vue足夠小的優(yōu)勢(shì)就體現(xiàn)出來了咳燕,還能代替jQuery做增強(qiáng)交互。
當(dāng)然乒躺,事務(wù)不可能只有優(yōu)點(diǎn)沒有缺點(diǎn)招盲,Vue最大的缺點(diǎn)就是很容易出現(xiàn)舒適區(qū),作為一個(gè)前端開發(fā)者嘉冒,你可以不用Typescript曹货,可以不用Rx咆繁,但是你不能連類型和響應(yīng)式的概念都沒有。Vue只是一個(gè)生產(chǎn)工具顶籽,并不是核心競(jìng)爭(zhēng)力玩般,停留在Vue的舒適區(qū)危害是非常大的。
尤其是接下來筆者要討論的主題礼饱,只有Vue的編程經(jīng)驗(yàn)壤短,只是一個(gè)框架使用者的話是非常難以理解的。
框架關(guān)鍵功能點(diǎn)
模板渲染
提供了大部分模板引擎都有的功能慨仿,實(shí)際上就是把后端模板功能在前端用JS重新實(shí)現(xiàn)了一遍,這也是mvvm的精髓纳胧,將cv在前端實(shí)現(xiàn)為vm镰吆。
不過Vue專門針對(duì)VM提供響應(yīng)式API,默認(rèn)data中的變量對(duì)V提供get代理跑慕,對(duì)M提供set代理万皿。
自定義響應(yīng)式的話通過computed對(duì)M提供監(jiān)聽,通過watch對(duì)V提供監(jiān)聽核行。
簡(jiǎn)單明了牢硅,很容易理解其實(shí)現(xiàn)。
組件化
沒有React那種model系統(tǒng)芝雪,至于Angular那種對(duì)于小型應(yīng)用來說過度設(shè)計(jì)的服務(wù)Model减余,更不會(huì)被Vue采納。
沒有過多概念惩系,組件就是組件位岔。
生命周期
因?yàn)闆]有Angular zone那樣的完全事件代理,所以完全的響應(yīng)式生命周期是不可能的堡牡。不過大多數(shù)應(yīng)用場(chǎng)景下抒抬,即便是用Angular,還是會(huì)手動(dòng)設(shè)置onPush晤柄。簡(jiǎn)單即使最好的擦剑,何況真需要的話事件監(jiān)聽器更加實(shí)用芥颈。(zone非常天才惠勒,但是大多數(shù)應(yīng)用都是給凡人用的)
混入
混入就是組合(動(dòng)態(tài)語言),實(shí)際上go語言是沒有繼承的浇借,組合更加高效捉撮,采用了最新的編程理念。
指令
指令就是V層代理妇垢,雖然整個(gè)VM都是V的代理巾遭,但是指令更多地是動(dòng)態(tài)添加指示肉康,熱插拔地進(jìn)行V的操作,更加靈活灼舍。
這是一個(gè)來之ng的功能點(diǎn)吼和,被Vue采用。
插件
全局自定義骑素,實(shí)際上就是依賴注入炫乓。
狀態(tài)管理
凡是單頁面應(yīng)用都是需要管理狀態(tài)的,不要拿Redux剛發(fā)布的那時(shí)候說事献丑,大學(xué)的數(shù)據(jù)庫課程都教過你事務(wù)的特性末捣,每一個(gè)階段都必須有單獨(dú)的狀態(tài)。
靜態(tài)頁面每一次操作都會(huì)重新獲取创橄,不存在狀態(tài)管理的過程箩做,但是SPA就必須管理狀態(tài)。
Vue采用Vuex進(jìn)行狀態(tài)管理妥畏,較為合適邦邦,但是Angular在狀態(tài)管理上更勝一籌,有條件的可以嘗試BehaviorSubject醉蚁,別人連響應(yīng)式都順手做了燃辖。
服務(wù)端渲染
都用了SPA還服務(wù)端渲染的都是脫了褲子放屁。
這個(gè)功能非常雞肋网棍。
vue-loader
單文件組件在進(jìn)行小組件編寫的時(shí)候非常實(shí)用黔龟,還是建議能將測(cè)試文件也寫進(jìn)去,穩(wěn)得一皮确沸。