Angular是最早且最完善的前端工程框转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。架，虽然已经有很长的历史，但是它所蕴含的【原创内容，转载请注明出处】【原创不易，请尊重版权】一些思想，值得我们借鉴。而react和v【本文受版权保护】【本文首发于唐霜的博客】ue是同时代的产物，两者之间没有必然的联【作者：唐霜】【关注微信公众号：wwwtangshuangnet】系，但是不可否认的是vue吸收借鉴了来自本文作者：唐霜，转载请注明出处。【作者：唐霜】react和angular的优点，我不能著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。说它是用以开发最舒服的框架，但是从它完善【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。而友好的文档而言，真的对开发者是一种非常【版权所有】唐霜 www.tangshuang.net【本文受版权保护】友善的表示。但抛开框架本身的热度，我们怎【原创内容，转载请注明出处】【版权所有，侵权必究】么从技术本身，从我们作为程序员的编程体验【原创不易，请尊重版权】原创内容，盗版必究。来分析和对比三大框架呢？

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

编程范式本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】

编程范式简单理解就是编程的风格，开发者如【作者：唐霜】【版权所有，侵权必究】何去思考一个逻辑在这个框架下应该如何实现本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net。如果你现在还不能理解这一点，读完本节你原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net应该有所感悟。

【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。

三大框架的编程范式完全不同。【原创内容，转载请注明出处】

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

Angular首先有一个作用域的概念，启【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net动一个应用通过html属性或者代码指定来未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。启动。有点像express创建一个app著作权归作者所有，禁止商业用途转载。【本文受版权保护】一样。你可以对这个app注入很多依赖，挂【版权所有，侵权必究】【本文首发于唐霜的博客】载指令，通过创建controller来隔未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。离出新的作用域，父作用域和子作用域可以原【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net型继承，当然也可以完全孤立。你还可以注入【本文受版权保护】本文作者：唐霜，转载请注明出处。服务，以及其他。大部分项目会注入ui-r【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】outer到config中实现路由。处理本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。好应用的整体代码结构之后，就是无止尽的模著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。板和controller代码撰写了。当然【本文受版权保护】【本文首发于唐霜的博客】，为了提供功能，撰写服务注入也很常见。另本文作者：唐霜，转载请注明出处。【本文受版权保护】外就是要自己写directive。ang【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netular编程大体就是这样。但是在实际上，【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。你会踩到很多坑。例如路由，例如作用域继承本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】与隔离，这些都要在开发中慢慢去解决。

转载请注明出处：www.tangshuang.net【本文受版权保护】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】

React的开发则简单的多。因为单纯写r【转载请注明来源】著作权归作者所有，禁止商业用途转载。eact组件，你只需要写一个继承于Rea原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ct.Component的class，然本文作者：唐霜，转载请注明出处。【未经授权禁止转载】后在它的render方法里返回jsx即可【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net。一个组件写完了。为了让界面响应数据变化【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。，你要学习virtual dom的机制，【未经授权禁止转载】【转载请注明来源】然后用setState修改state信息本文版权归作者所有，未经授权不得转载。【本文受版权保护】，并在jsx中使用这些state。但是要【转载请注明来源】原创内容，盗版必究。完成交互，所以你要学习react的事件系未经授权，禁止复制转载。未经授权，禁止复制转载。统，然后做类似angular一样的事件绑原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。定。然而，react的数据流是单向的，如原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。果在子组件直接修改props，不仅不能重【原创不易，请尊重版权】原创内容，盗版必究。新渲染界面，而且还会产生副作用。所以，你转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。不得不在props上传入一个函数，作为桥【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】梁，实现内外组件交互。一旦组件多了，这种著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。交互极其麻烦，于是你需要考虑引入状态管理著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】器了，redux出现在你的视野。要让一个【转载请注明来源】【版权所有】唐霜 www.tangshuang.net组件在页面中运行，你需要使用react-【转载请注明来源】原创内容，盗版必究。dom，为了满足更方便的界面切换，你又得【本文受版权保护】本文版权归作者所有，未经授权不得转载。考虑一个配合react的路由组件。之后你本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。还会遇到生命周期，异步等等问题。哦，对了本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】，你还得会用babel之类的工具。

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【本文首发于唐霜的博客】

