vuejs1.0與2.0的區別是什麼

區別：1、VUE2.0中必須用根元素包裹住所有的程式碼，VUE1.0中不用。2、元件定義方式不同。3、生命週期函數不同。4、vue2.0將vue1.0中所有自帶的過濾器都刪除了，vue2.0要使用過濾器需要自定義，而vue1.0不用。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

一、在每個元件模板，不在支援片段程式碼

VUE1.0是:　

<template>
  <h3>我是元件</h3><strong>我是加粗標籤</strong>
</template>

VUE2.0:必須有根元素,包裹住所有的程式碼

<template id="aaa">
  <div>
    <h3>我是元件</h3>
      <strong>我是加粗標籤</strong>
   </div>
</template>

二、元件定義方式不同

VUE1.0定義元件的方式有:

Vue.extend 這種方式，在2.0裡面有，但是有一些改動

Vue.component(元件名稱,{  在2.0繼續能用
  data(){}
  methods:{}
  template:
});

VUE2.0定義元件的方式則更為簡單

var Home={
    template:''    ->  相當於Vue.extend()
};

三、生命週期的變化

1、1.0的生命週期:

週期	解釋
init	元件剛剛被建立，但Data、method等屬性還沒被計算出來
created	元件建立已經完成，但DOM還沒被生成出來
beforeCompile	模板編譯之前
compiled	模板編譯之後
ready	元件準備（平時用得較多）
attached	在 vm.$el 插入到DOM時呼叫
detached	在 vm.$el 從 DOM 中刪除時呼叫
beforeDestory	元件銷燬之前
destoryed	元件銷燬之後

下圖是官方關於1.0生命週期的流程圖：

vue1.0生命週期

2、2.0的生命週期

週期	解釋
beforeCreate	元件剛剛被建立，但Data、method等屬性還沒被計算出來
created	元件建立已經完成，但DOM還沒被生成出來
beforeMount	模板編譯之前
mounted	模板編譯之後,元件準備
beforeUpdate	元件更新之前（資料等變動的時候）
updated	元件更新之後（資料等變動的時候）
activated	for keep-alive,元件被啟用時呼叫
deactivated	for keep-alive,元件被移除時呼叫
beforeDestory	元件銷燬之前
destoryed	元件銷燬之後

下圖是官方關於2.0生命週期的流程圖：
vue2.0生命週期

借用一位大神的圖來總結他們的變化：
生命週期區別

2.0生命生命週期變化感覺變得更加語意化一點（有規律可尋，更好記了），而且增加了beforeUpdate、updated、activated、deactivated，刪除了attached、detached。

四、過濾器

2.0將1.0所有自帶的過濾器都刪除了，也就是說，在2.0中，要使用過濾器，則需要我們自己編寫，以下是一個自定義過濾器範例,

Vue.filter('toDou',function(n,a,b){
    return n<10?n+a+b:''+n;
});

如果想展示JSON資料，不需要呼叫過濾器了，框架會自動幫我們解析出來；
2.0過濾器的傳參方式不是以前的方式，是以函數傳參的方式，下面範例：

之前呼叫:       {{msg | mimi '12' '5'}}
現在呼叫:   {{msg | mimi('12','5')}}

五、迴圈

剛學vue1.0的人可能會碰到一個錯誤資訊：

重複資料錯誤

這裡提示我們要使用tranck-by=」$index」，這個屬性也可以幫我們提高for迴圈的效能，而在2.0，使用重複資料將不會報錯，同時也去掉了一些隱式變數如：index、key，那我們如果要用到這些資料則可以通過ES6的語法來獲取

v-for="(val,index) in array"

關於整數迴圈，1.0的整數迴圈是從0開始的，2.0的整數迴圈是從1開始的，下面對比：

//HTML程式碼
<ul id='box'>
    <li v-for='val in 5' v-text='val'></li>
</ul>

執行結果：
1.0運行結果

2.0運行結果

四、片段程式碼

編寫template的時候，2.0必須要用一個根元素（如p）將程式碼片段包裹起來，否則報錯。

之前:   在1.0使用時完全沒問題
    <template>
        <h3>我是元件</h3><strong>我是加粗標籤</strong>
    </template>
現在:  必須有根元素，包裹住所有的程式碼
    <template id="aaa">
            <div>
                <h3>我是元件</h3>
                <strong>我是加粗標籤</strong>
            </div>
    </template>