全解！！！！vue/和react组件

码龄2年

关注

原创最新推荐文章于 2026-04-26 09:02:08 发布 1.1k 阅读 GEO检测

2026年前端框架选型指南：React与Vue四维决策框架前端开发中，框架选型是决定项目技术栈的核心环节。从技术原理看，现代前端框架通过声明式编程和组件化架构，将UI视为状态的函数，实现了高效的数据驱动视图更新。这种范式提升了代码的可维护性和开发效率，是构建复杂Web应用的基础。在工程实践中，框架的响应式系统、生态工具链和团队协作模式直接影响项目的长期技术价值。React以其函数式编程理念和丰富的生态系统著称，适合需要高度定制和复杂状态管理的场景；Vue则凭借渐进式设计和开箱即用的全家桶方案，在快速开发和团队上手方面表现突出。本文聚焦React与Vue的选型决策，阅读详情

简介

Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。

今天我们通过对比的方式来学习Vue和React的组件传值这一部分。

本文首先讲述Vue2、Vue3、React的组件传值方式，然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结了Vue和React在组件传值这部分的相同点和不同点。

希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。

Vue2

Vue2 组件通信共有12种

props
$emit / v-on
.sync
v-model
ref
$children / $parent
$attrs / $listeners
provide / inject
EventBus
Vuex
$root
slot

. `props` 和 `$emit / v-on`

应用场景 1: 父子组件间的数据传递

描述: 使用props从父组件向子组件传递数据，使用v-on监听子组件发出的事件（如点击按钮），然后通过$emit让子组件通知父组件发生的变化。

2. `.sync` 和 `v-model`

应用场景 2: 双向绑定输入框

描述: 在表单元素中，v-model简化了输入框与组件状态之间的双向绑定；对于非表单元素，.sync修饰符允许更简便地实现父组件和子组件间的双向数据绑定。。。。。。。

父子组件通信

props
$emit / v-on
$attrs / $listeners
ref
.sync
v-model
$children / $parent
slot

兄弟组件通信

EventBus
Vuex
$parent

跨层级组件通信

provide/inject
EventBus
Vuex
$attrs / $listeners
$root

具体使用

`props`

props用于父组件向子组件传送数据。

子组件接收到数据之后，不能直接修改父组件的数据。会报错。

当需要修改props的时候应该在父组件修改。父组件修改后子组件会同步渲染。

如果子组件内一定要修改props的话推荐使用 computed，计算一个新属性给子组件使用，而不是直接修改。

一、Vue 组件架构

1. 单文件组件（SFC）

Vue 的核心特性之一是单文件组件（Single File Component, SFC），它将模板（template）、逻辑（script）和样式（style）封装在一个.vue文件中。这种结构不仅提高了代码的可维护性，而且简化了组件之间的依赖管理。

模板：定义组件的HTML结构。
脚本：包含组件的行为逻辑，通常使用JavaScript或TypeScript编写。
样式：可以是普通的CSS，也可以是预处理器如Sass、Less等编写的样式规则。

2. 数据流

Vue遵循单项数据流原则，即父组件通过props向子组件传递数据，而子组件可以通过事件触发更新父组件的状态。

3. 生命周期钩子

Vue提供了丰富的生命周期钩子函数，让开发者可以在组件的不同生命阶段执行特定操作，例如初始化、挂载、更新和卸载。

拥抱组件化思维

在现代前端开发中，组件已经成为最基本的构建单元。与传统的HTML标签相比，组件拥有更强大的功能和更高的复用性。它们通常由HTML结构、CSS样式和JavaScript逻辑组成，形成一个自包含的功能模块。例如，轮播图就是一个典型的功能组件，它可以轻松地嵌入到任何页面中，为用户提供丰富的交互体验。

组件的优势

按功能块划分：便于团队协作分工，每个成员都可以专注于特定的组件开发。这种做法不仅提高了开发效率，还促进了知识共享和技术交流。
高度复用：一旦开发完成，相同的组件可以在多个地方重复使用，减少了冗余代码。复用性是构建大型应用的关键因素之一，因为它能够降低维护成本并加速开发进程。
易于维护：由于组件之间的低耦合度，修改或替换某个组件不会影响其他部分。这使得项目更容易扩展和调整，同时也降低了引入新问题的风险。
良好的可读性：清晰的目录结构和命名规则使得代码更加直观易懂。合理的组织方式有助于新人快速上手，也方便老成员回顾之前的实现细节。

`.vue` 文件格式

Vue采用单文件组件（SFC）的形式，即.vue文件，它将模板（template）、脚本（script）和样式（style）封装在一起，形成了一个完整的开发单位。这种设计不仅简化了文件组织，也促进了开发效率的提升。以下是.vue文件的基本结构：

