当前位置: 首页 > news >正文

Vue 组件通信全面解析

在这里插入图片描述

Vue 组件通信全面解析:方式、原理、优缺点及最佳实践

在 Vue 开发中,组件通信是一个重要的核心问题。随着应用复杂度的增加,如何在组件之间有效传递数据、触发事件,直接影响代码的可维护性和可扩展性。Vue 提供了多种组件通信方式,每种方式都适合不同的使用场景。本文将系统性解析这些通信方式,从原理优缺点实际开发的最佳实践,全面覆盖。


1. 父子组件通信

父子组件的通信是 Vue 中最常见的场景。通常父组件负责管理状态,子组件是父组件状态的表现层,或者是事件触发器。


1.1 Props 和 $emit

1.1.1 原理
  • Props:用于从父组件向子组件传递数据,是单向绑定的数据流。子组件不能直接修改从父组件传递下来的 props 数据(除非通过事件回传修改)。
  • $emit:用于从子组件向父组件发送事件,父组件可以通过事件监听器接收数据并作出响应。

这种模式建立在父子组件明确的层级关系基础上,是一种强耦合的通信方式。


1.1.2 用法

父组件通过 props 向子组件传递数据,同时监听子组件通过 $emit 发送的事件:

<!-- Parent.vue -->
<template><Child :message="parentMessage" @child-event="handleChildEvent" />
</template><script>
import Child from './Child.vue';export default {data() {return {parentMessage: 'Hello from Parent!',};},methods: {handleChildEvent(payload) {console.log('Received from child:', payload);},},components: { Child },
};
</script>

子组件通过 props 接收数据,同时使用 $emit 发出事件:

<!-- Child.vue -->
<template><div><p>{{ message }}</p><button @click="$emit('child-event', 'Hello Parent!')">Send to Parent</button></div>
</template><script>
export default {props: ['message'],
};
</script>

1.1.3 优缺点
优点缺点
简单直观,适合父子直接通信仅能用于父子组件之间,无法跨层级通信
数据流清晰,逻辑明确当组件层级较深时,频繁传递 props 和事件变得冗余且难以维护
内置支持,学习成本低数据和事件都耦合在父子组件中,组件重用时可能需要重新调整接口定义

**1.2 parent和*p**a**re*n*t*和children

Vue 提供了 $parent$children,可以直接访问父组件和子组件的实例。这是一种强耦合的方式,通常不建议频繁使用。


1.2.1 原理
  • $parent:子组件可以通过该属性访问父组件实例,从而调用父组件方法或访问父组件数据。
  • $children:父组件可以通过该属性访问所有子组件实例。

这是直接操作实例的一种通信方式,与 Vue 的数据驱动理念相悖。


1.2.2 用法

子组件调用父组件方法:

<!-- Parent.vue -->
<template><Child />
</template><script>
import Child from './Child.vue';export default {methods: {parentMethod() {console.log('Called by child');},},components: { Child },
};
</script>
<!-- Child.vue -->
<template><button @click="$parent.parentMethod()">Call Parent Method</button>
</template><script>
export default {};
</script>

1.2.3 优缺点
优点缺点
可以直接访问组件实例的方法破坏组件间的解耦性,增加代码维护复杂度
适用于一些需要快速解决的问题父子耦合严重,组件间的依赖关系不易被识别

2. 跨层级组件通信

跨层级组件通信用于祖先组件和后代组件之间的数据共享,适合需要避免多层级传递的场景。


2.1 Provide 和 Inject

2.1.1 原理
  • provide:在祖先组件中定义数据。
  • inject:在后代组件中接收数据。

这种机制通过隐式的依赖注入,跳过了中间组件的数据传递。


2.1.2 用法

祖先组件定义数据:

<!-- Grandparent.vue -->
<template><Parent />
</template><script>
import Parent from './Parent.vue';export default {provide() {return {sharedData: 'Data from Grandparent',};},components: { Parent },
};
</script>

后代组件接收数据:

<!-- Child.vue -->
<template><p>{{ sharedData }}</p>
</template><script>
export default {inject: ['sharedData'],
};
</script>

