Vue与React区别与优缺点

寻一壶醉生梦死丶

已于 2023-05-08 12:01:57 修改

阅读量4.5k

点赞数 31

分类专栏： react Vue 文章标签： vue.js react.js javascript 前端

于 2023-05-07 19:59:39 首次发布

本文链接：https://blog.csdn.net/qq_39715380/article/details/130546125

版权

Vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

react

3 篇文章 0 订阅

订阅专栏

一、区别:

1. 语法

Vue采用自己特有的模板语法；

React是单向的，采用jsx语法创建react元素。

2.监听数据变化的实现原理不同

Vue2.0 通过Object.defineproperty()方法的getter/setter属性, 实现数据劫持, 每次修改完数据会触发diff算法(双端对比)

React默认是通过shouldComponentUpdata生命周期来决定是否需要渲染更新, 再触发它的diff算法(比较引用)如果不优化可能导致大量不必要的VDOM的重新渲染。

为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更好。

3.数据绑定(原理)

Vue是双向绑定的，它最核心的功能有2个: 1. 响应式的数据绑定系统; 2. 组件系统

所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。

vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的；

当改变数据的某个属性值时，会触发set函数,获取该属性值的时候会触发get函数，通过这个特性来实现改变数据时改变视图；

也就是说只有当数据改变时才会触发视图的改变，反过来在操作视图时，只能通过DOM事件来改变数据，再由此来改变视图，以此来实现双向绑定

双向绑定是在同一个组件内，将数据和视图绑定起来，和父子组件之间的通信并无什么关联；

组件之间的通信采用单向数据流是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以vue不推荐子组件修改父组件的数据，直接修改props会抛出警告

思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

React是单向数据流；

react中通过将state（Model层）与View层数据进行双向绑定达数据的实时更新变化，

具体来说就是在View层直接写JS代码Model层中的数据拿过来渲染，一旦像表单操作、触发事件、ajax请求等触发数据变化，则进行双同步。

推崇结合immutable来实现数据不可变。

react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染, 如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate,然后在里面作了props和state的浅层对比;

4. 组件间通信

组件的通信场景无外乎以下几种：

父子之间
兄弟之间
多层级之间（孙子祖父或者更多）
任意组件之间

父子组件之间的通信:

Vue是基于单项数据流设计的框架，但是提供了一些的语法，指令去实现一些操作

父->子：通过props进行传递数据给子组件
子->父：通过emit向父组件传值

同时，还有一些其他进行父子组件通信的方式，通过$parent和$children获取组件的父或者子组件的实例，之后通过实例对象去修改组件的属性。在表单控件中，使用v-model实现了双向数据绑定，其实这里v-model是一个语法糖 ( 实现v-model的原理在下面 )，内部实现还是监听了表单控件的change事件，然后将数据传递给组件修改数据，从而实现了双向数据绑定。

React

父->子：通过props将数据传递给子组件
子->父：通过父组件向子组件传递函数，然后子组件中调用这些函数，利用回调函数实现数据传递

兄弟组件之间的通信:

Vue中，可以通过查找父组件下的子组件实例，然后进行组件进行通信。如this.$parent.$children，在$children中，可以通过组件的name找到要通信的组件，进而进行通信。

React中，需要现将数据传递给父组件，然后父组件再传递给兄弟组件。

多层级组件之间的通信:

在多层级的组件中，当然可以通过不断的获取$parent找到需要传递的祖先级组件，然后进行通信，但是这样繁琐易错，并不推荐。Vue在2.2.0 新增提供了provide/inject的方式进行传递数据。即在祖先组件提供数据，在需要使用的组件中，注入数据，这样就可以在子组件中使用数据了。

// 父级组件提供 'foo'
var Provider = {
 provide: {
  foo: 'bar'
 },
 // ...
}
 
// 子组件注入 'foo'
var Child = {
 inject: ['foo'],
 created () {
  console.log(this.foo) // => "bar"
 }
 // ...
}

React

在React中，提供了一个和Vue类似的处理多层级组件通信的方式——context，这里会提供一个生产者和一个消费者，会在父组件中生产数据，在子组件中消费数据。从使用上来说，只需要将子组件包裹在生产者的Provider中，在需要用到数据的子组件中，通过Consumer包裹，就可以拿到生产者的数据。

// Theme context, default to light theme
const ThemeContext = React.createContext('light');
 
class App extends React.Component {
 render() {
  const {signedInUser, theme} = this.props;
 
  // App component that provides initial context values
  return (
   <ThemeContext.Provider value={theme}>
    <Layout />
   </ThemeContext.Provider>
  );
 }
}
 
function Layout() {
 return (
  <div>
   <Sidebar />
   <Content />
  </div>
 );
}
 
// A component may consume multiple contexts
function Content() {
 return (
  <ThemeContext.Consumer>
   {theme => (
     <ProfilePage theme={theme} />
   )}
  </ThemeContext.Consumer>
 );
}

二、优缺点(待整理)

Vue:

简单、快速、强大、对模块友好，但不支持IE8。

1. 简单：官方文档很清晰，比 Angular 简单易学。

2. 快速：异步批处理方式更新 DOM。

3. 组合：用解耦的、可复用的组件组合你的应用程序。

4. 紧凑：~18kb min+gzip，且无依赖。

5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。

6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

React：

速度快、跨浏览器兼容、模块化；

但学习曲线陡峭，需要深入的知识来构建应用程序。