Vue3:全局API(应用实例)

createApp

创建一个应用实例

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);

app.mount()

将应用实例挂载在一个容器元素中。

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app')

app.unmount()​

卸载一个已挂载的应用实例

app.component()​

如果同时传递一个组件名字符串及其定义，则注册一个全局组件；如果只传递一个名字，则会返回用该名字注册的组件 (如果存在的话)。

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
import { Button } from 'view-ui-plus';
app.component('Button', Button);

app.directive()​

如果同时传递一个名字和一个指令定义，则注册一个全局指令；如果只传递一个名字，则会返回用该名字注册的指令 (如果存在的话)。

import { createApp } from 'vue'
const app = createApp({
  /* ... */
})
// 注册（对象形式的指令）
app.directive('my-directive', {
  /* 自定义指令钩子 */
})
// 注册（函数形式的指令）
app.directive('my-directive', () => {
  /* ... */
})
// 得到一个已注册的指令
const myDirective = app.directive('my-directive')

app.use()​

安装一个插件。

import { createPinia } from 'pinia' 
import { createApp } from 'vue'
import App from './App.vue'
const pinia = createPinia();
const app = createApp(App);
app.use(pinia );

app.mixin()​

应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。(不推荐，用组合式函数代替)

app.provide()​

提供一个值，可以在应用中的所有后代组件中注入使用。

import { createApp } from 'vue'
const app = createApp(/* ... */)
app.provide('message', 'How are you going?')

import { inject } from 'vue'
export default {
  setup() {
    console.log(inject('message')) // 'How are you going?'
  }
}

app.version​

提供当前应用所使用的 Vue 版本号。这在插件中很有用，因为可能需要根据不同的 Vue 版本执行不同的逻辑。

import { createApp } from 'vue'
const app = createApp(/* ... */);
console.log(app.version); // 3.4.13
等同与以下：
import { version} from 'vue';
console.log(version); // 3.4.13

app.config​

每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。

import { createApp } from 'vue'
const app = createApp(/* ... */);
console.log(app.config); 
// {errorHandler: #, warnHandler:#,performance:#,compilerOptions:#,globalProperties:#,optionMergeStrategies:#} 

app.config.errorHandler​

用于为应用内抛出的未捕获错误指定一个全局处理函数。

app.config.warnHandler​

用于为 Vue 的运行时警告指定一个自定义处理函数。

app.config.performance​

设置此项为 true 可以在浏览器开发工具的“性能/时间线”页中启用对组件初始化、编译、渲染和修补的性能表现追踪。仅在开发模式和支持 performance.mark API 的浏览器中工作。

app.config.compilerOptions​

配置运行时编译器的选项。

app.config.globalProperties​

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
注意：像UI组件中的dialog,confirm，modal都可以在这里注册；

import {Message} from 'view-ui-plus';
app.config.globalProperties.$message = Message;

在组件中使用时

import { getCurrentInstance } from 'vue';
const { $message } = getCurrentInstance().appContext.config.globalProperties;

app.config.optionMergeStrategies​

一个用于定义自定义组件选项的合并策略的对象。