日常开吹：竹板这么一打，今天夸一夸，为什么我喜欢 Vue

[murmur]

(写的太多，后面吹的我自己都乱了，见谅)

在回答这个问题之前，我们要明白一件事，什么需求选什么样的框架，所以我们先限定我们的范围，这个范围可以由下面四个问题回答：

1 、我的开发人员是什么素质，是几十万一年的专业前端还是后端兼任？

2 、我有没有移动端开发的需求，是什么架构，小程序、Native 、还是 Rn/Flutter/Weex ？

3 、我在开发什么东西，是复杂的 SPA 、内容展示系统还是企业应用？

4 、这个项目有多大，是几个人的小团队还是持续数年、百人以上参与的大工程？

如果你的答案满足以下几点，我想你会爱上 Vue：

1 、我们的团队前端都是一般水平的或者应届生，甚至是后端拉来凑数的

2 、我们的移动端使用 HTML5/小程序，或者不需要移动端

3 、我们的项目和 SPA 基本不搭边

4 、我们的项目基本不考虑后续维护，或者后续不会有大改动

好的，在开吹之前，我们需要一个高度的概括，为什么吹 Vue，那么我总结了我认为确切的四个字：以人为本。你可能问，这是什么屁话，开发人员不是人么？是的，因为真的有这种语言，典型的就是林檎的 Obj-C，这是典型的为了编译器爽而不管开发人员死活的东西。更通俗的话说是，把开发者当做用户，考虑用户从上手到开发的每一步，而不是把开发者当做掌握了大量知识的 GEEK 。

开源的世界里，互相借鉴是很正常的事，如果开源世界还有技术壁垒，那大家都不要进步了，现在的大开源软件哪个不是依赖了一堆基础库。站在巨人的脚步上，模仿成熟产品，这是个好事，像一个东西，减少用户的学习成本，同时加上一些特定场景的优化，这是个好事，而不是张口闭口的抄袭。还有拿国内外数据做对比的，是不是国内的开发者就不配做人，给国内开发者提供点适合的框架不好么，还要因为和国外的技术栈不一致而自卑？有人说 vue 的 star 数不实，是因为爱国给他刷的，那我真没法了，我认为程序员还是很理性的，evan u 也没必要去淘宝买星，至少 vue 的 star 数要比各种 awesome 的更有含金量，不是吗？

怎么吹 vue ？其实就从一点开始，前端在干什么？为了避免撕逼，我们来讨论狭义的前端，只讨论浏览器和套壳浏览器那部分。我们不讨论你跟其他语言抢饭碗的东西，别人用 unity 和 unreal 你要用 cocos-js，别人用 java 、php 你用 node 这些撕来撕去没意义，专业的事情就应该交给专业的来做。总结一点，前端是要把东西展示给人看的，无论是页面还是 App，无论你选择什么开发，HTML+CSS+JS 的组合你跑不掉，当然我看帖子有人高傲到要做 JS 工程师，那就没办法了。

其实，很多你做的东西并没有那么高大上，页面复杂不代表逻辑复杂，页面多也不代表复杂，你看上去的很多页面实际上在多年前就可以通过 iframe 划分搞定，这些页面之间没有数据交互，单纯的填写和展示而已。在这种情况下，HTML 的占比就很大，这在企业开发更加明显，大量的表单、表格，配合流程控制以及校验。这种情况，vue 的模板就非常有优势，模板的语法跟 HTML 基本没差别，又提供 v-if 、v-show 、v-for 等指令帮助前端的显隐。这个时候，第一批吹的该来了，说 jsx 和 js 是一样的，模板需要额外学习。是的，模板需要额外学习，但是值得学习，而且自然到不学就会了。几乎所有语言都有 if 和 for，所以 vue 就有 v-if 和 v-for ； at 这个符号有在...的意思，所以 at 可以绑定事件，冒号可以绑定变量，这个需要记忆，但是太简单了不记就住了。而在 jsx 里，你要循环必须用 map，我在项目中看到多少兼职开发连 array.join 都不知道，还在手写函数拼接字符串，你怎么让他们知道 map，知道 className，知道用短路、三目表达式运算实现 if 、if-else 。你可能会说，这些不是前端必修的么？对啊，但是 vue 可以不修，vue 的门槛就这么低。我们来看看学习 vue 从 jquery 一知半解到开始干活需要多久：

