vue1與vue2的區別

參考連接：https://www.php.cn/js-tutorial-420232.html

一、生命週期函數

（1）vue1.0

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

　　（2）vue2.0

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

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

二、過濾器

（1）vue1.0

自帶過濾器。

定義方式：vue.filter('過濾器名字'，fn) 

調用方式：{{msg | filterName'12' '5'}} 

（2）vue2.0

2.0移除了自帶過濾器，可是保留了自定義過濾器的功能。

定義方式：vue.filter('過濾器名字'，fn) 

調用方式：{{msg | filterName('12','5')}}

如下是一個自定義過濾器示例：

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

三、循環

關於整數循環，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>

// 2.0: 必須有根元素，包裹住全部的代碼 <template id="aaa">

            <div>

                <h3>我是組件</h3>

                <strong>我是加粗標籤</strong>

            </div>

    </template>

五、組件定義

　　（1）vue1.0

1）定義組件的方式：

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

Vue.component(組件名稱,{    在2.0繼續能用     

data(){

}     

methods:{

}    

template:

});

2）局部註冊

var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: '...', components: { // <my-component> will only be available in Parent's template
    'my-component': Child } })

（2）vue2.0

1）定義組件的方式：

var Home={        template:''        ->   至關於Vue.extend()

};

2）局部註冊：

var Child = {  template: '<div>A custom component!</div>'}new Vue({  // ...
  components: {    // <my-component> 將只在父模板可用
    'my-component': Child } })

六、給元素付惟一值

（1）vue 1.0 trace-by的方式

<div v-for="item in items" track-by="$index">

（2）vue 2.0 key的方式

<div v-for="item in items" :key="item.id">

七、自定義鍵盤指令

（1）vue1.0

　　Vue.directive('on').keyCodes.f1=17

（2）vue2.0

　　Vue.config.keyCodes.ctrl=17