2.1.3 优缺点
优点缺点
避免多层 props 传递数据来源不直观,调试困难
提供者和消费者松耦合只能用作静态数据共享,不适合动态通信
适合全局配置信息或上下文对复杂的数据流管理能力较弱

3. 任意组件间通信

当组件之间不存在父子关系或跨层级关系时,任意组件之间的通信变得重要。


3.1 Event Bus

Event Bus 是通过创建一个 Vue 实例作为事件中心,任意组件都可以通过该实例发送和接收事件。


3.1.1 原理
  • 利用 Vue 实例的事件机制($emit$on)来实现组件间的通信。
  • 通过一个公共实例来管理这些事件。

3.1.2 用法

定义事件总线:

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

组件发送事件:

<!-- ComponentA.vue -->
<script>
import { EventBus } from './EventBus';export default {methods: {sendMessage() {EventBus.$emit('custom-event', 'Message from Component A');},},
};
</script>

组件接收事件:

<!-- ComponentB.vue -->
<script>
import { EventBus } from './EventBus';export default {created() {EventBus.$on('custom-event', (payload) => {console.log(payload);});},
};
</script>

3.1.3 优缺点
优点缺点
简单快速,适合小型项目事件流管理混乱,无法跟踪事件依赖关系
实现任意组件之间的通信适合广播型事件,不适合复杂数据传递

4. 全局状态管理

全局状态管理适用于大型项目,能统一管理复杂的状态和逻辑。


4.1 Vuex

Vuex 是 Vue 官方的状态管理工具,提供了集中式的状态存储和操作机制。


4.1.1 原理
  • State:集中存储应用的状态。
  • Mutations:同步修改状态。
  • Actions:用于触发异步操作。
  • Getters:类似计算属性,动态派生状态。

4.1.2 用法

定义全局状态:

// store.js
import Vuex from 'vuex';export default new Vuex.Store({state: {message: 'Global State',},mutations: {updateMessage(state, payload) {state.message = payload;},},
});

组件使用状态:

<template><p>{{ message }}</p><button @click="changeMessage">Update Message</button>
</template><script>
import { mapState, mapMutations } from 'vuex';export default {computed: {...mapState(['message']),},methods: {...mapMutations(['updateMessage']),},
};
</script>

4.1.3 优缺点
优点缺点
结构化管理,适合复杂场景学习成本较高
状态集中管理,易于维护小型项目中显得繁琐
数据流清晰,调试工具支持完善数据和视图的强绑定降低灵活

5. Vue 3 的 Composition API

Composition API 是 Vue 3 的现代开发模式,提供了灵活的响应式共享机制。


5.1 原理

通过 refreactive 创建响应式数据,并通过自定义逻辑封装实现组件间逻辑复用。


5.2 用法

创建共享逻辑:

// useSharedState.js
import { ref } from 'vue';const sharedState = ref('Shared Data');export function useSharedState() {return sharedState;
}

在组件中使用:

<script>
import { useSharedState } from './useSharedState';export default {setup() {const sharedState = useSharedState();return { sharedState };},
};
</script>

5.3 优缺点

优点缺点
灵活高效,逻辑复用性强仅适用于 Vue 3
数据共享清晰,现代开发推荐对 Vue 2 不兼容

6. 通信方式对比及场景建议

通信方式适用场景优点缺点
Props 和 $emit父子组件直接通信简单高效,逻辑清晰无法跨层级
Provide 和 Inject祖先和后代组件数据共享避免多层传递,松耦合数据来源不明确,调试困难
Event Bus任意组件之间简单通信快速实现,灵活性高事件管理复杂,不适合大型项目
Vuex全局状态管理,大型复杂项目状态集中,调试工具支持好学习成本高,小型项目显复杂
Composition APIVue 3 项目逻辑复用和灵活通信简洁灵活,逻辑易于复用仅限 Vue 3 使用

