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