1 、掌握基本的 html 和 css 知识，这里需要多少取决于你要对现有框架做多大改动，很多企业开发是搭积木，他对 html 和 css 只掌握到“大概知道啥是啥”就可以，不要求能从 0 开始写一个组件或者一套布局，react 、angular 也需要这一步

2 、掌握基本的 js 语法，包括赋值、变量、变量、条件、循环，这里我没要求闭包和 this，因为我见过那些在每个函数之前都写上 var self=this，然后所有的 this 都用 self 代替的，这是个好主意，虽然很蠢但是在没有智能 IDE 的情况下对新手是个不错的东西。

3 、掌握 export 和 import 关键字的用法，即便是 es5 语法开发，这两个东西是避不掉的。

4 、掌握 v-if 、v-for 、v-show 、at 、冒号的使用，v-key 不是必须，在 vue 中基础 html 标签循环是不强制要 key 的。

5 、掌握 data 、computed 的用法，知道 data 中的变量和模板的绑定关系，其实 computed 都可以不用先学，但是不学这个模板里的行内表达式太丑，所以还是要懂一点。component 可以通过全局定义组件规避，mixin 是写在标准页面里的，粘过来就行。

好了，你会说，react 把 v-if 换成短路运算，v-for 换成 map 的不是一样么？这就要说 vue 第二个优势，本身就很精炼，api 长度的精炼，初高中级词汇，react 那是完美继承了 cocoa 又长又臭的命名策略，别人管咋的有 IDE 可以补全你 js 做不到完美啊。vue 的 api 在单词上都要比 react 简单，最基本开发时，基本的三段式任何组件都不能少，当然不改样式 style 段可以不要，template 段就是 html，代码部分直接 export 出一个 data 就可以了，是不是很简单，hooks 好但是不是刚需，前端这种 left-padding 、right-padding 都要用一个库的，现在想起一个组件一个文件麻烦，我信你个大头鬼哦。而且，template 部分堆多的时候，vue 因为循环和判断是直接写在指令里，不会破坏代码的美感，而 react 此时排版都成了问题，必须将大量代码剥离成函数才能保证可读性。最最重要的是，v-if 和 v-for 不需要学习，是可以轻松理解的，只要看到 if 和 for 两个单词，任何一个程序员都知道这是什么。

接下来我们来说 SPA 的事情，什么 SPA 适合 react 开发，我总结了一点，就是设计类软件，无论墨刀、PS 、office （字有位置有大小有颜色，也算半设计），这些软件界面层逻辑非常复杂，需要极致的优化，vue 因为帮你做了太多，没有暴露什么和渲染相关的钩子，所以是不适合的。但是，这并不能说明 vue 性能差，因为想保证良好性能第一点就是不要堆太多 dom 元素，也不要频繁重绘，这对任何框架都是一样的，而提升性能的最大地方，不是你用了什么框架，而是你说服用户从 IE 升级到 chrome，而这一步 360 却做出了很大的贡献，你要知道和别人说 chrome 别人直接蒙了，你让他装个 360 急速浏览器他一看“国产”欣然就给推下去了。我见过一个例子，说是开发了一个货船配重桌面 App，这正好是 vue 的例子，大量的表单填写、数据图表显示不代表复杂，恰恰需要模板的强大，就算放在对话框里他还是填写和展示，底层的逻辑是纯 js 的计算，不涉及什么状态。

