如何评价大漠穷秋的文章《Angular有哪些地方比Vue更优秀？》? - 知乎936被浏览219125分享邀请回答42959 条评论分享收藏感谢收起&p&内容类网站，首选内容管理系统（CMS）了，国外流行的主要有Drupal, Joomla，WordPress等。可以都试试，选汉化得比较好的来用。&/p&
内容类网站，首选内容管理系统（CMS）了，国外流行的主要有Drupal, Joomla，WordPress等。可以都试试，选汉化得比较好的来用。
&p&最近 &a class=&member_mention& href=&/people/4866fceb246d9ea621fd5& data-hash=&4866fceb246d9ea621fd5& data-hovercard=&p$b$4866fceb246d9ea621fd5&&@大漠穷秋&/a& 发布了一篇&a href=&/p/& class=&internal&&对比 Angular 和 Vue 的文章&/a&。框架之间的对比虽然是老生常谈，但也确实是绕不过去的话题，Vue 本身的文档里也直接就有和其他框架的对比。同为开源的技术方案，比较本身其实没有任何问题，但在写 Vue 与其他框架的比较的时候，我们尽力做到两点：&/p&&p&1. 确保事实的准确性。有的就是有，没有就是没有，不确定的就不说，弄错了一定改。&/p&&p&2. 确保语气的中立性。别人的缺点指出但不嘲讽，优点大方承认。&/p&&p&之前 @汪志成 对 Vue 跟 Angular 的比较文案提出了意见，我们也对应地进行了修订。也欢迎社区继续进行监督和反馈 —— 比较的目的不是扭曲大家的认知，而是为了帮助大家做出自己的判断。&/p&&p&现在说回来大漠（后面都用大漠指代，注意跟 w3cplus &a class=&member_mention& href=&/people/5fbc10cabdc95d7f30d08& data-hash=&5fbc10cabdc95d7f30d08& data-hovercard=&p$b$5fbc10cabdc95d7f30d08&&@大漠&/a& 老师不是一个人，对不住了哈哈）的这篇文章，很遗憾，以上两点都不及格。&/p&&p&先说事实。&/p&&p&&br&&/p&&h2&CLI/工具链&/h2&&p&首先两个框架 CLI 的定位不一致。vue-cli 不是一个打包工具，它只是一个 scaffold，也就是初始化工具。真正负责打包的是初始化之后项目内的 webpack 配置和 npm 脚本。从一开始 vue-cli 就是这样的设计意图，项目真正的工具链在项目模板里面而不是 CLI 里面。&/p&&p&相比之下 @angular/cli 是一个全包式的命令行工具，一切都是通过 `ng` 来执行，但这不代表 `ng` 有的命令 Vue 就没有对应的功能 —— 比如在 vue-cli 生成的项目里面：&/p&&ul&&li&npm run dev 对应 ng serve&/li&&li&npm run build 对应 ng build&/li&&li&npm run lint 对应 ng lint&/li&&li&npm run unit 对应 ng test&/li&&li&npm run e2e 对应 ng e2e&/li&&/ul&&p&除了 i18n 之外，@angular/cli 有的 Vue 都有。『很多日常开发必备的功能都需要开发者自己去下载配置第三方的Node模块』这句话是一个事实上的错误。看起来大漠连 vue-cli 生成的项目都没跑过就急着写文章了呢。&/p&&p&其次，CLI 命令/参数多 = 更优秀？并没有这样的道理，create-react-app 估计要哭晕在厕所了。如果我们仔细看看文中的截图，ng build 的多个参数，其实就是对应不同的底层 webpack 配置。说实话，我相信不仅仅是我，对于很多其他开发者而言，更宁可直接阅读 webpack 的文档来调整真正的 webpack 配置（并且可以 commit 进项目），而不是去额外学习一套由 Angular 封装的抽象，因为实际生产中需求千变万化，完全被 CLI 封装的配置不利于二次开发。&/p&&p&实事求是地说，@angular/cli 确实有一些值得学习的地方，比如 ng serve 对 SSL 的支持。我们也会在新版本的 vue-cli 中持续吸收改进，但连 vue-cli 能做什么都没弄清楚就拿玩具来打比方，只能贻笑大方了。&/p&&p&&br&&/p&&h2&异步加载模块&/h2&&p&我不知道为什么大漠又截了个不知哪里的旧中文文档的图，还没截全 —— 最新的关于异步加载的文档是下面这两个链接：&/p&&ul&&li&&a href=&/?target=https%3A//cn.vuejs.org/v2/guide/components.html%23%25E5%25BC%%25AD%25A5%25E7%25BB%%25BB%25B6& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&文档中关于异步组件的部分&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A//router.vuejs.org/en/advanced/lazy-loading.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&路由文档关于路由懒加载的部分&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&Vue 将一个组件（以及其所有依赖）改为异步加载，所需要的只是把：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&import Foo from './Foo.vue'
&/code&&/pre&&/div&&p&改成&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&const Foo = () =& import('./Foo.vue')
&/code&&/pre&&/div&&p&就这么简单。这里注意三点：&/p&&ol&&li&当这样分割的时候，该组件所依赖的其他组件或其他模块都会自动被分割进对应的 chunk 里，不存在大漠所暗示的『手动改 500 个组件』这样的情况。况且两边代码分割的功能都是 webpack 提供的，我真不知道大漠是真的不懂还是故意误导。&/li&&li&所谓的路由级别的分割，只需要把这个组件作为路由组件就可以了，甚至连路由配置表都不用改。&/li&&li&更重要的是这样的异步组件并不一定只能用在路由层面 —— 任何你要用到一个组件的地方，都可以用异步组件无缝替换之，这种灵活性是 Angular 的 loadChildren 根本无法比拟的。比如一个动态的长表单页面，你甚至可以根据用户目前的输入来动态抓取表单接下来的部分（这个用例还是 wepback 的维护者 Sean Larkin 发现并用在生产中的）。&/li&&/ol&&p&&br&&/p&&h2&单元测试和集成测试&/h2&&blockquote&Vue的单元测试需要你自己去安装配置 Karma + Jasmine&/blockquote&&p&—— 事实错误。vue-cli 的 webpack 模板内置了开箱即用的 Karma + Jasmine 配置，自带了一个初始测试用例，npm run unit 即可。这又双一次证明大漠根本没有跑过 vue-cli 生成的项目。&/p&&p&Vue 的单测不仅仅支持 Karam + Jasmine - 事实上社区有广泛的单测反馈，对于 Jest, Ava 都有实践，我们正在开发中的官方的单测工具库 vue-test-utils （由社区最流行的单测库 avoriaz 的开发者开发）会进一步简化常见的组件单测断言需求，并且还会有和所有主流 test runner 的整合指南。&/p&&blockquote&在集成测试方面，Vue就只能是0分了，因为压根什么都没做。&/blockquote&&p&—— again，事实错误。vue-cli 的 webpack 模板内置了开箱即用的 Nightwatch + Selenium E2E 测试配置，自带了一个初始测试用例，npm run e2e 即可。这又双叒一次证明大漠根本没有跑过 vue-cli 生成的项目。&/p&&blockquote&从对集成测试的支持大家应该可以看出来，在那些技术含量不太高的地方，Vue确实可以抄袭得有模有样，但是一旦技术门槛提高，Vue就没法抄了，或者说抄得没那么快了。&/blockquote&&p&—— 集成测试这种东西，有什么技术门槛可言，还需要抄么？顺便说一句，vue-cli 初始化的项目可是早比 @angular/cli 正式发布前就已经自带集成测试了...&/p&&p&&br&&/p&&h2&TypeScript&/h2&&p&原文直接说了说 TypeScript 有多好，言下之意这是只有 Angular 才有的东西？事实上：&/p&&ul&&li&Vue 全家桶自 2.0 发布起就自带官方 TypeScript typing；&/li&&li&Vue 有官方的 &a href=&/?target=https%3A///vuejs/vue-class-component& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TypeScript component class decorator&i class=&icon-external&&&/i&&/a&;&/li&&li&有非常多在生产环境中使用 Vue + TS 组合的用户；&/li&&li&VSCode + &a href=&/?target=https%3A//vuejs.github.io/vetur/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vetur&i class=&icon-external&&&/i&&/a& 插件提供完美的 IDE 类型提示；&/li&&li&&a href=&/?target=https%3A///vuejs/vue/pull/5887& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TS 团队非常积极地和 Vue 合作推动更好的 Vue + TS 体验&i class=&icon-external&&&/i&&/a&，下个版本的 Vue 甚至不需要用 class decorator 也能获得完善的类型推导。&/li&&/ul&&p&这里我不否认 Angular 是一个 TS 为主导的框架，所以默认的 workflow 跟 TS 的整合会更紧密，但单说 TS 配置完成后的开发体验，并不构成本质的差别。&/p&&p&&br&&/p&&h2&AOT & Treeshaking&/h2&&blockquote&随着你的项目规模越来越大，你会越来越体会到有AOT是多么的重要，而Vue在这一点上根本无能为力，开发者只能自求多福了。&/blockquote&&p&—— again，事实错误。Vue 从 2.0 一开始就对模板编译策略进行了专门的设计：框架本身的 dist 文件分为包含编译器和不包含编译器的版本，前者可以直接在浏览器里编译，后者则专门用于构建时 AOT 编译，并且剥去了编译器所占的尺寸。vue-cli 初始化的项目默认就是 AOT 的状态 —— 请注意，从 Vue 2.0 快一年前发布的时候就已经是这样了，早于 @angular/cli 支持 AOT 的时间。&/p&&p&Vue 在构建时还有很多其他优化，细节可以看&a href=&/?target=https%3A///presentation/d/1ot0JYflhGmPq5Y_PAIEEyYH4APWBK17Zf7-d1dM4v7g/edit%3Fusp%3Dsharing& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&我 7 月在 JSConf 演讲&i class=&icon-external&&&/i&&/a&的末尾部分。&/p&&p&再说说 Treeshaking。上面的 slides 里面也有提到 Treeshaking 的原理，这里谈几点：&/p&&ol&&li&直到 webpack 3.3 之前，treeshaking 都依赖 rollup。框架本身层面，Vue 的 dist 文件就是用 rollup 打包的 flat ES module（注意，这又是一个 Vue 2.0 发布时就采用的设计，React 后来也采用了同样的构建，而 Igor Minar 提到过 Angular 也想采用同样的发布构建），保证了框架本身尺寸的最小化。&/li&&li&应用层面的 Treeshaking，@angular/cli 也是要用 rollup 才能达成，而 webpack 3.3 之后终于支持真正的 treeshaking（文档里叫 scope hoisting）—— 任意使用 webpack 的项目只要启用 ModuleConcatenationPlugin 就可以获得 类似 rollup treeshaking 的效果。对于 vue-cli 的模板来说，默认启用就是举手之劳，现阶段只是希望等这个功能更稳定一些。&/li&&/ol&&p&&br&&/p&&h2&团队&/h2&&p&我很早就说过了，用『一个人』来贬低一个项目是很短视的行为。Ruby 最早只有 Matz，Python 最早只有 Guido，Linux 最早只有 Linus，任何项目，尤其是独立开源项目，都有一个发展的过程。有爹如 Angular 1，下场又如何呢？&/p&&p&Vue 的 contributor graph 有一些细节，不说估计很容易就被忽略了。2.0 的代码在初始开发阶段只有我一个人写，所以绝大部分早期的 commit 都是我的，而且保留了所有细粒度的 commit，比如改个缩进啥的。到后期正式发布之后，commit 就开始强调可读性，一个 feature 一般都是 rebase 成几个比较阶段性的 commit，大部分 PR 也都是 squash 成了一个单独的 commit，所以 contributor 的 commit 会偏少。&/p&&p&还是用数据说话。如果只看近期的状态，&a href=&/?target=https%3A///view/vue& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这个网站&i class=&icon-external&&&/i&&/a&有个指标挺有意思：最近的 100 个 commit 来自多少个 contributor？&/p&&p&Vue 是 23 个，Angular 是 38 个。Angular 更多，但很明显 Vue 也绝不是只有我一个人。&/p&&p&&br&&/p&&h2&结语&/h2&&p&说了这么多，我们可以看到原文里几乎每一个技术比较点都经不起推敲，并且可以很明显的看出，作者对于 Vue 生态缺乏足够的了解，为了贬低而贬低的意图太过明显，甚至把一些在 Vue 当中更早落地的技术细节看做是在抄袭 Angular...&/p&&p&在我以前的一个回答中 (&a href=&/question//answer/& class=&internal&&尤雨溪：什么才是你心目中的前端圈?&/a&) 我说过希望中文前端圈能少一些戾气，所以我这里尽量只谈技术上的事实，并且：&/p&&p&&b&希望 Vue 的用户和支持者不要对大漠或 Angular 进行不理性的攻击。&/b&&/p&&p&&b&希望 Vue 的用户和支持者不要对大漠或 Angular 进行不理性的攻击。&/b&&/p&&p&&b&希望 Vue 的用户和支持者不要对大漠或 Angular 进行不理性的攻击。&/b&&/p&&p&重要的话说三遍。这篇文章不是为了撕逼，只是为了澄清一些技术上的事实。对自己要求更高一点的同学，可以不要站队。把自己跟一个框架捆绑不是什么好事，你的自信应该来自于你驾驭框架的能力，而不是被框架驾驭的能力。&/p&&p&&br&&/p&&p&大漠在另一个回答下面（&a href=&/question//answer/& class=&internal&&知乎用户：为什么vue的高仿项目层出不穷，而React和angular却很少？&/a&) 也写过这样的一段话：&/p&&blockquote&我曾经问过我的老板和Angular团队的负责人这样一个问题：在中国国内的网络上经常出现针对Angular的讨论，有一些内容非常偏激，甚至可以说【恶毒】，作为Angular在国内推广的负责人，我可以去和这些人针锋相对吗？我的老板是这样跟我说的：“战胜”竞争对手不是Angular团队的目标，我们的目标是帮助开发者和企业更好地开发面向未来的WEB应用。很平常的一句话，但是给我留下的印象非常深刻，因为我看到了一个全新的角度，原来他们是这样去思考问题的。反观国内的很多技术讨论区，很多情况下会非常快速地陷入人身攻击和胡扯的境地，给人的感觉就像泼妇骂街一样。尤其是前端社区，越来越像娱乐圈。所有的参与者，包括提问题的人，请你们安静一秒钟，仔细想想，你自己想要什么？在口水战中战胜对手能帮助你提高编码技巧，还是能帮助你提高认识世界的高度？&/blockquote&&p&在那个充满戾气的问题下面看到这样一段话，当时我是很佩服大漠的。然而... 现在这两篇文章，真让我怀疑大漠是被人盗号了...&/p&&p&如果你没有被盗号，摸着你的良心问问，你，脸不脸红？&/p&&p&&br&&/p&&p&---&/p&&p&注：为了避免站队撕逼，设置为只有我关注的人可以评论了，支持 Vue 的同学点个赞即可，谢谢。&/p&
发布了一篇。框架之间的对比虽然是老生常谈，但也确实是绕不过去的话题，Vue 本身的文档里也直接就有和其他框架的对比。同为开源的技术方案，比较本身其实没有任何问题，但在写 Vue 与其他框架的比较的时候，我们…
已有帐号？
无法登录？
社交帐号登录
18419 人关注
635 条内容
130 人关注
109 条内容
2950 人关注
462 条内容如何评价大漠穷秋的文章《Angular有哪些地方比Vue更优秀？》? - 知乎936被浏览219125分享邀请回答499 条评论分享收藏感谢收起如何评价大漠穷秋的文章《Angular有哪些地方比Vue更优秀？》? - 知乎936被浏览219125分享邀请回答0添加评论分享收藏感谢收起