angular与vue的应用对比

因为各种笔试面试，最近都没时间做一些值得分享的东西，正好复习一下vue技术栈，与angular做一下对比。

angular1就跟vue比略low了。

1.数据绑定

　　ng1 ng-bind，{{ scope }}   双向是ng-model

　　ng2  {{scope}}  [scope] 双向是[(scope)]   （ng2的绑定拆分开来，而且支持函数返回是很棒的设计）

      vue v-bind , {{ scope }} ,:scope 双向是v-model

2.组件化

  ng1的组件化就是每个指令堆积起来的，本身并没有特别组件化的思想，只是大家把指令分为组件化指令和装饰性指令。那ng1的组件化就是angular注册好多指令

  ng2的组件化是ts的class，比如：

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
  `,
  styles: [`
    .selected {
      background-color: #CFD8DC !important;
      color: white;
    }
  `]
})
export class AppComponent {
  title = 'Tour of Heroes';
}

 ng2的组件用ts的类实现，每个组件一个文件，然后通过import引入。用上高级语言就是比ng1高大上。

vue的组件可以分到文件也可以注册vue全局组件，纯vue的话需要：

var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
  el: '#example'
})

当然，加es6的话vue组件就变成了一个个.vue文件：

<style scoped>
.container {
  border: 1px solid #00f;
}
</style>

<template>
  <div class="container">
    <h2 class="red">{{msg}}</h2>
    <Bpp :ok='msg' ></Bpp>
  </div>
</template>

<script>
import Bpp from './bpp.vue' 
 
export default {
  data () {
    return {
      msg: "456"
    }
  },
  components: {
    Bpp
  }
}
</script>

我更喜欢这种形式，一个组件的样式，js，dom都在一个文件里，或者在一个文件夹里。当然.vue需要过一下vue-loader。

3.组件通信

ng1父组件跟子组件通信，相当于props把属性写到子组件上，还可以公用一个$scope,service,还有万能的事件系统。

　　反过来共用$scope也是行得通的，service，事件系统。。在传统的组件流中是不推荐子组件与父组件通信的。

ng2通信

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

@Component({
  selector: 'my-hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
    </div>
  `
})
export class HeroDetailComponent {
  @Input() hero: Hero;
}

类似props，但需要@Input声明。

vue通信是通过props字段，

  <Bpp :ok='msg' ></Bpp>

在Bpp组件里声明props属性来接受ok：

<script>
    export default {
         props:['ok'],
        data(){
            return {
                data:1
            }
        }
    }
</script>

可以看到ng2和vue的实现方式已经很类似了，只是ng2的ts通过注解来实现的，vue通过属性，api设计趋于大同。。

子组件到父组件的传输方式略有不同，大体解决思路就是观察者模式，不过也可以用redux这种全局的store思想。

ng2的观察者模式是rxjs，vue的就是自带的事件系统，各有优劣，ng2的rxjs功能强大，写起来简单舒服，但是需要引入rxjs，不过ng2本身就依赖rxjs。

4.路由

ng1路由ng-router，提供了 $routeProvider来控制路由，如果用到权限控制要：

 $routeProvider .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl',
        auth:'home'
 })

auth是自己加的属性，为实现权限的控制，ng-router还提供了钩子函数： $rootScope.$on('$routeChangeStart', function(scope, next, current) {})。这样就可以判断权限了。

类似的vue：

router.map({
  '/a': {
    component: { ... },
    auth: true // 这里 auth 也是一个自定义字段
  }
})

路由嵌套的话在该路由的对象上面加一个subRoutes。然而ng-router不支持嵌套，就需要第三方库ui-router。

vue这里也提供了钩子函数，为验证auth：

router.beforeEach(function (transition) {
  if (transition.to.auth) {
    // 对用户身份进行验证...
  }
})

对于ng2，路由好像还没稳定下来，不知道api会不会改。。：

const appRoutes: Routes = [
  {
    path: 'heroes',
    component: HeroesComponent
  }
];

ng2的验证auth为：

{
  path: 'guanggao',
  component: MainContentComponent,
  canActivate: [BlockIn]
}

有个canActivate属性，BlockIn是一个类，我们可以在BlockIn里写一些权限验证什么的。

三者的路由好像没怎么改，配置api都是类似的。

5.动画

ng1的动画模块,ng2强大的动画系统：

 animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]

vue也提供了动画钩子：

Vue.transition('expand', {

  beforeEnter: function (el) {
    el.textContent = 'beforeEnter'
  },
  enter: function (el) {
    el.textContent = 'enter'
  },
  afterEnter: function (el) {
    el.textContent = 'afterEnter'
  },
  enterCancelled: function (el) {
    // handle cancellation
  },

  beforeLeave: function (el) {
    el.textContent = 'beforeLeave'
  },
  leave: function (el) {
    el.textContent = 'leave'
  },
  afterLeave: function (el) {
    el.textContent = 'afterLeave'
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
})

ng1和vue都会给dom添加一些固定class...