Vue编程直接模拟了程序员对一个东西的直本文作者：唐霜，转载请注明出处。【转载请注明来源】接思维。它创造性的发明了.vue文件，你【原创内容，转载请注明出处】【版权所有，侵权必究】可以把一个组件的模板，js代码，样式代码【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。写在这个.vue文件里，借助webpac本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。k的loader完成对组件的编译。写vu【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.nete组件思维之所以简单，是你会觉得自己在写【本文受版权保护】【版权所有】唐霜 www.tangshuang.net配置：配置模板，配置样式，用js来配置组未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。件要用到的数据，以及组件生命周期、事件响本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。应和抛出、必要的函数，等等。和react本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。一样，你也需要通过Vue内置的方法来启动【原创不易，请尊重版权】【版权所有，侵权必究】一些组件，并且会遇到一模一样的路由、状态【本文首发于唐霜的博客】【本文受版权保护】、异步等等问题，而这些你都需要使用对应的【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。包或某种规则去解决。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】原创内容，盗版必究。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

Angular1.x vs. Vue3.本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。0- vs. React16.0-

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

我们在讨论这三个框架的时候，无法绕过它们未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】最原始的版本，因为三个框架的原始思想来源【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。于初创者在设计之初，就遵照了一定的思想去【转载请注明来源】【作者：唐霜】实现各个部分，因此，在这种设计之下，它们本文作者：唐霜，转载请注明出处。【未经授权禁止转载】在写代码的时候，所采取的逻辑思路是不一样【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net的，这就是它们在编程范式上的不同。ang本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netular1.x版本，vue3.0之前的版未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本，react16.0之间的版本，都是这【关注微信公众号：wwwtangshuangnet】【作者：唐霜】三个框架的经典版本，而对这三个经典版本进未经授权，禁止复制转载。【转载请注明来源】行对比，能够更好的理解它们作为框架的本源【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。（虽然很多人强调react并非框架）。

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

AngularJS vs. Angula【本文受版权保护】【原创不易，请尊重版权】r

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【本文受版权保护】【原创不易，请尊重版权】

在angular发布2.0之后，angu本文作者：唐霜，转载请注明出处。原创内容，盗版必究。lar1.x版本被称为AngularJS著作权归作者所有，禁止商业用途转载。【本文受版权保护】，而angular2.0以后就叫Angu【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】lar。去掉JS是因为angular采用未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。了typescript作为编程语言。从本【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。质上讲，js和typescript是两个【转载请注明来源】本文作者：唐霜，转载请注明出处。不同的编程语言，而联系在于，typesc【未经授权禁止转载】【作者：唐霜】ript现阶段必须编译为js来运行，而未【本文受版权保护】【本文受版权保护】来，将会有解析器直接运行typescri【本文受版权保护】【未经授权禁止转载】pt代码。Angular除了在编程语言上【版权所有，侵权必究】转载请注明出处：www.tangshuang.net去掉js标记，另一个重要的点在于，它修改原创内容，盗版必究。原创内容，盗版必究。了自己最原始的编程范式，并且希望更多的于【未经授权禁止转载】【原创内容，转载请注明出处】时代贴近，试图在多端开发中占据一席之地。

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

React16.0- vs. React【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。16.x

原创内容，盗版必究。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

React16.0重写了React，引入【转载请注明来源】【本文首发于唐霜的博客】了Fiber的概念，这对于开发者而言几乎【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。无感，但是Fiber相当于在渲染机制上重【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】新改写了React，反过来说，它虽然可能【作者：唐霜】【本文受版权保护】带来更顺滑的渲染，但是也会给开发者挖一些【版权所有】唐霜 www.tangshuang.net【本文受版权保护】坑。但是无论如何，React16都是一个本文作者：唐霜，转载请注明出处。原创内容，盗版必究。特殊的版本，后续加入的context a原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。pi和hooks，特别是hooks，将会本文作者：唐霜，转载请注明出处。【转载请注明来源】改变原始的react编程习惯。

【转载请注明来源】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

Vue3.0- vs. Vue3.0【版权所有，侵权必究】

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【本文受版权保护】原创内容，盗版必究。

vue不久前证实了vue3.0版本，并且转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。已经发布，这让很多开发者发出“学不动”的本文版权归作者所有，未经授权不得转载。【本文受版权保护】感叹。但是不可否认的是，vue3.0使得原创内容，盗版必究。转载请注明出处：www.tangshuang.netvue在编程习惯上来了一个天翻地覆的变化著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net，当react开始通过hooks来削弱对著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netclass的开发依赖时，vue3.0却完未经授权，禁止复制转载。【原创内容，转载请注明出处】全支持react16.0-类似的clas【本文受版权保护】原创内容，盗版必究。s写法。从某种意义上讲，vue不大可能超【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。越react，但这种版本的变化让我们也有本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。了更多的选择。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】未经授权，禁止复制转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

