当前位置：凯发k8官方网 > 前端技术 > vue >内容正文

vue

今天的考核题目: 你知道react和vue的区别吗? skr，skr -凯发k8官方网

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

凯发k8官方网收集整理的这篇文章主要介绍了今天的考核题目: 你知道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，我是不知道怎样算小型，怎样算大型，我随心所欲，想用哪个就用哪个，我不会告诉你，我都是做的个人小项目～

总结

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

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。

区别