Vue3.0 从入门到学会 React

[hoythan]

https://weibo.com/arttechdesign

糟糕的 hooks 还不如 React 。

[qW7bo2FbzbC0]

antd 已经在学了，比较烦的是很多传参的地方都传 object

[hoythan]

@hjahgdthab750 是的，用 3 不如直接一次性过渡到 React，看起来未来的 vue 会 越来越像 React 。

[murmur]

react 是哪里来的秒天秒地的勇气，就是因为没有模板 if 和模板 else 么，选 vue 就是看重了 template，谁在乎那些花花绿绿的东西

[hcyg]

不说了 我要去学 React 了

[xilixjd]

react 的 hooks 才是噩梦，心智负担太大

[momowei]

我倒是觉得比 react 好用太多，react 的 hook 心智模型用好太多坑了把。

[lneoi]

之前看别的介绍说是 Vue3 是比 react 减轻不不少心智负担..不用特地优化什么 还是很期待的

[Hellert]

我怎么觉得用了 Hooks 后，心智负担轻了很多，自定义 hooks 可以代替一些以前写的高阶组件写法，写起来顺畅不少。

[Hanggi]

还是 Angular 一把梭比较爽。

Vue 就是这边学学，那边抄抄。

[murmur]

我来给某吹一下为什么选 vue
首先我们的场景：
1 、大量的表单
2 、大量的表格
3 、复杂的权限控制
4 、前端由后端兼职，基础只有 jquery 甚至 jquery 都写不明白
vue 是怎么解决这个问题
1 、template+原生 css，最低基础要求，和你 html+css+js 没什么区别
2 、填空一样的开发模式，告诉你 data 写什么，method 写什么，computed 写什么，没有 ts 一样拥抱工程化
3 、模板 if 、show 、for 在渲染复杂表单时如腐添翼，即便是添加了大量条件的模板和最终渲染的 html 也相差不离
4 、没有 es6 要求，最低成本，map 什么都不需要你用，会用 for(;;)循环就够了，也不要求写短路这些 trick

完了，至于什么高阶组件，hooks，hoo care?我们是搭积木，谁会在积木上做出更高阶的积木来
vue 的占比已经很好的说明了，这些你们看不上的 curd 页面开发，反倒是很多公司的日常

[hoythan]

@murmur 我就 tm 喜欢给你这种人点赞。

[hoythan]

建议有心组织 fork 一个 vue 2.0 叫 real vue 2.0 继续迭代

[bkmi]

撕逼现场准备？
只听说前端圈子喜欢撕，没想到这就能撕起来。
阴阳怪气警告⚠️

[gouflv]

hooks 不熟的时候，经常把浏览器写崩了，vue 的门槛就低很多

[ddup]

标题笑坏我了

[ddup]

顺便推荐一波 Angular

[ragnaroks]

Angular 退出群聊

[ddup]

@murmur #10 概括来说，就是走群众路线。

[yafoo]

请分析一下 hooks 哪里糟糕了？以及 react hook 的优势？

[MorningStar0]

@murmur 有一说一，前三点场景也没有体现 vue 更优势啊。甚至，复杂的权限控制这个，你确定没有类型声明，3 个月之后还能想起权限字段对应的值么？

[g00001]

react hooks 难学易精，就是上手那一下子有点痛。

[guog]

@murmur 哈哈哈，老哥这说的就是我，后端写前端，能用又快，讲究啥啊

[imnaive]

来源 https://composition-api.vuejs.org/#comparison-with-react-hooks
# Comparison with React Hooks

The function based API provides the same level of logic composition capabilities as React Hooks, but with some important differences. Unlike React hooks, the setup() function is called only once. This means code using Vue's Composition API is:

1. In general more aligned with the intuitions of idiomatic JavaScript code;

2. Not sensitive to call order and can be conditional;

3. Not called repeatedly on each render and produces less GC pressure;

4. Not subject to the issue where useCallback is almost always needed in order to prevent inline handlers causing over-re-rendering of child components;

