一、生命周期鉤子的差別



    vue1.0的生命周期如下：



    



    



    vue2.0的生命周期如下：



    



    



    用一張表格來做對比：



    



二、代碼片段



    在vue1.0中可以在template編寫時出現：



<template>

   <div>第一行</div>

   <div>第二行</div>

</template>

    在vue2.0中在template編寫時，必須只有一個根元素，否則會報錯。



<template>

   <div id='root'>

      <div>這是第一行</div>

      <div>這是第二行</div>

   </div>

</template>

三、for循環遍歷數組、對象時的參數順序的變更，遍歷數組之前是（index,value），現在是（value,index）；對象的之前是（key,value），現在是（value,key）.



    移除了$index和$key兩個隱式聲明變量，以便在v-for中顯式聲明。



    之前的track-by已經替換為key來代替



    v-for的循環范圍也發生了改變，之前v-for='item in 10'，范圍為0-9，現在是：1-10。







四、Props 的參數



    1、如果需要檢查 prop 的值，創建一個內部的 computed 值，而不再在 props 內部去定義coerce。



    之前是：



props: {

  username: {

    type: String,

    coerce: function (value) {

      return value

        .toLowerCase()

        .replace(/\s+/, '-')

    }

  }

}

    現在改成用computed來代替：

props: {

  username: String,

},

computed: {

  normalizedUsername: function () {

    return this.username

      .toLowerCase()

      .replace(/\s+/, '-')

  }

}

    這樣有一些好處：



        可以對保持原始 prop 值的操作權限。



        通過給予驗證后的值一個不同的命名，強制開發者使用顯式申明。



    2、twoWay參數的移除，v-bind 的 .once和.sync 修飾符 移除



            Props 現在只能單向傳遞。為了對父組件產生反向影響，子組件需要顯式地傳遞一個事件而不是依賴于隱式地雙向綁定。



    3、



五、計算屬性



cache: false 棄用，在 Vue 未來的大版本中，計算屬性的緩存驗證將會被移除。把不緩存的計算屬性轉換為方法可以得到和之前相同的結果。    

六、Built-In 指令



v-bind 真/假值 變更；在2.0中使用 v-bind 時，只有 null, undefined，和 false 被看作是假。這意味著，0 和空字符串將被作為真值渲染。比如 v-bind:draggable="''" 將被渲染為 draggable="true"；

用 v-on 監聽原生事件 變更，現在在組件上使用 v-on 只會監聽自定義事件 (組件用 $emit 觸發的事件)。如果要監聽根元素的原生事件，可以使用 .native 修飾符；

帶有 debounce 的 v-model移除；

使用 lazy 或者 number 參數的 v-model ，替換；

使用內聯 value的v-model 移除；

v-model with v-for Iterated Primitive Values 移除；

帶有 !important 的v-bind:style 移除；

v-el 和v-ref 替換，簡單起見，v-el 和 v-ref 合并為一個 ref 屬性了，可以在組件實例中通過 $refs 來調用；

v-show后面使用v-else 移除。    

七、自定義指令



自定義指令 簡化；    

八、過渡



transition 參數 替換，Vue 的過渡系統有了徹底的改變，現在通過使用 <transition> 和 <transition-group> 來包裹元素實現過渡效果，而不再使用 transition 屬性；

可復用的過渡 Vue.transition 替換，在新的過渡系統中，可以通過模板復用過渡效果；

過渡的 stagger 參數 移除。    

九、事件



events 選項 移除，事件處理器現在在created鉤子中被注冊；

events 選項 移除Vue.directive('on').keyCodes 替換，新的簡明配置 keyCodes 的方式是通過 Vue.config.keyCodes；

$dispatch 和 $broadcast 替換，可使用Vuex。    

十、過濾器



插入文本之外的過濾器 移除；

過濾器參數符號 變更   現在過濾器參數形式可以更好地與 js 函數調用方式一致，因此不用再用空格分隔參數，現在用圓括號括起來并用逗號分隔。

內置文本過濾器 移除，替換 json 過濾器；替換 capitalize 過濾器；替換 uppercase 過濾器；替換 lowercase 過濾器；替換 pluralize 過濾器。

雙向過濾器 替換。

十一、插槽



重名的插槽 移除；

通過具名 <slot> 插入的片段不再保持 slot 的參數。請用一個包裹元素來控制樣式    

十二、特殊屬性



keep-alive 屬性替換，不再是一個特殊屬性，而是一個包裹組件。    

十三、計算插值



 屬性內部的計算插值 移除；

HTML計算插值 移除，取代的是v-html指令；

單次綁定替換成v-once。  

十四、響應



vm.$watch   換成    update生命周期鉤子；

Array.prototype.$set棄用，用Vue.set代替

Array.prototype.$remove 移除  用 Array.prototype.splice 替代；

Vue.set 和 Vue.delete 移除；

替換vm.$data 移除；

vm.$get 移除，可以直接取回響應數據。

十五、圍繞DOM的實例方法



vm.$appendTo 移除；

vm.$before 移除；

vm.$after 移除；

vm.$remove 移除。    

十六、底層實例方法



vm.$eval 移除；

vm.$interpolate 移除；

vm.$log 移除    

十七、實例DOM選項



replace: false 移除，現在組件總是會替換掉他們被綁定的元素。為了模仿，可以用一個將要替換元素類似的元素將根組件包裹起來。    

十八、全局配置



Vue.config.debug移除，因為警告信息將默認在堆棧信息里輸出；

Vue.config.async移除，異步操作現在需要渲染性能的支持；

Vue.config.delimiters移除，可以在使用自定義分隔符時避免影響第三方模板；

Vue.config.unsafeDelimiters移除，HTML的插值替換為v-html。    

十九、全局API



帶el的Vue.extend移除；

Vue.elementDirective移除；

Vue.partial移除。