vue1.0和vue2.0的區(qū)別

2019-9-3    seo達人

一、生命周期鉤子的差別



    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循環(huán)遍歷數組、對象時的參數順序的變更,遍歷數組之前是(index,value),現在是(value,index);對象的之前是(key,value),現在是(value,key).



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



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



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







四、Props 的參數



    1、如果需要檢查 prop 的值,創(chuàng)建一個內部的 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 值的操作權限。



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



    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 監(jiān)聽原生事件 變更,現在在組件上使用 v-on 只會監(jiān)聽自定義事件 (組件用 $emit 觸發(fā)的事件)。如果要監(jiān)聽根元素的原生事件,可以使用 .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 的過渡系統(tǒng)有了徹底的改變,現在通過使用 <transition> 和 <transition-group> 來包裹元素實現過渡效果,而不再使用 transition 屬性;

可復用的過渡 Vue.transition 替換,在新的過渡系統(tǒng)中,可以通過模板復用過渡效果;

過渡的 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移除。


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.820esy.cn

存檔