5. Not subject to the issue where useEffect and useMemo may capture stale variables if the user forgets to pass the correct dependency array. Vue's automated dependency tracking ensures watchers and computed values are always correctly invalidated.

6. We acknowledge the creativity of React Hooks, and it is a major source of inspiration for this proposal. However, the issues mentioned above do exist in its design and we noticed Vue's reactivity model happens to provide a way around them.

[momocraft]

看#10 的描述不像搭积木，更像画画

[hoythan]

vue 主要是對前端开发入门门槛急剧降低，真要是在乎性能而不考虑便捷性的话，选 React 没跑了。

[murmur]

@MorningStar0 企业开发，需求变更是要算钱的，上了生产变动很小的，想起来字段是啥也属于工作量的一部分
流程和人员相关的权限是配出来的，也不需要开发

[Procumbens]

@murmur vue 的占比？在国内可能用 vue 的多点，国际上 react 遥遥领先。
https://existek.com/blog/top-front-end-frameworks-2020/

[MorningStar0]

@murmur 这个描述，让我想起了“js 报错不影响页面展示”的段子。。。。。。我明明提的是关于可维护性的问题，你却回我开发流程和工作量🙃

[murmur]

@Procumbens 那又如何，什么需求就应该用什么框架完成，国外还一堆用 sqlserver 和 windows server 的呢，都快被开除程序员籍了

[murmur]

@MorningStar0 什么叫可维护性，如果我从流程上能控制住需求的不合理变更，自然可以减少后期代码修改
而且互联网项目很多都没资格谈可维护性，半年一年不到公司都没了，还需要维护啥，新技术随便用，管他稳定不稳定反正骗投资人的钱
我们集团 oa 是 vb 写的，现在还跑的好好的，所以你在担心什么可维护性？

[murmur]

说到国外，昨天在知乎上看到个说 sql server 市占比不如 acess 的，这要不是知乎的仲裁委员会撒比，早就祖安问候过去了

[shenyu1996]

@xilixjd 我也觉得不带脑子读 hook 代码实在太难了 还是 vue 2.0 香 太香了

[MorningStar0]

@murmur 很莫名其妙的回复，我以为我们讨论的是复杂权限控制在不引入类型声明的情况下，会普遍导致系统的可维护性下降的问题。
结果你却说，在你提到的特定场景下，基本不需要系统的维护。难道用 vue 是只需要解决这个特定的场景么？显然不是的。

[frankwei777]

hoc 的时代终于可以过去了 hooks 真香

[murmur]

@MorningStar0 php 是弱类型语言，python 是弱类型语言，强类型是好东西，但是强类型不是灵丹妙药，解决变量和代码逻辑没法对应的方法很多，在前端部分定义 ts 可以解决问题，但是解决不了全部问题
如果说强类型是万能药，那么 java 和 c#应该是世界上最好的后端语言，大厂出品，天生强类型，教科书一样的语法，宇宙级 IDE，实际上呢？
前端和后端这不是跑题，前端的代码难维护，那么 js 写的后端是不是也同样会有类似的问题？

[murmur]

@MorningStar0 如果你还不明白维护性是什么，我们的另外一个系统，react15 的版本，redux 都没用，用的事件和全局变量解决的子-父交互，运行了三年多了，也好好的，方法总比问题多

[henmeiweide]

在上个公司项目写了半年 vue2 + composition-api （上生产环境）, 很香啊，稍微多写一段时间认识到运行机制后（ 比如意识到 setup 里的东西都只是运行一次、render 函数里的才是每次都运行。这和 react 函数组件整体作为 render 函数还是有很大差别的）代码就很容易优化，也会觉得写组件就像是写有前因后果的故事啦。然后个人没必要多做比较，都挺好的，vue3 composition api 和 react hook 都需要一定的学习成本，但是做这行的不就是要学嘛（手动狗头保命）

[MorningStar0]

