2021年的前端框架又有了新的发展，本期【原创内容，转载请注明出处】【未经授权禁止转载】将总结以往的前端框架，梳理前端框架脉络，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。一个一个的梳理前端框架与其他框架的不同之【原创不易，请尊重版权】原创内容，盗版必究。处。最后，实现一个我们自己的框架。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。原创内容，盗版必究。在线收听本文作者：唐霜，转载请注明出处。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net喜马拉雅：【未经授权禁止转载】点击播放【转载请注明来源】
原创内容，盗版必究。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【未经授权禁止转载】网易云音乐：原创内容，盗版必究。点击播放本文版权归作者所有，未经授权不得转载。
【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net你还可以在苹果自带的 Podcast 应本文版权归作者所有，未经授权不得转载。【转载请注明来源】用、小宇宙APP、QQ音乐中搜“Robu原创内容，盗版必究。【未经授权禁止转载】st”找到我们的节目收听。
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】捐赠支持原创内容，盗版必究。
【版权所有，侵权必究】未经授权，禁止复制转载。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net求打赏🙇如果你觉得 Ro本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。bust 这样一档技术类的谈话节目还不错【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】，希望我继续做下去，不妨打赏支持。
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net
内容文案本文作者：唐霜，转载请注明出处。
【版权所有，侵权必究】【作者：唐霜】【原创不易，请尊重版权】【版权所有，侵权必究】本期将总结以往的前端框架，梳理前端框架脉【版权所有，侵权必究】【版权所有，侵权必究】络，一个一个的梳理前端框架与其他框架的不未经授权，禁止复制转载。【作者：唐霜】同之处。最后，实现一个我们自己的框架。
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】原创内容，盗版必究。首先，我们来看下著作权归作者所有，禁止商业用途转载。jquery【未经授权禁止转载】，它是一个基于DOM操作的封装库，它包含未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net了DOM、BOM的操作，以及在这些操作中【本文首发于唐霜的博客】【未经授权禁止转载】需要的一些方法。它的与众不同在于接口的简【版权所有】唐霜 www.tangshuang.net【本文受版权保护】单和对DOM的管理的简洁性。通过jque未经授权，禁止复制转载。未经授权，禁止复制转载。ry来操作DOM，完成UI更新，这是早期【原创不易，请尊重版权】【原创内容，转载请注明出处】的js框架backbone的基础。bac著作权归作者所有，禁止商业用途转载。【转载请注明来源】kbone有View和Model，Mod【转载请注明来源】【原创内容，转载请注明出处】el管理数据，View更新UI，两者绑定【原创内容，转载请注明出处】【版权所有，侵权必究】之后，Model上的数据更新时，会触发V【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】iew里面的更新操作，通过jquery操【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。作DOM的方式完成UI更新。
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net但是，在backbone中，我们需要根据【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。数据，主动的拼接html字符串来插入新的【作者：唐霜】【转载请注明来源】DOM。这种原始方式在遇到handbar未经授权，禁止复制转载。【原创内容，转载请注明出处】s这个模板引擎的时候发生了变化，hand著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。bars是我接触最早的类似大家熟悉的vu著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.nete模板使用插值的模板工具，基于handb【未经授权禁止转载】【本文受版权保护】ars，你只需要传入其中需要的数据，就可【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。以快速生成html字符串，这样就可以避免【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。backbone中手动拼接出html字符转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】串的繁杂。emberjs正是基于hand【本文受版权保护】【版权所有，侵权必究】bars的大型重量级框架。我在使用emb未经授权，禁止复制转载。转载请注明出处：www.tangshuang.neterjs时，就已经用上了es6原创内容，盗版必究。的语法未经授权，禁止复制转载。。本文作者：唐霜，转载请注明出处。
原创内容，盗版必究。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】转载请注明出处：www.tangshuang.net模板【原创不易，请尊重版权】+本文作者：唐霜，转载请注明出处。数据生成【未经授权禁止转载】DOM【关注微信公众号：wwwtangshuangnet】，仍然需要开发者手动处理这些生成的DOM【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】，有没有一种方式，我们根本不需要关系基于著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】模板的UI，我们只需要关心数据就可以了？【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】angularjs横空出世，它基于脏检查【本文受版权保护】原创内容，盗版必究。的机制，可以在你修改$scope【版权所有】唐霜 www.tangshuang.net上的属性后著作权归作者所有，禁止商业用途转载。，基于本文版权归作者所有，未经授权不得转载。$digest本文版权归作者所有，未经授权不得转载。自动去计算当前的界面是否需要更新【作者：唐霜】。【访问 www.tangshuang.net 获取更多精彩内容】
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】原创内容，盗版必究。脏检查机制是第一个全自动的界面更新机制。【作者：唐霜】原创内容，盗版必究。它的机制大概是这样
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net- 在controller第一次实例化的时候著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，注册watcher 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- 建立著作权归作者所有，禁止商业用途转载。$scope本文版权归作者所有，未经授权不得转载。和视图的绑定本文作者：唐霜，转载请注明出处。 著作权归作者所有，禁止商业用途转载。【作者：唐霜】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net
- 渲染视图未经授权，禁止复制转载。 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。【本文受版权保护】
- 当用户点击按钮或内部自动发起网络请求时【版权所有】唐霜 www.tangshuang.net，实际上是调用了【未经授权禁止转载】ng-click绑定的回调函数或$htt原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。p服务，而angular对这些自己系统内建的机【未经授权禁止转载】【未经授权禁止转载】制进行处理，你可以简单理解为，在这些函数著作权归作者所有，禁止商业用途转载。【转载请注明来源】执行后，被跟着调用了一个叫$digest的函数【原创内容，转载请注明出处】 【未经授权禁止转载】未经授权，禁止复制转载。【作者：唐霜】
- $digest函数实际上就是触发angu【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】lar的脏检查开始 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。
- 脏检查机制会去检查模板中会使用到的$sc原创内容，盗版必究。【转载请注明来源】ope上定义的属性是否和之前的属性一致 【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net
- 前面我们提到用户点击【关注微信公众号：wwwtangshuangnet】，点击的回调中，我们经常会修改【本文受版权保护】$scope属性本文版权归作者所有，未经授权不得转载。，因此，在检查它的值是否一致时，如果不一【原创内容，转载请注明出处】【未经授权禁止转载】致，就记录下来，之后用来更新视图 【作者：唐霜】【原创不易，请尊重版权】原创内容，盗版必究。
- 另外，前面我们提到注册了一些watche【本文受版权保护】【作者：唐霜】r，这些watcher指定了要检查哪些属【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】性，也就是在脏检查开始后，这些watcher【作者：唐霜】函数就会被执行【关注微信公众号：wwwtangshuangnet】，至于执行时是否要修改另外的属性，由开发本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】者自己决定 【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】
- 你会发现，一次检查过程中，有可能watc【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.nether内还会再修改被依赖的属性，这导致你【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】必须再做一轮检查，看看是不是有属性被修改本文作者：唐霜，转载请注明出处。【转载请注明来源】了 本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】
- 那怎么决定是不是还要检查呢？angula【原创内容，转载请注明出处】【作者：唐霜】r在每次检查的时候，就会用一个dirty本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。变量记录，只要这次检查发现有属性和上一次【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net的值不一样，就dirty=true【版权所有，侵权必究】，这样，就必须在检查一次【版权所有】唐霜 www.tangshuang.net 【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
- 如此循环，直到dirty为false为止 【版权所有，侵权必究】【版权所有，侵权必究】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
- 但是，如果你在watcher中动态修改属本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net性值，有可能造成循环永远都没有办法跳出，【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】导致死循环，所以angular规定了一个【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net循环的上限，达到这个上限之后，即使dir【作者：唐霜】【本文首发于唐霜的博客】ty为true也跳出 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文受版权保护】【本文受版权保护】
通过脏检查机制，angularjs在自己【本文受版权保护】【原创内容，转载请注明出处】的体系内真正做到开发者根本不需要关心更新【版权所有，侵权必究】未经授权，禁止复制转载。视图，怎么去更新视图的问题，而且最好不要【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。自己去更新DOM。当然，开发者还是有机会【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】用DOM的那一套修改视图。
【作者：唐霜】【转载请注明来源】本文版权归作者所有，未经授权不得转载。脏检查机制费时费力，它不仅要做循环检查，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。而且还要检查那些根本没有变化的值。有没有【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。一种可能，只检查发生变化的值，或者更进一原创内容，盗版必究。【原创不易，请尊重版权】步，我这个值变化的时候，才去检查。这就是【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。vue2【访问 www.tangshuang.net 获取更多精彩内容】做的事情【版权所有】唐霜 www.tangshuang.net，它通过defineProperty直接【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。监听Vue实例的属性变化，也就是说，只有未经授权，禁止复制转载。【原创内容，转载请注明出处】属性变化的时候，才会触发内部的更新机制。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。这就可以大大节省视图真正更新之前所做的是著作权归作者所有，禁止商业用途转载。【转载请注明来源】否要更新的判断过程。
未经授权，禁止复制转载。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】Vue【作者：唐霜】2【作者：唐霜】借鉴参考了【版权所有，侵权必究】angular本文作者：唐霜，转载请注明出处。的设计【访问 www.tangshuang.net 获取更多精彩内容】，同时也有自己的创新。但是，vue的模板本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。仍然是一种传统的表达形式，开发者必须在脑【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】海中严格区分UI的部分和js代码控制的部【作者：唐霜】【版权所有】唐霜 www.tangshuang.net分，视图层本身还是割裂的，就是你需要通过【本文首发于唐霜的博客】【版权所有，侵权必究】两个甚至三个地方去跳跃式的组建出一个视图本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】出来。vue带来了sfc转载请注明出处：www.tangshuang.net很好的提供了一种把这三个东西汇聚在一起的【未经授权禁止转载】【转载请注明来源】方式，这是一种极好的设计。【原创内容，转载请注明出处】
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【未经授权禁止转载】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。但是，facebook的工程师不这么想，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。它们认为，视图和js代码实现的逻辑，应该本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net是一个整体，我们在写js的同时，实际上也【转载请注明来源】【本文受版权保护】应该在写视图。于是他们发布了react，【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】里面用到了jsx技术，把基于js实现的逻【版权所有，侵权必究】【转载请注明来源】辑和视图本身统一在一起。对于react而【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。言，视图不再是以前的html模板思维，而【作者：唐霜】【原创不易，请尊重版权】是一个对象。这对基于模板的框架而言，是一【本文受版权保护】未经授权，禁止复制转载。种降维打击。你可以这样思考，我们三维空间未经授权，禁止复制转载。【未经授权禁止转载】的人对时间这个事物没有把控力，只能任由时【本文受版权保护】【原创内容，转载请注明出处】间流逝，时间是组成我们生命的一部分，这是【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】我们传统的思维。现在来了一个五维空间的人转载请注明出处：www.tangshuang.net【本文受版权保护】，在他的世界里，时间是可以把控的事务，他本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net在穿越时间时，就像在爬一座山一样，是有形【转载请注明来源】本文版权归作者所有，未经授权不得转载。的。这个时候，三维空间的人和五维空间的人【版权所有，侵权必究】【本文首发于唐霜的博客】打架，他就可以降维打击。对于facebo原创内容，盗版必究。转载请注明出处：www.tangshuang.netok的工程师而言，视图就是刚才例子里面的【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。时间，在以前的观念里，视图一定是基于ht转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ml字符串出来的东西，而到了react里转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】面，视图称为js对象，这个对象放在一个j【未经授权禁止转载】本文作者：唐霜，转载请注明出处。s的代码逻辑中，开发者自己自由组合。这种【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。降维打击对整个前端的冲击不小。
【转载请注明来源】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。react怎么做到把视图当作一个对象？它【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】使用了一种叫virtual dom的技术转载请注明出处：www.tangshuang.net，在react中，视图对象是virtua原创内容，盗版必究。未经授权，禁止复制转载。l dom著作权归作者所有，禁止商业用途转载。，与真实的DOM之间还存在一个转化的过程【转载请注明来源】转载请注明出处：www.tangshuang.net。因此，对于react而言，视图仅仅是一原创内容，盗版必究。未经授权，禁止复制转载。个描述，至于这个描述怎么映射到真实DOM【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】，开发者不用关心，总而言之，只要你vir【版权所有，侵权必究】【版权所有，侵权必究】tual dom的结果确定【原创内容，转载请注明出处】，就一定会得到与之对应的DOM界面。当然【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。，这种映射就要求开发者自己不能主动去操作【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。DOM，必须由react来更新DOM。
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。基于这个理念，既然virtual未经授权，禁止复制转载。 dom可以与真实DOM有1:1的映射关【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】系，那么是否存在另外一种可能，virtua本文版权归作者所有，未经授权不得转载。【作者：唐霜】l dom这个庞大的对象【本文首发于唐霜的博客】，与另外一个规模很小的数据也存在【访问 www.tangshuang.net 获取更多精彩内容】1:1的映射关系【未经授权禁止转载】。angular、vue都给出了答案，是本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】有这样的映射关系的，比如你的virtua【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。l dom是一个1M的大对象转载请注明出处：www.tangshuang.net，但是，里面用到的数据只有a这个变量，那未经授权，禁止复制转载。【作者：唐霜】么对于react开发者而言，根本不需要关【作者：唐霜】未经授权，禁止复制转载。心virtual dom是多么的复杂本文版权归作者所有，未经授权不得转载。，他只要关心我这个a在什么时候要变成什么【版权所有，侵权必究】原创内容，盗版必究。值，因为a为一个值的时候，它和virtu【转载请注明来源】著作权归作者所有，禁止商业用途转载。al dom之间有1:1的映射关系【转载请注明来源】，最终和DOM就有原创内容，盗版必究。1:1的映射关系转载请注明出处：www.tangshuang.net。中间这些映射全部交给react去处理，著作权归作者所有，禁止商业用途转载。【转载请注明来源】最后，react开发就变成了管理这个a的【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net整体过程。
【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【作者：唐霜】react怎么处理的呢？它在组件内建立了【作者：唐霜】【作者：唐霜】一套状态机制，通过setState来更新未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net状态，只要你调用了setState，就代【原创内容，转载请注明出处】【转载请注明来源】表你想要改变界面，它就会基于新的stat原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。e，直接创建对应的virtual dom【转载请注明来源】，再基于diff等一些算法，决定更新那些【版权所有，侵权必究】【作者：唐霜】DOM。而且，react直接忽视angu【原创内容，转载请注明出处】未经授权，禁止复制转载。lar里面辛辛苦苦搞的检查过程，在rea【本文首发于唐霜的博客】【本文首发于唐霜的博客】ct里面，根本不检查，只要你调用setS【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。tate，就代表你修改了状态，就代表你要【作者：唐霜】未经授权，禁止复制转载。更新virtual dom著作权归作者所有，禁止商业用途转载。，当然，更新virtual原创内容，盗版必究。 dom之后是否更新真实DOM则不一定【版权所有】唐霜 www.tangshuang.net。未经授权，禁止复制转载。
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【转载请注明来源】而这一机制有的时候特别蛋疼，明明状态值没【本文受版权保护】本文版权归作者所有，未经授权不得转载。有任何变化，但是由于触发了更新机制，原本【原创不易，请尊重版权】【作者：唐霜】根本不需要执行的函数还是会被执行。而且，【转载请注明来源】【原创内容，转载请注明出处】如果当前组件内用到了其他组件，那么这些被转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。用到的组件在接收到新的props时，也会【本文受版权保护】未经授权，禁止复制转载。因为数据映射界面的原理，导致组件渲染函数【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】再次执行，而如果这些组件内部又用到其他组【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net件……如此套娃下去，很有可能你的状态根本未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net没变的情况下，所有的组件渲染函数都重新执【未经授权禁止转载】【原创内容，转载请注明出处】行了一遍，浪费太大了。所以，利用shou【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ldUpdate进行优化非常有必要。
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。有没有一种可能，你不要傻傻的去创建vir【版权所有】唐霜 www.tangshuang.net【本文受版权保护】tual dom【转载请注明来源】，能不能做到直捣黄龙的定点更新？从目前来本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。看，react是没有机会了。但是vue3解决了这个问题【未经授权禁止转载】，和vue【原创内容，转载请注明出处】2刚发布时已经完全不同了本文版权归作者所有，未经授权不得转载。，vue【原创不易，请尊重版权】3来到了一个新的时代【原创不易，请尊重版权】。此时，编译技术已经在前端有了非常大的灵【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。活度，vue3拥抱新的时代特征【版权所有，侵权必究】，在编译时做了很多事情。虽然vue【版权所有】唐霜 www.tangshuang.net也是基于virtual dom的【版权所有】唐霜 www.tangshuang.net，但是和react不同，它的virtua转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。l dom基于对模板的解析来完成本文作者：唐霜，转载请注明出处。。这个过程由vue提供的工程工具，在项目【转载请注明来源】原创内容，盗版必究。构建时进行。Vue3中本文作者：唐霜，转载请注明出处。，构建工具分析模板中节点的特征，如果发现【作者：唐霜】【作者：唐霜】这个节点根本没有依赖任何数据，那它就是一原创内容，盗版必究。【原创内容，转载请注明出处】个静态节点，永远都不会变化，对于这类节点未经授权，禁止复制转载。【本文受版权保护】，就没有必要在更新阶段再去处理。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net如果是这样，那么基于编译时，我们是不是还【转载请注明来源】【版权所有，侵权必究】能做更多事？当然，例如跨平台开发框架ta本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ro，阿里的rax系列，uniapp等工著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】具，都是基于编译的好手，但它们始终还是更【转载请注明来源】【未经授权禁止转载】高层面的应用框架，在底层UI框架中，sv【作者：唐霜】【本文受版权保护】elte闪亮登场。svelte是完全基于本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】编译时的ui框架，你必须使用它的一整套编【作者：唐霜】本文版权归作者所有，未经授权不得转载。译工具，同时按照它提供的语法进行编写。而转载请注明出处：www.tangshuang.net【作者：唐霜】正是有了编译的强大加持，svelte的开【作者：唐霜】【本文首发于唐霜的博客】发给人哇塞的感觉。你在写svelte的组【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。件时有点像写原生的html，但是又有点不转载请注明出处：www.tangshuang.net【转载请注明来源】同，因为你可以在它的视图模板中使用像类似【版权所有，侵权必究】【本文受版权保护】vue一样的模板语法来使用你在scrip【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】t标签中声明的js变量，于此同时，你还可著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】以在事件回调函数中直接修改这些js变量，【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。更令人神奇的是，你的这个修改竟然能引起界【版权所有，侵权必究】【作者：唐霜】面的更新。
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【未经授权禁止转载】这种接近原生但又对原生web开发超级增强本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。的开发体验感瞬间触了很多前端开发者的G点【原创内容，转载请注明出处】【原创不易，请尊重版权】。svelte的热度也瞬间爆发。svelte在编译阶段去识别那些变量被依【本文受版权保护】【转载请注明来源】赖了，哪些地方注册了一个回调函数，通过这些识【原创内容，转载请注明出处】未经授权，禁止复制转载。别，把原来像html的组件代码，编译出类【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】似vue或react一样的响应式代码，最【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】终出来的代码，和原始的代码，根本没法一一著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】对上。也正是因为编译，它直接丢弃了vir【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】tual dom那一套【原创不易，请尊重版权】，不需要在状态变化的时候，重新执行渲染函【作者：唐霜】本文作者：唐霜，转载请注明出处。数，得到一个virtual dom【访问 www.tangshuang.net 获取更多精彩内容】。没了virtual原创内容，盗版必究。 dom【原创不易，请尊重版权】，它在编译后，直接修改DOM来更新界面。原创内容，盗版必究。转载请注明出处：www.tangshuang.net理论上，比基于virtual dom的框架更新起来更快更准更狠转载请注明出处：www.tangshuang.net。【版权所有，侵权必究】
【原创内容，转载请注明出处】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。无独有偶，solidjs也是和svelt未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nete一样，利用编译，重写react，也没有【版权所有，侵权必究】【本文首发于唐霜的博客】virtual dom【版权所有，侵权必究】，用react的开发方式和理念，得到类似【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。svelte一样的更快的结果。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。但是，即便火爆如svelte，我至今也没本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】有看到在自己周边有生产环境的项目是用sv转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】elte写的。我觉得svelte已经挺成【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】熟了，为啥没有在我周边被大范围应用呢？我【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】想有这么些原因：
本文作者：唐霜，转载请注明出处。【作者：唐霜】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。- React【关注微信公众号：wwwtangshuangnet】/vue未经授权，禁止复制转载。太香【转载请注明来源】，换技术栈成本大【原创不易，请尊重版权】 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】【本文受版权保护】【本文首发于唐霜的博客】
- 对编译强依赖，脱离了它的工具（runti【本文受版权保护】著作权归作者所有，禁止商业用途转载。me）根本没法用（vue也有自己的sta著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ndalone包） 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【版权所有，侵权必究】
从jquery开始，到svelte，你看【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，没有一个框架是完美的。兜兜转转，没有绝【本文受版权保护】转载请注明出处：www.tangshuang.net对满意的框架，这已经是常态了。所以，触发【原创内容，转载请注明出处】【作者：唐霜】了我对web本质的思考。什么是web，什未经授权，禁止复制转载。未经授权，禁止复制转载。么是前端呢？现在的前端已经不局限于web【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】了，所以，基于编译的框架才可以大行其道。
【本文受版权保护】【本文受版权保护】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。但是，除了react之外，其他的框架还是著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】以web应用为目标。既然以web为目标，未经授权，禁止复制转载。【转载请注明来源】为什么一定是编译呢？有没有不需要编译，又转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net能享受这些框架有的一些优点呢？Vue【转载请注明来源】2【版权所有，侵权必究】是一个非常不错的选择【版权所有，侵权必究】。但是，有没有更精简的方式呢？vue的接原创内容，盗版必究。未经授权，禁止复制转载。口确实优点多。2021著作权归作者所有，禁止商业用途转载。年开始流行另外一种框架思路原创内容，盗版必究。，即html流框架。什么意思呢？就是你加【本文受版权保护】未经授权，禁止复制转载。载这个框架的文件之后，可以扩展html的原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net能力。其中的典型代表是alpinejs本文版权归作者所有，未经授权不得转载。（原创内容，盗版必究。https://alpinejs.dev原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。/）。【本文受版权保护】 你加载它的库之后【版权所有】唐霜 www.tangshuang.net，你可以使用转载请注明出处：www.tangshuang.net15种新attribute【版权所有】唐霜 www.tangshuang.net、未经授权，禁止复制转载。6个新property【原创内容，转载请注明出处】、转载请注明出处：www.tangshuang.net2个方法原创内容，盗版必究。。直接在html代码里面就可以定义作用域【未经授权禁止转载】本文作者：唐霜，转载请注明出处。。而且，我直接接触过，设计师懂html的【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net情况下，不需要学习js，能基于alpinejs完成页面输出转载请注明出处：www.tangshuang.net。著作权归作者所有，禁止商业用途转载。
【作者：唐霜】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【原创内容，转载请注明出处】现在业界已经有一些共识，框架（这里指工程【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。化框架，而非视图框架）应该往ssr、智能【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。化等方向发展。例如react提出的ser【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ver components【原创内容，转载请注明出处】，以及这两年出现的ssr框架。另一方面，未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】基于编译的，esbuild、swc这些基【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。于非js语言的解析器出现，又带来了一些可【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】能性。但是，在web运行时上，这两年的建【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。树并不多，连react都去搞服务端了，留著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】给web运行时的时间不多了。我们现在有w【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】ebworker，有webassembl【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】y，为什么没有出现更强的运行时呢？于是我【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。自己写了一个运行时的UI框架sfcjs，【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net它有svelte的写作风格和无virtu【原创内容，转载请注明出处】【本文首发于唐霜的博客】al dom的定点更新未经授权，禁止复制转载。，有vue的响应式，加载方式是amd按需本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】加载，基于shadow dom隔离样式著作权归作者所有，禁止商业用途转载。，基于css原创内容，盗版必究。变量实现响应式的css本文作者：唐霜，转载请注明出处。，更重要的是无编译，直接在运行时使用。它【原创不易，请尊重版权】【本文受版权保护】优点像alpinejs，但是又不是，al【本文受版权保护】未经授权，禁止复制转载。pinejs是直接对当前的页面html进【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net行作用域处理，而sfcjs是组件概念，写【本文受版权保护】【未经授权禁止转载】一个htm文件作为组件存在。所以，它是一原创内容，盗版必究。未经授权，禁止复制转载。个运行时解析执行的ui库。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。在前端发展过程中，涌现出了很多框架这里没【版权所有，侵权必究】【原创内容，转载请注明出处】有提到的，例如雅虎的YUI、国内的ava本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】lon、angular2【转载请注明来源】、cyclejs，甚至应用层面的框架ne【版权所有，侵权必究】【原创不易，请尊重版权】xtjs、nuxtjs、甚至国内的dva【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】、umi。而且，还有一个方面，智能化、低【转载请注明来源】本文版权归作者所有，未经授权不得转载。代码在这两年盛行，其背后孕示着另外一个事【作者：唐霜】【关注微信公众号：wwwtangshuangnet】实，即传统前端架构已经无法满足可随意调整【原创内容，转载请注明出处】原创内容，盗版必究。界面的需求，一种通过服务端控制的界面，在本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】早几年，百度开源的amis早就实现了用j转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。son来渲染界面，你只需要让后端来输出j【本文受版权保护】【原创不易，请尊重版权】son来驱动页面即可。如果你常喝设计师打【版权所有】唐霜 www.tangshuang.net【作者：唐霜】交道可能见过figma，它可能是前端应用【版权所有，侵权必究】【作者：唐霜】在技术架构层面的下一代标杆。
【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。今天的内容就这些。我们总结一下，前端框架【转载请注明来源】【原创不易，请尊重版权】分两种，一种是视图框架，专注解决视图驱动转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net问题，一种是工程框架，解决项目开发架构的【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】问题。我们今天主要讨论的是视图框架。我们【版权所有，侵权必究】【本文受版权保护】梳理了过去和现在的框架，也思考未来的可能本文版权归作者所有，未经授权不得转载。【作者：唐霜】性。对于开发者而言，我们应该拥抱变化，如【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。果内心确定这东西是趋势，就放开心去拥抱，原创内容，盗版必究。【原创内容，转载请注明出处】而不要太担心当下用不到的问题。
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。2021-09-11 3040
