最近移动端项目版本升级，Vue由之前的1.0升级到2.3，那么，Vue2.0之后，有哪些细节的变化呢，现在总结如下:

 

  1、在每个组件模板，不再支持片段代码

组件中模板:         之前:            
              现在:  必须有根元素，包裹住所有的代码            
     

2、关于组件定义

Vue.extend    这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，最好不用        Vue.component(组件名称,{    在2.0继续能用        data(){}        methods:{}        template:    });    2.0推出一个组件，简洁定义方式：    var Home={        template:''        ->   Vue.extend()    };

3、生命周期

之前:        init            created        beforeCompile        compiled        ready        √    ->     mounted        beforeDestroy            destroyed    现在:        beforeCreate    组件实例刚刚被创建,属性都没有        created         实例已经创建完成，属性已经绑定        beforeMount     模板编译之前        mounted         模板编译之后，代替之前ready  *        beforeUpdate    组件更新之前        updated         组件更新完毕    *        beforeDestroy   组件销毁前        destroyed       组件销毁后

 4、循环

2.0里面默认就可以添加重复数据    arr.forEach(function(item,index){    });    去掉了隐式一些变量        $index    $key    之前:        v-for="(index,val) in array"    现在:        v-for="(val,index) in array"track-by="id"    变成        

  5、自定义键盘指令

之前：Vue.directive('on').keyCodes.f1=17;            现在:  Vue.config.keyCodes.ctrl=17

6、过滤器

之前:       系统就自带很多过滤       {
    {msg | currency}}       {
    {msg | json}}       ....       limitBy       filterBy       .....    一些简单功能，自己通过js实现    到了2.0， 内置过滤器，全部删除了    lodash    工具库    _.debounce(fn,200)    自定义过滤器——还有        但是,自定义过滤器传参        之前:    {
    {msg | toDou '12' '5'}}        现在:     {
    {msg | toDou('12','5')}}

 7、组件通信

vm.$emit()    vm.$on();    父组件和子组件:    子组件想要拿到父组件数据:        通过  props    之前，子组件可以更改父组件信息，可以是同步  sync    现在，不允许直接给父级的数据，做赋值操作    问题，就想更改：        a). 父组件每次传一个对象给子组件, 对象之间引用    √        b). 只是不报错, mounted中转------------------------------------------------------可以单一事件管理组件通信:    vuex    var Event=new Vue();    Event.$emit(事件名称, 数据)    Event.$on(事件名称,function(data){        //data    }.bind(this));

 8、延迟

debounce    废弃    ->   lodash        _.debounce(fn,时间)

 9、动画

transition 之前   属性
 class定义.fade-transition{}.fade-enter{}.fade-leave{}到2.0以后 transition 组件
     
          运动东西(元素，属性、路由....)
     class定义:.fade-enter{}    //初始状态.fade-enter-active{}  //变化成什么样  ->  当元素出来(显示).fade-leave{}.fade-leave-active{} //变成成什么样   -> 当元素离开(消失)如何animate.css配合用
     
      
     多个元素运动
      
      
 
      
     

10、路由

基本使用:1.  布局    
     
      主页
         
      2. 路由具体写法    //组件    var Home={        template:'
我是主页
'    };    var News={        template:'
我是新闻
'    };    //配置路由    const routes=[        {path:'/home', componet:Home},        {path:'/news', componet:News},    ];    //生成路由实例    const router=new VueRouter({        routes    });    //最后挂到vue上    new Vue({        router,        el:'#box'    }); 3. 重定向    之前  router.rediect  废弃了    {path:'*', redirect:'/home'}路由嵌套:    /user/username    const routes=[        {path:'/home', component:Home},        {            path:'/user',            component:User,            children:[  //核心                {path:'username', component:UserDetail}            ]        },        {path:'*', redirect:'/home'}  //404    ];------------------------------------------/user/strive/age/10:id:username:age------------------------------------------路由实例方法:    router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个    router.replace({path:'news'}) //替换路由，不会往历史记录里面添加