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