vue
深色版本
<template>
  <div class="example">
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, World!');
</script>

<style scoped>
.example {
  color: blue;
}
</style>

<template> ：定义组件的HTML结构，支持双花括号语法（{{}}）用于数据绑定。
<script setup> ：包含组件的行为逻辑，通常使用Composition API编写。setup语法糖简化了组件内部的状态管理和事件处理。
<style scoped> ：为组件定义局部样式，scoped属性确保样式只应用于当前组件，避免与其他组件冲突。

四、深入探讨 Vite 和 Vue 3 的高级特性

4.1 插件系统

Vite拥有一个丰富的插件生态系统，允许开发者根据项目需求定制化构建流程。常见的插件用途包括但不限于：

CSS预处理器支持：如PostCSS、Sass、Less等，使样式编写更加灵活和强大。
TypeScript增强：通过类型检查和智能提示提高开发体验。
图像优化：自动压缩图片大小，提升加载速度。
SEO友好：生成元标签、开放图谱（Open Graph）和推特卡片（Twitter Cards）等，改善搜索引擎排名。

4.2 Composition API vs Options API

Vue 3引入了Composition API，它提供了一种更直观的方式来组合逻辑和状态。与传统的Options API相比，Composition API更适合处理复杂的业务场景，尤其是当多个组件之间存在相似的逻辑时。下面是一个简单的对比示例：

Options API 示例

javascript
深色版本
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};

Composition API 示例

javascript
深色版本
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};

Composition API的主要优点在于它允许我们将相关的逻辑集中在一起，从而提高代码的可读性和可维护性。此外，它还支持更好的类型推断，特别适用于TypeScript项目。

4.3 Router 和 Vuex 替代方案

随着Vue 3的发展，官方推出了vue-router和pinia作为路由管理和状态管理的新一代解决方案。虽然vuex仍然是一个可行的选择，但pinia提供了更简洁的API和更好的TypeScript支持，成为推荐的状态管理库。

vue-router：用于定义应用的导航路径和视图切换。它支持动态路由匹配、嵌套路由和懒加载等功能，帮助开发者构建复杂的单页应用（SPA）。
pinia：替代vuex的状态管理库，具有更简单的API和更强的TypeScript兼容性。pinia通过Store来组织和管理全局状态，每个Store都可以独立定义其状态、动作和获取器（getters）。

4.4 TypeScript 支持

Vue 3对TypeScript的支持得到了极大增强，无论是编写组件还是定义状态管理，都可以享受到严格的类型检查和智能提示带来的好处。对于大型项目来说，使用TypeScript可以有效防止潜在的错误，并提高代码的健壮性和可维护性。在现代前端开发中，组件已经成为最基本的构建单元。与传统的HTML标签相比，组件拥有更强大的功能和更高的复用性。它们通常由JSX（JavaScript XML）结构、样式和逻辑组成，形成一个自包含的功能模块。例如，轮播图就是一个典型的功能组件，它可以轻松地嵌入到任何页面中，为用户提供丰富的交互体验。

使用 React 构建现代前端 Web 应用程序

引言

随着前端开发技术的不断发展，构建复杂且高效的Web应用程序已成为开发者们面临的挑战。React作为最受欢迎的JavaScript库之一，以其高效的状态管理和组件化架构赢得了广泛的认可。本文将详细介绍如何使用React构建现代Web应用程序，涵盖从项目初始化到组件设计的最佳实践。

组件的优势

按功能块划分：便于团队协作分工，每个成员都可以专注于特定的组件开发。这种做法不仅提高了开发效率，还促进了知识共享和技术交流。
高度复用：一旦开发完成，相同的组件可以在多个地方重复使用，减少了冗余代码。复用性是构建大型应用的关键因素之一，因为它能够降低维护成本并加速开发进程。
易于维护：由于组件之间的低耦合度，修改或替换某个组件不会影响其他部分。这使得项目更容易扩展和调整，同时也降低了引入新问题的风险。
良好的可读性：清晰的目录结构和命名规则使得代码更加直观易懂。合理的组织方式有助于新人快速上手，也方便老成员回顾之前的实现细节。

JSX 和 TypeScript 支持

React采用JSX语法，这是一种看起来像XML的JavaScript语法糖，使得在JS中嵌入HTML更加直观。此外，React对TypeScript的支持非常友好，无论是编写组件还是定义状态管理，都可以享受到严格的类型检查和智能提示带来的好处。对于大型项目来说，使用TypeScript可以有效防止潜在的错误，并提高代码的健壮性和可维护性。

jsx
深色版本
// MyComponent.tsx
import React, { useState } from 'react';

interface Props {
  title: string;
}

const MyComponent: React.FC<Props> = ({ title }) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{title}</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default MyComponent;