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