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

Vue 3 中通过 createApp 创建的 app 实例的所有核心方法，包含完整示例、使用说明及对比表格

news 来源：原创 2025/5/24 11:29:01

以下是 Vue 3 中通过 createApp 创建的 app 实例的所有核心方法，包含完整示例、使用说明及对比表格：
在这里插入图片描述

1. `app.component()`

作用：注册全局组件
参数：

name：组件名称（字符串）
component：组件构造器（对象或函数）
示例：

// 注册全局组件
const app = createApp(App);
app.component('MyButton', {template: '<button>{{ text }}</button>',props: ['text']
});// 在 App.vue 中直接使用 <my-button text="点击" />

2. `app.directive()`

作用：注册全局指令
参数：

name：指令名称（字符串）
definition：指令定义对象（包含 mounted、updated 等钩子）
示例：

// 注册 v-focus 指令
app.directive('focus', {mounted(el) {el.focus();}
});// 在模板中使用 <input v-focus />

3. `app.mixin()`

作用：注册全局混入
参数：

mixinOptions：混入对象（包含选项如 data、methods 等）
示例：

// 全局混入一个方法
app.mixin({methods: {showAlert() {alert('全局混入的方法');}}
});// 在任意组件中直接调用 this.showAlert()

4. `app.config`

作用：配置 Vue 实例
常用属性：

productionTip：控制生产环境提示
devtools：启用/禁用开发者工具
示例：

// 禁用生产环境提示
app.config.productionTip = false;// 禁用开发者工具
app.config.devtools = false;

5. `app.use()`

作用：安装插件
参数：

plugin：插件函数（可接受 app 实例和其他参数）
示例：

// 安装 axios 插件
import axios from 'axios';
app.use(axios, { baseURL: 'https://api.example.com' });// 在组件中通过 this.$axios 使用

6. `app.provide()`

作用：提供响应式数据给后代组件
参数：

key：数据标识符（字符串或 Symbol）
value：数据值
示例：

// 提供用户信息
app.provide('user', reactive({ name: 'Alice' }));// 在后代组件中通过 inject 获取
const user = inject('user');
console.log(user.name); // Alice

7. `app.mount()`

作用：挂载应用到 DOM
参数：

element：挂载目标（DOM 元素或选择器字符串）
示例：

// 挂载到 #app 元素
const vm = app.mount('#app');
console.log(vm); // 返回根组件实例

8. `app.unmount()`

作用：卸载应用实例
参数：无
示例：

// 先挂载再卸载
const vm = app.mount('#app');
vm.$el; // 挂载后的 DOM 元素
app.unmount();
vm.$el; // null

对比表格总结

方法	作用	参数	返回值	示例简写
`component`	注册全局组件	`name: string`, `component: Object/Function`	`App`	`app.component('MyBtn', MyBtnComponent)`
`directive`	注册全局指令	`name: string`, `definition: { mounted: Function, ... }`	`App`	`app.directive('focus', { mounted: el => el.focus() })`
`mixin`	注册全局混入	`mixinOptions: Object`	`App`	`app.mixin({ methods: { showAlert() { ... } } })`
`config`	配置 Vue 实例	通过属性修改（如 `app.config.productionTip = false`）	无	`app.config.devtools = false`
`use`	安装插件	`plugin: Function`	`App`	`app.use(axios, { baseURL: '...' })`
`provide`	提供响应式数据	`key: string/Symbol`, `value: any`	`App`	`app.provide('user', reactive({ name: 'Alice' }))`
`mount`	挂载应用到 DOM	`element: string/HTMLElement`	根组件实例	`app.mount('#app')`
`unmount`	卸载应用实例	无	无	`app.unmount()`

关键差异对比

方法	作用范围	数据/功能影响	典型场景
component	全局组件注册	全局可用，无需局部注册	统一管理公共组件
directive	全局指令定义	全局指令复用	自定义交互逻辑（如焦点、动画）
mixin	全局选项合并	可能导致代码混乱，慎用	共享通用方法/计算属性
config	配置 Vue 核心行为	影响整个应用的运行环境	禁用开发者工具或静默模式
use	插件集成	扩展 Vue 功能（如状态管理、HTTP 请求）	安装 Vuex、Vue Router 等插件
provide/inject	祖先到后代通信	响应式数据传递，避免 prop 钉扎	在深层组件中共享数据
mount/unmount	应用生命周期管理	控制应用的挂载和卸载	动态加载/卸载 Vue 应用

