一、生命周期鉤子的差別



    vue1.0的生命周期如下：



    



    



    vue2.0的生命周期如下：



    



    



    用一張表格來(lái)做對(duì)比：



    



二、代碼片段



    在vue1.0中可以在template編寫時(shí)出現(xiàn)：



<template>

   <div>第一行</div>

   <div>第二行</div>

</template>

    在vue2.0中在template編寫時(shí)，必須只有一個(gè)根元素，否則會(huì)報(bào)錯(cuò)。



<template>

   <div id='root'>

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

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

   </div>

</template>

三、for循環(huán)遍歷數(shù)組、對(duì)象時(shí)的參數(shù)順序的變更，遍歷數(shù)組之前是（index,value），現(xiàn)在是（value,index）；對(duì)象的之前是（key,value），現(xiàn)在是（value,key）.



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



    之前的track-by已經(jīng)替換為key來(lái)代替



    v-for的循環(huán)范圍也發(fā)生了改變，之前v-for='item in 10'，范圍為0-9，現(xiàn)在是：1-10。







四、Props 的參數(shù)



    1、如果需要檢查 prop 的值，創(chuàng)建一個(gè)內(nèi)部的 computed 值，而不再在 props 內(nèi)部去定義coerce。



    之前是：



props: {

  username: {

    type: String,

    coerce: function (value) {

      return value

        .toLowerCase()

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

    }

  }

}

    現(xiàn)在改成用computed來(lái)代替：

props: {

  username: String,

},

computed: {

  normalizedUsername: function () {

    return this.username

      .toLowerCase()

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

  }

}

    這樣有一些好處：



        可以對(duì)保持原始 prop 值的操作權(quán)限。



        通過(guò)給予驗(yàn)證后的值一個(gè)不同的命名，強(qiáng)制開(kāi)發(fā)者使用顯式申明。



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



            Props 現(xiàn)在只能單向傳遞。為了對(duì)父組件產(chǎn)生反向影響，子組件需要顯式地傳遞一個(gè)事件而不是依賴于隱式地雙向綁定。



    3、



五、計(jì)算屬性



cache: false 棄用，在 Vue 未來(lái)的大版本中，計(jì)算屬性的緩存驗(yàn)證將會(huì)被移除。把不緩存的計(jì)算屬性轉(zhuǎn)換為方法可以得到和之前相同的結(jié)果。    

六、Built-In 指令



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

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

帶有 debounce 的 v-model移除；

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

使用內(nèi)聯(lián) value的v-model 移除；

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

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

v-el 和v-ref 替換，簡(jiǎn)單起見(jiàn)，v-el 和 v-ref 合并為一個(gè) ref 屬性了，可以在組件實(shí)例中通過(guò) $refs 來(lái)調(diào)用；

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

七、自定義指令



自定義指令 簡(jiǎn)化；    

八、過(guò)渡



transition 參數(shù) 替換，Vue 的過(guò)渡系統(tǒng)有了徹底的改變，現(xiàn)在通過(guò)使用 <transition> 和 <transition-group> 來(lái)包裹元素實(shí)現(xiàn)過(guò)渡效果，而不再使用 transition 屬性；

可復(fù)用的過(guò)渡 Vue.transition 替換，在新的過(guò)渡系統(tǒng)中，可以通過(guò)模板復(fù)用過(guò)渡效果；

過(guò)渡的 stagger 參數(shù) 移除。    

九、事件



events 選項(xiàng) 移除，事件處理器現(xiàn)在在created鉤子中被注冊(cè)；

events 選項(xiàng) 移除Vue.directive('on').keyCodes 替換，新的簡(jiǎn)明配置 keyCodes 的方式是通過(guò) Vue.config.keyCodes；

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

十、過(guò)濾器



插入文本之外的過(guò)濾器 移除；

過(guò)濾器參數(shù)符號(hào) 變更   現(xiàn)在過(guò)濾器參數(shù)形式可以更好地與 js 函數(shù)調(diào)用方式一致，因此不用再用空格分隔參數(shù)，現(xiàn)在用圓括號(hào)括起來(lái)并用逗號(hào)分隔。

內(nèi)置文本過(guò)濾器 移除，替換 json 過(guò)濾器；替換 capitalize 過(guò)濾器；替換 uppercase 過(guò)濾器；替換 lowercase 過(guò)濾器；替換 pluralize 過(guò)濾器。

雙向過(guò)濾器 替換。

十一、插槽



重名的插槽 移除；

通過(guò)具名 <slot> 插入的片段不再保持 slot 的參數(shù)。請(qǐng)用一個(gè)包裹元素來(lái)控制樣式    

十二、特殊屬性



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

十三、計(jì)算插值



 屬性內(nèi)部的計(jì)算插值 移除；

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

單次綁定替換成v-once。  

十四、響應(yīng)



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

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

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

Vue.set 和 Vue.delete 移除；

替換vm.$data 移除；

vm.$get 移除，可以直接取回響應(yīng)數(shù)據(jù)。

十五、圍繞DOM的實(shí)例方法



vm.$appendTo 移除；

vm.$before 移除；

vm.$after 移除；

vm.$remove 移除。    

十六、底層實(shí)例方法



vm.$eval 移除；

vm.$interpolate 移除；

vm.$log 移除    

十七、實(shí)例DOM選項(xiàng)



replace: false 移除，現(xiàn)在組件總是會(huì)替換掉他們被綁定的元素。為了模仿，可以用一個(gè)將要替換元素類似的元素將根組件包裹起來(lái)。    

十八、全局配置



Vue.config.debug移除，因?yàn)榫嫘畔⒛J(rèn)在堆棧信息里輸出；

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

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

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

十九、全局API



帶el的Vue.extend移除；

Vue.elementDirective移除；

Vue.partial移除。