Vue与React有何不同？

)}渲染Vue的渲染是基于模板的(Temple)，写的比较像HTML，对新手比较友好。React使用JS通过嵌套的React.createElement来描述DOM。由于使用React.createElement比较麻烦，React推出了JSX，将一些语法扩展到JS，可以用接近HTML的方式表达React.createElement。JSX比Temple更灵活，可以更方便的在里面添加各种逻辑，调用各种函数生成一些ReactElements，插入到JSX中。Temple没有那么灵活，它本质上是一根绳子。需要用一些指令来完成一些逻辑，比如v-if，v-for，但是更方便性能优化。Vue在生产环境打包时，会预编译Temple，运行时并不会真正针对Temple进行编译。新手友好性Vue比React对新手更友好。首先是文档。文档是开源框架流行程度的重要指标。中文文档上，我觉得Vue写的比React好。当然，这也是我的主观感受。我想可能是因为Vue的作者是中国人。文档内容更符合中国人的习惯，短句也比较多（不知道中文翻译是不是很多vue作者的参与。）。这是Vue文档的一部分：与我们嵌套HTML元素的方式类似，Vue实现了自己的组件模型，允许我们在每个组件中封装自定义内容和逻辑。Vue也适用于原生Web组件。如果你想了解Vue组件和原生WebComponents之间的关系，你可以阅读本章。React的作者是外企，主要是长难句，中文是烦人的翻译口音。例如这个：React不是人为地将标记和逻辑分离到单独的文件中，而是通过将两者存储在称为“组件”的松散耦合单元中来实现关注点分离。我们将在后面的章节中学习更多关于组件的知识。如果你不习惯在JS中使用标记语言，这个会议演讲应该能让你信服。我不得不怪我糟糕的英语。当然，还有其他一些与文章质量和章节组织相关的东西，这些都是比较主观的。那么Vue更接近原生写法。React引入了很多好东西，但是对于新手来说是一个学习成本。比如高阶组件、JSX、React技术的选择就更丰富了。如果是Vue，那么Vue官方已经提供了周边工具包。CSS方案直接使用CSS-Scoped，状态库使用Vuex或者Pina。社区基本没有第三方轮子，即使有，使用率也不高。对于React团队来说，他们把周边库的开发交给社区，这样你就可以收获各种不同的轮子，然后和他们长期斗争。CSS解决方案，可以使用CSS-Module、styled-components、Radium等状态库，可以使用Redux、Mobx、Zustand、Recoiler、Dva等，对于老手来说，选择技术模型需要一点时间，但是对于新手来说，比较各种轮子会给他们带来更多的成本。当你经历过很多项目之后，你会发现Vue的技术选择比较稳定，而React的技术选择是多种多样的。人气React比Vue更受欢迎。React是大公司Facebook（现在改名为Meta，还是不习惯）的一个开源框架，背后有一个团队在维护，每个人都是大老板。Vue更像是一个个人项目。一开始是游于熙一个人在维护。后来虽然有了团队，但大部分的开发工作其实都是游于熙做的。看下图，第一名和第三名的commit数不是一个数量级（第二名是机器人，可以忽略不计）再看React贡献者的commit数据：影响一个项目的未来项目的灵魂，很多项目由于作者的离开而缺乏维护，导致许多未解决的问题。对于Vue来说，它的灵魂就是游鱼溪。对于React来说，它更去中心化，灵魂更去中心化。React的社区解决方案会更多。这也与React比较流行有关，React团队专注于构建React本身。性能Vue优于React。Vue的响应式只能更新必要的组件，性能更好。Vue底层是响应式的，劫持state的读写，进行细粒度的依赖收集。当状态改变时，只有使用它的组件才会更新。React是一种纯粹的单向数据流，数据从父组件流向子组件。当父组件更新时，子组件也会更新，即使这个子组件的状态没有改变。为了跳过这个不必要的渲染，我们需要使用React.memo作为缓存，这需要很大的开销，一不小心就会变成负优化。其实React也可以变得响应式，加入状态管理库，通过发布-订阅模型触发组件更新，但是不能节省性能。Vue是经过编译和优化的。对于渲染模板解决方案，Vue使用Temple而React使用JSX。Vue的Template是可以预编译和优化的。例如，一些DOM元素是硬编码的。在解析模板时，可以标记它们。第n个位置的元素是静态的，所以更新时不需要重建对应的节点和diff。//这是硬编码的，更新时不要重新渲染{{count}}