使用建议

组件/指令/混入：优先使用局部注册，避免全局污染。
插件管理：通过 use 安装插件，保持代码模块化。
提供/注入：替代 prop 钉扎，适用于跨层级数据传递。
配置：仅在必要时修改（如生产环境优化）。

如果需要更具体场景的代码示例或深入解释，请进一步说明！

Vue 3 中通过 createApp 创建的 app 实例的所有核心方法，包含完整示例、使用说明及对比表格

以下是 Vue 3 中通过 createApp 创建的 app 实例的所有核心方法，包含完整示例、使用说明及对比表格： 1. app.component() 作用：注册全局组件参数： name：组件名称（字符串）component&#xff…...

编程日记 2025/5/24 11:29:01

Hadoop 单机模式（Standalone Mode）部署与 WordCount 测试

通过本次实验，成功搭建了 Hadoop 单机环境并运行了基础 MapReduce 程序，为后续分布式计算学习奠定了基础。掌握 Hadoop 单机模式的安装与配置方法。熟悉 Hadoop 环境变量的配置及 Java 依赖管理。使用 Hadoop 自带的 WordCount 示例程序进行简单的 …...

编程日记 2025/4/29 10:19:44

线段树合并与分解

合并 #include <bits/stdc.h> using namespace std; #define asd(i,a,b) for(int ia;i<b;i) #define int long long const int inf 0x3f3f3f3f, N 1e5 5, Z 1e5; int n, m, fa[N], o[N][25], dep[N], tot, root[N], ans[N]; vector<int> g[N]; struct node…...

编程日记 2025/4/29 10:19:44

驱动开发硬核特训 │ 深度解析 fixed regulator 驱动与 regulator_ops

一、引言：本次目标本篇聚焦于： Regulator 子系统基础概念设备树节点与驱动代码的对应关系regulator_desc、regulator_ops、regulator_dev 的完整讲解驱动端的实际注册与管理流程通过一个实际案例，系统掌握 regulator 子系统的全貌。二…...

编程日记 2025/5/16 12:15:24

Linux中的shell脚本练习

1.判断字符串是否为空 #!/usr/bin/bash while : #:默认值为真 do read -p "请输入你的密码: " a pass123456 if [ -z $a ];thenecho "您输入的密码不能为空"exit 1 elseif [ $a $pass ];thenecho "登录成功"breakelseecho "您的密码输入有…...

编程日记 2025/4/29 10:18:37

MySQL基础篇 | 1-数据库概述与MySQL安装

【MySQL基础篇-1】数据库概述与MySQL安装 1. 数据库概述2. MySQL环境搭建2.1. MySQL的四大版本2.2. 软件下载1. 数据库概述 MySQL官网网站：https://dev.mysql.com/doc/relnotes/mysql/8.0/en/ SQL Server：SQL Server是微软开发的大型商业数据库。C#、.net等语言常使用，与wi…...

编程日记 2025/4/29 10:18:36

JVM 自动内存管理

一、运行时数据区域详解 Java 虚拟机在运行 Java 程序时，会将所管理的内存划分为多个不同的数据区域，各区域有着独特的用途、创建和销毁时间。程序计数器：作为线程私有的较小内存空间，它是当前线程执行字节码的行号指示器。字节…...

编程日记 2025/5/20 12:40:22

InitializingBean接口和@PostConstruct-笔记

1. InitializingBean 简介 1.1 功能简介 InitializingBean 是 Spring 框架中的一个接口，用在 Bean 初始化后执行自定义逻辑。它提供了 afterPropertiesSet() 方法，该方法在以下时机被 Spring 容器自动调用： 属性注入完成后（即所…...

编程日记 2025/4/29 10:17:31

考研408-计算机组成原理冲刺考点（1-3章）

