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