vue的使用經驗
- 2020 年 3 月 29 日
- 筆記
導讀
這一次的口號是，帶你重新認識vue，拯救1，2個前端開發者。
從2018年從事前端職業以來，呆過大小公司，幹這一行都有2年多。程式碼寫的多了，就越來越體會新手程式設計師都是挖坑的。在工作過程中，用一種方式去實現某個功能，等過了半年，大半年，自己成長起來了，哪天需求來了，回到該功能改程式碼。這是我自己的程式碼嗎？當時是不是腦袋被門夾過，才想到用這個愚蠢的方法來實現，明明github上有一堆寫好的功能或者ui框架上有類似的功能。用別人寫好的比自己寫的強多了，因為人家的經過多人參加編寫實現，單元測試。三個臭皮匠勝過諸葛亮，總比一個人擼的強。
以前的那家小公司，有很多小項目，都是使用Vue或者jquery；目前這家公司，一個大web項目，也是Vue；Vue框架真是主流中的主流，中國佔比大半。我有2年多的Vue項目經驗吧，踩過一些坑，比如目前所在的公司的大項目有個支付方式的功能，大半年前我使用了很愚蠢的方法去實現，多花了7天的時間去寫，就算是迭代，也要花不少的時間，這也是我從業以來給自己挖的最大的坑；還有在vue組件之間傳參，相互調用函數因為不熟，寫了很多的程式碼，走了不少彎路，現在看來，只好一笑：當時多蠢啊。哈哈。
你必須知道的幾個vue技巧
1.組件
何謂組件，組件是程式碼復用，vue組件就是html，css，js的混合物，經典模式吧。組件有多重要？上一家公司我離職時，大佬說：你有時間的話多學習寫組件吧，對你是好處。一時感動。面試時，有個面試官強調：我們這裡要求前端有寫組件能力，強調過程不5次。最近項目中，4個前端，我和其中一個習慣寫組件，其他2個不寫（應該是不會）。使用不寫組件的那2位的程式碼，是需要到對應的頁面找哪一行到哪一行，哪幾個變數，複製幾遍才過來，容易漏和出錯。要是自己寫的組件，或者別人寫的，問一下，參數是做什麼用的，如果使用，弄清楚使用就行。方便快捷。
寫組件有個好處是，你可以定義變數數量少些，程式碼閱讀性維護性高，我看到不寫組件的那兩位的程式碼，他們的頁面data值數量都是20到30+，15+的methods，那天老大讓我去搞這些頁面，看到就頭暈眼花，望碼興嘆，流兩行淚。
2.傳參
有組件的話，頁面就相當於分成七大洲五大洋了。組件之間需要通訊，相互聯繫起來，通訊就是一個變數傳到另外一個組件。一個組件包含另外一個組件，它們是父子關係。還有兄弟關係，祖孫關係的。等等。其實不要害怕，簡單點分為2大類：父子關係和非父子關係。在vue裡面通訊有多種方式： props(父傳子)，emit（子傳父），provide(inject)(父到子子孫孫的傳，不建議多使用)，cookie(少使用)，vuex值（推薦，結合cookie使用）。
不能一味的使用同一種傳參方式，按距離選擇props和vuex的值。就好像現在這家公司web項目很大，我純使用props和emit方式，結果一個參數從這個組件到最外面的組件，繞了一個半圈（最大嵌套層數是4）。每一次都要寫同一個prop，煩死。後來使用了大佬燈介紹的一個方式vuex的值，省下不少程式碼。前者傳參就是從這個村走到那個村，一直走到目的村，後者就是做地鐵，嗖的一聲，到了。我就想說，要不要這麼省事，這樣還要前端開發做什麼？笑。父子組件近距離選擇props和emit方式通訊，非父子組件選擇vuex的值。特別是那種嵌套幾層的。這樣子很省資源，對於程式碼的維護性閱讀性是有幫助的。為啥，這個道理很簡單，一個人站在你面前，你就應該開口和他溝通，女朋友在異地，微信或者電話溝通唄。反過來就是無厘頭搞笑：可以想像，一個人就站在你面前，你卻拿出手機打開微信和他說話，不是傻是什麼。
3.調用函數
函數就是把幾行程式碼弄到一塊執行，干點事情。組件之間經常需要執行對方的方法。比如那大頁面詳情介面回來，我需要及時那詳情介面的的某個欄位作為參數調用地址選擇器查詢省市區的介面；或者說父組件的某個值改變了，子組件需要及時的做聯動效果等。
跟參數類似的是，近距離使用refs和parents，遠距離使用監聽vuex的值的變化。refs是父組件執行子組件的方法，parents是子組件執行子組件的方法。盡量不要使用refs.resfs.refs或者parents.parents,parents，哪天網路不好什麼的，會出問題的。近距離方法需要的參數都是現有的，直接塞就行。遠距離可以使用computed， watch，vuex的值結合的方法，源組件設置Vuex的值，目標組件computed該Vuex值，然後watch該computed屬性，有變化了就執行對應的方法干點什麼。這兩個方式實現起來，就可以吃掉大部分組件之間調用函數這類寫程式碼需求，萬試萬靈，簡單粗暴。
//源組件 this.$store.dispatch('xxx', this.$store.getters.xxx++) //目標組件 computed: { xxx(){ return this.$store.getters.xxx; } }, watch:{ xxx(newV,oldV){ //這裡寫干點什麼 } } 4.結合ui的form表單渲染
這一部分很關鍵，是我從事前端行業一個很重要的經驗。是所有前端開發者都需要重視的。記得之前有個技術大佬成哥說過，前端是什麼，前端就是在頁面上拿到欄位值，作為參數塞給後台；拿到後台的值，渲染到頁面上，這就是前端。vue拿值很簡單，因為雙向綁定，但是拿值前，需要校驗，目的是提示引導用戶輸入正確的欄位，給最好的體驗；防止輸入錯誤，非法，木馬類似的欄位值，確保安全。校驗最好的方式不是手寫，而是項目中使用的ui的form表單，那個才是最好的，它有寫好的校驗規則和支援自定義規則，程式設計師用幾次就會。
form表單有多重要？列表查詢的搜索調節框，詳情頁面的拒絕，通過，指派，刪除理由彈框，保存，提交等，登錄頁面等等，都是可以用到form表單。看到前端同事，包括以前的我自己，使用手寫的校驗規則，實現起來難度是有的，花費的時間多2到3倍，因為改來改去都沒法達到完善，總有1，2小問題，測試人員不讓過的。純手寫檢驗規則的都是勇士。導讀裡面的xx方式功能，我就是踩了這樣的坑。使用form裡面的校驗，那是小菜一碟。有一個誤區是，常識是可以拿一個大對象給form表單賦值，然後從from表單取值為對象，數組可以不可以做這樣的事情？其實是可以的。過程就是: 數組–>對象–>表單–>對象–>數組（適合ant-design，因為它的v-decorator會覆蓋v-modal，elementUI裡面v-modal與校驗規則可以共存，可以不走這樣的過程。）。
思路就是你要找個或者造個唯一標識給數組的每一項，用這個唯一標識作為對象的鍵名（也就是表單的每一項名字）；
//數組-->對象 let newObj; this.payList.forEach((item,index)=>{ if(!isNull(item.value)){ newObj[item.唯一標識].value = item.value } }) //============= 表單賦值，表單取值 //============= //對象-->數組 for(var key in newObj ){ this.payList.forEach((item,index)=>{ if(!isNull(newObj[key]) && item.唯一標識== key){ //key相同就是對應的位置 item.value = newObj[key]; } }) } 這不是把後台需要的一維數組的value值活活的做了表單驗證。二維數組也是一樣，寫2個循環而已。xx方式使用手寫是因為我沒有意識到這個知識點當時。再說，都不知道項目最終要做的是什麼，需求改來改去經歷2次大改1次小改。比起現在的實現方式，如果使用from表單的驗證方式，可以減少500行的程式碼（大約500行邏輯判斷）（驗證和判斷非法存在），意味著維護性大大提高，世界清靜下來。難處是那個功能有插入別的同事寫的功能程式碼，改起來需要時間，有可能會改出別的問題，項目組不一定能給我這個時間。
不喜歡form表單的樣式，布局，自己去研究，去掉類名，或者自己手寫樣式，樣式再怎麼難是可以寫出來的。大多數後台系統不是特別要求樣式，反而輸入框驗證功能，測試人員喜歡找這裡bug。
所以說，接觸一個新ui時應該第一時間熟悉的表單組件，經常使用form表單的驗證，哪怕對象，數組，二維數組，能用就用。沒毛病。
5.混入mixin(組件的三分之一)
混入什麼時候可以用？就是有多個組件，它們需要共同的vue屬性：created,data,methods，computed等，就可以導入混入。混入就是組件的純js版，三分之一。記得我搞5個表單頁面的時候，他們樣子欄位大同小異，保存提審的調用方法一致，沒有使用混入前，業務來需求了，一個改動需要在5個地方改，使用混入後，只需要改一次，因為一改就是原來的五改。大大提高程式碼的維護性。
6.computed計算屬性與watch監聽
computed是watch與data的加強混合體，在監聽多個變數變化時及時修改目標變數值。經常放在v-if裡面做條件判斷。用好computed，可以寫少幾個data變數和幾行邏輯程式碼。
watch是監聽props，data，computed裡面的值，有變化了，及時干點什麼，通常是在本組件內使用，意思就是只能監聽props，data。這是短距離監聽。其實不然，結合vuex，和computed，可以監聽vuex的值的變化，實現遠距離監聽，這下就爽了，可以做許多事情了，比如一個組件和另外一個組件距離很遠，可以通訊告訴它，我這邊介面回來了，你可以搞點什麼了。這個知識點和3.調用函數裡面說的遠距離調用函數是同一個東西。
computed: { xxx(){ return this.$store.getters.xxx; } }, watch:{ xxx(newV,oldV){ //這裡寫干點什麼 } } 7.生命周期
組件是什麼，是把一個個頁面空間上分割成幾塊；生命周期就是對應的時間上，八大周期就是beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestrioy，destroyed，翻譯過來就是創建，掛載，更新，銷毀。生命周期好比一個人吧：他會出生，成年，整容，死亡。
一般在工作中會寫個created，調用初始化變數的函數；mounted裡面請求ajax；千萬不要在updated裡面改變一些用於渲染頁面的變數或者數組，容易引發無限循環，頁面會奔潰的，為啥，因為改變這類變數就是讓頁面update，你讓vue在更新之後再去更新，這不沒完沒了了嗎；beforeDestrioy是去用取消一些定時器和監聽事件，釋放記憶體，但我在工作中很少去做這個事，因為現在的手機電腦性能記憶體是足夠好的，瀏覽器是客戶端（一對一），做不做這個事影響挺小的。考慮性能的一般是後台工程師的事，伺服器是一對多，後台工程師要考慮並發等一些因素。
8.一個或者多個同行的好友
三個臭皮匠勝過諸葛亮。有朋友就可以相互幫忙。在工作中，總會遇到各種問題，阻礙性或者奇葩性的。寫程式碼的人都知道，有時候為了一個標點符號都是要找半到一小時。有個好友的話，他可以幫助你，你可以幫助他。公司新開一個web項目，選擇Ui框架時，你就選擇這個好友所在項目的框架，因為他那個項目擁有大多數你接下來遇到的問題的標準答案。
對vue的感悟
為什麼vue會出來？我覺得是需求，是時代要求從業者快速寫頁面的結果。
如何快速的寫頁面，就是把頁面拆分為多個部分，可以提供多個程式設計師一起寫同一個頁面，就算是同一個程式設計師寫，還有程式碼復用的最大作用呢。頁面拆分，程式碼復用的需求催生了組件。
組件之間不能獨自單打獨鬥，需要通訊起來團結起來，所有就有了vuex，props,refs,parents,emit，provide(inject)這些概念。
記得以前用jquery的時候，拿到後台數據後，根據這個數據拼接出很長的字元串，最後插入到頁面對應的dom節點。這樣做麻煩，需要寫很多的程式碼。有個雙向綁定的v-modal，v-if，v-for，這個事情就省下來的。不想拼很長的字元串這個需求產生了雙向綁定。vue比jquery牛很多。
瀏覽網頁的時候，刷新一個頁面，需要等待那麼一小會，頁面空白閃一下，給用戶不好的體驗。所以vue的作者做了路由router，用戶點擊不同的按鈕，頁面就載入不同的組件。瀏覽器不需要重新渲染全部的內容，只需要渲染其中的部分，等待時間可以忽略。就有了單頁面這個概念。React能不能做單頁面啊，可以的，React裡面也有router啊。
總的來說，組件+組件之間通訊+雙向綁定+單頁面+其他一些忽略的概念 = vue。vue是寫網頁的工具而已。vue3.0官方文檔出來了，不知道又會推出哪些好用快捷的功能。或者說，以後Vue不行了，需要學習別的框架，就拿組件，組件通訊，雙向綁定，路由等概念去套，對位上號的學習，理解起來不費吹灰之力。