第一章计算机系统概述 1.计算机核心早期的冯诺依曼计算机是以运算器为中心的，而现在的计算机是以存储器为中心的 2.五大部件 3.汇编程序、编译程序、解释程序的辨析...

编程日记 2025/5/24 0:08:39

模板方法模式（Template Method Pattern）

模板方法模式（Template Method Pattern）是一种行为型设计模式，它定义了一个操作中的算法骨架，将一些步骤的实现延迟到子类中。模板方法使得子类可以在不改变算法结构的前提下，重新定义算法中的某些步骤。一、基础 1. 意图定义一个操作中的算法骨架，将某些步骤延迟到…...

编程日记 2025/5/11 21:14:04

一文了解无人机系统

无人机系统，又称无人驾驶航空器系统（Remotely Piloted Aircraft System，RPAS），作为一个由无人机平台、遥控站、指令与控制数据链及其他部件构成的完整技术体系，其系统架构包含多个核心分系统。具体而言&…...

编程日记 2025/5/24 8:46:41

系统架构师2025年论文《论软件的设计模式》

论软件的设计模式摘要： 2016 年，我所在的公司承担了某市医院预约挂号系统的研发任务。我作为公司的技术总监，希望能打造基于该系统的系列产品，参与到项目的设计中，以期开发扩展性和可维护性良好的预约挂号系统，为以后的产品开发打下基础。网络靶场是网络安全技术研究的…...

编程日记 2025/5/20 18:18:01

集成电路流片随笔19：full_handshake

全双工握手接收模块 (full_handshake_rx)，它的功能是接收来自发送端 (tx) 的数据，并对发送端进行应答（ACK）。模块实现了基于握手的通信机制，以确保数据的可靠传输。模块的输入输出分别连接于发送端和接收端&#xff0c…...

编程日记 2025/5/15 13:48:42

Android Framework 探秘

以下文字来源AI，准确性不敢保证！ 安卓Framework层概述安卓的 Framework（框架层） 是安卓系统的核心组成部分，位于应用层和系统底层（如Linux内核）之间，负责为应用提供统一的接口和功…...

编程日记 2025/4/29 10:14:16

亚马逊云科技2025战略解析：AI驱动下的全球生态重塑

一、战略转向：从“云优先”到“AI优先”的核心逻辑 1. 千亿美元资本投入AI基建芯片自研突破：2025年资本支出70%投向AI芯片与液冷数据中心。自研芯片矩阵全面升级，包括3纳米工艺的Trainium3（算力提升4倍）、单核性能…...

编程日记 2025/4/29 10:13:10

NGINX ngx_http_addition_module 模块响应体前后注入内容

一、模块概述模块名称：ngx_http_addition_module引入版本：自 0.7.9 起支持 addition_types，0.8.29 起支持“*”通配；功能：对符合 MIME 类型的响应，在响应体前后分别插入指定子请求 URI 返回的内容&#x…...

编程日记 2025/4/29 10:11:00

SpringMVC 使用thymeleaf 进行数据展示

thymeleaf 是前端的视图解析器，可以用于html页面上变量的渲染，如何来使用thymeleaf，下面我们来说一下： 首先引入相关的依赖： <dependency><groupId>org.thymeleaf</groupId><artifactId>thym…...

编程日记 2025/4/29 10:10:58

Github两种鉴权模式PAT与SSH

Github两种鉴权模式PAT与SSH 文章目录 Github两种鉴权模式PAT与SSH1. PAT鉴权2. SSH鉴权3.两种鉴权的切换 1. PAT鉴权通过 HTTPS 协议克隆和推送代码，使用用户名/密码或个人访问令牌（PAT）鉴权，所以PAT是与HTTPS协议相关的。该鉴…...

编程日记 2025/5/13 10:09:22

XrayR启动失败

公司要用服务器之间进行数据加密，这里用的XrayR 我使用的Centos 7。我这里使用一键脚本安装后，/etc/XrayR目录下没有配置文件。解决方案 XrayR安装时，系统没有unzip工具，也是会安装失败的，因为Centos7已经停止维…...

编程日记 2025/4/29 10:09:52

FPGA-数字时钟

