vue2.x入坑總結—回顧對比angularJS/React

從感性的角度講，我是不屑于用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計算當前組件數據

1. 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的四種用法

1. next() 跳入下一個頁面

2. next('/path') 改變路由的跳轉方向，使其跳到另一個路由

3. next(false)  返回原來的頁面

4. 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：只調用一次， 指令與元素解綁時調用。

一個頁面跳轉，發生的事情

1. 路由勾子 (beforeEach、beforeRouteEnter、afterEach)

2. 根組件 (beforeCreate、created、beforeMount)

3. 組件 (beforeCreate、created、beforeMount)

4. 指令 (bind、inserted)

5. 組件 mounted

6. 根組件 mounted

7. beforeRouteEnter的next的回調

8. 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中數組的原生方法進行了封裝，所以在改變數組時能夠觸發視圖更新。這個我在寫日期控件對時候遇到很多坑,比如：

1. 通過索引直接修改數組的元素，例如vm.items[0] = {title: 'title'}

2. 無法直接修改數組的長度，例如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}
}

參考文章：

Vue2.0 探索之路——生命周期和鉤子函數的一些理解

詳解vue生命周期

vue生命周期

vue生命周期探究

vue安裝，router-link的一些屬性，用法，tag active-class，to,replace,exex等等

Vuex下Store的模塊化拆分實踐

Vue.js與React的全面對比

Vue.js 2.0源碼解析之前端渲染篇

用箭頭函數精簡你的 Vue 模塊 – dotdev

轉載請注明來源，vue2.x入坑總結-回顧對比angularJS/React - vue入坑總結 - 周陸軍的個人網站，：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8125.html。不妥之處，望告之，謝謝！