前端框架火了已经有些年头了。像React、Vue、Angular等，都是视图层数据驱动框架。
当然现在最火的两大框架就是React和Vue。而React又出了v16.8版本的Hooks新特性，Vue出了3.x版本。
争论React和Vue哪个更好没有意义。每个框架各有优势，但他们没有本质的区别。
- Vue更注重视图的自动同步（双向数据绑定），且封装性更好（比如框架封装了完善的事件机制、绑定规范、指令操作等）。使用习惯更偏向前端人员。
- React更注重组件及其状态的管理（单向数据绑定），更加侧重于逻辑（JS优先）。习惯更偏向于程序人员（比如原先是做PHP的更易上手）。React更加透明，没有封装过多的隐含逻辑（比如指令、事件、数据监听等），便于程序员了解程序的执行过程，但也较Vue使用更复杂。
抛开框架具体本身，宏观上来谈近年来前端框架的发展，我认为前端的发展思路永远是：在保证性能的基础上，提升程序员的开发效率为先。
如果一个框架本身的学习成本和使用成本过高，给开发过程带来很大的心智负担，让程序员对于语言或框架本身使用的关注度超过了对业务逻辑及数据的关注度，那么这个框架一定不是一个好的框架。
简便易用
像React、Vue等，在使用方面有一个最大的特点就是：简便易用！（相对于不使用框架）
以前有人问我说，原来是用原生的，用JQuery的，现在学React，学Vue难不难，复不复杂。
其实新的框架要比老的框架要更加简便易用，这个其实是一个很容易理解的问题。他如果比原来的那玩意还难用，那我们为啥要用他呢？
使用这些框架后，我们可以把精力都放到业务逻辑和数据关系上，对于程序员来说，精力是很有限的。如果让你过多的去处理那些coding层面的细枝末节的东西，那么大的结构，整体的流程方面就会关注不足，很容易拉低效率，延误工时。
视图自动更新
框架最大的优势实际上就是帮我们维护我们的视图层。视图说白了就是页面上的元素。
如果你数据发生了变化，框架会自动将视图进行更新，那么我们的思路就得以解放，精力就不用过多的放到视图上，从而有更多的时间去关注业务逻辑。而业务逻辑、数据等才是决定一个程序根本表现的东西。
虚拟DOM
这个技术实际上老生常谈了。在这里我也不去谈那些没用的什么原理上的东西。无非就是把DOM元素用JS对象的形式进行处理。在视图更新时，通过一系列的diff对比算法对其更新，只更新对应的元素，不会重绘整个页面。
1. 简化操作
虚拟DOM的方式可以帮助我们进行简化操作，使得我们摆脱元素的创建、选取和操作的噩梦。比如React的jsx语法和Vue的模板语法，最终会创建虚拟DOM节点。
在不使用框架前，我们的HTML和JS是分开的。而在虚拟DOM使得我们的HTML标签和JS合二为一（JS优先）。使得我们无需去获取元素。如有需要，可以直接操作标签本身。所见即所得。
2. 提升性能
DOM操作是JS操作中很慢且性能很差的操作。实测一次的DOM操作足够进行成百上千次的其他JS运算。所以在DOM操作非常频繁的，比如带有大的动画特效的页面会非常卡，很吃性能。
而使用视图框架，他不会直接操作真实DOM，而是操作一套虚拟的DOM。以最小化更新真实DOM，从而减小不必要的性能损耗。
基于组件的开发
在开发过程中，实际上存在许多需要多次复用的单元。框架的发展，越来越倾向于使用组件化的开发去把大的视图单元和逻辑分离开来，变成一个个的小功能。
在组件化的开发模式下，只要把一个个的小东西做好了，就可以用组件拼凑出一个大型的应用。
1. 便于大型应用开发
一个大型应用往往比较复杂，往往一眼看去无法直接入手。
大型应用工作任务所需人员众多，如果像原来一样，一大块一个整体，是很难去细化任务的。
如果使用组件，便于页面开发的细化，分工也会更加方便和明确。便于降低整个程序的复杂度。
一个组件可能很简单，但是多个组件组合在一起，那么功能就可能非常强大，威力无穷。
2. 便于功能的复用
一个应用其实是有很多重复的内容和单元的。如果按照原始的开发流程，除了一些业务逻辑，视图结构是不方便复用的。
而组件化的开发就解决了这一难题。
3. 便于使用第三方的组件和开发自己的组件库
你不仅可以组装自己开发的组件，而且还能够使用大量第三方开源的组件库。这也是使用框架的优势之一。
而且你也可以开发自己的组件库，便于后期相关项目视图的统一性。比如我们公司是做法律相关的应用，那么我们可以开发相应的组件库，使得后期所有应用得以统一标准。
甚至你可以把自己的组件库开源，为社区做点贡献也是很不错的。
JS优先的设计原则
理论上来说，Vue和React等这些视图层数据驱动框架有一个设计原则就是JS优先。这是与一些古典的模板引擎相对比而言的。
我们知道，视图框架涵盖了模板引擎的功能，但这个功能与模板引擎还有所不同。
模板引擎
模板为主，JS为辅。因为在模板引擎（如EJS、Handlebars等）诞生的年代，JS相对还比较简单，只是浏览器的一个小的脚本语言。像做个小东西如轮播图、请求个数据、做个简单的表单校验。
所以模板为主，优先保障的是静态HTML的结构。js是附加的，是额外的，是添头。
模板引擎更适合于传统开发，偏向于一些比较简单的、静态的、逻辑很少的页面，不利于扩展。比如做个企业站首页，没什么交互功能，只用于展示。
视图框架
JS为主，模板为辅。模板作为JS的一种数据类型。这点在React上尤为明显。
逻辑优先，模板是js逻辑的一部分，可以任意扩展。因为js的灵活程度比HTML强太多了。
适用于现代开发，尤其是大型、复杂的逻辑。
丰富的应用场景
视图框架有非常丰富的应用场景，不仅仅用于开发Web。
可用于移动端开发。比如 React Native 可以开发移动原生应用，比普通混合式应用性能更高。
也可用于开发服务端渲染（SSR静态web应用）的应用。比如React衍生框架Next、Vue衍生框架Nuxt。前后台渲染可以使用同一框架相互结合。
甚至可以用于开发跨平台桌面应用和多端小程序，比如Taro、Electron、Tauri。
本文固定连接：https://code.zuifengyun.com/2022/08/2595.html，转载须征得作者授权。
