從感性的角度講，我是不屑於用VUE，覺得react套件用起來更順手，但是vue現在越來火，所以也不得入vue(雜燴湯)的坑。vue/anguarJS/React，三者對關係現在就是：
https://www.zhoulujun.cn/uploadfile/images/2018/0626/20180626214906428779269.jpg
自己ps了下，覺得深有道理，騷年們自己體悟，然後再問軍哥^_^
不過迴歸真題，看vue還是先了解下https://cdn.zhoulujun.cn/vue.jpg(太大，自己打開）
vue生命週期及相關主題
組件實例週期
vue所有功能的實現都是圍繞其生命週期進行的，在生命週期的不同階段調用對應的鉤子函數可以實現組件數據管理和DOM渲染兩大重要功能。學習實例的生命週期，能幫助我們理解vue實例的運行機制，更好地利用鉤子函數完成我們的業務代碼。
create 和 mounted 相關 的函數有：
beforecreated》created》beforeMount》mounted》beforeDestroy
beforecreated：el 和 data 並未初始化, 案例：可以在這加個loading事件 及獲取路由參數，但是this.(data｜computed｜methods）參數均爲undefind（無法訪問到 el 屬性和 data 屬性等）
在beforeCreate和created之間：在這個生命週期之間，進行初始化事件，進行數據的觀測，可以看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變）
created:組件實例創建完成,屬性已綁定,但 DOM 還未生成,$el 屬性還不存在(this.$refs.XXX===undfined)。案例：在這結束loading，還做一些初始化，如根據父組件props計算當前組件數據
created和beforeMount之間：首先會判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味着停止了生命週期，直到在該vue實例上調用vm.$mount(el)。再次判斷template參數選項的有無（因爲vue需要通過el找到對應的outer template）：
（1）如果vue實例對象中有template參數選項，則將其作爲模板編譯成render函數。
（2）如果沒有template選項，則將外部HTML作爲模板編譯。
（3）可以看到template中的模板優先級要高於outer HTML的優先級。
如果沒有template,則通過render傳人的createElement編譯
綜合排名優先級：render函數選項 > template選項 > outer HTML.
這裏沒有看懂，可以看一下官方文檔 獨立構建和運行時構建
beforeMount：完成了 el 和 data 初始化 。坑：如果直接使用{{msg}} 在生命週期beforeMount期間，此刻的msg數據尚未編譯至{{msg}}中，用戶能看到一瞬間的{{msg}} v-cloak
beforeMount和mounted之間：給vue實例對象添加$el成員，並且替換掉掛在的DOM元素
mounted ：完成掛載 案例： 在這發起後端請求，拿回數據，配合路由鉤子做一些事情
beforeUpdate：可以監聽到data的變化但是view層沒有被重新渲染，view層的數據沒有變化
beforeUpdate和update之間：當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染（重新渲染虛擬 dom,並通過 diff 算法對比 vnode 節點差異更新真實 dom (virtual DOM re-render and patch)），先後調用beforeUpdate和updated鉤子函數（beforeUpdate：可以監聽到data的變化但是view層沒有被重新渲染，view層的數據沒有變化，updated： view層才被重新渲染，數據更新。此處可回顧下react對更新函數。
updated：候 view層才被重新渲染，數據更新
beforeDestroy 組件銷燬之前，案例：你確認刪除XX嗎？第二個：比如走馬燈文字，路由跳轉之後，因爲組件已經銷燬了，但是setInterval還沒有銷燬，還在繼續後臺調用，控制檯會不斷報錯，如果運算量大的話，無法及時清除，會導致嚴重的頁面卡頓。解決辦法：在組件生命週期beforeDestroy停止setInterval
destroyed ：當前組件已被刪除，清空相關內容 。實例銷燬後雖然 dom 和屬性方法都還存在,但改變他們都將不再生效!
這這裏順便回顧下react生命週期
getDefaultProps()+getInitialState() es5≈ es6 contruct()
函數初始化。定時init state，也可訪問props。 這個階段，相當於 vue的create 函數該做的事情。
componentWillMount()
組件初始化時只調用，以後組件更新不調用，整個生命週期只調用一次，在客戶端也在服務端，此時可以修改state。這個階段應該相當於 vue的 beforeMount()
render()
react最重要的步驟，創建虛擬dom，進行diff算法，更新dom樹都在此進行。此時就不能更改state了。 這個相當於 vue mounted
componentDidMount()()
組件渲染之後調用，只調用一次，只在客戶端。這個階段，一般的異步數據放在這個函數內處理
componentWillReceiveProps(nextProps)
組件初始化時不調用，組件接受新的props時調用。
shouldComponentUpdate(nextProps, nextState)
react性能優化非常重要的一環。組件接受新的state或者props時調用，我們可以設置在此對比前後兩個props和state是否相同，如果相同則返回false阻止更新，因爲相同的屬性狀態一定會生成相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff算法對比，節省大量性能，尤其是在dom結構複雜的時候。但是state依然會保持更新。
這這裏，是vue PK react 的重點。
Vue宣稱可以更快地計算出Virtual DOM的差異，這是由於它在渲染過程中，會跟蹤每一個組件的依賴關係，不需要重新渲染整個組件樹。
而對於React而言，每當應用的狀態被改變時，全部子組件都會重新渲染。當然，這可以通過shouldComponentUpdate這個生命週期方法來進行控制，但Vue將此視爲默認的優化。
小結：如果你的應用中，交互複雜，需要處理大量的UI變化，那麼使用Virtual DOM是一個好主意。如果你更新元素並不頻繁，那麼Virtual DOM並不一定適用，性能很可能還不如直接操控DOM。
componentWillUpdata(nextProps, nextState)
組件初始化時不調用，只有在組件將要更新時才調用，此時可以修改state。這個一般沒有生命卵用。可能toast一下。 大致相當於vue的beforeUpdate
componentDidUpdate()
組件初始化時不調用，組件更新完成後調用，此時可以獲取dom節點。
componentWillUnmount()
組件將要卸載時調用，一些事件監聽和定時器需要在此時清除。相當於vue的beforeDestroy
相比來講，覺得react的生命週期更加清爽。建議參看：重談react優勢——react技術棧回顧
路由鉤子
路由是項目等重點，很多事情可以在路由裏面處理好。路由和store等規劃項目基礎架構核心，沒有好的規劃，工程就是一坨屎。
全局路由鉤子
作用於所有路由切換，一般在main.js裏面定義
beforeEach：一般在這個勾子的回調中，對路由進行攔截。比如，未登錄的用戶，直接進入了需要登錄纔可見的頁面，那麼可以用next(false)來攔截，使其跳回原頁面等，值得注意的是，如果沒有調用next方法，那麼頁面將卡在那。
next的四種用法
next() 跳入下一個頁面
next('/path') 改變路由的跳轉方向，使其跳到另一個路由
next(false) 返回原來的頁面
next((vm)=>{}) 僅在beforeRouteEnter中可用，vm是組件實例。
afterEach ：在所有路由跳轉結束的時候調用，和beforeEach是類似的，但是它沒有next方法，這裏比如做修改標籤標題： document.title = to.meta.title等工作。
組件路由勾子
和全局勾子不同的是，它僅僅作用於某個組件，一般在.vue文件中去定義。
beforeRouteEnter
這個是一個很不同的勾子。因爲beforeRouterEnter在組件創建之前調用，所以它無法直接用this來訪問組件實例。
爲了彌補這一點，vue-router開發人員，給他的next方法加了特技，可以傳一個回調，回調的第一個參數即是組件實例。
一般我們可以利用這點，對實例上的數據進行修改，調用實例上的方法。
我們可以在這個方法去請求數據，在數據獲取到之後，再調用next就能保證你進頁面的時候，數據已經獲取到了。沒錯，這裏next有阻塞的效果。你沒調用的話，就會一直卡在那
beforeRouteLeave
在離開路由時調用。可以用this來訪問組件實例。但是next中不能傳回調。
beforeRouteUpdate：
這個方法是vue-router2.2版本加上的。因爲原來的版本中，如果一個在兩個子路由之間跳轉，是不觸發beforeRouteLeave的。這會導致某些重置操作，沒地方觸發。在之前，我們都是用watch $route來hack的。但是通過這個勾子，我們有了更好的方式。
指令週期
bind：只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。
inserted：被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。
實際上是插入vnode的時候調用。
update：被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新。
慎用，如果在指令裏綁定事件，並且用這個週期的，記得把事件註銷
componentUpdated：被綁定元素所在模板完成一次更新週期時調用。
unbind：只調用一次， 指令與元素解綁時調用。
一個頁面跳轉，發生的事情
路由勾子 (beforeEach、beforeRouteEnter、afterEach)
根組件 (beforeCreate、created、beforeMount)
組件 (beforeCreate、created、beforeMount)
指令 (bind、inserted)
組件 mounted
根組件 mounted
beforeRouteEnter的next的回調
nextTick
結論：
路由勾子執行週期非常早，甚至在根實例的渲染之前
具體的順序 router.beforeEach > beforeRouteEnter > router.afterEach
tip:在進行路由攔截的時候要避免使用實例內部的方法或屬性。
在開發項目時候，我們腦門一拍把，具體攔截的程序，寫在了根實例的方法上了，到beforeEach去調用。結果導致整個攔截的週期，推遲到實例渲染的之後。
因此對於一些路由組件的beforeRouteEnter裏的請求並無法攔截，頁面看上去好像已經攔截下來了。
實際上請求依然發了出去，beforeRouteEnter內的函數依然執行了。
指令的綁定在組件mounted之前，組件的beforeMount之後
不得不提的, beforeRouteEnter的next勾子
beforeRouteEnter的執行順序是如此靠前，而其中next的回調勾子的函數，執行則非常靠後，在mounted之後！！
我們通常是在beforeRouteEnter中加載一些首屏用數據，待數據收到後，再調用next勾子，通過回調的參數vm將數據綁定到實例上。
因此，請注意next的勾子是非常靠後的。
nextTick：越早註冊的nextTick觸發越早
上文講了這麼多的router，順勢總結下：
router-link屬性
:to ：相當於a標籤中的"herf"屬性，後面跟跳轉鏈接所用
replace：replace在routre-link標籤中添加後，頁面切換時不會留下歷史記錄
tag：具有tag屬性的router-link會被渲染成相應的標籤
active-class：這個屬性是設置激活鏈接時class屬性，也就是當前頁面所有與當前地址所匹配的的鏈接都會被添加class屬性
exact：開啓router-link的嚴格模式
用了vue-router,證明項目工程還是蠻大的，建議使用vuex來做全局數據管理（可能用redux習慣了吧！）
Vuex下Store的模塊化拆
vuex的store天生自帶modules概念，同時也需要thunk中間件，action處理異步數據。下面copy一點我項目code demo：
const store = new Vuex.Store({
modules: {
authForm: authFormStore,
BankAdd:BankAddFormStore
}
});下面是store的示範
const authFormStore = {
state: {
name: ""
},
mutations: {
update: function (state, obj) { //我原來也是寫了N多個update函數，圖樣圖森破啊
state[obj.name] = obj.value;
},
},
action: {
setData: function (context, obj) {
//TODO
Vue.http.post("api", params, {emulateJSON: true}).then(function (res) {
// 處理業務
// 調用上面setAgree方法更新點贊數
context.commit(obj.name, obj.value);
}, function () {
})
},
},
getters: {
getNews(state){
//TODO return new value
}
}
}在vue組件mapState
computed: {
memberType: function () {
let memberType = this.$route.params.memberType;
this.initWeChat(window.location.href, memberType);
return memberType;
},
...mapState({
authForm: state => state.authForm,
epCertType: state => state.authForm.epCertType
})
},這裏有坑：表單的v-model屬性值是Vuex的state時，如果時嚴格模式，因爲用戶輸入時，v-model會試圖修改v-model的值，由於修改並非mutation執行的,嚴格模式下會拋出錯誤。
針對這種情況，有兩個處理方法:一個是雙向綁定的計算屬性，一個是給表單綁定value，然後偵聽input或change事件，在事件中調用action。
computed:{
message:{
get(){
return this.$store.obj.message
},
set(value){
this.$store.commit('updateMessage',value)
}
}
}第二種方法
computed:{
...mapState({
message: state => state.obj.message
})
},
methods:{
updateMessage(e){
this.$store.commit('updateMessage',e.target.value)
}
}
mutations:{ //store mutation函數
updateMessage(state,message){
state.obj.message=message
}
}Vue.js 最核心的功能有兩個，一是響應式的數據綁定系統，二是組件系統
所謂雙向綁定，指的是vue實例中的data與其渲染的DOM元素的內容保持一致，無論誰被改變，另一方會相應的更新爲相同的數據。這是通過設置屬性訪問器實現的。
關於vue\angluar\react的數據綁定：雙向綁定和單向數據流
Vue 的依賴追蹤是【原理上不支持雙向綁定，v-model 只是通過監聽 DOM 事件實現的語法糖】
vue的依賴追蹤是通過 Object.defineProperty 把data對象的屬性全部轉爲 getter/setter來實現的；當改變數據的某個屬性值時，會觸發set函數,獲取該屬性值的時候會觸發get函數，通過這個特性來實現改變數據時改變視圖；也就是說只有當數據改變時纔會觸發視圖的改變，反過來在操作視圖時，只能通過DOM事件來改變數據，再由此來改變視圖，以此來實現雙向綁定
雙向綁定是在同一個組件內，將數據和視圖綁定起來，和父子組件之間的通信並無什麼關聯；
組件之間的通信採用單向數據流是爲了組件間更好的解耦，在開發中可能有多個子組件依賴於父組件的某個數據，假如子組件可以修改父組件數據的話，一個子組件變化會引發所有依賴這個數據的子組件發生變化，所以vue不推薦子組件修改父組件的數據，直接修改props會拋出警告
這裏推薦閱讀《Vue.js雙向綁定的實現原理》
react沒有數據雙向綁定
react是單向數據流：對應任何可變數據理應只有一個單一“數據源”，數據源狀態提升至父組件中
react中通過將state（Model層）與View層數據進行雙向綁定達數據的實時更新變化，具體來說就是在View層直接寫JS代碼Model層中的數據拿過來渲染，一旦像表單操作、觸發事件、ajax請求等觸發數據變化，則進行雙同步
angular也是雙向數據綁定（一次做完所有數據變更，然後整體應用到界面上）
安利下：再談angularJS數據綁定機制及背後原理—angularJS常見問題總結
三者中，我還是更推崇react＋redux模式（自上而下的數據流，業務聚焦於數據樹設計）
這裏面不得不提的就是，vuejs對data中數組的原生方法進行了封裝，所以在改變數組時能夠觸發視圖更新。這個我在寫日期控件對時候遇到很多坑,比如：
通過索引直接修改數組的元素，例如vm.items[0] = {title: 'title'}
無法直接修改數組的長度，例如vm.items.length = 0
解決方案： 對於第一種vue提供了set方法vm.items.set(0,{title: ‘title’}) 或vm.$set(‘items[0]’,{title: ‘title’})。另外一個列表渲染的時候的有一個性能的小技巧： 如果數組中本身自帶一個唯一的標識 id ，那麼在渲染的時候，通過trace-by給數組設定唯一的標識，這樣vuejs在渲染過程中會盡量重複原有對象的作用域和dom元素。
關於用“箭頭函數精簡你的 Vue 模塊”(建議點擊閱讀)，精簡出來就是：
methods: {
method(){//todo} //不用： method:()=>{//todo} method:function(){//todo}
}參考文章：
vue安裝，router-link的一些屬性，用法，tag active-class，to,replace,exex等等
轉載請註明來源，vue2.x入坑總結-回顧對比angularJS/React - vue入坑總結 - 周陸軍的個人網站，：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8125.html。不妥之處，望告之，謝謝！