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移除。