当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > vue >内容正文

vue

今天的考核题目: 你知道react和vue的区别吗? skr，skr -凯发ag旗舰厅登录网址下载

发布时间：2023/12/2 vue 34 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了今天的考核题目: 你知道react和vue的区别吗? skr，skr 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

react 和 vue 的区别

博主面了几家公司，看简历上写着使用vue.js框架，就会问，你能说一说 vue 和 react的区别吗？react 听过，没用过，所以就只能尴尬的说不怎么了解react。这不，最近刚学了react (不断爬坑中)，同时看了些博客文章，当一回搬运工，如有错误，请指出～

简单的自我介绍一下

react是由facebook创建的javascript ui框架，它的诞生改变了javascript世界，最大的一个改变就是react推广了virtual dom，并且创造了新的语法 - jsx，jsx 允许在javascript中写html代码。

vue是由尤大大开发的一个mvvm框架，它采用的是模板系统而不是jsx。

安利一波

virtual dom

一听可能有点懵逼？我也很懵逼。所以我们来看看别人怎么说的：vue.js(2.0版本)与react的其中最大一个相似之处，就是他们都使用了一种叫'virtual dom'的东西。所谓的virtual dom基本上说就是它名字的意思：虚拟dom，dom树的虚拟表现。

virtual dom 是一个映射真实dom的javascript对象，如果我们要改变任何元素的状态，那么是先在virtual dom 上先进行改变，而不是直接地去修改真实的dom。比如在vue中，我们将原来的节点改成这样 :// 原dom

// 修改的dom

我们往p节点中新增了一个span节点，于是我们一个新的virtual dom对象会被创建。然后新的virtual dom 和旧的virtual dom比较，通过diff算法，算出差异，然后这些差异就会被应用在真实的dom上

vue 很“ 嚣张 ”，它宣称可以更快地计算出virtual dom的差异，这是由于它在渲染过程中，由于vue会跟踪每一个组件的依赖收集，通过setter / getter 以及一些函数的劫持，能够精确地知道变化，并在编译过程标记了static静态节点，在接下来新的virtual dom 并且和原来旧的 virtual dom进行比较时候，跳过static静态节点。所以不需要重新渲染整个组件树。

react默认是通过比较引用的方式进行，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如果想避免不必要的子组件重新渲染，你需要在所有可能的地方使用purecomponent，或者手动实现shouldcomponentupdate方法。但是vue中，你可以认定它是默认的优化。

构建工具

react 采用 create-react-app， vue 采用的是vue-cli，这两个工具非常的好用啊，大兄弟，都能为你创建一个好环境，不过create-reacr-app会逼迫你使用webpack和babel，而vue-cli可以按需创建不同的模板，使用起来更加灵活一点

数据流

（这里借用一波言川老铁的图，下边会贴出链接）

很直观的，我们可以看到，在vue2.x中，只能parent -> child <-> dom的形式，而react只能单向传递，react一直提倡的是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，react会重渲染所有的子节点。我们只能通过setstate来改变状态。

模板渲染方式不同

前面说了，vue和react的模板有所区别，react是通过jsx来渲染模板，而vue是通过扩展的html来进行模板的渲染。react通过原生js实现模板中的常见语法，比如说条件啊、循环啊、三元运算符啊等，都是通过js语法实现。而vue是在和组件代码分离的单独模板中，通过指令v-if、v-for等实现。

这里react比较好点，比如我们要引用一个组件，react直接import 引入，然后可以直接在render中调用了，但是！！vue需要import之后，还要在components里去声明，才能用，好气哦～

vuex 和 redux

在vue中，我们是通过vuex进行状态管理，而在react中，我们是通过redux进行状态管理。但是这两者在使用上还是有区别的。

在vuex中，我们可以通过在main.js中，引入 store文件夹，并把store挂载到new vue实例中，这样我们可以直接通过$store灵活使用。

你可以通过dispatch和commit进行更新数据，通过this.$store.state.xx读取数据
或者你可以通过mapstate / mapactions 进行vuex的操作

而在react中，我们需要每一个组件都引入connect，目的就是把props和dispatch连接起来。

另外！！！我们vuex可以直接dispatch action也可以commit update，但是redux只能通过dispatch，然后在reducer里，接收到action，通过判断action的type，从而进行对应的操作，redux不能直接调用reducer进行修改！！

redux使用的是不可变的数据，而vuex的数据是可变的，redux每次修改更新数据，其实就是用新的数据替换旧的数据，而vuex是直接修改原数据redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而vuex其实和vue的原理一样，是通过 getter/setter来比较的，因为在vue实例的时候，进行了依赖收集。

不差上下？

反正我觉得他们两个都好，skr，skr，如果你想做一个小型项目就用vue，想做大型项目就用react，我是不知道怎样算小型，怎样算大型，我随心所欲，想用哪个就用哪个，我不会告诉你，我都是做的个人小项目～

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的今天的考核题目: 你知道react和vue的区别吗? skr，skr的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

区别