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...