模板 vs. JSX【转载请注明来源】

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

下面开始，我们来讨论经典的三个版本。本文作者：唐霜，转载请注明出处。

【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

angular和vue都是基于模板的（v【本文受版权保护】本文作者：唐霜，转载请注明出处。ue也支持jsx），react诞生时就是【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】基于jsx。jsx看上去像是模板，但是实原创内容，盗版必究。【作者：唐霜】际上它并非模板，而是创建UI视图的函数集【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】的语法糖，当jsx被编译为js之后，是一【未经授权禁止转载】【作者：唐霜】大堆函数调用的集合，因此，不存在模板。一【作者：唐霜】本文版权归作者所有，未经授权不得转载。旦存在模板，那么在js的运行时，就需要对【关注微信公众号：wwwtangshuangnet】【转载请注明来源】模板进行解析，并且同时执行创建UI的过程【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net，效率上是打折扣的，而jsx相当于直接创【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。建UI，没有解析模板过程，对于相同结构而著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】言，自然要更胜一筹。

【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【未经授权禁止转载】

脏检查 vs. Virtual DOM【作者：唐霜】

未经授权，禁止复制转载。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

从本质上讲，脏检查和virtual do【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。m没有可比性。但是，这两个词代表了ang著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ular和vue、react在更新视图机著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。制上的典型词汇，因此，实际上，我们要讨论转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的是，三大框架，在数据（model）发生本文作者：唐霜，转载请注明出处。【未经授权禁止转载】变化时视图（view）如何对数据进行响应【转载请注明来源】【原创内容，转载请注明出处】并做出对应的变化，这样的一个问题。

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

几乎所有的人都知道angular赖以成名【本文首发于唐霜的博客】【转载请注明来源】的脏检查机制，但是它的究竟是怎样的运作机【本文受版权保护】本文作者：唐霜，转载请注明出处。制？我在以前的博客中专门有一篇文章详细讲转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】解了angular脏检查机制【作者：唐霜】，如果有兴趣可以提前阅读。但实际上，脏检【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。查机制仅是在数据变化中，确保angula【作者：唐霜】著作权归作者所有，禁止商业用途转载。r已经收集到所有的数据变化，真正要进行界本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。面的更新，仍然需要angular内置的视本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。图渲染和更新渲染的相关机制。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

同样的道理，在vue和react中，也有转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】一套系统，在数据变化时确保收集到数据的变【原创内容，转载请注明出处】【原创不易，请尊重版权】化，vue是内置的数据代理，让我们可以直【未经授权禁止转载】未经授权，禁止复制转载。接修改数据对象属性来触发数据变化通知，而【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】react里面则是依赖props和sta本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】te，以及内置提供的一些方法。在渲染和更转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net新界面时，才用到了virtual dom未经授权，禁止复制转载。【作者：唐霜】的机制。

【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

虽然脏检查和virtual dom是在不【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net同阶段的不同概念，但是数据变化和对数据变【转载请注明来源】【未经授权禁止转载】化做出界面响应，这两个阶段是构成三大框架【关注微信公众号：wwwtangshuangnet】【转载请注明来源】内在最本质的特性，因此，这两个阶段是不可【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。分离的，把这两个概念放在一起也可以笼统总【本文首发于唐霜的博客】【原创不易，请尊重版权】结出三大框架的界面响应机制的区别。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】【原创不易，请尊重版权】

指令 vs. 组件【转载请注明来源】

转载请注明出处：www.tangshuang.net【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

angular发明之时，前端组件的概念还原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】没有火起来，angular发明了dire【本文首发于唐霜的博客】未经授权，禁止复制转载。ctive（指令）用以在模板中自定义一些【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】新的html属性，拥有这些属性的html【原创不易，请尊重版权】原创内容，盗版必究。标签将拥有新的功能，而这些功能的实现，靠【本文受版权保护】【版权所有，侵权必究】angular directive的js转载请注明出处：www.tangshuang.net【未经授权禁止转载】代码实现。在后来，angular也有组件未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。的概念，但是也仅仅是对directive著作权归作者所有，禁止商业用途转载。【作者：唐霜】的特殊化，并非我们现在讲的真正意义上的编【本文受版权保护】【原创不易，请尊重版权】程化组件，所以，当你打算对一个已有的“组【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】件”进行功能增强时，你会非常烦恼。

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】

