1. 程式人生 > >vue.js學習:1.0到2.0的變化(區別)

vue.js學習:1.0到2.0的變化(區別)

一、生命週期

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必須要用一個根元素(如div)將程式碼片段包裹起來,否則報錯。

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

以上只是列舉了部分變化,總體來說vue升級到2.0的變化還是沒辣麼大的(angular版本恐懼症),還有一些新變化等爬完坑再來補充( • ̀ω•́ )✧