FPGA-数字时钟总体设计用FPGA驱动数码管按照HH-MM-SS的格式显示时间，每秒用串口向上位机发送当前时间，当串口收到HH:MM:SS，对时间进行校准。由于年月要考虑到大小月，闰年等。为了简单起见，只考虑时分秒。数码管…...

编程日记 2025/5/22 4:23:11

数据结构 RBT 插入操作的 Python 代码实现

目录一、红黑树的性质二、红黑树的插入1. 插入根节点或根节点变红2. 双亲节点 P 为黑色3. 双亲结点 P 和叔伯结点 U 均为红色4. 双亲结点 P 为红色，叔伯结点 U 为黑色或缺失1）情形一2）情形二三、插入的 Python 代码实现红黑树动画演示网站…...

编程日记 2025/5/15 6:27:42

颖儿生活提案：用海信璀璨505U6真空冰箱重建都市鲜食自由

热播剧《六姊妹》中，演员颖儿饰演的何家艺以泼辣坚韧的形象深入人心，一双手撑起家庭的"烟火气"；戏外，她平衡事业与家庭，以自律姿态书写鲜活人生。近日，颖儿向公众展示家中厨房，意外…...

编程日记 2025/5/24 2:14:17

JQuery 使用技巧

文章目录隐藏/显示淡入淡出滑动追加新元素删除元素/内容设置 CSS 样式尺寸遍历Ajax根据 input 控件中的值实时改变另一个值 $()是jQuery()的简写getElementByTagName();如： $(“div”)getElementByTagName(“div”); $()的作用是用于查找出 HTML 的标签、属性、样…...

编程日记 2025/4/29 10:07:45

光流法：从传统方法到深度学习方法

1 光流法简介光流（Optical Flow）是指图像中像素灰度值随时间的变化而产生的运动场。简单来说，它描述了图像中每个像素点的运动速度和方向。光流法是一种通过分析图像序列中像素灰度值来计算光流的方法。对于图像数据计算出来的光流是一个二…...

编程日记 2025/4/29 10:07:44

如何选择合适的RFID手持终端设备？

一、明确核心需求，锁定关键参数选购RFID手持终端的首要任务是明确应用场景的核心需求。若用于仓储物流或零售盘点，推荐选择上海岳冉超高频RFID手持终端设备，支持1-20米远距离批量读取；若用于医疗耗材或图书管理，岳冉高…...

编程日记 2025/5/12 23:08:06

Axios 传参与 Spring Boot 接收参数完全指南

Axios 传参与 Spring Boot 接收参数完全指南本文详细说明前端 Axios 传参与后端 Spring Boot 接收参数的各类场景，包括 GET/POST/PUT/DELETE 请求、路径参数/查询参数/请求体参数的传递方式，以及如何接收 List、Map 等复杂类型。通过代码示例和对比表…...

编程日记 2025/4/29 10:07:41

NdrpPointerUnmarshallInternal函数分析之pStubMsg--pAllocAllNodesContext的由来

第一部分： // // Check if this is an allocate all nodes pointer AND that were // not already in an allocate all nodes context. // if ( ALLOCATE_ALL_NODES(pFormat[1]) && ! pStubMsg->pAllocAllNodesContext …...

编程日记 2025/5/19 6:17:02

人脑、深思考大模型与其他大模型的区别科普

文章目录大模型的基本概念与特点深思考大模型的独特之处深思考大模型与其他大模型的对比架构与技术训练数据应用场景提示词编写大模型给出答案的方式：基于概率还是真的会分析问题？人脑的思考过程基本单位与网络大脑结构与功能分区信息处理流程思维模式…...

编程日记 2025/5/20 11:48:39

Unity-粒子系统：萤火虫粒子特效效果及参数

萤火虫特效由两部分组成。萤火虫粒子底色粒子面片。萤火虫的旋转飞动主要由 Noise参数和Color over Lifetime模块控制。贴图：中间实周边虚的圆，可随意自行制作 Shader：Universal Render Pipeline/2D/Sprite-Lit-Default 以下是粒子详细参…...

编程日记 2025/4/29 10:06:37

