vue.js2.0和vue.js1.0的差別是什麼

vue.js2.0和vue.js1.0的差別是：1、vue2.0每個元件只允許有一個根元素，vue1.0允許一個元件有多個根元素；2、 vue2.0移除了$index和$key兩個隱式宣告變數；3、vue 2.0棄用了prop。

本文操作環境：windows10系統、vue 2.5.2、thinkpad t480電腦。

區別分析如下：

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

2、生命週期鉤子函數

3、v-for

• #參數順序變更

• ##v2 移除了 $index 和 $key 這兩個隱含宣告變數

• key 取代track-by

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

• v2 ： 

• 範圍變更

##props

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 + &#39; !important&#39; }">hello</p>
// v2
<p v-bind:style="&#39;color: &#39; + myColor + &#39; !important&#39;">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>

推荐学习：php培训