vue.js2.0和vue.js1.0有哪些區(qū)別

這篇文章主要介紹vue.js2.0和vue.js1.0有哪些區(qū)別，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue.js2.0和vue.js1.0的區(qū)別是：1、vue2.0每個組件只允許有一個根元素，vue1.0允許一個組件有多個根元素；2、vue2.0移除了$index和$key兩個隱式聲明變量；3、vue 2.0棄用了prop。

本文操作環(huán)境：windows10系統(tǒng)、vue 2.5.2、thinkpad t480電腦。

區(qū)別分析如下：

1、2.0每個組件只允許有一個根元素，1.0允許一個組件有多個根元素

2、生命周期鉤子函數(shù)

3、v-for

• 參數(shù)順序變化

• 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">

• <div v-for="item in items" v-bind:key="item.id">

• 范圍變更

props

v1 中可以在 prop 內(nèi)部定義 coerce 方法，用于將 prop 的值傳遞給組件前進行一些計算，組件內(nèi)部得到的 prop 的值是 coerce 方法返回的值。

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

v2 使用 computed 替代

twoWay prop

v1 中設(shè)置 prop 的 twoWay 屬性為 true，可以雙向傳遞。

.sync 和 .once

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

• .sync 顯示雙向綁定 prop

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

修改 prop

v1 中可以修改 prop，v2 已經(jīng)棄用了

根實例的 props

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

計算屬性

v2 中 computed 計算屬性默認會被緩存，v1 中可以為計算屬性添加一個 cache 屬性，設(shè)置為 false，則會關(guān)閉緩存驗證。

vue 指令

v-bind

v-bind 指令對于真假值的判斷，v1 遵循 js 的一般規(guī)則，v2 中則只有 null、undefined、false 被看作是假，0 和 '' 則被視為真值。

此規(guī)則只限于 v-bind 指令，v-if 和 v-show 仍遵循 js 的規(guī)則

v-on

v1 中 v-on 指令可以監(jiān)聽原生事件， v2 中只監(jiān)聽自定義事件，如果需要監(jiān)聽原生事件，需要加上 .native 修飾符。

v-model

帶有 debounce 參數(shù)的 v-model

v1 中使用 v-model 指令的表單元素可以帶有 debounce 屬性，用于設(shè)置一個更新 model 的最小延遲時間。

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

這是控制了狀態(tài)更新的頻率，而不是控制高耗時任務(wù)本身

lazy、number 參數(shù)

v2 中的 .lazy、.number 修飾符，在 v1 中以標簽屬性的形式出現(xiàn)

<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，方便調(diào)用該元素或組件實例，v2 中棄用了這兩個指令，統(tǒng)一使用 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>

以上是“vue.js2.0和vue.js1.0有哪些區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！