Java垃圾收集器与内存分配策略深度解析

在 Java 与 C 的世界里，内存动态分配与垃圾收集技术仿佛筑起了一道高墙。墙外的人渴望进入，享受自动内存管理的便利；而墙内的人却试图突破，追求更高的性能与控制力。今天，就让我们深入探讨 Java 的垃圾收集器与内存分配…...

编程日记 2025/4/29 10:06:36

优化MySQL性能：主从复制与读写分离实践指南

目录一、知识介绍 1.MySQL主从复制原理 2.MySQL读写分离原理二、资源清单三、案例实施 1.修改主机名 2.搭建MySQL主从复制 3.搭建MySQL读写分离一、知识介绍 1.MySQL主从复制原理 MySQL支持的复制类型基于语句的复制基于行的复制混合模型复制工作过程主&#…...

编程日记 2025/4/29 10:05:33

Foupk3systemX5OS系统产品设备

Foupk3systemX5OS TXW8（基于Foupk3systemX5OS系统19.62正式版开发的智能移动设备由Foupk3systemX5OS系统与FOUPK3云服务平台共同自主研发） Foupk3systemX5OS TX6（Foupk3systemX5OS TX6基于Foupk3systemX5OS系统19.60正式版开发的智能平板设备…...

编程日记 2025/4/29 10:05:32

【计网】认识跨域，及其在go中通过注册CORS中间件解决跨域方案，go-zero、gin

一、跨域（CORS）是什么？ 跨域，指的是浏览器出于安全限制，前端页面在访问不同源（协议、域名、端口任一不同）的后端接口时，会被浏览器拦截。比如： 前端地址后端接口地址是…...

编程日记 2025/4/29 10:05:31

关于【Spring Boot Configuration Annotation Processor 未配置问题】的详细分析、解决方案及代码示例

以下是关于 Spring Boot Configuration Annotation Processor 未配置问题的详细分析、解决方案及代码示例： 1. 问题描述当使用 Spring Boot 的配置注解（如 ConfigurationProperties、Value、ConditionalOnProperty 等）时，若未…...

编程日记 2025/4/29 10:05:29

MySQL 的ANALYZE与 OPTIMIZE命令

MySQL 的ANALYZE与 OPTIMIZE命令一、ANALYZE TABLE - 更新统计信息 1. 基本语法与功能 ANALYZE [NO_WRITE_TO_BINLOG | LOCAL] TABLE tbl_name [, tbl_name] ...作用：收集表统计信息用于优化器生成更优的执行计划，主要更新： 索引基数&am…...

编程日记 2025/5/22 10:28:40

【机器学习】人工智能在电力电子领域的应用

摘要： 本文概述了电力电子系统的人工智能 (AI) 应用。设计、控制和维护这三个独特的生命周期阶段与人工智能要解决的一项或多项任务相关，包括优化、分类、回归和数据结构探索。讨论了专家系统、模糊逻辑、元启发法和机器学习四类人工智能的应用。我们对…...

编程日记 2025/4/29 10:05:28

InferType和_checked_type的区别？

在 TVM 的 Relay IR 中，relay.frontend.common.infer_shape(node) 和 node.checked_type.shape 都与**形状（Shape）**信息相关，但它们的用途、实现机制和性能特点有显著区别。以下是详细对比： 1. 功能区别特性node.ch…...

编程日记 2025/4/29 10:04:26

Flutter 学习之旅之 flutter 作为 module ，在 Android 端主动唤起 Flutter 开发的界面简单的整理

Flutter 学习之旅之 flutter 作为 module ，在 Android 端主动唤起 Flutter 开发的界面简单的整理目录 Flutter 学习之旅之 flutter 作为 module ，在 Android 端主动唤起 Flutter 开发的界面简单的整理一、简单介绍二、Android 端唤起 Flutter …...

编程日记 2025/4/29 10:04:26

vue3 css模拟语音通话不同语音、正在加载等的效果

实现效果如下： 在不同的时间，显示不一样的效果（大小是一样的，截图时尺寸发生了变化） 具体实现代码如下： <script setup> import {ref} from "vue";const max_hight ref(40px) const min…...

