Angular Vue

Vue 的一些语法和 Angular 的很相似（例如 v-if vs ng-if）

因为 Angular 是 Vue 早期开发的灵感来源。然而，Angular 中存在的许多问题，在 Vue 中已经得到解决

复杂性

在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多，因此你可以快速地掌握它的全部特性并投入开发

灵活性和模块化

Vue.js 是一个更加灵活开放的解决方案

它允许你以希望的方式组织应用程序，而不是在任何时候都必须遵循 Angular 1 制定的规则，这让 Vue 能适用于各种项目

这也就是为什么我们提供 Webpack template，让你可以用几分钟，去选择是否启用高级特性，比如热模块加载、linting、CSS 提取等等。

数据绑定

Angular 1 使用双向绑定，Vue 在不同组件间强制使用单向数据流。

这使应用中的数据流更加清晰易懂。

指令与组件

在 Vue 中指令和组件分得更清晰，指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑

在 Angular 中两者有不少相混的地方

性能

Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查

在 Angular 1 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。

有意思的是，Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题。

ReactJS VS VueJS

React 和 Vue 有许多相似之处，它们都有：

• 使用 Virtual DOM
• 提供了响应式（Reactive）和组件化（Composable）的视图组件
• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库

———————————————————————————————————————

脏查询

scope是一个指向应用model的object，也是表达式的执行上下文。

scope被放置在一个类似应用的DOM结构的层次结构中

angular中变量是双向绑定的 ，那么怎么知道一个变量是否是变化了呢？

1. 能通过固定的接口才能改变变量的值，比如说只能通过set()设置变量的值，set被调用的时候比较一下就知道了。这种方法的缺点是写法比较繁琐。
2. 脏检查，将原对象复制一份快照，在某个时间，比较现在对象与快照的值，如果不一样就表明发生了变化，这个策略要保留两份变量，而且要遍历对象，比较每个属性，这样会有一定的性能问题

angular使用的就是脏检查：

1不会脏检查所有的对象。当对象被绑定到html中后，这个对象才会添加为检查对象（watcher）

2不会脏检查所有的属性，同样当属性被绑定后，这个属性才会被列为检查的属性

在angular程序初始化时，会将绑定的对象的属性添加为监听对象（watcher），也就是说一个对象绑定了N个属性，就会添加N个watcher。

angular什么时候去脏检查呢？angular所系统的方法中都会触发比较事件，比如：controller初始化的时候，所有以ng-开头的事件执行后，都会出发脏检查

必要的时候我们要手动的触发脏检查：$apply仅仅只是进入angular context，然后通过$digest触发脏检查

$apply如果不给参数的话，会检查该$scope里的所有监听的属性，推荐给上参数

$apply实现脏检查实际上是通过$digest实现的，但是我们不能直接使用$digest来触发，原因是在$apply 与$digest之间还有一层很重要的$evel判断。如果中间有错误$evel将会把错误交送到$exceptionHandler进行处理

AngularJS原理

angular的运行就是在JavaScript context里面自己实现了一套环境，叫做angular环境（angular context），非angular那部分环境叫经典环境（classic context）

1. 在angular context里面也有一个队列，这个队列里面是watch列表，列表里面装的就是那些被监听的变量，包括那些进行数据绑定的变量（也就是和view进行绑定的那些）。
2. 如果用户改变了一个绑定了数据的view，这时候会触发一个angular函数$apply（也就是把这个event放入了event queue，然后轮循到这个的时候就触发了），然后把这个改变的值更新进绑定的那个变量，再开始调用一个digest的函数，digest就是用来轮循这个watch列表，看这个列表中的值是否变动，如果有变动就变动改写相应的DOM（不用angular就要自己写这部分代码，如果你有100个变量，你就要写100个这种改动，而且如果以后有啥变动，还得自己去重构）。
3. angular会至少轮训两遍watch列表，为啥？
   因为第一次轮训可能在改写DOM的时候可能会触发其他watch列表里面的变量变化，这时候还会再轮训，直到连续两次轮训的变量不再变化。所以如果你有两个变量的变化是相互影响的，就是A变了触发B变，B变了触发A变，这样会引起死循环，angular好像是在轮训5次（或者是10次，具体我忘了），如果还发现值没有稳定，就会报错（我曾经就干过，界面突然卡死，整个浏览器都卡死了，好不容易打开控制台看，全部是angular轮训报的错，angular的轮训直接卡死了整个浏览器）。
