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

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

news 2025/4/29 8:07: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 应用