公司用vue開發(fā)的第一個項目告一段落,在開發(fā)中存在很多問題,第一就是前后端分離的實際應用中遇到很多坑,前端和后端的依賴其實沒完全分開,前端要依賴后端的提供的接口輸出,接口有沒有報錯;后端要依賴前端頁面的展示數(shù)據(jù)的需求來確定接口的輸出字段.其實沒完全分開,后面討論是不是可以將數(shù)據(jù)的打包從java層分出來放到node層,java只要提供通用的查詢表功能。這樣后臺就不用依賴前端頁面的輸出來規(guī)定自己接口的輸出項了，而前端想要什么數(shù)據(jù)就可以在node層調用通用接口來自己組裝數(shù)據(jù)返回給前端，而且前端也可以只發(fā)送一個ajax請求就可以得到全部想要數(shù)據(jù)，這樣前端和后臺的依賴度會更小。具體后臺的接口是要主表查詢和子表查詢都分開，還是主表子表關聯(lián)查詢還是要具體根據(jù)項目詳細討論。
第二個問題是在用組件化的思想去構建系統(tǒng)，很容易出現(xiàn)前端結構、思路很混亂的情況，造成這種混亂的原因有多方面：
vue前端結構是和react項目類似，在一個react文章中描述到組件分為“容器組件”和“表現(xiàn)組件”,容器組件單獨存放在一個文件夾中，表現(xiàn)組件也單獨放在另一個文件夾中，這樣導致表現(xiàn)組件被多個容器組件調用，而且還可能表現(xiàn)組件嵌套，導致組件間的調用很混亂，我的建議解決方案是ng2中的項目實例對組件的文件分配就很清晰，一個容器組件就是一個文件夾，這個文件夾下面子文件夾放這個表現(xiàn)組件,一般情況下只是調用自己同級的表現(xiàn)組件。當然這種導致組件的復用效率沒那么高，事物本身就是矛盾體，我們在抉擇的時候就盡量選擇中間程度，比如100%利用組件的復用必然結構就會混亂，容器組件下的表現(xiàn)組件100%單獨分開那組件的作用就沒任何意義。這兩種極端都會對系統(tǒng)造成一定的弊端，那何不取中間程度；表現(xiàn)組件可以跨容器組件復用，但在結構上盡量按容器組件劃分文件夾；在調用其他容器組件的表現(xiàn)組件時候要加詳細注釋說明。
前后端分離會將很多數(shù)據(jù)處理和邏輯處理分給前端來做，也就是這種模式前端js的復雜度要比傳統(tǒng)的復雜度高些，加上本身js沒有框架分層的思想導致js的代碼更加混亂，這里的解決方案是我之前寫的博客文章用面向對象對js進行分層。在vue中的data看似是model層但其實就是個擺設。vue中可以將數(shù)據(jù)讀取放到computed中作為數(shù)據(jù)讀取層，在ready中在分兩層，第一層是數(shù)據(jù)處理層，第二層是和v層的一些操作代碼，事件處理統(tǒng)一放到了methods 這樣js代碼的業(yè)務邏輯就相對比較清晰了。
vue的思維，雙向數(shù)據(jù)綁定本身就是利用變量的判斷來控制dom的，不知道用過vue的有沒有這種感覺，在頁面中除了{{}}和v-bind綁定用的最多以外，第二用的最多的就是v-if，因為他的本身思想就是用判斷來操作dom，這樣導致頁面的if語句很多，而且基本都推到到v層。所以對js開發(fā)程序員的要求更高，能看懂區(qū)分這種判斷。
這些只是我個人
