vue3扩展学习

createApp()

创建一个应用实例。

function createApp(rootComponent: Component, rootProps?: object): App

第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。

app.component()

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

interface App {
  component(name: string): Component | undefined
  component(name: string, component: Component): this
}

app.directive()

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

interface App {
  directive(name: string): Directive | undefined
  directive(name: string, directive: Directive): this
}

app.provide()

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

app.version

获取当前vue的版本号

app.config.errorHandler

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

interface AppConfig {
  errorHandler?: (
    err: unknown,
    instance: ComponentPublicInstance | null,
    // `info` 是一个 Vue 特定的错误信息
    // 例如：错误是在哪个生命周期的钩子上抛出的
    info: string
  ) => void
}

app.config.warnHandler

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

interface AppConfig {
  warnHandler?: (
    msg: string,
    instance: ComponentPublicInstance | null,
    trace: string
  ) => void
}

app.config.globalProperties

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

这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，此写法在 Vue 3 已经不存在了。与任何全局的东西一样，应该谨慎使用。

如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。

app.config.globalProperties.msg = 'hello'

选项式中使用

export default {
  mounted() {
    console.log(this.msg) // 'hello'
  }
}

组合式中使用

import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties.msg)

isRef()

检查某个值是否为 ref。