createApp()

用来创建一个应用实例

import { createApp } from 'vue';
// 引入一个根组件
import App from './App.vue';
// 创建一个应用实例
const app = createApp(App);

app.provide()

全局依赖注入

// 全局依赖注入，所有的组件都可以通过inject获取
app.provide("msg", "hello");

app.component()

全局注册一个组件

// 引入一个组件
import MyComponent from './components/MyComponent.vue';
// 全局注册一个组件,所有组件都可以使用
app.component("MyComponent", MyComponent);

app.directive()

全局注册指令

// 全局注册一个指令，所有组件中都可以使用该指令（v-指令名）
// 简写形式
app.directive('color', (el, binding) => {
    // 该函数会在 mounted 和 updated 时触发
    el.style.color = binding.value;
})

// 非简写形式，可以指定任意生命周期内执行
app.directive('MyDirective', {
    created(el, binding) {},
    beforeMount() {},
    mounted() {},
    // ...
})
/**
    指令的钩子会传递以下几种参数：
    el：指令绑定到的元素。这可以用于直接操作 DOM。
    binding：一个对象，包含以下 property。
        value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
        oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
        arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
        modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
        instance：使用该指令的组件实例。
        dir：指令的定义对象。
    vnode：代表绑定元素的底层 VNode。
    prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。
*/

app.use()

使用插件

// 引入route插件
import router from './router';
// 使用router插件
app.use(router);

aoo.mixin()

混合， vue3不推荐使用，推荐采用组合式API。

app.config

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

app.config.errorHandler

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

app.config.errorHandler = (err, instance, info) => {
  // 处理错误，例如：报告给一个服务
}

app.config.warnHandler

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

app.config.warnHandler = (msg, instance, trace) => {
  // `trace` is the component hierarchy trace
}

app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局 property 的对象。

app.config.globalProperties.msg = 'hello'

app.mount()

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

app.mount('#app');

app.unmount()

卸载一个已经挂载好的应用实例，会触发应用组件树上所有组件的卸载生命周期钩子。

app.unmount();