當前位置: 首頁> 行業咨詢

使用VUE一年后

2019-12-03 11:04:06更新

從去年年底開始接觸VUE,到現在已經整整一年了。這也是我接觸的第一個MVVM的框架。在這之前,我也是長期執迷于JQ大法,在項目中嘗試過一些常見的UI框架:

· MiniUI 這是一個很好用的框架,可惜收費較貴,排除這一點,肯定是JQ時代的首選

· EasyUI 用過一次,復雜的API設計讓我敗下陣來

· Bootstrap 上手快,文檔詳細,但交互上太弱

· LayUI 近幾年新出來的框架,功能豐富,接口簡潔,很值得一試

在用JQ的時候,一些功能實在難以找到適合項目,或者說是適合自己的,就自己造輪子,比如

· TinySelect 一個下拉選擇組件,用以代替系統的 select 標簽

· TinyForm 一個表單工具,用以讀寫以及校驗表單數據

在使用VUE一段時間后,就停止了這兩個項目的維護,哈哈。

在前兩年,VUE突然火起來后,我也向項目組長提了建議,希望能夠嘗試在項目上使用一下。公司主要是做內部系統(可以說完全是SPA的系統),在經過一番評估后,就踏上了VUE的旅程。

從概念上來說,東西挺多的:組件,混入,生命周期(包括鉤子),路由,存儲,事件,指令,計算屬性,注入,過濾器,等一大堆。剛開始接觸的時候,也被這些弄得腦殼昏,有點摸不著頭腦,隨著慢慢使用,對框架的設計與結構有一些了解后,理解也越來越深了。

到現在,用VUE已經寫了差不多5個項目,總體來說,感覺是很好的。這一年來,享受到了此框架的不少便利性。
 
優點
優點上,要我來詳細說出個一二三來,我也說不出來,只能從一個主觀的感受上來談。
1、vue-cli 提供了十分便捷的上手體驗,以至于到現在,我仍然不會手動配置環境
2、從繁瑣的HTML編寫/DOM操作中解脫出來,更多地從業務上去寫代碼
3、代碼熱更新,保存即可查看更改結果
4、vue提供的開發插件,可以在瀏覽器上實時審查組件以及數據
5、能夠使用ES6以及ES-NEXT的特性,開發速度感覺能快一些,利益于async/await語法,代碼邏輯也更清晰
6、組件/混入/指令/過濾器 的使用,使功能的重用更加方便
7、WEBPACK的加持,可以直接使用預編譯樣式,加載第三方依賴(NPM提供了太多東西)
8、Vue事件總線加VUEX以及注入功能,使得在不同頁面間傳遞事件與數據十分靈活
 
當然,踩坑是無法避免的,也說說吧。
第三方UI框架的話,開發期間一直使用 ElementUI,從體驗上來說還是很不錯的。但是有個問題,我們系統上有很多需要分頁的表格,而 ElementUI 的表格與分頁并不能簡單銜接,于是將 table 與 pagination 封裝在了一起,形成了一個新的組件 eltable-wrapper,以實現表格分頁的開箱即用。
在使用echarts圖表的時候,最開始是在npm上找的第三方的封裝組件,使用后發現,一些配置未被封裝,或者一些屬性名稱或意義被改變了,查閱文檔不是那么方便。
突然有一天,發現我們的系統中有很多的 dialog,業務需要,難以避免,由此萌生出了尋找側滑組件在想法。找了一陣,有幾個現成的,但是用起來感覺都不夠靈活,于是,只能開始自己造輪子,vue-slideout。
盡管MVVM很強大,但是在一些特殊的場景下,仍然是需要操作DOM的,此時必須注意生命周期,一不小心組件還沒有掛載,或者是已經銷毀了。
對了,還有,在組件內,如果設置了 setTimeout/setInterval,或者通過 addEventListsner 綁定了事件,一定要記得在 beforeDestroy 時取消。
有個比較重要的問題,這個來自我的同事,使用VUE后,開發思想不能從JQ中解放出來,仍然大量通過拼接字符串創建DOM,通過jq綁定并處理事件,不使用組件的props向其它組件傳遞數據或者設置可見,而通過組件方法來實現,導致不能充分利用VUE的特性。
 
推薦組件
vue-slideout 側滑組件
 
eltable-wrapper elementui 表格與分頁的封裝
vue-ellipsis 文本自動省略插件
 
林林總總,雜七雜八講了一大堆,總的來說,使用VUE的體驗是很好的,開發速度比以前快了不少,再也不想回到操作DOM的時代。當然,客觀地說,在一些場景下jq仍然是最好的選擇,只是,我在使用VUE后,我不想客觀了。
技術水平有限,哪里說得不對的,還請各位手下留情。

首頁 課程設置 師資力量 學習園地 就業園地 關于我們

地址:哈爾濱市南崗區哈西大街西城紅場寫字樓B塔15樓

咨詢熱線:0451-51062021

版權所有 ? 2008-2015 哈爾濱市南崗區愛尚職業技能培訓學校

黑ICP備17001119號-2