vue有著完整的組件化開發(fā)機制，但是官網(wǎng)只給了開發(fā)的方式，對于開發(fā)規(guī)范以及組件化開發(fā)的最佳實踐，還需要我們來摸索。本文就平時開發(fā)中的經(jīng)驗來談談“把握邊界”和“狀態(tài)驅(qū)動”這兩個話題。
邊界把握
邊界把握其實很好理解。在模塊化編程中，我們通常要定義好一個模塊的功能邊界，做什么，不做什么，從外部接收什么，向外部提供什么。在vue的組件化系統(tǒng)之下，這些問題又更具體一些，需要我們細細把握。
劃分業(yè)務邏輯
這個原則適用于任何模塊化開發(fā)，一個組件要負責哪些業(yè)務，在開始寫之初就應該非常明確，否則邊界就容易模糊了。舉個例子，頁面上有個彈出層，里面會顯示用戶名。那么在彈出層組件中，需要有username這樣一個數(shù)據(jù)嗎？
很顯然是不需要的。彈出層的任務就是：彈出、關(guān)閉、顯示內(nèi)容。至于是什么內(nèi)容，組件并不需要關(guān)心。所以我們頂多會定義一個通用的content字段，或者干脆用slot。
組件簡單了尚且容易把握，當業(yè)務較復雜的時候就需要好好斟酌了，這是個基本思維。
父子通信的注意點
這個話題想必大家不陌生，你甚至可以朗朗上口的背出來：父通過props傳遞數(shù)據(jù)給子，子通過emit發(fā)送消息給父。這有什么好說的呢？
props容易忽略的問題在于，當父組件傳遞一個對象給子組件時，這個傳遞就不再是“單向”的。因為子組件拿到的是一個引用，當子組件修改了該對象上的屬性值，父組件的數(shù)據(jù)也會相應變化。數(shù)據(jù)流就變成了雙向的，子組件是不應該直接修改父組件的數(shù)據(jù)的。所以我們要在props中只傳遞簡單值。對象、數(shù)組這樣的引用類型要避免傳遞。
為了保證props傳遞的數(shù)據(jù)類型，推薦在定義props的時候?qū)懨黝愋秃湍J值：
延伸閱讀
學習是年輕人改變自己的最好方式