2019-9-3 seo達(dá)人
一、生命周期鉤子的差別
vue1.0的生命周期如下：
vue2.0的生命周期如下：
用一張表格來做對比：
二、代碼片段
在vue1.0中可以在template編寫時出現(xiàn)：
<template>
<div>第一行</div>
<div>第二行</div>
</template>
在vue2.0中在template編寫時，必須只有一個根元素，否則會報錯。
<template>
<div id='root'>
<div>這是第一行</div>
<div>這是第二行</div>
</div>
</template>
三、for循環(huán)遍歷數(shù)組、對象時的參數(shù)順序的變更，遍歷數(shù)組之前是（index,value），現(xiàn)在是（value,index）；對象的之前是（key,value），現(xiàn)在是（value,key）.
移除了$index和$key兩個隱式聲明變量，以便在v-for中顯式聲明。
之前的track-by已經(jīng)替換為key來代替
v-for的循環(huán)范圍也發(fā)生了改變，之前v-for='item in 10'，范圍為0-9，現(xiàn)在是：1-10。
四、Props 的參數(shù)
1、如果需要檢查 prop 的值，創(chuàng)建一個內(nèi)部的 computed 值，而不再在 props 內(nèi)部去定義coerce。
之前是：
props: {
username: {
type: String,
coerce: function (value) {
return value
.toLowerCase()
.replace(/\s+/, '-')
}
}
}
現(xiàn)在改成用computed來代替：
props: {
username: String,
},
computed: {
normalizedUsername: function () {
return this.username
.toLowerCase()
.replace(/\s+/, '-')
}
}
這樣有一些好處：
可以對保持原始 prop 值的操作權(quán)限。
通過給予驗證后的值一個不同的命名，強制開發(fā)者使用顯式申明。
2、twoWay參數(shù)的移除，v-bind 的 .once和.sync 修飾符 移除
Props 現(xiàn)在只能單向傳遞。為了對父組件產(chǎn)生反向影響，子組件需要顯式地傳遞一個事件而不是依賴于隱式地雙向綁定。
3、
五、計算屬性
cache: false 棄用，在 Vue 未來的大版本中，計算屬性的緩存驗證將會被移除。把不緩存的計算屬性轉(zhuǎn)換為方法可以得到和之前相同的結(jié)果。
六、Built-In 指令
v-bind 真/假值 變更；在2.0中使用 v-bind 時，只有 null, undefined，和 false 被看作是假。這意味著，0 和空字符串將被作為真值渲染。比如 v-bind:draggable="''" 將被渲染為 draggable="true"；
用 v-on 監(jiān)聽原生事件 變更，現(xiàn)在在組件上使用 v-on 只會監(jiān)聽自定義事件 (組件用 $emit 觸發(fā)的事件)。如果要監(jiān)聽根元素的原生事件，可以使用 .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 替換，簡單起見，v-el 和 v-ref 合并為一個 ref 屬性了，可以在組件實例中通過 $refs 來調(diào)用；
v-show后面使用v-else 移除。
七、自定義指令
自定義指令 簡化；
八、過渡
transition 參數(shù) 替換，Vue 的過渡系統(tǒng)有了徹底的改變，現(xiàn)在通過使用 <transition> 和 <transition-group> 來包裹元素實現(xiàn)過渡效果，而不再使用 transition 屬性；
可復(fù)用的過渡 Vue.transition 替換，在新的過渡系統(tǒng)中，可以通過模板復(fù)用過渡效果；
過渡的 stagger 參數(shù) 移除。
九、事件
events 選項 移除，事件處理器現(xiàn)在在created鉤子中被注冊；
events 選項 移除Vue.directive('on').keyCodes 替換，新的簡明配置 keyCodes 的方式是通過 Vue.config.keyCodes；
$dispatch 和 $broadcast 替換，可使用Vuex。
十、過濾器
插入文本之外的過濾器 移除；
過濾器參數(shù)符號 變更 現(xiàn)在過濾器參數(shù)形式可以更好地與 js 函數(shù)調(diào)用方式一致，因此不用再用空格分隔參數(shù)，現(xiàn)在用圓括號括起來并用逗號分隔。
內(nèi)置文本過濾器 移除，替換 json 過濾器；替換 capitalize 過濾器；替換 uppercase 過濾器；替換 lowercase 過濾器；替換 pluralize 過濾器。
雙向過濾器 替換。
十一、插槽
重名的插槽 移除；
通過具名 <slot> 插入的片段不再保持 slot 的參數(shù)。請用一個包裹元素來控制樣式
十二、特殊屬性
keep-alive 屬性替換，不再是一個特殊屬性，而是一個包裹組件。
十三、計算插值
屬性內(nèi)部的計算插值 移除；
HTML計算插值 移除，取代的是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的實例方法
vm.$appendTo 移除；
vm.$before 移除；
vm.$after 移除；
vm.$remove 移除。
十六、底層實例方法
vm.$eval 移除；
vm.$interpolate 移除；
vm.$log 移除
十七、實例DOM選項
replace: false 移除，現(xiàn)在組件總是會替換掉他們被綁定的元素。為了模仿，可以用一個將要替換元素類似的元素將根組件包裹起來。
十八、全局配置
Vue.config.debug移除，因為警告信息將默認(rèn)在堆棧信息里輸出；
Vue.config.async移除，異步操作現(xiàn)在需要渲染性能的支持；
Vue.config.delimiters移除，可以在使用自定義分隔符時避免影響第三方模板；
Vue.config.unsafeDelimiters移除，HTML的插值替換為v-html。
十九、全局API
帶el的Vue.extend移除；
Vue.elementDirective移除；
Vue.partial移除。
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com