首页/文章/八股文

聊聊你知道的Vue与React的区别

2025-03-09

1953 字约 7 分钟

...

面试

文章主要介绍了 Vue 与 React 的区别，包括模板语法（Vue 类似 HTML，React 用 JSX）、组件通信、状态管理、生命周期、diff 算法、页面更新通知方式、监听方式等方面，还阐述了二者早期的问题及不同的解决方式。

1. 模板语法 vs JSX

Vue 使用类似于 HTML 的模板语法，例如：<template> 标签中的模板。

模板示例（Vue）：

<template>
  <div>
    <h1>Hello, world!</h1>
    <my-button @click="handleClick">Click me</my-button>
  </div>
</template>

<script>

Vue.component('my-button', {
  template: '<button><slot></slot></button>'
});

export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>

React 使用 JSX（JavaScript XML）, 它是一种将 HTML 直接嵌入到 JavaScript 代码中的语法。它和Java中的xml十分类似

JSX 示例（React）：

import React from 'react';


const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};


const App = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      <h1>Hello, world!</h1>
      <Button onClick={handleClick}>Click me</Button>
    </div>
  );
};

export default App;

2. 组件通信

在 Vue 中，组件间的通信可以使用 props（父子组件通信）、emit（子父组件通信）、emit（子父组件通信）、attrs/$listeners（特性和事件继承）、Vuex/Pinia（用于大型应用中的状态管理）等。

Vue 组件通信示例：

父组件向子组件传递数据：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Message from parent'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

子组件接收数据：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

在 React 中，组件间的通信主要依赖于 props 和 context，但对于更复杂的应用，可以使用 Redux 或其他状态管理库。

React 组件通信示例：

父组件向子组件传递数据：

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent message="Message from parent" />
      </div>
    );
  }
}

export default ParentComponent;

子组件接收数据：

import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.message}</p>
      </div>
    );
  }
}

export default ChildComponent;

这些示例演示了父组件向子组件传递数据的过程。在 Vue 中，通过 props 将数据传递给子组件；在 React 中，也是通过 props 实现相同的功能。

3. 状态管理

Vue 有 Vuex/Pinia 用于管理应用的状态。
React 没有官方的状态管理库，但有许多第三方库可供选择，最流行的是 Redux。

4. 生命周期

Vue 组件有自己的生命周期钩子，如 created、mounted、updated、destroyed 等，用于在组件生命周期的不同阶段执行代码。
React 组件也有生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount 等，但在 React 16.3 版本后，一些生命周期方法已被标记为过时，推荐使用新的生命周期方法或 React Hooks。

5. diff算法

React 的 diff 算法：

React 使用的是一种基于层级的 diff 算法。当组件的状态发生变化时，React 会比较当前虚拟 DOM 树和上一次更新后的虚拟 DOM 树的差异。
React diff 算法会首先比较两棵树的根节点，如果节点类型不同，则直接删除旧节点，插入新节点；如果节点类型相同，则会继续比较子节点。（核心思想是比较和替换节点）
React diff 算法会使用一些启发式的策略来尽可能地减少 DOM 操作的次数，例如将子节点列表转换为 key-value 的形式，以便更快地找到需要更新的节点。
（必须有key）

Vue 的 diff 算法：

Vue 使用的是一种双端比较的 diff 算法。当组件的状态发生变化时，Vue 会同时从新旧虚拟 DOM 树的两端开始比较，找到最长的相同子序列。
Vue 会对动态节点进行跟踪，如果一个节点在新旧虚拟 DOM 中位置发生了变化，Vue 会尽可能地将其移动到新的位置，而不是删除和重新插入节点。（核心思想是移动复用节点）
Vue 的 diff 算法会通过动态规划的方式找到最优的更新策略，以最小化 DOM 操作的次数。
（可以没有key）