而react和vue诞生之初就是基于组件【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。的概念，可以说，我们在用react和vu原创内容，盗版必究。【版权所有，侵权必究】e开发时，大部分时间是在写好一个组件。基未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】于怎样的风格写好组件并不简单，在经典的v【作者：唐霜】【版权所有，侵权必究】ue中，写一个组件更像在写一个配置，通过【作者：唐霜】【版权所有】唐霜 www.tangshuang.net配置对象的不同属性来规定组件的动作和效果原创内容，盗版必究。转载请注明出处：www.tangshuang.net，而react基于class的写法，让组本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】件编程更像是原生编程。

转载请注明出处：www.tangshuang.net【作者：唐霜】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】

无论是哪一个框架，在组件概念下的代码单元本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。，在运行时都有“生命周期”的概念。

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

全家桶 vs. 散装本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】【本文受版权保护】【本文首发于唐霜的博客】【本文首发于唐霜的博客】【本文首发于唐霜的博客】

大家常说的一句话是，“react全家桶来著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】一套”，然而实际上，angular是全家【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。桶，react是散装，vue是半桶水。a【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ngular开箱即用，自带了$http（原创内容，盗版必究。【转载请注明来源】为了解决异步场景下的脏检查，$timeo本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netut是同样的目的），通过依赖注入的方式提转载请注明出处：www.tangshuang.net【本文受版权保护】供需要的功能。但react要真正用起来非【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。常麻烦，你起码需要react和react【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。-dom这两个包，否则根本跑不起来。

本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

但是，从现代编程的角度讲，显然react【转载请注明来源】【版权所有】唐霜 www.tangshuang.net的这种散装模式更符合编程的内在需要，它内著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。在解耦了不同目标的功能，react负责将原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。界面抽象为代码，不要考虑运行的环境，一旦著作权归作者所有，禁止商业用途转载。【本文受版权保护】这种抽象思维被发现，那么我们可以想象的空转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】间非常大，同样的一套代码，都是界面的抽象【转载请注明来源】【未经授权禁止转载】描述，那么是不是用不同的解析器去解释它，转载请注明出处：www.tangshuang.net【转载请注明来源】就可以适配不同的客户端呢？比如在手机上生未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。成基于特殊技术的原生app等等。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【本文受版权保护】

除了提升想象空间外，散装模式，还可以降低【转载请注明来源】本文版权归作者所有，未经授权不得转载。学习成本，开发者不需要某些功能，则不用去著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。学习对应的套件。同时，也可以降低整个应用【本文首发于唐霜的博客】【转载请注明来源】打包后的尺寸。

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【作者：唐霜】

MVVM vs. MV【版权所有】唐霜 www.tangshuang.net

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

Angular是典型的经典MVVM框架，【本文首发于唐霜的博客】【原创内容，转载请注明出处】作为开发者，你需要自己撰写视图、控制器，未经授权，禁止复制转载。【未经授权禁止转载】控制器中用$scope管理数据，通过更改【本文受版权保护】【原创不易，请尊重版权】$scope上的数据，和angular内【未经授权禁止转载】未经授权，禁止复制转载。置的事件系统，解决复杂的交互逻辑。虽然从本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】理论上这样的编码逻辑没有任何问题，但是因【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net为要把所有的js业务代码都写在一个函数内【未经授权禁止转载】【版权所有，侵权必究】，通过$scope导出，并且在函数内实现【未经授权禁止转载】【未经授权禁止转载】各种复杂逻辑。另外，angular的依赖转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】注入要求你把注入的服务作为该函数的参数导【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】入，这些在现在看来（ES6之后），实在是转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。太憋足了。angular虽然解决了很多问原创内容，盗版必究。【原创不易，请尊重版权】题，但是仍然留下了很多坑给开发者。它像一【版权所有，侵权必究】【版权所有，侵权必究】个大而全，但不灵活的框架，使得很多逻辑要【未经授权禁止转载】【原创内容，转载请注明出处】写重复的代码去实现。

【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【本文受版权保护】

