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生命周期的流程圖：

2、2.0的生命周期

周期	解釋
beforeCreate	組件剛剛被創建，但Data、method等屬性還沒被計算出來
created	組件創建已經完成，但DOM還沒被生成出來
beforeMount	模板編譯之前
mounted	模板編譯之后,組件准備
beforeUpdate	組件更新之前（數據等變動的時候）
updated	組件更新之后（數據等變動的時候）
activated	for keep-alive,組件被激活時調用
deactivated	for keep-alive,組件被移除時調用
beforeDestory	組件銷毀之前
destoryed	組件銷毀之后

下圖是官方關於2.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>

運行結果：

四、片段代碼

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

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

五：插值語法{{}}

2.0廢棄了{{}}的語法，在標簽內使用{{}}插入數據將失效。

//HTML代碼
 <h3>{{msg}}</h3>


//js代碼
 var vm = new Vue({
     el:'#box',
     data:{
         msg:'YOYOYOYO'
     },
     methods:{

     }
 })

運行結果： 

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

原文來源：https://blog.csdn.net/a895865025/article/details/74331626