@murmur 所以，难道是我们对”可维护性的“这个概念有不同的理解么？？？变量全是无语义的字符组成的程序也可以运行三年不出问题，但是你能基于这个版本继续推进下去么？
还有,强类型虽然不是万能药，但是你能否认强类型在可维护性这个方面提供的强大支撑么。
再说 java （或者还有 c++）难道不是大型工程常用语言么，如今连 facebook 都是是用 hack 作为后端，这难道不能说明弱类型语言在需要大量迭代的项目中的劣势么?
最后，说到底你前面举的两个例子，哪一个是需要高可维护性的项目么？或者说的更直接些，这两个项目难道需要每周进行迭代么？

[murmur]

@MorningStar0 “甚至，复杂的权限控制这个，你确定没有类型声明，3 个月之后还能想起权限字段对应的值么？”你能不能解释下这句话
我感觉被你说的莫名其妙，权限控制是需求，这个不能砍，那么 react 和 vue 解决有大区别？

[u6pM63mMZ34z32cE]

Vanilla JS: 我不是针对谁, 我是指在座的各位, 都是垃圾

[fanfou]

我就是饿死，也不会用 React 。唉呀妈呀，react hook 真香~~

[lolizeppelin]

@murmur

你这是写过 css 用过 jq 的后端

完全不写 css 、jq 的后端更喜欢 react

[murmur]

@lolizeppelin vue 和 react 的最大书写体验差在 template 和 jsx 上，而不是 css 和 jq 部分，在页面逻辑复杂的时候，jsx 单一个对齐都成了奢望

[maplelin]

vue 和 react 的区别尤大都不知道做过多少次演讲了，react 和 vue 在不同场景下各有优势，vue 的开发初衷也不是取代 react，不知道楼上撕个什么，饭圈文化搞到技术圈子里？

[murmur]

@maplelin 楼主上来一个 vue3 不如学 react 是白说的么，什么叫饭圈文化，遇到喜欢的框架出来说两句都不让了？

[zlgodpig]

1. react 的更新机制是基于引用相等(referential equality)，vue 是变更检查去更新界面，更新机制不同，导致使用上思路有很多不同
2. 我没看到过有评测文章，支持 react 比 vue 的性能好。相反，在考虑类似印度市场这样的网络，vue 的尺寸在首屏加载上，是有优势的

[shintendo]

@lolizeppelin 不明白，写 react 不用懂 css ？

[Ritr]

@murmur 你还真是说对了

[MorningStar0]

@murmur 首先这不是用 vue 或者 react 的问题，而是需不需要类型声明来进行约束的问题。就比如 react 本身在开发的时候并没有使用 ts 而是使用 flow 来做的约束。
其次，权限字段又不是只有一个值，对于前端开发来讲，可以通过 TS 的类型约束，明确这个字段对应的值的范围例如
type rootLevel = 0 | 1 | 2;
这样 rootLevel 的范围就确定了下来，后续开发用到这个变量时会直接规约到这个范围内。这样的特性明显提升了后续开发的效率

[zhwithsweet]

前端就是戏精多。xb: 我就问你有什么影响？

[chniccs]

业务上需要啥我就用啥，啥方便我就用啥。有什么好差之分呢。

[KuroNekoFan]

我写 react hooks 几个月，useEffect 确实让我想起来 vue 的 data driven

[KuroNekoFan]

@yafoo 糟糕就是指对 js 作为一种语言的要求很高

[Resource]

笑死，前端粉圈化？

[mooyo]

这都能吵起来...娱乐圈实锤了.

[tikazyq]

其实差不多，看团队擅长哪种

[ccyu220]

不了解框架的区别就去实战做一两个项目，这样优缺点不久很明目了？
弱智才选这选那，都会不就行了。。。

[cokyhe]

标题有意思

[hoythan]

明明是中国人用的命，得了给全世界用的病。

[lolizeppelin]

@murmur

这么说吧, 学 react 需要更少的 html 知识
只要知道 div 和有限的几个 style 就可以上手了

对于完全没有前端基础的人来说 react 入门更简单

[mars0prince]

之前抢先体验了一波 composition API，后来那个项目再也没有兄弟愿意接手了。。结果我们现在又回到 vue2 了

[shintendo]

@lolizeppelin div 一把梭跟 react 有什么关系

[windychen0]