编程日记 2025/4/29 10:03:20

【Machine Learning Q and AI 读书笔记】- 01 嵌入、潜空间和表征

Machine Learning Q and AI 中文译名大模型技术30讲，主要总结了大模型相关的技术要点，结合学术和工程化，对LLM从业者来说，是一份非常好的学习实践技术地图. 本文是Machine Learning Q and AI 读书笔记的第1篇，对应原…...

编程日记 2025/5/23 20:01:23

[Agent]AI Agent入门02——ReAct 基本理论与实战

ReAct介绍 ReAct（Reasoning and Acting）是一种通过协同推理（Reasoning）与行动（Acting）提升大语言模型（LLM）任务解决能力的技术。其核心思想是在解决复杂问题时交替生成推理和动作&a…...

编程日记 2025/5/20 13:30:16

uniapp自定义头部(兼容微信小程序(胶囊和状态栏)，兼容h5)

很早之前就写过自定义头部，但是那时偷懒写死了，现在用插槽重新写了个有两种形式： type1是完全自定义的，可以自己去组件改也可以用插槽改 type2是正常的返回标题和右边按钮，使用就是 title"标题" rightClic…...

编程日记 2025/5/20 12:34:58

mybatis的xml ${item}总是更新失败

场景代码如下 void updateStatus(Param("deviceSerialIdCollection") Collection<String> deviceSerialIdCollection, Param("status") Integer status);<update id"updateStatus">UPDATE gb_monitor SET online#{status} WHERE d…...

编程日记 2025/5/19 20:16:09

数据库- JDBC

标题目录 JDBC基本概念JDBC 接口JDBC 工作原理 JDBC APIJDBC工作过程Driver 接口及驱动加载Connection 接口Statemen 接口ResultSet 接口PreparedStatement 接口 JDBC 基本概念 Java Database Connectivity：java访问数据库的解决方案希望用相同的方式访问不同的数…...

编程日记 2025/4/29 10:02:14

[26] cuda 应用之 nppi 实现图像格式转换

[26] cuda 应用之 nppi 实现图像格式转换讲述 nppi 接口定义通过nppi实现 bayer 格式转rgb格式官网参考信息：http://gwmodel.whu.edu.cn/docs/CUDA/npp/group__image__color__debayer.html#details1. 接口定义官网关于转换的原理是这么写的： Grayscale Color Filter Array …...

编程日记 2025/4/29 10:01:10

MYSQL-OCP官方课程学习截图

第一节介绍...

编程日记 2025/4/29 10:01:10

医院信息管理系统全解析

目录一、医院信息管理系统是什么 1. 概念阐释 2. 核心功能概述二、医院信息管理系统的种类 1. 医院信息系统（HIS） 2. 电子病历系统（EMR） 3. 实验室信息管理系统（LIS） 三、医院信息管理系统的实际…...

编程日记 2025/4/29 10:00:06

模型上下文协议（MCP）：技术解析与生态发展

一、概念与目标模型上下文协议（Model Context Protocol，MCP）是由Anthropic于2024年11月推出的开源协议，旨在为大语言模型（LLM）与外部工具、数据源提供标准化的双向通信框架。其核心目标是打破数据孤岛&am…...

编程日记 2025/5/5 21:36:36

laravel中layui的table翻页不起作用问题的解决

本地测试是好的，部署的时候就发现，翻页不起作用了。但lay_num序号是可以变化的，查看api接口传递的数据，发现数据没有变化，加上page2等翻页，也是不起作用，看来是url参数返回给后台，后…...

编程日记 2025/5/5 21:37:19

python上测试neo4j库

安装完了neo4j库后，如何使用。用python来小试牛刀 1.从其他博客上找来demo #coding:utf-8 from py2neo import Graph,Node,Relationship##连接neo4j数据库，输入地址、用户名、密码 graph Graph(bolt://xx.xx.xx.xx:7687,userneo4j,passwordneo4j1234)…...

编程日记 2025/5/5 21:38:39

1. app.component()

2. app.directive()

3. app.mixin()

4. app.config

5. app.use()

6. app.provide()

7. app.mount()

8. app.unmount()