框架概述前端框架有很多，学习的时候会一头雾水。把握Vue/React最主流的内容，深入底层，揣摩框架作者的设计思路，拓宽前端培训的视野，不要局限于框架。如果你认为工作中用的是Vue，你认为React学了没用。有时候我们学习竞品的框架，是为了更好的了解自己使用的框架，不想废话。既然Vue本身就是一个中庸的框架，再找出Angular和Svelte这两个在设计思路上比较极端的，我们先来看看视图层最流行的四大框架，看看下载量对比.从多个维度对比前端框架，我们可以清楚地看到各个框架的现状。我们学习各个框架的设计范式，尝试突破局限。Stringtemplates如果想看当前视图层的现状，需要简单的看一下之前框架的发展路线。JQuery时代的渲染层大多是基于字符串模板。典型的框架有Underscore和baiduTemplate。总的原则是将模板解析成一个函数。缺点也很明显，就是每次数据变化，模板内部都要重新渲染。那么刚才我说的这四个框架占据了现在的Web领域，核心目标都是一致的，为了做出性能更好的web应用，为此，大神八仙渡海，各显神通。有很多宏观维度。原生VS抽象。本机是JavaScript本身，React的抽象稍微复杂一点，需要了解Component、State、Hooks、JSX等概念才能上手，更抽象的是Angular，需要了解十几个概念才能上手，学习曲线是很陡，Vue在ReactBetweenAngular，了解数据、方法、单文件构成后，就可以上手了。运行时VS预编译另一个维度是运行时和预编译。所谓运行时，就是在浏览器内存中执行的任务。React的Runtime更重。数据发生变化后，不直接操作dom，而是生成新的虚拟dom，通过diff算法获取最小操作行为，这些都是在运行时完成的。除了这个维度，一个极端的是重编译框架，在上线前用工程化的方式进行预处理。典型的代表是Svelte，它基本上是一个CompilerFramework，它编写模板和数据。处理后基本解析成除了原生的dom操作，Svelte的性能也是最接近原生js的。Vue仍然处于一个相对温和的位置。它在运行时和预编译之间做了很好的权衡，保留了虚拟dom，通过响应式控制虚拟dom的颗粒，在预编译中做了足够的性能优化，实现了按需更新。后面我们会讲到Vue和React在框架设计上的维度，然后我们再去了解一下Vue和React。可以更改一些更详细的尺寸。数据VS不可变数据Vue1就是玩响应式数据。通过拦截操作，在收集依赖的同时修改一个数据，然后在数据被修改时通知updatedom。体验很舒服。我们修改了一个JavaScript对象，修改了视图层。这就是Vue的黑魔法。React的虚拟Dom的创建日期是通过计算新旧数据的差异来确定这些dom的操作。因此，每次修改数据，都需要生成一个新的。数据，不能说好坏之分，但路线不同。这大概就是Vue和React修改数据的代码对比。随着应用越来越复杂，在React15架构中，domdiff时间超过16.6ms，可能会导致页面卡顿。Vue1中的listener过多也会导致性能雪崩。为了解决这个问题，Vue选择了一个trade-off，以组件为粒度，在组件级别使用响应式通知，在组件内部进行domdiff计算，这样不仅控制了应用中Watcher的数量，而且还控制domdiff的大小当我看到这个实现时，我不仅惊呼，真是太棒了vm._vnode,false)}newWatcher(vm,updateComponent,noop,null,true)vm._isMounted=truecallHook(vm,'mounted')})预编译和运行时的概念刚刚普及在Vue中，在React中的体现主要体现在JSX和模板的区别上。React是一个完整的JSX，JavaScript可以用JSX写，所以特性足够动态，对应的就是Vue的模板。模板的特点是语法受限，v-ifv-for等指定语法等可执行语法技术不够动态，但由于语法方便，可以在预编译层面进行更多的预测，使得Vue有更好的性能顺便放两张ppt大图。通过优化预编译阶段的静态标记，Vue3可以按需更新纯静态元素标记，直接绕过
hello
等diff阶段静态属性也会被标记，判断事件函数传递此属性将在diff期间添加回缓存。v-if和v-for内部通过block+数组维护动态元素时间片。Vue3采用staticmarkup+Responsive+virtualdom的方式控制diff的粒度，这样diff时间不会超过16ms，但是React的top-downdiff流程，项目大后，一旦diff时间超过16.6ms，就会导致卡顿，React交出的解决方案是时间分片。简单的说就是将diff的任务按照元素进行拆解，利用浏览器的空闲时间来计算diff。React将各种优化策略留给了开发者，Vue为开发者做了很多优化工作，设计思路的演化优于集成。这个idea的设计模式有个结论，也是现在的hooks和compposition之所以如此受欢迎，是因为写代码会更容易维护。这个数字可以很好地反映可维护性的变化。刚才我们说了Svelte可以直接编译成JavaScript，性能接近原生。这么优秀的Thinking，为什么Vue要保留virtualdom的额外runtimeloss呢？我觉得比较重要的一个答案是，跨端虚拟dom除了用来计算最小diff之外，还有一个重要的作用就是可以使用javascript对象来描述一个dom，就是一个普通的对象，就是在跨端领域意义重大。视图层返回一个对象，渲染层可以调用不同平台的渲染API进行绘制。可以复习以上，请仔细研究框架，不仅仅是为了面试，而是框架中优秀的思想和设计模式，汇集了顶级开发团队的最佳思想，多学习别人优秀的代码，开阔眼界，关起门来，你会发现很多自己的顿悟只是别人的基础