@murmur 给老哥点赞了

[littlebaozi]

逐渐饭圈化。爱用谁用谁，行不行

[zhw2590582]

又到了喜闻乐见的框架撕逼环节了吗

[dilu]

作为后端的我，jqeury 一把梭

坐看贵圈这一波大战

[itning]

Angular 还是好一些 ，写 Vue 和 React 总感觉在搭积木

[xichengh]

给我撕

[orozot]

@hoythan 考虑性能选 React ？你认真的？ react 没搞 fiber 之前性能就是一坨屎

[dodo2012]

Angular 哭晕在墙角，Y 的我当年用 ts 被骂成🐶一样，现在一个个都真香起来

[TsuiiusT]

react 更灵活，概念更少，生态也更好，除了 redux 很难用。当然，这些框架终究要被 web 标准代替，只是个过渡

[serenader]

@MorningStar0 我觉得你没必要跟某 m 开头的用户争论了，你会发现跟他交流简直就是对牛弹琴。

Vue 确实对新手友好没错，而且对国人开发者很友好，但是他提到的几个点我完全 get 不到 Vue 的优势。至于你跟他讨论的过程我看了都要替你心塞。。。

btw，逛 V 站这么久，凡是前端框架相关的讨论，或者 iPhone vs Android，或者 MacBook vs Windows 笔记本，你都能看到他的“精彩”言论。

如果 V 站有点“踩”的功能的话，我觉得我很有可能给他的每个回答都点踩。。。

[Rwing]

卧槽，逛 v 站这么久，第一次见到 60 个赞的回复

[beyondex]

Angular 一把梭。

[murmur]

@serenader 总是有一些奇怪的人，他天生带着一股信仰，所以什么东西的好都可以视而不见
windows 的市占比大于 osx，他不承认 windows 的好
android 的市占比比大于 ios，他不承认安卓手机够用
vue 作为一人扛大梁，华裔做招牌的框架，在一堆大公司主导的框架开发中创出了一席之地，现在他又不承认 vue 的好了

[FreshOldMan]

学过一遍 react native 懒得学其他了，直接 react

[beginor]

坚持 ng 不动摇🤣

[murmur]

vue 的优点在哪里，我来继续给你吹。

首先 vue 完美传承了前端的技术路线，css 、js 、html，一切都是你熟悉的东西，只不过现在以工程化的东西给你拼一起了
前端最重要的是给别人看，如果你的项目是展示优先，交互第二，那么 vue 非常适合你，因为你会在 html 部分，也就是 vue 的 template 部分有非常大的工作量

很多人吹前端，都必须带上状态管理，但是你必须知道，页面多、元素多不等于复杂，一切能用多页面、iframe 、子模块拆分的方式实现的东西，再多也不叫复杂，这些东西归根结底还是页面部分工作量大，可能交互就是一两个按钮、点几个链接。如果你有这种需求，那你就能享受到 vue 的好，react 的 jsx 没有源生的 for 、if，那意味着你必须用 map 和短路运算完成这些操作，一个两个还可以，等你逻辑多了，render 部分光代码对齐都是一种奢望，美观度要被 vue 锤上天。

你也许会说，map 和短路，className 这些东西，不是源生的 js 么？恰恰因为前端三段式加起来东西太多，要学的太多，所以 vue 以一种独特的方式帮你减少了学习方式：

首先 vue 在模板标签设计的时候，沿用了 html 的标签名，你写 class，style，在 vue 里依然是 class，style，className 是什么？现在不是鼓励不直接操作 dom 么，你可以不知道。在命名上，vue 处处闪耀着以人为本的光辉，所谓的学习成本，不过是水到渠来，不学就会了，几乎所有的语言都有 if 、for，那么模板就给你 v-if 和 v-for，at 这个符号有在。。的意思，那么 at 加上事件就是在这个事件触发的时候调用什么。同理，你会发现 vue 的 api 设计非常简练，不像 react 的 api，一看就是 cocoa 那套又长又臭的命名方式，没个自动补全都打不对。

