vue和react的区别？

前言

hello world欢迎来到前端的新世界

---

当前文章系列专栏：前端面试
‍博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)
感谢大家支持！您的观看就是作者创作的动力

核心思想不同

vue

Vue的核心思想是尽可能的降低前端开发的门槛，是一个灵活易用的渐进式双向绑定的MVVM框架。

react

React的核心思想是声明式渲染和组件化、单向数据流，React既不属于MVC也不属于MVVM架构。

组件写法上不同

vue

• 模板：Vue 组件可以使用模板来定义组件的视图结构，也可以通过 JSX 写法来使用渲染函数（render）动态生成视图。在模板中可以直接使用 Vue 的指令和插值语法来处理渲染逻辑。
• 数据：Vue 组件通过组件的数据属性 (data) 来定义组件的状态和行为。数据的变化会自动触发组件重新渲染，从而保证组件视图和数据的同步。
• 生命周期：Vue 的组件具有丰富的生命周期钩子函数，在组件的不同阶段可以执行相应的逻辑，例如 created、mounted、updated、destroyed 等。
• Prop：Vue 组件通过 prop 来定义组件的输入接口，父组件可以将数据传递给子组件。在 prop 中可以定义类型、默认值、验证等属性，使得组件更加健壮和可维护。
• 插槽：Vue 组件支持插槽 (slot) 功能，可以定义组件的占位符，让父组件可以插入不同的内容。插槽可以分为具名插槽和默认插槽，又支持作用域插槽来解决组件复杂次级内容的问题。

react

• JSX：React 组件可以使用 JSX 语法来定义组件的视图结构，甚至将 HTML、CSS 和 JavaScript 的功能全部混合在一起。JSX 语法需要经过转换才能运行在浏览器中。
• 数据：React 组件通过 state 和 props 来定义组件的状态和行为。state 存储组件的内部状态，props 表示组件输入的属性。当 state 或 props 发生变化时，组件会自动重新渲染。
• 生命周期：React 的组件也具有丰富的生命周期钩子函数，在组件的不同阶段可以执行相应的逻辑，例如 componentDidMount、shouldComponentUpdate、componentWillUnmount 等。
• Prop：React 组件通过 prop 来定义组件的输入接口，父组件可以将数据传递给子组件。在 prop 中可以定义类型、默认值等属性，但 React 没有提供验证机制，需要开发者手动实现。
• Children：React 支持 children 属性来处理组件嵌套关系，通过 Children API 可以对 children 进行遍历、过滤和转换等操作，从而灵活控制组件的渲染结果。

Diff算法不同

diff算法

响应式原理的不同

react

Virtual DOM：React 使用 Virtual DOM，即虚拟 DOM，通过比较新旧 Virtual DOM 的差异来减少实际 DOM 操作的次数，提高性能。

单向数据流：React 采用了单向数据流的思想，父组件向子组件传递数据通过 props，子组件要修改父组件的数据需要通过回调函数的方式来实现。

setState：React 组件中的状态通过 setState() 方法进行更新，setState() 会触发组件的重新渲染，在合并多个 setState() 调用时会进行批量处理，从而避免不必要的重渲染。

引用比较：React 的数据变化检测是基于引用比较的，即通过比较前后两次状态对象的引用是否相同来判断是否需要重新渲染组件。

Vue

双向绑定：Vue 支持双向数据绑定，可以通过 v-model 指令实现表单元素和数据模型的双向绑定。当数据发生变化时，视图会自动更新；当视图发生变化时，数据模型也会自动更新。

响应式对象：Vue 利用 Object.defineProperty() 方法来劫持对象的访问和修改，当访问或修改对象的属性时，会触发相应的 getter 和 setter，实现对数据的监听和响应。

依赖追踪：Vue 使用了依赖追踪的机制，它会在模板渲染过程中建立属性与 Watcher 之间的关联，当数据变化时，会通知相应的 Watcher 更新视图。

响应式数组：Vue 对数组的变化也进行了特殊处理，通过重写数组的一些方法（如 push、pop、splice 等），使得这些方法在执行时能够触发视图的更新。

封装程度不同

封装程度，vue封装程度更高，内置多个指令和数据双向绑定，react封装度比较低，适合扩展。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力