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