vue1.x 與 vue2.x 差別

自身熟悉 vue2，須要改寫 vue1.x 項目，本篇文章簡化了 vue 官網對於 v2 (2.x) 與 v1 (1.x) 的差別敘述。不少地方以 v2 的角度敘述。

模板

v2 每一個組件只容許有一個根元素，v1 容許一個組件有多個根元素

生命週期鉤子函數

v1	v2
beforeCompile 移除	created
compiled 替換	mounted
attached 移除	mounted () { this.$nextTick(() => { // doSomething }) }
detached 移除	destroyed () { this.$nextTick(() => { // doSomething }) }
init 從新命名	beforeCreate
ready 替換	mounted () { this.$nextTick(() => { // doSomething }) }

v-for

• 參數順序變化

	v1	v2
數組	(index, value)	(value, index)
對象	(key, value)	(value, key)

• v2 移除了 $index 和 $key 這兩個隱式聲明變量

• key 替換 track-by
  v2 中的 :key 在 v1 中使用 track-by 指定，且 track-by 不用 v-bind 綁定，而是直接指定key名，如：

  • v2 ： <div v-for="item in items" track-by="id">
  • v1 ： <div v-for="item in items" v-bind:key="item.id">
• 範圍變動

	v1	v2
number in 10	0-9	1-10

props

coerce prop

v1 中能夠在 prop 內部定義 coerce 方法，用於將 prop 的值傳遞給組件前進行一些計算，組件內部獲得的 prop 的值是 coerce 方法返回的值。

propG: {
  coerce: function (val) {
    return val + '' // cast the value to string
  }
}

v2 使用 computed 替代

twoWay prop

v1 中設置 prop 的 twoWay 屬性爲 true，能夠雙向傳遞。

.sync 和 .once

v1 中綁定 prop 時，可使用 .sync 和 .once 修飾符

• .sync 顯示雙向綁定 prop
• .once prop 的值一旦被傳遞，父組件對該屬性的變化將不會再同步到子組件

修改 prop

v1 中能夠修改 prop，v2 已經棄用了

根實例的 props

v1 中根實例能夠有 props 屬性，v2 中替代的是 propsData

計算屬性

v2 中 computed 計算屬性默認會被緩存，v1 中能夠爲計算屬性添加一個 cache 屬性，設置爲 false，則會關閉緩存驗證。

vue 指令

v-bind

v-bind 指令對於真假值的判斷，v1 遵循 js 的通常規則，v2 中則只有 null、undefined、false 被看做是假，0 和 '' 則被視爲真值。

此規則只限於 v-bind 指令，v-if 和 v-show 仍遵循 js 的規則

v-on

v1 中 v-on 指令能夠監聽原生事件， v2 中只監聽自定義事件，若是須要監聽原生事件，須要加上 .native 修飾符。

v-model

帶有 debounce 參數的 v-model

v1 中使用 v-model 指令的表單元素能夠帶有 debounce 屬性，用於設置一個更新 model 的最小延遲時間。

<input v-model="msg" debounce="500">

這是控制了 狀態更新的頻率，而不是控制高耗時任務自己

lazy、number 參數

v2 中的 .lazy、.number 修飾符，在 v1 中以標籤屬性的形式出現

<input v-model="name" lazy>
<input v-model="age" type="number" number>

v-model 的初值

v2 中 v-model 的初值就是所綁定的 data 的值，可是在 v1 中，會用當前標籤元素的 value 做爲初值。

v-bind:style

v1 中的 v-bind:style 能夠添加 !important，v2 中必須寫成字符串形式。以下

// v1
<p v-bind:style="{ color: myColor + ' !important' }">hello</p>
// v2
<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>

v-el 和 v-ref

v1 中能夠分別使用 v-el 爲 DOM 元素、v-ref 爲 component 指定一個 name，方便調用該元素或組件實例，v2 中棄用了這兩個指令，統一使用 ref='name' 的方式。

v-show 與 v-else 一塊兒使用

v1 中容許 v-show 與 v-else 一塊兒使用，以下

// v1
<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>
// v2
<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>

自定義指令

未完待續。。。