vue 为什么有市场？因为大家的需求就这么单纯，今天说 SPA，明天说 SPA，真正人人在用的 SPA 有几个，的却，如果你想开发 SPA，那么 react 、angular 可能更适合你，但是转念一想，SPA 的目的是要取代一部分桌面应用，然而这些桌面应用都是深耕了行业几十年，谁没年独家本领，连同样对手都打不过，SPA 拿什么去斗？技术路线吹上天，最后做出来的东西就是一个简单的内容展示系统，至于么？

关于 mixin 和高阶组件这些东西，我早就说过，（业务开发）前端太面向对象是反直觉的，在开源框架、现有解决方案完善的今天，组合模式做的加法才是正确的方式，我需要一台车，那么我只需要购买引擎、车体、轮胎，组装起来就有一台车，如果有空调，那就加一台空调进去，而不是我先找一个抽象的 vehicle，然后继承得到一个 car，最后再继承一下得到更高阶的 sports-car，现有的框架已经能给我 sports-car，一个参数控制速度，即可以买菜又可以飙车，我为什么要 vehicle 和 car 这些东西？

对这三个框架，我想了如下的比喻

angular 是一个施工队，几乎无所不能，但是太重了，我挖了水井没必要请一批人来
vue 是一套规范指南，你要在我给定的要求下开发，虽然你失去了一部分，可能也不是最炫酷的，但是按着要求做就可以盖起房子来，而且不会那么容易就塌掉
react 是一套力学和建筑学教材，最贴近原始理论，给你最大的自由，没有什么约束，但是实际搞起来自由是要付出代价的

[fancy2020]

@yafoo Hooks 一时爽，useCallback 火葬场

[Hanggi]

@murmur ivy 了解下

[murmur]

@Hanggi 不好意思，我是唯星主义这，ivy 你说的是 ivyframework 还是 apache ivy?

[Greenm]

前端我不懂，但是我要得罪你一下，python 是强类型，和 php, js 不同。

[jmyz0455]

@murmur 说的场景还是挺贴合国内公司开发日常的。传参类型、参数作用，这不是注释就可以解决的事情嚒，哪怕原生 js 或者 jq 一把梭也可以做到的。我写过一个工厂的内部项目，客户指明要兼容 ie8 和用 jq，基本通用方法一写好，老是老了点但是跑起来一点问题都没有，三年过去了维护者看着我的文档去改也没事，维护性还是交给人去处理的，而不是工具。

[lane1]