7. 总结与最佳实践

  • 小型项目:优先使用 props$emit 和 Event Bus,轻量化高效。
  • 中型项目:结合 Provide/Inject 和 Vuex,实现清晰的数据流。
  • 大型项目:使用 Vuex 做全局状态管理;Vue 3 项目推荐使用 Composition API。
  • 核心原则:
    1. 数据流清晰,避免过度耦合。
    2. 使用适合场景的通信方式,不滥用工具。
    3. 保持代码的可维护性和灵活性,避免陷入复杂通信结构。

相关文章:

Vue 组件通信全面解析

Vue 组件通信全面解析&#xff1a;方式、原理、优缺点及最佳实践 在 Vue 开发中&#xff0c;组件通信是一个重要的核心问题。随着应用复杂度的增加&#xff0c;如何在组件之间有效传递数据、触发事件&#xff0c;直接影响代码的可维护性和可扩展性。Vue 提供了多种组件通信方式…...

node.js基础学习-express框架-路由及中间件(十)

一、前言 Express 是一个简洁、灵活的 Node.js Web 应用框架。它基于 Node.js 的内置 HTTP 模块构建&#xff0c;提供了一系列用于构建 Web 应用程序和 API 的功能&#xff0c;使开发者能够更高效地处理 HTTP 请求和响应&#xff0c;专注于业务逻辑的实现。 其特点包括简单易用…...

书生浦语第四期--基础岛-第六关

文章目录 使用opencompass进行模型评价配置KEY环境变量以及API模型接口配置数据集进行评测开始评测测评结束 使用opencompass进行模型评价 配置KEY环境变量以及API模型接口 配置数据集进行评测 开始评测 期间可能遇到没有下载的包 例如&#xff0c;我遇到了&#xff1a; No m…...

flinkSql中累计窗口CUMULATE

