如何使用VUE作組件化開發 -- 思考篇

技術學習並不難，如何使用纔是關鍵

用VUE 開發已經快一年的時間了，在感嘆webpack+vue+vuex+vue-router全家桶爲開發帶來的便捷，同時也回到最初的技術選擇問題上。

爲何要選擇VUE？

　　由於像做者說的那樣，vue是一個輕量型的前端MVVM框架，更快的虛擬DOM渲染？

　　然而實際開發中並無遇到很大的數據渲染（1000以上的都沒有），在形式上看來，VUE的數據綁定和以前用angular作數據綁定沒有什麼差別。惟一可能遇到的差異是當須要將某個功能作到可複用時，我能使用VUE的組件component將功能作成一個組件，在angular裏須要作成一個directive，在數據綁定和數據變化觸發視圖更新上不須要手動scope.$apply。再配合使用vue-loader，能夠將組件聲明成一個單獨的.vue後綴文件。

　　當初選擇VUE時，也是由於用angular異步加載模板的時候，模板常常會被緩存。每次都須要強制刷新才能獲取最新的頁面。而vue+webpack，再加上vue的異步組件功能，將組件定義爲一個工廠函數，加上webpack的代碼分割功能（output）和hash值命名。就能夠解決angular的模板緩存問題。

組件化思想，將頁面分紅可複用，可維護的獨立模塊。

什麼時候須要組件化，如何組件化？

　　當前的開發思路只是將一些須要在兩個地方以上覆用的功能抽離出來作成一個單獨的可複用組件。有些組件的共性，有能夠經過mixin功能混合，這也是複用。

　　可能在個人思想裏，只要是可複用的部分均可以無條件的拆成組件，或mixin。思路應該是沒有什麼問題。可在實際作的時候，由於太想要把一個可複用的功能拆成一個單獨組件，在差別化的地方不吝嗇的使用props，$refs對組件傳值和訪問組件的某些功能。雖說使用$refs訪問組件的內置屬性、方法，和使用事件機制均可以達到一樣的效果。但對組件的獨立性，解耦來講，父傳子最好仍是用props； 子傳父可使用事件，中間組件，vuex。非父子組件可用中間組件，vuex傳值。

　　在構思組件的時候，要明確須要哪些數據？這些數據對應的功能都應該在組件內實現？哪些數據須要暴露給外部組件？這些數據應該是值，仍是引用（對象/數組）？能夠經過事件或vuex保存爲全局變量。

尤大大說過，應用類的UI徹底能夠看作是由不一樣的組件樹構成。

　　那到底改如何構思組件，什麼狀況下須要使用將頁面分紅組件？這一點思想在我目前的項目上沒有實現過，目前對組件化的理解還不是很深。

不須要響應式的值

template模板中的數據源並不都是響應式的，好比使用v-for指令循環生成的列表，數據源數組並不須要加入data中變成響應式，可是在模板中綁定的數據又必需要來自data。

狀態管理

在angularJS裏，服務是單例對象，能夠在不一樣的controller, module, directive 之間共享數據，但不是響應式的。

vue有vuex作狀態管理，就是管理不一樣組件之間須要共享的數據，包含對數據的操做。怎麼才能發揮vuex的最大做用，在何時使用vuex能給項目帶來便於開發，可維護的價值？暫時也不太清楚，狀態管理機制的核心是什麼？