然后我们说状态管理的事，vue 提供了一个官方的 vuex，你拿他做全局变量都可以，用起来太简单，甚至不用这个，你用事件一把梭都可以搞定。有人会说了，事件这么乱怎么维护，我们 jquery 过来的会怕这些么，更何况，有些事件就在父子组件之间传递，跨的层级多而已，没必要强求上一个 state，这个东西总结起来，就是用你喜欢、熟悉的，不必为了状态而状态。这里还要提一下 vue 的的响应机制，他通过 getter/setter 以及 array 、object 的函数劫持，不要求你强上不可变对象，这实际上也是减少了学习成本，我大概写了 2 年的 vue，因为不可变对象进坑就一次，那是因为我改了 state 里的东西，state 的监测看起来没有 data 里那么完善，也不像 data 我一次改很多，diff 下来没监测到改动的概率也不大。

很多人会提生态，没错，react 的核心竞争力就是 rn，但是这里的问题在于，rn 有多大竞争力，先不说 rn 里的 native 才是核心，就算 rn 也要踩 native 的坑，还要加上 rn 单独的坑，rn 是移动端代码，各大厂为了引流都在抛弃 wap，桌面和移动端因为操作方式和 UI 逻辑差距巨大，能复用的有限。更不要说，小程序占据了大量轻量级 app 的市场，flutter 还在打着性能和“未来”的旗号想占据 rn 的位置，我知道 rn 胜在入场早，成熟，很多 app 也没那么多苛刻要求，rn 的坑熟悉了就是 feature，但是的却众多因素影响下，rn 的竞争力也有限。而对于 UI 框架，无论 vue 和 react 都有成熟的框架可以用，真正的重头戏，包括企业级 datagrid 、企业级图表、对标 word 的富文本编辑器，都是和框架无关的纯 js 组件，更不要说美观的页面都是设计师做出来的，需要自己定制很多东西。

写到这里，我发现吹的太多，需要总结了。react 在给 vue 传教的时候，犯的一个最大错误就是总以为每个人都在开发高大上的东西，我们就是 HTML BOY，写的就是 CURD 的东西，企业开发和一些普通网站就是翻来覆去这些东西，es6 是你面试必学，但是对于一些场景真不是那么必要，尤其是对于后端来说，别人熟悉模板，模板是好东西不是负担，技术栈比你广多了，没必要要求别人学 es6，就包括说 TS 。是的，TS 作为强类型，可以提供工程化的很多特性，但是企业开发有他自己的开发方式，那就是照着模板页面抄，不去管为什么，因为跟别人像就可以过代码审查，大家就算 low 也是这个公司的编码风格，以后有个高人只要全文搜索就可以把这些地方改了。更何况，很多互联网项目，半年项目甚至公司都没了，你去谈维护、重构，是不是有点想太多。你可能会说，胆小鬼，不思进取，新特性不香么？我知道香，但是负责的说，任何的重构都是有代价需要背锅的，线上系统维护不变但是跑起来没问题，久经考验也是过来的，你去优化去重构，谁给你测试，出了问题你来负责么。有人说 vue 用户在管中窥豹，对不起啊，我的需求就是养猫而已，真没有那么高大上。vue 的下载量和 star 数也证明了这一点，小程序的很多框架也是 vue 语法，说明 vue 在国内的适用性没那么糟糕么。

你问我为啥不说 ng，我用的 ng 还是最早 1，开发 app 选型时是 ng2，tree-shaking 都是测试特性，直接配环境给我配吐了。水平有限不评论了，但是 ng 也是有模板的，而且是*ng-for，还比 vue 长一个字母，不知道 react 开发者怎么评论呢。

[LokiSharp]

@shintendo #100 就看 Vue 3 到时候会不会同时提供面向 TS 和 JS 两份文档了咯，让我们看看 TS 和 JS 之间到底有多少差异？

[LokiSharp]

@shintendo #100
如果他只出了一份那我也可以阴阳怪气的来一句 “事实上 Vue 3 必须用 TS/JS 来开发，因为它的文档和学习资源几乎全部是面向 TS/JS 的。"

[murmur]