而React所提倡的组件方式，则使得编程转载请注明出处：www.tangshuang.net【作者：唐霜】更加清晰。你需要定义的是，视图，视图用到【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】了那些数据，这些数据如何变动。虽然听上去【版权所有】唐霜 www.tangshuang.net【转载请注明来源】也差不多，但是整个编程体验是非常舒服的。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】你不需要考虑依赖注入，也不用在模板和控制【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。器代码之间来回切换。组件代码复用性强，且转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。易于扩展。比较麻烦的是，react没有a【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ngular的双向绑定，内部的变动不能反本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。馈给外部，这又给react在编程上带来了【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。特别复杂的体验，你需要反复在组件中通过p未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。rops来传递内外数据交互，而且传递过程转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】并不直观，你需要在props上放一个函数【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。，在内部适当的时候调用这个函数，并把内部【原创内容，转载请注明出处】【未经授权禁止转载】的数据作为参数传给这个函数，而该函数又是【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。外部定义的，当它被执行时，相当于又可以去著作权归作者所有，禁止商业用途转载。【转载请注明来源】执行外部的一些逻辑。为了给这种不方便一个著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】好的解释，Facebook的团队称这是因【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】为react采用了单项数据流来控制数据，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net单项数据流使数据变动更清晰容易理解，出b原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ug的几率会降低。但是事实证明，bug从【原创不易，请尊重版权】未经授权，禁止复制转载。来不会减少。虽然redux利用这种单项数【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。据流可以做非常棒的功能，例如数据快照（用【本文首发于唐霜的博客】【转载请注明来源】以还原用户操作）等，但是这并不表示rea本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netct在这一点上是成功的。

【本文首发于唐霜的博客】【原创不易，请尊重版权】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

vue竟然在这一点上站在了react一边【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net，这让它显得非常没意思，不断的复制rea【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ct。vue有一个v-model指令，非著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。常好的继承了angular的思想，但是，【本文受版权保护】未经授权，禁止复制转载。双向绑定也仅仅限于v-model而已，在转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。内外组件之间，它和react没有区别，而【转载请注明来源】著作权归作者所有，禁止商业用途转载。且，更无聊的是，你需要在子组件中显示的声【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】明外部传入哪些props是被接受的。从这【未经授权禁止转载】【转载请注明来源】一点上，就让vue大显失色。从某种角度讲未经授权，禁止复制转载。【未经授权禁止转载】，vue是一个试验性的框架，借一点ang本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netular，借一点react，听说type著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。script不错，也上typescrip【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。t，没有特别的灵魂。而且从开发体验上讲，【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。vue也并不特别令开发者舒服，你需要显示【作者：唐霜】【未经授权禁止转载】的声明要用到的组件、props，在没有c著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netontext的前提下，你可以在属性中使用【原创不易，请尊重版权】【版权所有，侵权必究】this，而这个this到底指向谁，在编【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net程的时候你完全是错误的，因为当一个属性函【原创不易，请尊重版权】【原创不易，请尊重版权】数中定义了this，从js本身的默认行为【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】上，this应该指向该对象，虽然我们知道【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。，在vue内部，会将this指向自己的实【本文受版权保护】【版权所有，侵权必究】例，但这就违背了js编程的内在意义，使得【未经授权禁止转载】【本文受版权保护】代码让人捉摸不透。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

总结起来，三大框架的经典版本，在编程体验【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】上都不如人意，总觉得有点不足之处。

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net

趋于一致未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net【转载请注明来源】著作权归作者所有，禁止商业用途转载。

随着新版本vue的发布，三大框架开始趋于原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net一致，有一篇文章原创内容，盗版必究。提到原创内容，盗版必究。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

Follow 标准是趋势，如果能够引领标【转载请注明来源】【关注微信公众号：wwwtangshuangnet】准，那将是框架的无上荣耀

原创内容，盗版必究。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

【本文首发于唐霜的博客】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

虽然这样说并不一定正确，毕竟技术需要多元【本文受版权保护】【转载请注明来源】化，标准之外也有珍宝，但是从目前的现状而【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。言，也正是这个道理，向web compo【版权所有】唐霜 www.tangshuang.net【本文受版权保护】nents标准看齐已经是多数框架的基本原转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。则，来自腾讯的OMI框架则更是在这一点上【本文首发于唐霜的博客】【未经授权禁止转载】贯彻至极。一旦在编程体验上和web标准一【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。致，那么我们可能会产生这样的疑问：选某个【原创内容，转载请注明出处】【作者：唐霜】框架去写还有什么意义？反正写出来的代码都转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net差不多。话虽如此，但我们可以这样看待，我本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。们并非选择某个框架去写代码，而是我们写了【转载请注明来源】未经授权，禁止复制转载。标准模式的代码，现在是选择用什么框架去运原创内容，盗版必究。【作者：唐霜】行。

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】原创内容，盗版必究。未经授权，禁止复制转载。

在这一点上，react再次走到了前面。r转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。eact官方在博客中再次强调，他们不会移【本文首发于唐霜的博客】原创内容，盗版必究。除class这种编程方式，但是他们更提倡【本文受版权保护】著作权归作者所有，禁止商业用途转载。开发者采用function的编程方式。

【原创不易，请尊重版权】【版权所有，侵权必究】【原创内容，转载请注明出处】【未经授权禁止转载】未经授权，禁止复制转载。

2019-03-22 10979