這篇文章將為大家詳細講解有關vuejs1.0與2.0的區(qū)別有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

公司主營業(yè)務：做網(wǎng)站、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出依安免費做網(wǎng)站回饋大家。

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

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

一、在每個組件模板，不在支持片段代碼

VUE1.0是:　

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

  

    
我是組件
      我是加粗標簽
   

二、組件定義方式不同

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

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

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

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

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

三、生命周期的變化

1、1.0的生命周期:

下圖是官方關于1.0生命周期的流程圖：

2、2.0的生命周期

下圖是官方關于2.0生命周期的流程圖：

借用一位大神的圖來總結(jié)他們的變化：

2.0生命生命周期變化感覺變得更加語義化一點（有規(guī)律可尋，更好記了），而且增加了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數(shù)據(jù)，不需要調(diào)用過濾器了，框架會自動幫我們解析出來；
2.0過濾器的傳參方式不是以前的方式，是以函數(shù)傳參的方式，下面示例：

之前調(diào)用:       {{msg | mimi '12' '5'}}
現(xiàn)在調(diào)用:   {{msg | mimi('12','5')}}

五、循環(huán)

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

這里提示我們要使用tranck-by=”$index”，這個屬性也可以幫我們提高for循環(huán)的性能，而在2.0，使用重復數(shù)據(jù)將不會報錯，同時也去掉了一些隱式變量如：index、key，那我們?nèi)绻玫竭@些數(shù)據(jù)則可以通過ES6的語法來獲取

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

關于整數(shù)循環(huán)，1.0的整數(shù)循環(huán)是從0開始的，2.0的整數(shù)循環(huán)是從1開始的，下面對比：

//HTML代碼

    

運行結(jié)果：

四、片段代碼

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

之前:   在1.0使用時完全沒問題
    
現(xiàn)在:  必須有根元素，包裹住所有的代碼
    
            

                
我是組件
                我是加粗標簽
            
    

關于“vuejs1.0與2.0的區(qū)別有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。