@murmur 点赞，但 care 要加 s(

[guolaopi]

前端娱乐圈日常撕，说下我的看法。

做后端的，主要用 vue，新建也倾向于 vue （ 2.x ），
也写过一些 react，觉得也有很多吸引我的地方，对前端了解不深随便说一下。
1.数据流问题，vue 的双向绑定有时会出现玄学 bug （也可能是我菜） react 的 setState 相对好些，就是代码多点。

2.组件抽象，如果只有两个 div 嵌套的组件，在 react 里很容易就在同一个文件里封装成一个函数组件，且直接 export 就可以给别处用，vue 里则要新建个 x.vue 文件，template 啥的写一套（可能也有类似的方法我不知道吧，我见过的都是 div 套一个 img 的 avatar.vue 这种）代码量 vue 多一些，但是文件结构上 vue 更清晰，仁者见仁吧。

3.关于 react 的 jsx，讲真 react 让我有点爱上了 js，all in js 的哲学某个角度上戳到了我的点，说句不好听的，在用 react 之前我都不知道 js 的展开运算符和解构。。。vue 撸东西确实快，但是就个人而言，react 更酷，而且 map 循环渲染一点也不奇怪，如果你愿意，甚至可以直接写 for 循环，花括号里写 html，对于后端来说更像前后端没分离时候的模版语法。


总之，目前来说，干活我选 vue，自己折腾我选 react 。

[guolaopi]

@guolaopi #85
另外 react 生命周期函数里那个 shouldUpdate 当时觉得有点惊艳，后来好像废弃了。。

[lbyo]

@serenader #61 因为没看到这个人的回复，所以很好奇怎么回事，看到有人艾特他，就点进了他的主页，哦，已经 Block 了啊，那没事了

[Mutoo]

前端这几年的趋势是逐渐靠拢函数式编程(FP, functional programming)，并且 vue 还在学习 react 的路上。

如果前端开发对 FP 没什么概念，很难理解 High order component，side effect 之类的东西。

react 的 hooks 把 Component 与 Side effect 分离，这种分离是比模版 /数据分离更胜一筹的进步。所以 vue 的作者看了后也一心想把这部分抄过去是很正常的。

但是 Vue 底层的 two-way binding 实现(defineReactive) 本质上让 side effect 很难根除，所以当 react hooks 出来的时候，我就毅然而然从 vue 转 react 了。

[chengxy]

angular 骂骂咧咧的离开了群聊

[calabash519]

@hoythan 当你不满意的时候，你就去改变它，不去改变在这里 bb 啥？

[alleluya]

@zhwithsweet 哪里都有刀斯林 就是不在 DOTA 里? 哈哈

[Hanggi]

@murmur 唯星没问题，但是感觉国内用户参与多的项目，星星数需要打个折，没问题吧？
不跑题，我说的是 Angular ivy，可以了解下。

[Keyes]

@chengxy hhhhhh 同退群

[djs]

爱用啥用啥，公司让用啥就用啥，都是工具而已

[jon]

不是很懂你们前端圈

[SilentDepth]

真心的啊，不是说 React 不好，也不是不理解 React 粉丝维护 React 形象的热情，甚至可以接受黑 Vue 的动机，但有些人黑的实在是没水平，道理不在点上，话也说不明白，令人捉急😓

[dandd134]

日常 b2b 之争

[Hanggi]

@SilentDepth
技术没有好坏，但是 Vue 招人黑感觉主要是两点：
1. 可能是 Vue 一直在抄袭其他主流框架，像 v-if, v-for 这种东西明显从 Angular 抄来的，State, hook 什么的又去山寨 React 。
2. 就是打折国人开发的前端框架的旗号圈粉，刷 github 星星。

不知对不对。

[tomieric]

最近在几个项目用了 ts+compsition api，composable （ hooks ）确实理解不深，但确实好用，说抄也好，比如 ios 有个 app，现在安卓再弄一个同样的，提供了方便。vue3 升级更好支持 ts 和 tree-sheeking

其实对于 vue 和 react 不用尽力去黑，技术栈选择看公司的业务规模。之前选择 vue 作为技术栈是组员都没有 mvvm 框架类似开发经验，从 jq 转过来，大多数切图为主。在业务以后台管理系统为主，持续迭代后，vue 感觉开始吃力，一是生态的插件组件不够丰富，像 element-ui 这种 kpi 项目，团队都跑宇宙条了，剩下维护的人基本不多了。在人员不加情况下，业务线越来越多，更多流水线业务，其实选中 umi+ant 更加跟的上。在做 editor 制作工具复应用上组员引入了 react 的组件，通过 vuera 整合，项目同时存在了 vue 和 react

如果重来，根据我们的业务，会选 react 技术栈吧，无关两种框架优劣，还是从实际出发

[SilentDepth]

@Hanggi #98
老实讲，这些「黑点」真的让人好笑：

1. 别人的好自己的不能学，自己的好别人不能想，这圈子还怎么发展？闭关锁国是政治正确了？退一步讲，Vue 就从 Angular 「拿来主义」了又怎样，Vue 从来也没说这是原创啊。基于类 HTML 属性实现指令系统，Angular 和 Vue 都不是首创，怎么到了 Vue 头上就成抄袭原罪了，看不明白。State 和 Hook 同理。（不过讲真，Vue 和 React 的 State 和 Hook 是一回事吗？）
2. 这个最让人无语了，敢情国人开发是原罪，国人开发的产品在国人圈子里宣传也是原罪。在这一点上我真是可怜肖战，活生生被粉丝消费了。

PS: 我不了解娱乐圈，「肖战」一事只是刷微博时间线看到的，可能有理解错误的地方，仅供举例，大家明白我的意思就好。