为什么要选用Vue？Vue与angularjs 1x具有哪些优点？

之前一直在学习使用angularJs 1x,之后公司使用Vue，只能在学习Vue了。这里主要说明使用这两个的心得还有一些坑。

一、两者的构成

AngualrJs

1. MVVM(Model+veiw+veiw-model)。

2. 构成：依赖注入Controller 、视图view 、模块Module、服务Service、工厂 Factory、过滤 filter以及指令。

3. 路由主要有两个，自带路由ng-Route和ui-router。

4. 组件定义1.5以下可用directive，1.6可用component这两者相差不大如使用推荐后者。

5. Ajax封装($http)

6. Jquery不友好

Vue

1. MVVM(Model+veiw+veiw-model)。

2. 构成：vue热衷对页面的直接开发（页面组件化），过滤 filter、指令等。

3. 路由vue-router

4. Ajax插件(vue-resource,axios)

5. Jquery 友好

这两者都采用双向数据绑定模式，热衷对页面数据的直接操作，

Angaulrjs 双向数据绑定采用的是脏值检查，没定义一个值都会创建一个$watch,档作用于下的一个值发生改变是，其内置的$digest将会遍历所有的$watch,如果有变化则更新，没变化则停止。当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大，官方注明的最大检测脏值为2000个数据。

Vue 则是采用数据劫持结合发布者-订阅者模式的方式，简单的说observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。

二、使用两者的心得

AngualrJs

优点：

1. 像极了后台模式，对于一个高后台的我来说更容易接受。

2. 过滤器、服务、组件的使用是前端更加简单和明了

3. 指令的使用可直接对页面操作

4. 子页面继承父页面的$scope，可以直接定义全局属性

缺点：

1. 当一个项目越来越大时，相对的数据承载能力就会越来越弱，其数据有时都会有延迟。

2. 对于新手不友好，主要表现在页面上下级$scope继承上面，如果事先不明确页面关系，很容易造成数据的展示不出来

3. JQuery不友好。

4. 没有像element-Ui那样的技术支持，大部分都要自己二次封装组件，开发难度大。

Vue

优点

1. 简单、容易上手、Api明确。

2. 大部分组件element-Ui都给封装好了，开发难度大大缩短。

3. 支持过滤器，可对公用的js进行封装。

4. 组件化，调用页面更加明确，不会造成数据混乱。

缺点

暂时没发现

三、总结

两个框架都有让我有所收获，Angularjs教会了我双向数据绑定的正确使用方法以及组件的如何开发应用，Vue让开发难度越来越低，越来越简单。如果让我重新选的话，我想直接选Vue

附：最近发现vue也可以动态绑定值，感兴趣的童鞋可以试一下，以下是代码。

data() {
  return {
    pages:{}
  }
}
methods:{
getPage:function(val){
_this.pages[val]=!this.pages[val]
}
}
<template>
<div @click="hide">
<li class="submenu"  >
  <a  v-on:click="getPage('project')" v-bind:class="{'project':'actives'}[page]">
    <i class="icon icon-list"></i>
  <span>第四级</span>
    <span v-bind:class="{true:'down-top '}[pages.project]">
      <i class="el-icon-arrow-down" ></i>
    </span>
</a>
  <transition name="fade">
  <ul v-if="pages['project']" ><!-- <ul v-if="pages[project]" > 循环-->
    <li  >
      <a>你好</a>
    </li>
     </ul>
  </transition>
</li>
 
</div>
</template>