4. 另外还有一点，关于效率问题，有人提出来angular这样无差别轮训可能会影响性能，但是angular的创始人给了解释，人能在一个页面上最多就能看200个元素，在一个web页面上面不会有这么多的元素绑定数据，如果绑定这么多元素需要实时更新，那属于网页设计的问题（引自stackoverflow，具体网址找不到），所以并不用担心轮训的效率问题，如果真的有效率问题，说明网页本身可能存在问题（在豆瓣上看到一篇帖子，一个人用angular测了500个ngModel绑定的页面，很卡，所以对于不必要的绑定，最好不要绑）

———————————————————————————————————————

VueJS单向数据流

在Vue中，有许多方法和Angular相似，这主要是因为Angular是Vue早期开发的灵感来源。然而，Augular中存在许多问题，在Vue中已经得到解决。

我觉得它与其他框架的区别就是渐进式的想法，也就是“Progressive”——这个词在英文中定义是渐进，一步一步，不是说你必须一竿子把所有的东西都用上。

Vue的编译器在编译模板之后，会把这些模板编译成一个渲染函数。而函数被调用的时候就会渲染并且返回一个虚拟DOM的树。这个树非常轻量，它的职责就是描述当前界面所应处的状态。当我们有了这个虚拟的树之后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。

在这个过程中，Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中，侦测到的数据来源之后，之后就可以精确感知数据源的变动。到时候就可以根据需要重新进行渲染。当重新进行渲染之后，会生成一个新的树，将新树与旧树进行对比，就可以最终得出应施加到真实DOM上的改动。最后再通过patch函数施加改动。

这样做的主要原因是，在浏览器当中，JavaScript的运算在现代的引擎中非常快，但DOM本身是非常缓慢的东西。当

当你调用原生DOM API的时候，浏览器需要在JavaScript引擎的语境下去接触原生的DOM的实现，这个过程有相当的性能损耗。所以，本质的考量是，要把耗费时间的操作尽量放在纯粹的计算中去做，保证最后计算出来的需要实际接触真实DOM的操作是最少的。

Vue的依赖追踪通过ES5的 Object.defineProperty 方法实现。比如，我们给它一个原生对象，Vue会遍历这个数据对象的属性，然后进行属性转换。每一个属性会被转换为一个 getter 和一个 setter。同时每个组件会有一个对应的 watcher 对象，这个对象的职责就是在当前组件被渲染的时候，记录数据上面的哪些属性被用到了。

在渲染函数里面用到A.B的时候，这个就会触发对应的 getter。整个渲染流程具体要点如下：

• 当某个数据属性被用到时，触发 getter，这个属性就会被作为依赖被 watcher 记录下来。
• 整个函数被渲染完的时候，每一个被用到的数据属性都会被记录。
• 相应的数据变动时，例如给它一个新的值，就会触发 setter，通知数据对象对应数据有变化。
• 此时会通知对应的组件，其数据依赖有所改动，需要重新渲染。
• 对应的组件再次调动渲染函数，生成 Virtual DOM，实现 DOM 更新。

组件系统

在Vue中，父子组件之间的通信是通过 props 传递。从父向子单向传递；而如果子组件想要在父组件作用里面产生副作用，就需要去派发事件。这样就形成一个基本的父子通信模式，在涉及大规模状态管理的时候会有额外的方案，这个后面会提到。

Vue的组件引入构建工具之后有一个单文件组件概念，如下图所示，就是这个Vue文件。在同一个Vue文件里，可以同时写 template, script 和 style，三个东西放在一个里面。同时，Vue的单文件组件和 Web Components 有一个本质不同，它是基于构建工具实现。这样的好处是有了一个构建的机会，可以对这些单文件组件做更多的分析处，在每一个语言块里可以单独使用不同的处理器，这点后面还会讲到。

Actions 和 Mutations 比较难用一两句话说清楚，大致就是当应用状态进行改变的时候，需要通过 Mutations 去显式地触发，而 Actions 则是负责异步和其他副作用。由于 Mutations 会被记录下来，我们可以把这些记录发到工具里面去做分析，甚至进行回滚。

之前提到了单文件组件，如下图所示，支持任意的处理器，开箱即用的热重载，所以组件都支持热重载 (hot-reload)。当你做了修改，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。CSS也支持热重载。我们看下左下角，在使用这个预处理器的同时，我们只需要添加一个 scoped 特性，Vue 会通过对模板和CSS代码的解析改写，来模拟CSS的效果。同时单文件组件也支持懒加载，一个懒加载的组件和它的依赖会被打包成一个额外的包，只有被用到的时候才加载，这对首屏的加载速度也是很有帮助的。