@xcstream 真不是先入为主，我们是 vue 和 react 同时开了两个项目，前任负责人因为执迷 backbone，搞得后续几乎失去继续维护的可能，当时为了再出这种问题，我果断脚踩两只船，总不可能这俩框架同时翻车吧

[yuankui]

@mandex
楼主高级黑。

[shintendo]

@LokiSharp
只提供 ts 文档……我觉得你可能把 ts 在 vue3 里的重要性想太高了。
只提供 js 文档……现在不也是吗？这有什么问题？

[zhouzm]

当项目的框架搭好后。剩下的工作就是加菜单，加功能，最后还不是要 api 、model 、template 还有文档 对字段，字段一多对瞎眼。
这种情况下到底是用 vue 、react 、ng 效率其实相差无几，有个合适的代码生成器比啥都强。

[charlie21]

你已经说了 “把开发者当做用户，考虑用户从上手到开发的每一步”，说明这就是浅潭，比的就是谁更傻瓜化，嗯

[a4854857]

楼主的工作真开心.不仅基本上任何一个 v 站热门帖都能看到你.甚至还能主动开团..

[toacnme]

刚刚随便搜了几个 Vue 和 React 之间的争议,发现楼主都陷入其中,哈哈

[LokiSharp]

@shintendo #105 "Angular 事实上必须用 TypeScript 来开发，因为它的文档和学习资源几乎全部是面向 TS 的。"
我的理解是 Angular 没有面向 JS 的文档，所以不能 JS 开发，没错吧？
那么假设 Vue 3 没有面向 TS 的文档，用同样的逻辑来思考，Vue 3 不能 TS 开发，没错吧？

[slclub]

vue 看着就挺舒服

[96412hj]

后端 curd 警告⚠️

[shintendo]

@LokiSharp 你这个逻辑的问题在于，JS 和 TS 并不是对等的两个东西，JS 是标准而 TS 不是（用标准这个词可能不太准确，懂我意思就行），一个前端开发框架要求你会 TS，和一个前端开发框架要求你会 JS，这两个要求是同等性质的吗？显然不是。
以 Vue 举例，它的模版支持 pug，样式支持 sass，但它并没有写出四个版本的文档来教你 html+css,html+sass,pug+css,pug+sass 分别怎么写（没有任何框架会这么写文档），它只是简单提了一嘴说你可以选用 pug 和 sass，你能说它不支持这两个吗？显然不能。
但是反过来，如果 Vue 说我们强烈推荐使用 pug 和 sass，我们的所有教程和文档也都是用这俩，我们认为这是好的实践，我们的周边生态也都用的这俩。这时即便它理论上支持原生 html 和 css，你也可以说它“事实上必须用 pug 和 sass 开发”，并以此作为 vue 学习曲线高的一个点来说，我不会觉得有任何问题。
因为 html 和 pug 不是同等的要求，css 和 sass 也不是同等的要求。

[faceRollingKB]

@LokiSharp 没必要在这里争下去，用了 ng 的人不会因为这个帖子用回 vue，用了 vue 的人也不可能因为你说 ng 比 vue 好就会听你的；现实就是，项目里面用到了 vue，只能忍着 vue 的各种缺点用下去；项目里面用了 ng，也只能一边骂一边看文档一边写，然后就不想用 vue 了

[LokiSharp]

@shintendo #113

你的逻辑从一开始就不成立，Angular 本身就没有要求你会 TS，文档里也说了 latest JavaScript(指 ES6)
还有一个概念的错误 ES 才是标准 JS 和 TS 都是 ES 的实现

https://angular.io/docs
”These docs assume that you are already familiar with HTML, CSS, JavaScript, and some of the tools from the latest standards, such as classes and modules. The code samples are written using TypeScript. Most Angular code can be written with just the latest JavaScript, using types for dependency injection, and using decorators for metadata.“

所以你的意思是 Angular 的文档说了只能用 TS 了？ 只是要求你会 ES6 而已。那么为什么 Vue 文档里对比就要这么阴阳怪气来一句 "Angular 事实上必须用 TypeScript 来开发，因为它的文档和学习资源几乎全部是面向 TS 的。"?

