因为各种笔试面试，最近都没时间做一些值得分享的东西，正好复习一下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，比如：

  1. @Component({
  2.   selector: \'my-app\',
  3.   template: `
  4.     <h1>{{title}}</h1>
  5.   `,
  6.   styles: [`
  7.     .selected {
  8.       background-color: #CFD8DC !important;
  9.       color: white;
  10.     }
  11.   `]
  12. })
  13. export class AppComponent {
  14.   title = \'Tour of Heroes\';
  15. }

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

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

  1. var MyComponent = Vue.extend({
  2.   template: \'<div>A custom component!</div>\'
  3. })
  5. // 注册
  6. Vue.component(\'my-component\', MyComponent)
  8. // 创建根实例
  9. new Vue({
  10.   el: \'#example\'
  11. })

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

  1. <style scoped>
  2. .container {
  3.   border: 1px solid #00f;
  4. }
  5. </style>
  6.  
  7. <template>
  8.   <div class="container">
  9.     <h2 class="red">{{msg}}</h2>
  10.     <Bpp :ok=\'msg\' ></Bpp>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. import Bpp from \'./bpp.vue\' 
  16.  
  17. export default {
  18.   data () {
  19.     return {
  20.       msg: "456"
  21.     }
  22.   },
  23.   components: {
  24.     Bpp
  25.   }
  26. }
  27. </script>

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

3.组件通信

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

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

ng2通信

  1. <my-hero-detail [hero]="selectedHero"></my-hero-detail>
  1. @Component({
  2.   selector: \'my-hero-detail\',
  3.   template: `
  4.     <div *ngIf="hero">
  5.       <h2>{{hero.name}} details!</h2>
  6.     </div>
  7.   `
  8. })
  9. export class HeroDetailComponent {
  10.   @Input() hero: Hero;
  11. }

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

vue通信是通过props字段，

  1.   <Bpp :ok=\'msg\' ></Bpp>

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

  1. <script>
  2.     export default {
  3.          props:[\'ok\'],
  4.         data(){
  5.             return {
  6.                 data:1
  7.             }
  8.         }
  9.     }
  10. </script>

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

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

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

4.路由

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

  1.  $routeProvider .when(\'/home\', {
  2.         templateUrl: \'views/home.html\',
  3.         controller: \'HomeCtrl\',
  4.         auth:\'home\'
  5.  })

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

类似的vue：

  1. router.map({
  2.   \'/a\': {
  3.     component: { ... },
  4.     auth: true // 这里 auth 也是一个自定义字段
  5.   }
  6. })

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

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

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

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

  1. const appRoutes: Routes = [
  2.   {
  3.     path: \'heroes\',
  4.     component: HeroesComponent
  5.   }
  6. ];

ng2的验证auth为：

  1. {
  2.   path: \'guanggao\',
  3.   component: MainContentComponent,
  4.   canActivate: [BlockIn]
  5. }

 

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

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

5.动画

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

  1.  animations: [
  2.     trigger(\'heroState\', [
  3.       state(\'inactive\', style({
  4.         backgroundColor: \'#eee\',
  5.         transform: \'scale(1)\'
  6.       })),
  7.       state(\'active\',   style({
  8.         backgroundColor: \'#cfd8dc\',
  9.         transform: \'scale(1.1)\'
  10.       })),
  11.       transition(\'inactive => active\', animate(\'100ms ease-in\')),
  12.       transition(\'active => inactive\', animate(\'100ms ease-out\'))
  13.     ])
  14.   ]

vue也提供了动画钩子：

  1. Vue.transition(\'expand\', {
  3.   beforeEnter: function (el) {
  4.     el.textContent = \'beforeEnter\'
  5.   },
  6.   enter: function (el) {
  7.     el.textContent = \'enter\'
  8.   },
  9.   afterEnter: function (el) {
  10.     el.textContent = \'afterEnter\'
  11.   },
  12.   enterCancelled: function (el) {
  13.     // handle cancellation
  14.   },
  16.   beforeLeave: function (el) {
  17.     el.textContent = \'beforeLeave\'
  18.   },
  19.   leave: function (el) {
  20.     el.textContent = \'leave\'
  21.   },
  22.   afterLeave: function (el) {
  23.     el.textContent = \'afterLeave\'
  24.   },
  25.   leaveCancelled: function (el) {
  26.     // handle cancellation
  27.   }
  28. })

 

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

版权声明：本文为dh-dh原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dh-dh/p/5852301.html