高層級的變化
- 模板解析器不再依賴於DOM(除非你使用真正的DOM作爲模板)，因此只要你使用字符串模板，你將不再受到任何1.0版本中的解析限制。但是，如果你依賴在存在的內容中掛載一個元素作爲模板(使用el元素)，你將依然受到這些限制。
- 編譯器(將字符串模板轉換爲渲染方法的部分)和運行時間現在能夠被分開。這裏有兩種不同的構建：
- 獨立構建：包括編譯並且運行。這種方式和vue 1.0幾乎完全一樣。
- 運行時編譯：由於它不包括編譯器，在編譯步驟時要麼預編譯模板，要麼手動編寫渲染功能。npm包默認導出這個版本，那麼你需要有一個編譯的過程(使用Browserify或Webpack ),從中vueify或vue-loader將可以進行模板預編譯。
全局配置
- Vue.config.silent
- Vue.config.optionMergeStrategies
- Vue.config.devtools
- Vue.config.errorHandler(新API，全局的掛鉤用於在組件渲染和監控的時候處理未捕獲的錯誤)
- Vue.config.keyCodes(新API，爲v-on配置自定義的key的別名)
- Vue.config.debug(已丟棄)
- Vue.config.async(已丟棄)
- Vue.config.delimiters(已丟棄)
- Vue.config.unsafeDelimiters(已丟棄，使用v-html)
全局API
- Vue.extend
- Vue.nextTick
- Vue.set
- Vue.delete
- Vue.directive
- Vue.component
- Vue.use
- Vue.mixin
- Vue.compile(新API，只能用於獨立版本構建)
- Vue.transition
- stagger(已丟棄，在el上設置
- Vue.filter
- Vue.elementDirective(已丟棄，使用組件)
- Vue.partial (已丟棄，使用功能組件)
選項
data
- data
- props
。prop
。default
。coerce(已丟棄，如果你需要轉換prop,請使用compute屬性)
。prop binding modes(已丟棄，v-model在組件上可以工作
- propsData(新API)只能用於實例
- computed
- methods
- watch
DOM
- el
- template
- render(新API)
- replace(已丟棄，組件現在必須有一個根元素)
生命週期鉤子
- init(已丟棄，請使用beforeCreate)
- created
- beforeDestroy
- destroyed
- beforeMount(新API)
- mounted(新API)
- beforeUpdate(新API)
- updated(新API)
- activated(新API，用於keep-alive)
- deactivated(新API用於keep-alive)
- ready(已丟棄，使用mounted)
- activate(已丟棄，遷移到vue-router)
- beforeCompile(已丟棄，使用created)
- compiled(已丟棄，使用mounted)
- attached(已丟棄)
- detached(已丟棄，同上)
Assets
- directives
- components
- transitions
- filters
- partials(已丟棄)
- elementDirectives(已丟棄)
雜項
- parent
- mixins
- name
- extends
- delimiters(新API，替代原版的全局配置選項，只在獨立構建中可用)
- functional(新API)
- events(已丟棄)
實例方法
data
- vm.$watch
- vm.$get(已丟棄，直接檢索值)
- vm.$set(已丟棄，使用Vue.set)
- vm.$delete(已丟棄，使用Vue.delete)
- vm.$eval(已丟棄，沒有真正的使用)
- vm.$interpolate(已丟棄，同上)
- vm.$log(已丟棄，使用devtools)
events
- vm.$on
- vm.$once
- vm.$off
- vm.$emit
- vm.$dispatch(已丟棄，使用全局的事件或使用vuex，見下面)
- vm.$broadcast(已丟棄，同上)
DOM
- vm.$nextTick
- vm.$appendTo(已丟棄，在 vm.$el上使用本地API)
- vm.$before(已丟棄)
- vm.$after(已丟棄)
- vm.$remove(已丟棄)
生命週期
- vm.$mount
- vm.$destroy
指令
- v-text
- v-html(注意{{{ }}} 被丟棄)
- v-if
- v-show
- v-else
- v-for
。key (替代 track-by)
。object v-for
。range v-for
。參數順序更新：數組中使用(value, index) in arr，對象中使用(value, key, index) in obj
。$index和$key被丟棄
- v-on
。modifiers
。on child component
。自定義鍵碼，目前版本Vue.config.keyCodes代替原來的Vue.directive('on').keyCodes
- v-bind
。作爲prop
。xlink
。綁定對象
- v-bind:style
- prefix sniffing
- v-bind:class
- v-model
- lazy (as modifier)
- number (as modifier)
- ignoring composition events
- debounce(已丟棄，使用v-on:input)
- v-cloak
- v-pre
- v-once(新API)
- v-ref(已丟棄，現在只是一個特殊的屬性ref)
- v-el(和ref合併)
特殊組件
- <component>
- :is
- async組件
- inline-template
- <transition>
- <transition-group>
- <keep-alive>
- <slot>
- partial(已丟棄)
特殊屬性
- key
- ref
- slot
服務器端渲染
- renderToString
- renderToStream
- client-side hydration
v-for迭代語法變化
- 丟棄$index和$key
- 新數組語法
- value in arr
- (value, index) in arr
- 新對象語法
- value in obj
- (value, key) in obj
- (value, key, index) in obj
指令接口的改變
大體來說，2.0版本中指令大範圍的降低功能，它們僅用於低層次的直接dom操作。在多數情況下，你更應該使用組件作爲主要的代碼重構抽象。
指令不再有實例，這意味着指令中將不存在this，並且bind, update和unbind目前將接受任何數據作爲參數。
請注意，綁定對象是不可變的。設置binding.value沒有任何效果。並且在它上面添加屬性不會持久，如果你真的非常需要可以在el配置上添加指令狀態。
- <div v-example:arg.modifier="a.b"></div>
- // example directiveexport default {
- bind (el, binding, vnode) {
- // the binding object exposes value, oldValue, expression, arg and modifiers.
- binding.expression // "a.b"
- binding.arg // "arg"
- binding.modifiers // { modifier: true }
- // the context Vue instance can be accessed as vnode.context.
- },
- // update has a few changes, see below
- update (el, binding, vnode, oldVnode) { ... },
- // componentUpdated is a new hook that is called AFTER the entire component
- // has completed the current update cycle. This means all the DOM would
- // be in updated state when this hook is called. Also, this hook is always
- // called regardless of whether this directive's value has changed or not.
- componentUpdated (el, binding, vnode, oldVNode) { ... },
- unbind (el, binding, vnode) { ... }
- }
如果你只關心值可以使用解構：
- export default {
- bind (el, { value }) {
- // ...
- }
- }
除此之外，update鉤子有一些變化：
- 在bind之後將不再自動調用
- 當組件重新渲染時總能響應，無論被綁定的值是否發生改變。你可以通過binding.value === binding.oldValue比較跳過不必要的更新，但也會有情況下，你希望應用始終更新。例如，當指令綁定到對象那可能希望是變化而不是替代。
- elementDirective, 指令參數和指令配置，例如acceptStatement, deep等等
均被刪除。
過濾器用法和語法變化
在vue 2.0，filter有了一系列的變化：
- filter現在只能用於文本插入（{{}}標籤）。在之前我們在指令中使用filter，例如v-model，v-on等等，導致使用的複雜性，並且在v-for上的列表過濾，它更適合遷移到計算性能的js中。
- vue 2.0不提供任何內置過濾器。建議使用獨立的方法解決特定域的問題，例如moment.js用於格式化時間，accounting.js用於格式化金融貨幣。也歡迎你來創建自己的過濾器，並與社區分享吧！
- filter語法更改爲內嵌的js函數調用，而不是採取空格分割的參數。
- {{ date | formatDate('YY-MM-DD') }}
過渡組件過渡CSS的變化
- v-enter：在元素插入前應用，1秒後刪除。（開始於進入狀態）
- v-enter-active：在元素插入前應用，當transition/animation結束時移除。
- v-leave：當離開的transition觸發時正確應用，一秒後刪除。（開始於離開狀態）
- v-leave-active：當離開的transition觸發時正確應用，當transition/animation結束時移除。
- v-enter-active和v-leave-active幫助你指定不同的曲線用於進入/離開動畫。在多數情況下，升級只需將當前的v-leave替換爲v-leave-active。（對於css動畫，使用v-enter-active和v-leave-active）
過渡API的變化
- <transition>組件
所有單元素的過度效果通過使用<transition>這個內置組件包裝目標元素或組件得到相應的效果。這是一個抽象組件，意味着它不會渲染額外的DOM元素，也不會在組件層次結構中展示。它僅僅用於過渡行爲裏面的包裹內容。
最簡單的用法示例:
- <transition>
- <div v-if="ok">toggled content</div></transition>
該組件定義了一些屬性和事件，直接映射到舊版的過渡定義選項。
屬性
- name: String
- 用於自動生成過渡CSS類名。例如，name: 'fade'將會自動生成 .fade-enter、.fade-enter-active等等。默認是v。
- appear: Boolean
- 是否在最初的渲染應用的過渡。（默認值false）
- css: Boolean
- 是否應用css過度類，默認值true。如果設置爲false，只能通過觸發組件事件註冊的JavaScript鉤子。
- type: String
- 指定等待確定過渡結束時轉變的事件類型。可用的值是transition和animation。默認情況下，它會自動檢測一個持續時間較長的類型。
- mode: String
- 控制離開/進入轉換的時序。可用的模式是in-out和out-in，默認爲同步。
- enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass, appearActiveClass: String
- 單獨配置的過渡css類
過渡到動態組件的示例：
- <transition name="fade" mode="out-in" appear>
- <component :is="view"></component></transition>
事件
對應的在1.x API中可用的js鉤子：
- before-enter
- enter
- after-enter
- before-leave
- leave
- after-leave
- before-appear
- appear
- after-appear
例子：
- <transition @after-enter="transitionComplete">
- <div v-show="ok">toggled content</div></transition>
當進入的過渡效果完成時，組件的transitionComplete方法將會在過渡DOM元素作爲參數被調用。
一些注意事項：
- leave-cancelled在插入刪除中不可用。一旦離開的過渡效果開始，將不能被取消。但是仍然可用於v-show。
- 和1.0類似，對於enter和leave鉤子，在cb作爲第二個參數的存在下表示使用者想要過渡結束時間的明確控制。
- <transition-group>組件
所有的多元素過渡效果通過使用<transition-group>內置組件包裝元素應用。它暴露了和<transition>一樣的屬性和事件。不同之處在於：
- 不同於<transition>,<transition-group>渲染一個真實的DOM元素。默認是渲染一個<span>標籤，並且你可以配置哪些元素應該通過標記的屬性呈現。你也可以使用is特性，例如<ul is="transition-group">。
- <transition-group>不支持mode屬性。
- <transition-group>下的子組件必須有唯一的key。
例子：
- <transition-group tag="ul" name="slide">
- <li v-for="item in items" :key="item.id">
- {{ item.text }}
- </li></transition-group>
創建可重用的轉換
現在transitions能夠通過組件應用，它們補在被視爲一種單獨類型，因此全局的Vue.transition()方法和transition配置都被丟棄。你可以通過組件的屬性和方法配置內嵌的過渡。但是，我們現在怎麼創建可重複使用的過渡效果，尤其是那些自定義的js鉤子？答案是創建自己的過渡組件（它們特別適合作爲功能組件）：
- Vue.component('fade', {
- functional: true,
- render (createElement, { children }) {
- const data = {
- props: {
- name: 'fade'
- },
- on: {
- beforeEnter () { /* ... */ }, // <-- Note hooks use camelCase in JavaScript (same as 1.x)
- afterEnter () { /* ... */ }
- }
- }
- return createElement('transition', data, children)
- }
- })
你可以這麼使用：
- <fade>
- <div v-if="ok">toggled content</div></fade>
- v-model的變化
- lazy和number參數現在是修飾符。
- <input v-model.lazy="text">
- 新的修飾符：.trim-修整輸入，顧名思義
- debounce參數被丟棄
- v-model不再關心初始值。它始終將data的數據作爲資源。這意味着數據將是以1呈現而不是2.
- data: {val: 1
- }
- <input v-model="val" value="2">
- 當使用v-for時，v-model不再生效。
- <input v-for="str in strings" v-model="str">
Refs
- v-ref現在不再是一個指令，而是一個類似於key的屬性
- <!-- before --><comp v-ref:foo></comp>
- <!-- after --><comp ref="foo"></comp>
- 依然支持動態綁定：
- <comp :ref="dynamicRef"></comp>
- vm.$els和vm.$refs合併了。在正常元素上使用是DOM元素，在組件上使用是組件實例。
雜項
- track-by已經被key替代。對於綁定屬性它遵守相同的規則，沒有v-bind:或者:字頭，它被視爲普通字符串。大多數情況下需要動態綁定，如下：
- <!-- 1.x --><div v-for="item in items" track-by="id">
- <!-- 2.0 --><div v-for="item in items" :key="item.id">
- 內插值屬性已被棄用。
- <!-- 1.x --><div id="{{ id }}">
- <!-- 2.0 --><div :id="id">
- 屬性綁定行爲變化：當綁定屬性時，只有null、undefine和false被認爲是false。這意味着0和空字符串依舊呈現出原來的樣子。對於枚舉屬性，:draggable="''"將被渲染爲draggable="true"。
- 另外，對於枚舉屬性，除了上述false的值，false字符串也會被渲染爲attr="false"。
- 當使用一個自定義組件，v-on只聽自定義事件$emitted掛載在組件上。（不再監聽DOM事件）
- v-else不再適用於v-show，請使用其他的否定表達式。
- 單次綁定（{{* foo }}）被移除，請使用v-once。
- Array.prototype.$set/$remove被丟棄（使用Vue.set或者Array.prototype.splice）。
- :style不再支持!import。
- root實例不能使用props（請使用propsData）
- 在Vue.extend中el配置項不能被使用,它現在只能被用作一個實例創建選項。
- 在vue的實例中不能使用Vue.set和Vue.delete
升級小提示如何處理丟棄的$dispatch和$broadcast？
我們棄用$dispatch和$broadcast的原因在於依賴組件樹結構的事件流，當組件樹變得很大時很難推理（簡單地說：它不能在大型應用很好地擴展，我們不希望以後給你設置痛點）。$dispatch和$broadcast不能解決同級組件之間的通信。從而，你可以使用和node中的EventEmitter類似的模式：一個允許組件通信的集中事件樞紐，無論他們在組件樹的任何地方。因爲vue的實例實現了事件發射接口，你可以使用空的vue實例達到目的：
- var bus = new Vue()
- // in component A's method
- bus.$emit('id-selected', 1)
- // in component B's created hook
- bus.$on('id-selected', this.someMethod)
並且不要忘記使用$off解綁事件：
- // in component B's destroyed hook
- bus.$off('id-selected', this.someMethod)
這種模式在簡單的場景中可以作爲$dispatch和$broadcast的替代。但是在複雜的場景中，建議使用vuex建立一個專門的狀態管理層。
如何處理數組中filter的棄用？
對於使用v-for進行列表過濾-過濾器常見用法之一-現在建議使用computed屬性返回原始數組的一個副本（查閱更新數據例子）。好處在於你不再受到filter語法的限制，現在它只是普通的javascript，並且你可以正常訪問過濾結果，因爲它只是一個計算的屬性。
如何處理在v-model中debounce的丟棄？
- debounce用於我們多久執行異步請求和其他操作，在v-model中使用十分容易，但這樣也延遲了狀態更新帶來了限制。