[miniwade514]

看得出来，楼主真的很爱 Vue 和安卓，因为几乎每个相关的帖子都能看到你。😂（无贬义）
这篇帖子的内容还是挺实在的，看得出是基于大量的实践经验的总结。不足之处是里面提到太多技术细节了，不熟悉 Vue 的人看了之后不明白你在说什么，可能还是体会不到你想表达的优点。主帖说得最好的一点，就是团队构成是影响技术选型的最重要的因素。
以前用 Vue1.0 写过一个移动端的表单项目，当时感觉 computed 用来做表单联动和校验真是太方便了。再后来就用了几年的 React 。用熟练了，有新项目肯定还是会选择用它，但是不代表哪个比哪个更好。甚至也没必要去分析对比，对个人而言，熟练就是最大的优势。

[LokiSharp]

@shintendo #113 不要扯这些乱七八糟的，我说这个两套 JS/TS 文档只是想顺着逻辑讽刺”它的文档和学习资源几乎全部是面向 TS 的“

[shintendo]

@LokiSharp
“还有一个概念的错误 ES 才是标准 JS 和 TS 都是 ES 的实现”
---------
我后面不是有括号吗？这里标准一词并不是术语意义上的，是字面意义上的，你也可以理解为 default 。

“所以你的意思是 Angular 的文档说了只能用 TS 了？”
---------
我不知道你是怎么“所以”出来的，敢情我这么多都白说了。

“Angular 本身就没有要求你会 TS”
---------
我从来没说 Angular 要求你会 TS，我说的是要求你会 TS 和要求你会 JS 这两个要求并不对等，因此你在 110 楼所说的“同等逻辑”不成立，仅此而已。

至于 Angular 到底要不要求学 TypeScript，我前面都说了，取决于你对“事实上”的理解，跟说 Vue 要求学模版指令、说 React 要求学 jsx 是一个性质。是不是必须？不是。是不是主流实践？是。
而且 vue 文档在你这句后面明明就有补充说明，也不存在误导读者以为 angular 不能用 es 写的嫌疑。
讨论技术文档，有事实错误就指出事实错误，不用整“阴阳怪气”这种情绪词，让人笑话。

[shintendo]

@LokiSharp ts 之于 js，就是 pug 之于 html，sass 之于 css 。一个框架的官方文档用 html，css 写，然后告诉你也支持 pug，sass，这是正常的。一个框架的官方文档用 pug，sass 写，然后告诉你也支持 html，css，这是异常的，尤其是在此影响下的周边教程主流生态几乎都是 pug，sass 写的，这时候你说它“事实上要求使用 pug，sass”有问题吗？我觉得一点问题没有，即使它确实支持 html，css 。
我这例子就是针对 110 楼的“同等逻辑”，指出其并不同等。在你眼里成一堆乱七八糟的了

[LokiSharp]

1. ”JS 是标准而 TS 不是（用标准这个词可能不太准确，懂我意思就行）“
如果你说的标准不是术语上的标准那我就不知道你的标准是什么意思了，是双重的那种么？

2. 3. "一个前端开发框架要求你会 TS，和一个前端开发框架要求你会 JS，这两个要求是同等性质的吗？"

不要偷换概念，你说的"一个前端开发框架要求你会 TS”，如果你想说的不是 Angular 请告诉我你指的是什么框架？

Vue 文档明确说了 “Angular 事实上必须用 TypeScript 来开发，因为它的文档和学习资源几乎全部是面向 TS 的。”我好像没看到有什么补充说明说明 Angular 也可以用 JS 开发。我就看到他补了一句 “因为在不用 TS 的情况下使用 Angular 会很有挑战性。”

事实上有一部分 Vue 粉丝（或者说初学者）认为 Angular 学习路线陡峭的点一大部分是因为 Vue 文档这里暗示的 Angular 用 JS 开发会很有挑战性。

