背景

如今的前端框架市场基本由 React、Angular 和 Vue.js 占据。三种框架都有自己独到的优势，也有各自的缺陷，本文主要对比一下Angular与Vue.js。

Vue.js

介绍

Vue.js 是前 Google 员工 Evan You 的开发的开源的 JavaScript 框架，并于2014年发布。许多开发人员都大力推荐 Vue，因为它很容易学习，Vue.js 能够帮助开发者构建出美观的 Web 界面。当和其它网络工具配合使用时，Vue.js 的优秀功能会得到大大加强。如今，已有许多开发人员开始使用 Vue.js 来取代 Angular 和 React.js 。

特点

Vue.js是一套用于构建用户界面的渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

• 容易使用：如果你一直在使用其它框架，那么你可以轻松使用 Vue，因为 Vue 的核心库专注于 View 层，你可以轻松地将其与第三方库进行整合并与现有项目一起使用。
• 轻便：由于 Vue 主要关注于 ViewModel 或双向数据绑定，因此 Vue 很轻便。Vue 也具有十分基础的文档。Vue 用作 View 层，意味着开发者可以将它用作页面中的亮点功能，比起全面的 SPA，Vue 提供了更好的选择。
• 学习曲线很低：熟悉 HTML 的开发人员会发现 Vue 的学习曲线很低，同时对于经验较少的开发人员和初学者来说，也能够快速地学习和理解 Vue。
• 双向绑定：Vue 提供了 v-model 指令（用于更新用户输入事件的数据），使得在表单输入和结构元素上实现双向绑定变得很容易。它可以选择正确的方式来更新输入类型相关的元素。
• 虚拟 DOM：由于 Vue 是基于 Snabbdom 的轻量级虚拟 DOM 实现，因此 Vue 的性能有些许的提升。这是虚拟 DOM 的主要新功能之一，开发者可以直接进行更新。当你需要在实际的 DOM 中进行更改时，只需执行一次这样的更新功能。
• 基于 HTML 模板的语法 ：Vue 允许开发者直接将渲染的 DOM 绑定到底层的Vue实例数据上。这是一个很有用的功能，因为它可以让开发者扩展基本的 HTML 元素，用来保存可复用的代码。

生命周期

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程。生命周期中的钩子就是在某个阶段给做某些处理的。下面来分别看看vue生命周期的八个阶段：

• 创建前（beforeCreate）：对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。
• 创建后（created）：对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。
• 载入前（beforeMount）：对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
• 载入后（mounted）：对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。
• 更新前（beforeUpdate）：对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。
• 更新后（updated）：对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。
• 销毁前（beforeDestroy）：对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。
• 销毁后（destroyed）：对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

Angular

介绍

Angular一般指 Angular2 及以上版本。2010年9月，Google 发布首次Angular，即angular1版本。2016年10月 Google 又发布了Angular2版本，但是2版本与1版本有非常大的区别，几乎是全部重写，且不向前兼容，更像是一个全新的框架。Angular 是一个功能齐全的框架，支持 Model-View-Controller 编程结构，非常适合构建动态的单页网络应用程序。如果需要构建大型复杂的应用程序，那么应该选择 Angular，因为 Angular 为客户端应用程序开发提供了一个完整而全面的解决方案。

特性

Model-View-ViewModel（MVVM）：为了构建客户端Web应用程序，Angular 将原始 MVC 软件设计模式背后的基本原理结合在一起。然而，Angular 没有实现传统意义上的 MVC，而是实现了 MVVM 即 Model-View-ViewModel 模式。

依赖注入：Angular 带有内置的依赖注入子系统功能，这使得应用程序易于开发和测试。依赖注入允许开发者通过请求来获得依赖关系，而不是搜索依赖关系。这对开发人员非常有帮助。

支持单元测试：在 Angular 中，可以单独对控制器和指令进行单元测试。Angular 允许开发人员进行端到端和单元测试运行器设置，这意味着也可以从用户角度进行测试。

