vue1与vue2的区别

参考链接：https://www.php.cn/js-tutorial-420232.html

1、生命周期函数

（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。

2、过滤器

（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;

});

3、循环

关于整数循环，1.0的整数循环是从0开始的，2.0的整数循环是从1开始的，下面对比：

//HTML代码
<ul id='box'>
    <li v-for='val in 5' v-text='val'>
    </li>
</ul>

4、代码片段

编写template的时候，2.0必须要用一个根元素（如div）将代码片段包裹起来，否则报错。

// 1.0

    <template>

        <h3>我是组件</h3><strong>我是加粗标签</strong>

    </template>

// 2.0:  必须有根元素，包裹住所有的代码

    <template id="aaa">

            <div>

                <h3>我是组件</h3>

                <strong>我是加粗标签</strong>

            </div>

    </template>

5、组件定义

　　（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
  }
})

6、给元素付唯一值

（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">

7、自定义键盘指令

（1）vue1.0

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

（2）vue2.0

　　Vue.config.keyCodes.ctrl=17