首页 > 其他分享 >全解！！！！vue/和react组件

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

时间：2024-12-23 17:56:34浏览次数：9  
标签：API React vue TypeScript react Vue 组件 全解

简介

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

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

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

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

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，计算一个新属性给子组件使用，而不是直接修改。

 

一、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都能满足不同的开发需求。希望这篇文章能为你带来有价值的启示，助力你在未来的项目中取得更大的成功！

六、感谢段

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

原文：https://juejin.cn/post/7451062757065818163

标签：API,React,vue,TypeScript,react,Vue,组件,全解
From： https://blog.csdn.net/gaotlantis/article/details/144673445

相关文章

  • Java项目实战之基于 Spring Boot、MyBatis 和 Vue.js 的智能停车场系统设计与技术选型
    1.系统概述本智能停车场系统旨在为停车场提供高效、便捷的管理解决方案，涵盖车辆进出管理、车位预订、停车费用计算、用户信息管理等功能，同时提供管理员操作界面和用户移动端应用，提升停车场运营效率和用户体验。1.1目标实现停车场自动化管理，提高车位利用率，减少人工成本，为用户提......
  • Vue3——生命周期
    生命周期分为四个阶段：创建、挂载、更新、销毁（卸载）Vue2:创建阶段：beforeCreate、created挂载阶段：beforeMount、mounted更新阶段：beforeUpdate、updated销毁阶段：beforeDestroy、destroyedvue3：创建阶段：setup挂载阶段：onBeforeMount、onMounted......
  • Vite创建Vue3工程并引入ElementPlus（图文详细）
    Vite创建Vue3工程并引入ElementPlus（图文详细）1Vite创建Vue3工程请确保本机已经正常安装了node18+以上版本，例如本项目使用18.19.0版本安装多版本node请参考：使用NVM安装管理node版本使用vite创建vue3工，参考vite官网：https://vitejs.cn/vite3-cn/guide/#scaffolding-your-f......
  • Vue 3 指令开发：自定义输入处理指令 v-input
    Vue3指令开发：自定义输入处理指令v-input在现代前端开发中，用户输入的格式化与验证是一个重要的任务。为了提升用户体验，我们可以通过自定义指令来限制用户在输入框内的输入。本文将介绍如何在Vue3中实现一个名为v-input的自定义指令，用于处理不同类型的输入值，包括数字......
  • 构建 LLM 商业应用：迭代升级与关键要素全解析
    摘要：在当今数字化时代，大语言模型（LLM）正深刻改变着商业格局。从智能客服到精准营销，从内容生成到风险预测，LLM的商业应用潜力巨大。然而，要构建高效、可靠的LLM商业应用并非一蹴而就，需要经历系统的迭代步骤，同时充分认识到精准语料的重要性以及掌握有效的语料加工流程。本文将......
  • Vue3——计算属性和监听
    一、computed作用：根据已有的数据计算出新数据，具有缓存性（如果依赖的计算数据不更新就只执行一次，更新再执行）只读写法：letfullName=computed(()=>{return计算结果;})可读可写：letfullName=computed({get(){return计算结果;},set(newVal){//......
  • Vue3——定义响应式数据
    一、ref和reactiveref：可定义基本类型数据和对象类型数据reactive：只能定义对象类型数据区别：·ref创建的变量在script中使用时必须加上.value（可以使用volar插件自动添加.value，步骤：vscode设置->扩展->Vue->勾选DotValue）·reactive重新分配一个新对象，会失去响应式（可以......
  • Vue.js组件通信深度解析：构建高效、灵活的数据流
    Vue.js组件通信深度解析：构建高效、灵活的数据流引言在现代Web开发中，组件化是实现高效、可维护和可扩展代码的关键。Vue.js作为一款流行的前端框架，提供了强大的组件系统，使得开发者可以轻松地创建、注册和管理组件。然而，组件之间的通信是构建复杂应用时不可避免的问题。本文......
  • [Tools] Automate Creating a Local React Project, GitHub Repository, and Live Hos
    It'sfairlytrivialtocreateaReactproject,butthere'salwaysabighurdlebetweencreatingitlocallyandmakingitshareablesothatsomeoneelsecanrunit.ThislessonwalksyouthroughtheprocessofautomatingcreatingaReactproject......
  • Vue3封装一个Element的自定义上传组件
    封装一个ElementPlus的自定义上传组件写在前面，工作中要封装一个文件上传组件，想着以后肯定也能用得到，就给记录了下来文章通篇借鉴的是这位大佬的，有需要的可以去看看https://blog.51cto.com/u_15295608/3527047直接上代码：先看样式：就是这样子了！！！，这是个弹窗的形式，有空我再整......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99