vue1.0和2.0的区别

接触vue的时候就是用的2.0，对于1.0和2.0的区别没有研究过。 下面就来总结下：

1、首先来说下生命周期吧

vue1.0的生命周期
    init                组件初始化
    created             组件创建
    beforeCompile       组件编译之前
    compiled            组件编译之后
    ready               组件准备
    beforeDestroy       组件销毁前
    destroyed           组件销毁完成
    
vue2.0的生命周期(创建前/后 挂载前/后 更新前/后 销毁前/后)
    beforeCreate        组件实例被创建,属性都没有
    created             实例已经创建完成，属性已经绑定
    beforeMount         模板编译之前
    mounted             模板编译之后，代替之前ready  *
    beforeUpdate        组件更新之前
    updated             组件更新完毕  *
    beforeDestroy       组件销毁前
    destroyed           组件销毁后 

2、组件模版写法变更

vue2.0不支持片段代码，只接受一个根节点，也就是唯一的父级

<!--下面的代码在vue1.0中可以执行，在vue2中会有警告-->
<template>
    <h1>标题1啦</h1>
    <h2>标题2啦</h2>
</template>
<!--vue2.0必须有根节点如下-->
<template>
    <div><!--此处必须有根节点-->
        <h1>标题1啦</h1>
        <h2>标题2啦</h2>
    </div>
</template>

3、组件定义

vue1.0中组件的定义方式:

Vue.extend()            //这种方式，在2.0里面有，但是有一些改动

Vue.component('组件名称',{   // 在2.0继续能用
    data(){}
    methods:{}
    template:
});

vue2.0组件的定义方式:

var Home={
        template:''        //  相当于Vue.extend()
};

4、自定义键盘指令

vue的键盘指令可以自定义，1.0和2.0的写法有修改

//vue1.0的写法
Vue.directive('on').keyCodes.ctrl=17;   //vue1.0语法
Vue.config.keyCodes.ctrl=17;            //vue2.0语法

5、过滤器

vue2.0将vue1.0中所有的自带的过滤器都删除了，2.0需要使用过滤器需要自定义。

//2.0过滤器的传参方式是以函数传参的方式,颠覆了1.0的传参方式
{{msg | mimi '12' '5'}}     //1.0的传参方式
{{msg | mimi('12','5')}}    //2.0的传参方式

6、循环

vue1.0中提高循环性能需添加 track-by='$index' vue2.0中提高循环性能可不添加 :key="index" vue1.0中循环写法v-for="(index,val) in array" vue2.0中循环写法v-for="(val,index) in array"较倾向于js原声forEach,先写val再写index

7、动画

vue1.0中transition只是一个属性

vue2.0中transition是一个组件

8、路由vue-router

<!--vue1.0写法-->
<a v-link="{path:'/home'}">我是主页</a>
<!--vue2.0写法-->
<router-link to="/home">我是主页</router-link>
<!--然后路由配置等等，还有路由传参等-->