跨浏览器兼容：Angular 的一个有趣功能是，框架中编写的应用程序在多个浏览器都能运行良好。Angular 可以自动处理每个浏览器所需的代码。

组件化：Angular 提供的指令（用于渲染指令的DOM模板） 可用于创建自定义的 HTML 标记。这些是 DOM 元素上的标记，因为开发者可以扩展指令词汇表并制作自己的指令，或将它们转换为可重用组件。

Deep Linking：由于 Angular 主要用于制作单页应用程序，因此必须利用 Deep Linking 功能才能在同一页面上加载子模板。Deep Linking 的目的是为了查看位置URL 并安排它映射到页面的当前状态。Deep Linking 功能通过查看页面状态并将用户带到特定内容，而不是从主页中遍历应用程序来设置 URL。Deep Linking 允许所有主要搜索引擎，可以轻松的搜索网络应用程序。

生命周期

生命周期钩子分类

• 指令与组件共有的钩子有ngOnChanges、ngOnInit、ngDoCheck、ngOnDestroy
• 组件特有的钩子ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked

生命周期钩子的作用及调用顺序

• ngOnChanges - 当数据绑定输入属性的值发生变化时调用
• ngOnInit - 在第一次 ngOnChanges 后调用
• ngDoCheck - 自定义的方法，用于检测和处理值的改变
• ngAfterContentInit - 在组件内容初始化之后调用
• ngAfterContentChecked - 组件每次检查内容时调用
• ngAfterViewInit - 组件相应的视图初始化之后调用
• ngAfterViewChecked - 组件每次检查视图时调用
• ngOnDestroy - 指令销毁前调用

总结

如果仅是需要构建简单的 Web 应用程序，那么建议选择 Vue。因为它学习成本较低，可快速上手。如果需要构建大型复杂的应用程序，那么建议选择 Angular，因为 Angular 为客户端应用程序开发提供了一个完整而全面的解决方案。

框架对比

• 体积和性能：相较于vue，angular显得比较臃肿，比如一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 之后 30kB) ，比angular-cli 生成的默认项目尺寸 (~65KB) 还是要小得多。在渲染性能上，这两个框架都很快，性能上几乎没有差别。
• 开发效率：都提供了各自的脚手架工具，帮助提高从开发到构建打包的整套过程，另外均可以基于组件化开发，编写可复用的组件，大大减少重复性的工作。但angular凭借 Typescript 本身比 JavaScript 更加工程化的优势，在都是团队开发的情况下，angular会更具优势。
• 灵活性：Vue 相比于 Angular 更加灵活，可以按照不同的需要去组织项目的应用代码。比如，甚至可以直接像引用jquery那样在HTML中引用vue，然后仅仅当成一个前端的模板引擎来用。
• 可维护性：可维护性包括两个层次，一是代码的可读性，二是可重构性。同样是因为对TS（能提供静态类型检查）的支持不够全面，使得vue在这两个层次都有些不足。vue作者本人也承认vue在TS 的支持上还有所不足，在3.0版本中将会有所改进。
• es6支持：es6是新一代的javascript标准，对JavaScript进行了大量的改进，使用es6开发已是基本需求。虽然有部分十分老旧的浏览器不支持es6，但是可以利用现代开发工具将es6编译成es5。在对es6的支持上两者都做得很好，（TS本身就是es6的超集）
• 学习曲线：针对前端而言，angular的学习曲线相对较大，vue学习起来更容易一些。不过对java和c的使用者而言，angular的静态检查、依赖注入的特性，以及面向对象的编程风格，使得angular都要更亲切一些。
• 使用热度：在使用热度上，vue具有更大优势，主要原因是更受数量庞大的中国开发者欢迎。较低的上手难度，易懂的开发文档，以及国人主导开发的光环，都使得vue在国内更为流行。但最近6个月似乎情况有所变化：