[hahaayaoyaoyao]

@LokiSharp 事实上有一部分 Vue 粉丝（或者说初学者）认为 Angular 学习路线陡峭的点一大部分是因为 Vue 文档这里暗示的 Angular 用 JS 开发会很有挑战性。


我觉得不是这样, 应该接受不了强类型, 让他们不能够天马行空的写代码

[Mark24]

react 开始变得复杂了

vue 一致性，简洁的优势就被衬托出来了

[yanguangs]

这个问题答案很简单,看下国内 react 跟 vue 的 平均工资就能对比出来了.

面向薪水,面向简历.

[LokiSharp]

@hahaayaoyaoyao 不至于吧，学校里 C/C++ Java Python 总会学一个吧？应该不太会有只想学过的 JS 的

[hahaayaoyaoyao]

@LokiSharp 你太高估有些人了, 他们只是混口饭吃. 要是按你的估计, 我国现在就是人才济济,世界第一了.

[shintendo]

@LokiSharp
如果你说的标准不是术语上的标准那我就不知道你的标准是什么意思了，是双重的那种么？
---------
在你眼里标准这个词只有术语意义吗？没这术语前，中文不说这个词？

不要偷换概念，你说的"一个前端开发框架要求你会 TS”，如果你想说的不是 Angular 请告诉我你指的是什么框架？
---------
我不得不开始怀疑你的〇〇了…… [我从来没说 Angular 要求你会 TS，我说的是要求你会 TS 和要求你会 JS 这两个要求并不对等，因此你在 110 楼所说的“同等逻辑”不成立] 这句话这么难看懂吗？再让我解释我也只能复读这句，因为已经说得不能再清楚了。

事实上有一部分 Vue 粉丝（或者说初学者）认为 Angular 学习路线陡峭的点一大部分是因为 Vue 文档这里暗示的 Angular 用 JS 开发会很有挑战性。
----------
请不要意淫了，Angular 学习曲线陡峭明明就是几乎公认的事情，这还能甩锅给 Vue 的文档？你太看得起 Vue 文档的影响力了，你谷歌搜一下 Angular learning curving 看看有几个说不陡峭的？

[yeze322]

1. React 门槛较高，上全家桶对团队有要求，灵活性的代价。FB 改开源协议黑历史。
2. Angular1 -> 2 把自己作死了，很多人最多听个名字。历史贡献在于布道 RxJS + TS 。
3. Vue 博取众长，并提供了中文文档，简化了工具链。

必须要承认 Vue 的贡献，但是也没必要尬吹。
JS 圈有流量至上的风气，用哪个框架都一样。最后你们还不是大把时间调 CSS ？

[LokiSharp]

@shintendo 算了，不浪费时间了，你已经被 Vue 粉的学习陡峭论洗脑了，前端除了用 Vue + JS 以外都陡峭😂😂😂

[LokiSharp]

@hahaayaoyaoyao 好吧，可能 TS 真的对没系统学过编程的人有难度

[shintendo]

@LokiSharp
真就全世界人均 Vue 粉呗，Angular 学习曲线陡峭要怪 Vue 的文档，也是耳目一新了
https://i.loli.net/2020/05/13/eUkuYKw1fVHNFGS.jpg

[krzover]

字太多，不想看😂

[LokiSharp]

@shintendo 算了，每个人的需求都不同。满足楼主 4 个限定的项目上 Angular 确实是太为难人了。Vue 确实适合作为这种传统后端渲染 + JQuery 模式的替代品

[cco]

小孩子才做选择，大人我都要。

[sunorg]

为啥看完后我这个后端想入手 ng ?

[royzxq]

本底层开发 vue/react/ng 不挑。。 不太懂你们娱乐圈的风气

[royzxq]

#135 底层 = 食物链底端 ...

[IWSR]

洗脑论真好用啊。。。

[skyleft]

不懂就问，为什么称苹果为林檎

[murmur]

@skyleft 日语里林檎就是苹果，一种阴阳怪气的说法