eventTime package com.bigdata.day08;import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.table.api.bridge.java.StreamTableEnvironment;public class _05_flinkSql_Cumulate_eventTime {/*** 累积窗口 eventTime* …...

Flutter项目初始化android版

1、本机系统环境 window11flutter sdk 版本flutter_windows_3.24.5-stable.zip (下载地址&#xff1a;https://docs.flutter.dev/get-started/install/windows/mobile)android studio 版本 Android Studio Giraffe | 2022.3.1vscode 2、VSCODE 配置flutter 安装flutter插件 …...

深度相机获取实时图像总结

问题详情&#xff1a;之前一直把曝光调整到50000&#xff0c;画面一直很流畅&#xff0c;知道领导要求将曝光改成500000时整个程序卡死了 问题解决&#xff1a; 首先怀疑是帧率太低的原因&#xff0c;控制变量后发现不是帧率的问题&#xff0c;看着代码很迷茫&#xff0c;领导…...

突击检查:Java面试之多线程并发篇(11)

前言 本来想着给自己放松一下&#xff0c;刷刷博客&#xff0c;突然被几道面试题难倒&#xff01;什么是多线程中的上下文切换&#xff1f;什么是Daemon线程&#xff1f;它有什么意义&#xff1f;乐观锁和悲观锁的理解及如何实现&#xff0c;有哪些实现方式&#xff1f;似乎有…...

大数据新视界 -- 大数据大厂之 Hive 临时表与视图:灵活数据处理的技巧(上)(29 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

鸿蒙应用获取wifi连接的ip地址(官方文档获取的格式转换成192.168.1.xxx格式)

目录 一.背景 二.官网流程 wifiManager.getLinkedInfo9+ 三.转换成192.168.xxx.xxx格式 一.背景 本次来学习如何获取到鸿蒙设备连接wifi后的ip地址,由于官网文档中获取的ip地址和我们平时看到的192:168:xxx:xxx有所不同,需要进行下转换,所以记录下,如下的流程是在OpenH…...

Elastic Cloud Serverless:深入探讨大规模自动扩展和性能压力测试

作者&#xff1a;来自 Elastic David Brimley, Jason Bryan, Gareth Ellis 及 Stewart Miles 深入了解 Elasticsearch Cloud Serverless 如何动态扩展以处理海量数据和复杂查询。我们探索其在实际条件下的性能&#xff0c;深入了解其可靠性、效率和可扩展性。 简介 Elastic Cl…...

Leetcode经典题5--轮转数组

题目描述 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 输入输出示例 &#xff1a; 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右…...

【蓝桥杯每日一题】扫雷

扫雷 知识点 2024-12-3 蓝桥杯每日一题 扫雷 dfs &#xff08;bfs也是可行的&#xff09; 题目大意 在一个二维平面上放置这N个炸雷&#xff0c;每个炸雷的信息有$(x_i,y_i,r_i) $&#xff0c;前两个是坐标信息&#xff0c;第三个是爆炸半径。然后会输入M个排雷火箭&#xff0…...

以nlp为例,区分BatchNorm、LayerNorm、GroupNorm、RMSNorm

以nlp中一个小批次数据&#xff0c;详细区分BatchNorm、LayerNorm、GroupNorm、RMSNorm。这几种归一化的不同。如下表格&#xff0c;从计算范围、统计量、计算复杂度以及应用场景等方面的差异给出。 方法计算范围统计量计算复杂度应用场景BatchNorm跨所有句子的同一维度使用批…...

(软件测试文档大全)测试计划,测试报告,测试方案,压力测试报告,性能测试,等保测评,安全扫描测试,日常运维检查测试,功能测试等全下载

1. 引言 1.1. 编写目的 1.2. 项目背景 1.3. 读者对象 1.4. 参考资料 1.5. 术语与缩略语 2. 测试策略 2.1. 测试完成标准 2.2. 测试类型 2.2.1. 功能测试 2.2.2. 性能测试 2.2.3. 安全性与访问控制测试 2.3. 测试工具 3. 测试技术 4. 测试资源 4.1. 人员安排 4.2. 测试环境 4.2.…...

在MySQL中执行sum case when报错:SUM does not exist

1. 报错 在pgsql中能正常运行的一段SQL在MySQL中运行的时候报错了&#xff1a; SELECT DATE( hr.handle_time ) AS statsDate,SUM ( CASE WHEN hma.app_type IN ( 2, 5 ) THEN ch_money ELSE 0 END ) AS aliPayAmt,SUM ( CASE WHEN hma.app_type IN ( 1, 4 ) THEN ch_money EL…...

SQL面试题——日期交叉问题 合并日期重叠的活动

日期交叉问题—合并日期重叠的活动 今天的需求背景和前面我们的一个面试题目的背景一样,只不过是具体的需求变了,可以先看一下我们之前的文章SQL面试题——日期交叉问题 计算活动的总天数 +------+----------+----------+ | id| stt| ett| +------+--------…...

科普文:一文搞懂Postman

1. 概叙 1.1 Postman简介 Postman是一款强大的接口测试工具&#xff0c;‌主要用于测试HTTP请求&#xff0c;‌支持各种HTTP请求方法&#xff0c;‌包括GET、‌POST、‌PUT、‌DELETE等&#xff0c;‌并且提供了丰富的功能来模拟和测试各种网络请求。‌ Postman官网上这样介…...

LearnOpenGL学习(模型加载 -- Assimp,网格,模型)

完整代码见&#xff1a;zaizai77/Cherno-OpenGL: OpenGL 小白学习之路 Assimp 3D建模工具如Blender、3DS Max在导出模型文件时&#xff0c;会自动生成所有的顶点坐标、顶点法线和纹理坐标。 .obj 格式只包含了模型数据和材质信息&#xff08;颜色、贴图等&#xff09; Assi…...

基于Pyhton的人脸识别(Python 3.12+face_recognition库)

使用Python进行人脸编码和比较 简介 在这个教程中&#xff0c;我们将学习如何使用Python和face_recognition库来加载图像、提取人脸编码&#xff0c;并比较两个人脸是否相似。face_recognition库是一个强大的工具&#xff0c;它基于dlib的深度学习模型&#xff0c;可以轻松实…...

Scala的模式匹配(2)

package hfdobject Test34_2 {//match case匹配元组//能根据元组元素的个数来匹配&#xff0c;不是一一精确的匹配值def main(args: Array[String]): Unit {val d1(1,2,3) // val d1(1,2,3,4) // val d1(1,2,3,4,5)val d:Anyd1 //d的类型是Anyd match {case (x,y,z)>…...

Java 初学者的第一个 SpringBoot 系统

Java 初学者的第一个 SpringBoot 系统 对编程初学者而言&#xff0c;都存在一个 “第一个系统” 的问题。有些学习者找不到自己的 “第一个系统”&#xff0c;他们即使再努力也没有办法了解完整的系统&#xff0c;即使他们把教科书里的所有程序都跑通了。但是&#xff0c;面对…...

java IO面试题

目录 Java IO设计上使用了什么设计模式&#xff1f; 你怎么理解同步IO和异步IO? 字节流和字符流的区别? Java 流量有多少种类型? 如何将一个 java 将对象序列化到文件中? 如何实现 java 序列化? Filter流是什么? Filter流有哪些可用? 如何实现对象克隆? BIO、…...

Chocolatey软件包管理工具处理MSI升级的原理与实践

Chocolatey软件包管理工具处理MSI升级的原理与实践 在Windows环境下&#xff0c;Chocolatey作为一款强大的包管理工具&#xff0c;其处理MSI&#xff08;Microsoft Installer&#xff09;格式软件包升级的机制值得深入探讨。本文将详细介绍Chocolatey如何处理MSI升级&#xff…...

Navicat连接SQL Server及SpringBoot连接SQL Server(jtds)

Navicat连接SQL Server 安装自带的SQL Server客户端 去到Navicat安装目录&#xff0c;找到安装程序&#xff0c;安装即可。 安装对应版本的Microsoft ODBC Driver for SQL Server 打开Navicat输入对应的SQL Server相关信息 然后点测试连接&#xff0c;提示连接成功。 Spr…...

【Git】

博文将不断学习补充 Git下载 将下载链接复制到迅雷中&#xff0c;快速下载 Git安装 保持默认&#xff0c;傻瓜安装即可。 注册Gitee码云&#xff0c;设置公钥 在Git Bash中输入 ssh-keygen -t ed25519 -C "Gitee SSH Key" 找到对应的公钥文件 复制公钥&#xff0c;添…...

HttpServletRequest

HttpServletRequest 类确实是一个封装了完整 HTTP 请求信息的对象&#xff0c;而 Spring MVC 提供了更简化的方式来自动映射请求路径、请求参数等信息到控制器方法中。你不必直接使用 HttpServletRequest 来处理大部分常见的请求内容&#xff0c;因为 Spring MVC 会为你自动处理…...

Apache HttpClient 4和5访问没有有效证书的HTTPS

本文将展示如何配置Apache HttpClient 4和5以支持“接受所有”SSL。 目标很简单——访问没有有效证书的HTTPS URL。 SSLPeerUnverifiedException 在未配置SSL的情况下&#xff0c;尝试消费一个HTTPS URL时会遇到以下测试失败&#xff1a; Test void whenHttpsUrlIsConsumed…...

做异端中的异端 -- Emacs裸奔之路7: 怀念Vim的好

组合键的瑕疵 从Vim切换成Emacs之后&#xff0c;有一明显的不适就是感受Emacs的按键很硬&#xff0c; Vim移动是使用一个按完成的&#xff0c;而Emacs是组合键。 如果向前移动一个字&#xff0c;Vim只要在ESC模式下按w&#xff0c;而Emacs是Alt-f. 特别是当你对键盘改键之后不…...

asp.net core过滤器应用

筛选器类型 授权筛选器 授权过滤器是过滤器管道的第一个被执行的过滤器&#xff0c;用于系统授权。一般不会编写自定义的授权过滤器&#xff0c;而是配置授权策略或编写自定义授权策略。简单举个例子。 using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCo…...

VideoBooth: Diffusion-based Video Generation with Image Prompts

VideoBooth: Diffusion-based Video Generation with Image Prompts 概括 文章提出了一个视频生成模型VideoBooth&#xff0c;输入一张图片和一个文本提示词&#xff0c;即可输出保持图片中物体且符合文本提示词要求的视频。 方法 粗-细两阶段设计&#xff1a;1&#xff09;…...

面阵相机的使用和注意事项

引言 面阵相机&#xff08;Area Scan Camera&#xff09;是一种广泛应用于工业视觉、医学成像、安防监控以及科研领域的图像采集设备。与线扫相机不同&#xff0c;面阵相机的传感器包含多行像素&#xff08;例如1280x1024、1920x1080等&#xff09;&#xff0c;能够在一个曝光…...

人工智能与机器学习在智能扭矩系统中的应用

【大家好&#xff0c;我是唐Sun&#xff0c;唐Sun的唐&#xff0c;唐Sun的Sun。】 在当今科技飞速发展的时代&#xff0c;智能扭矩系统正经历着一场深刻的变革&#xff0c;而人工智能&#xff08;AI&#xff09;和机器学习算法的应用成为了推动这一变革的关键力量。 传统的扭矩…...

【附源码】基于环信鸿蒙IM SDK实现一个聊天Demo

项目背景 本项目基于环信IM 鸿蒙SDK 打造的鸿蒙IM Demo&#xff0c;完全适配HarmonyOS NEXT系统&#xff0c;实现了发送消息&#xff0c;添加好友等基础功能。代码开源&#xff0c;功能简洁&#xff0c;如果您有类似开发需求可以参考。 源码地址&#xff1a;https://github.c…...

【 AI技术赋能有限元分析与材料科学应用实践】Neo-Hookean 材料与深度学习结合的有限元分析

Neo-Hookean 材料模型是用于描述非线性弹性材料&#xff08;如软组织和橡胶等&#xff09;的经典模型&#xff0c;特别适用于大变形问题。其基本思想是通过应变能密度函数来描述材料的弹性行为。在该模型中&#xff0c;材料的应力-应变关系不仅依赖于应变能&#xff0c;还通过变…...

Origin快速拟合荧光寿命、PL Decay (TRPL)数据分析处理-方法二

1.先导入数据到origin 2.导入文件的时候注意&#xff1a;名字短的这个是&#xff0c;或者你打开后看哪个里面有800&#xff0c;因为我的激光重频是1.25Hz&#xff08;应该是&#xff0c;不太确定单位是KHz还是MHz&#xff09;&#xff0c;所以对应的时间是800s。 3.选中两列直接…...

LeetCode Hot100 51~60

图论51. 岛屿问题52. 腐烂的橘子53. 课程表54. 前缀树55. 全排列56. 子集57. 电话号码58. 组合总和59. 括号生成60. 单词搜索 图论 51. 岛屿问题 经典洪水问题算法 class Solution { public:int numIslands(vector<vector<char>>& grid) {int nr grid.size…...

第一节:ORIN NX介绍与基于sdkmanager的镜像烧录(包含ubuntu文件系统/CUDA/OpenCV/cudnn/TensorRT)

ORIN NX技术参数 Orin NX版本对比 如上图所示,ORIN NX官方发布的版本有两个版本一个版本是70TOPS算力,DDR为8GB的版本低配版本,一个是100TOPS算法,DDR为16GB的高配版本。 Orin NX的外设框图 两个版本除了GPU和DDR的差距外,外设基本上没有区别,丰富的外设接口,后续开发…...

使用Pygame创建一个简单的消消乐游戏

消消乐游戏是一种经典的益智游戏&#xff0c;玩家通过交换相邻的方块来形成三个或更多相同颜色的连续方块&#xff0c;从而消除它们。本文将介绍如何使用Python的Pygame库来创建一个简单的消消乐游戏。 准备工作 在开始之前&#xff0c;请确保已安装Pygame库。可以通过以下命…...

node.js基础学习-JWT登录鉴权(十四)

一、前言 JWT&#xff08;JSON Web Token&#xff09;是一种开放标准&#xff08;RFC 7519&#xff09;&#xff0c;用于在各方之间安全地传输信息。它本质上是一个字符串&#xff0c;由三部分组成&#xff1a;头部&#xff08;Header&#xff09;、载荷&#xff08;Payload&am…...

AbutionGraph-时序向量图谱数据库-快速安装部署

运行环境 1&#xff09;操作系统 最好是使用CentOS7或者Ubuntu18以上系统&#xff0c;不满足的话请升级系统内核gcc版本至8以上版本。 支持所有国产主流操作系统银河麒麟、统信OS、深度等等&#xff0c;均做过兼容性测试&#xff1b; 2&#xff09;CPU 为确保数据库每个进…...

翻译质量差对电子课程用户体验的影响

电子学习改变了教育交付方式&#xff0c;使全球不同受众更容易获得课程。然而&#xff0c;随着这种学习模式的发展&#xff0c;对周到地本地化和翻译的需求也在增长。如果做得好&#xff0c;翻译可以弥合文化和语言分歧&#xff0c;创造无缝和包容的学习体验。然而&#xff0c;…...

PS的功能学习(修复、画笔)

混合器画笔工具 就像&#xff0c;电子毛笔 关键功能有两个&#xff0c;自带一个混合器色板 清理画笔是全清&#xff0c;换一支新的毛笔&#xff0c;执行完之后在判断是否载入画笔 载入画笔就是把前景色上的颜色进行叠加处理&#xff0c;重新混入当前的混合色 &#xff08;…...

Android 使用 Canvas 和 Paint 实现圆形图片

学习笔记 效果展示: 全部代码: public class YuanActivity extends AppCompatActivity {private ActivityYuanBinding binding;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 通过 DataBinding 获取布局文件binding …...

vxe-table 键盘操作,设置按键编辑方式,支持覆盖方式与追加方式

vxe-table 全键盘操作&#xff0c;按键编辑方式设置&#xff0c;覆盖方式与追加方式&#xff1b; 通过 keyboard-config.editMode 设置按键编辑方式&#xff1b;支持覆盖方式编辑和追加方式编辑 安装 npm install vxe-pc-ui4.3.15 vxe-table4.9.15// ... import VxeUI from v…...

BUUCTF Pwn [HarekazeCTF2019]baby_rop 题解

下载 checksec 64位 用IDA64打开 定位main函数 栈溢出漏洞 SHIFTF12的字符串看到了binsh 以及函数窗口有system 因为是64位 找到rdi传参和ret栈平衡 构造exp&#xff1a; from pwn import *#p process(./babyrop) p remote("node5.buuoj.cn", 27869)addr_prr 0…...

什么是封装性?C++ 中如何实现封装?封装性的好处是什么?

一、引言 在面向对象编程中&#xff0c;封装性是一个重要的概念。封装可以帮助我们更好地组织和管理代码&#xff0c;提高代码的可维护性、可扩展性和安全性。本文将详细介绍什么是封装性&#xff0c;C 中如何实现封装以及封装性的好处。 二、什么是封装性&#xff1f; 封装…...

【MySQL】[42000][1071] Specified key was too long; max key length is 3072 bytes

问题描述 创建表时发生错误。 create table if not exists tbl_user(id int unsigned auto_increment comment 用户IDprimary key,username varchar(1023) not null comment 用户名,password varchar(1023) default 123456 …...

人工智能驱动的骗局会模仿熟悉的声音

由于人工智能技术的进步&#xff0c;各种现代骗局变得越来越复杂。 这些骗局现在包括人工智能驱动的网络钓鱼技术&#xff0c;即使用人工智能模仿家人或朋友的声音和视频。 诈骗者使用来自社交媒体的内容来制作深度伪造内容&#xff0c;要求提供金钱或个人信息。个人应该通过…...

实数与复数频谱掩蔽在音频分离中的应用

使用实数和复数频谱掩蔽进行音频分离 频谱掩蔽是指在音频信号的频谱表示中&#xff0c;通过选择性地增强或抑制某些频率成分来改善信号质量或实现信号分离的技术。频谱掩蔽可以分为两种类型&#xff1a;实数掩蔽和复数掩蔽。 实数频谱掩蔽 实数频谱掩蔽主要关注音频信号的幅…...

C++算法练习-day62——491.非递减子序列

题目来源&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目思路分析 这个问题要求找出数组 nums 中的所有非严格递增子序列&#xff0c;其中每个子序列至少包含两个元素。非严格递增子序列意味着子序列中的元素可以相等&#xff0c;但不允许递减。 为了解决这个问…...