React&Vue

MVVM&MVC

1. 关于这两者我们要知道的事情是，两者均不是MVVM框架，只是借鉴了其思想。MVVM和MVC之间的区别在于，MVC是使用控制器去更新模型，然后从模型中获取到数据渲染视图。当用户有输入时，会通过控制器去更新模型，并通知视图进行更新。从中我们可以看出，MVC中控制器的责任太重了，如果项目变得复杂，那么代码会变得很臃肿，不利于维护。
2. 在MVVM中引入了viewmodel的概念，其只关心数据和业务的处理，而不用在意view如何处理数据。这样view和model都独立出来，任何一方改变都不一定会改变另一方，对于可复用的逻辑可以放在一个viewModel中，让多个view复用该ViewModel。
3. 对于Vue框架来说，ViewModel就是组件的实例。View就是模板，Model倾向于对数据的处理。其中还加入了隐式的binder，它是Vue通过解析模板中的插值和指令对View和ViewModel的绑定。
4. 通过ViewModel将视图中的状态和用户的行为分离出一个抽象，才是MVVM的精髓。

Virtual DOM

1. 首先我们要明白一点，操作JS对象比操作DOM会快很多；
2. 所以我们可以使用JS对象来模拟出虚拟的DOM，但这只是第一步，真正体现差异的是如何判断两个JS对象的最小差异并且实现局部更新。
3. DOM是一个多叉树的结构，如果需要完整的对比两颗树的差异，那么时间复杂度是很大的。而React团队优化了算法，将时间复杂度降到了O(n)。
4. React和Vue中用到的key这个属性，就是为了给每个节点打标志的，用于判断是否为同一个节点，判断差异的算法因此受益（深度优先遍历）。
5. 虚拟DOM提高了性能是其一优势，但是，其最大的优势在于，将Virtual DOM作为一个兼容层，还可以对接非WEB系统，实现跨端开发。除此之外，通过虚拟DOM还可以渲染到其他平台，如实现SSR，同构渲染等，而且还可以实现组件的高度抽象化。

前端路由原理

1. 包括两种实现方式：Hash模式和History模式；
2. 其本质就是监听URL的变化，然后匹配路由规则，实现局部刷新页面。
3. Hash模式：www.test.com/#/就是该模式，服务器接收到的请求永远是#号前的地址。#后的哈希值发生变化时，可以通过hashchange事件监听到URL的变化。其优点是相对简单，而且兼容性好。
4. Histroy模式：由H5推出，主要使用history.pushState和history.replaceState改变URL，此模式同样不会引起页面的刷新，只会更新浏览器的浏览记录。如使用popState可以后退。
5. 两种方式的对比：
   • Hash只可以改变#号后面的内容，History可以通过API设置任何同源的URL
   • Hash只能更改哈希值，而History可以通过API添加任意类型的数据到历史记录中
   • Hash无需后端配置，而History模式在用户手动输入地址或刷新页面的时候会发起URL请求，且后端需配置匹配不到静态资源时的index.html

React&Vue之间的区别

• Vue支持双向绑定，相对来说更方便一点，但本质上两者是一样的。

• 改变数据状态的方式上，React需要使用setState来改变状态，而vue底层使用了依赖追踪，更新渲染更优。

• React的Jsx还是有一定的上手难度，还可以直接编写render函数就能在浏览器中运行。

• 生态