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

爱喝羊奶
542 阅读9分钟

简介

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

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

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

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

image.png

Vue2

Vue2 组件通信共有12种

  1. props
  2. $emit / v-on
  3. .sync
  4. v-model
  5. ref
  6. $children / $parent
  7. $attrs / $listeners
  8. provide / inject
  9. EventBus
  10. Vuex
  11. $root
  12. 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，计算一个新属性给子组件使用，而不是直接修改。

image.png

image.png

一、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;

五、总结

综上所述，使用React构建现代Web应用程序是一个明智的选择。React为我们提供了高效的状态管理和灵活的组件化编程能力。无论是小型项目还是大型企业级应用，React都能满足不同的开发需求。希望这篇文章能为你带来有价值的启示，助力你在未来的项目中取得更大的成功！

六、感谢段

最后，衷心感谢每一位读者的关注和支持。这篇文章从构思到完成，离不开许多人的帮助。特别要感谢那些分享宝贵经验和技术见解的社区成员们。你们的反馈和建议使本文更加完善。如果你有任何问题或想法，欢迎随时交流讨论。希望未来我们还能继续一起探索更多有趣的话题。

avatar
文章
阅读
粉丝