现代前端框架具备的特征分析及Vue、React对比

框架或者库最早从jquery开始，我把jquery称之为传统的库。而vue、react、ng为现代化的库。

jquery是2006年发布1.0版本，2013 年 5 月react开源，vue是2014年对外发版。

jquery在使用过程中多半充当的是库的作用，相对现在前端框架有以下几个共同点：

1，也可以js驱动

2，可以模板化

本文是说的特征是框架单独使用而不与webpack等工程化工具结合的时候。而现在前端框架具备的特点：

1，一般来说是js驱动

也就是需要挂载到dom节点上，才能发挥作用。而不是传统编程的直出。

2，组件化

组件化提高了复用性，提高了开发效率。

3，单页面应用

组件化加上路由，单页面应用是一个必然的结果。

4，单向数据流

单向数据流是一种数据管理方式，view只能派发action修改store，而不能直接修改。

5，虚拟DOM

虚拟dom降低了操作原生dom节点的代价。

6，模板化

7，hooks

提高组件之间状态复用

8，mvvm结构

react和vue对比

1，都采用了js驱动

2，都可以实现组件化

3，也具备单页面应用特点

vue的store和router是作为参数传递给构造函数的，而react的store和router是作为组件包裹在dom外面的

4，都实现了单向数据流

vue是修改store的数据，而react返回一个新的state数据。

这种机制背后当大数量时，react因为返回一个新数据，需要深拷贝，就会导致性能降低。所以react强调数据不可变性。所以react有了Immutable。Immutable确实对react性能做了优化，因此来说react适合大型项目，这里指的是数据量大且使用了store。

5，虚拟dom

vue触发虚拟dom采用的是双向数据绑定拦截触发；而react是局部更新，reactjs需要手动设置来节省更新性能。这点也是很重要的不同点。也在强调数据的不可变性。

6，模板化

vue使用html、css和js作为模板；而react保留了JavaScript的全编程能力，react对typeScript的支持效果更好。react使用jsx作为模板。

vue的模板需要在components中转，但是react不需要。

7，hooks

vue3也开发了钩子

8，mvvm结构

9，react严格意义上讲只针对MVC中的view层，Vue则是MVVM模式

10，在 Vue 中我们组合不同功能的方式是通过 mixin，而在React中我们通过 HOC (高阶组件）。其实vue中也可以使用HOC。

11，另外 Vuex 既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

react强调数据的不变性，vue强调数据的可变性。这其实是框架设计底层决定的。这句话的意思是想要利用好react，规划的时候要做到数据的不可变性。这样才能更好的利用react。

vue的数据的可变性，也不是所有数据都变化才好，是说vue对数据可变性支持更好，不用考虑太多的数据不可变化的问题。

在实际使用中想要利用好react需要更好的数据不变性规划。这样也变相的提升了实际的性能。

从某个角度讲，不管是vue还是react都是一种约定流程的开发方式。