这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

这篇文章我们来讲一下全局APIdefineComponent、defineAsyncComponent、defineCustomElement、resolveComponent、resolveDynamicComponent、resolveDirective和withDirectives的使用，以及我们需要注意的地方。

如何使用

defineComponent

defineComponent 只返回传递给它的对象。返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具支持。我们可以用这个方法来定义组件，如下：

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
    template:'<h1>count:{{count}}</h1>',
    data() {
        return { count: 1 }
    }
})
复制代码

使用的时候，要注意在使用的地方注册一下，也就是在components里面注册一下。

defineAsyncComponent

创建一个只有在需要时才会加载的异步组件。defineAsyncComponent 可以接受一个返回 Promise 的工厂函数，也可以接受一个对象。

工厂函数

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('路径/AsyncComponent.vue')
)
app.component('async-component', AsyncComp)
复制代码

可以把一个定义好的组件变为一个异步组件。

对象

const AsyncComp = defineAsyncComponent({
  loader: () => import('路径/Foo.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000,
  suspensible: false,
  /**
   *
   * @param {*} error 错误信息对象
   * @param {*} retry 一个函数，用于指示当 promise 加载器 reject 时，加载器是否应该重试
   * @param {*} fail  一个函数，指示加载程序结束退出
   * @param {*} attempts 允许的最大重试次数
   */
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 请求发生错误时重试，最多可尝试 3 次
      retry()
    } else {
      // 注意，retry/fail 就像 promise 的 resolve/reject 一样：
      // 必须调用其中一个才能继续错误处理。
      fail()
    }
  }
})
复制代码

其中：

loader：工厂函数
loadingComponent：加载异步组件时要使用的组件
errorComponent：加载失败时要使用的组件
delay：在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
timeout：如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件 | 默认值：Infinity
suspensible：定义组件是否可挂起 | 默认值：true

defineCustomElement

Vue 3.2 新增了 defineCustomElement 方法，此方法接受与相同的参数defineComponent，但返回一个本机自定义元素，该元素可以在任何框架中使用，或者根本没有框架。使用如下：

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 此处为普通Vue组件选项
  props: {},
  emits: {},
  template: `...`,
  // 仅限DefineCustomMelement：将CSS注入阴影根
  styles: [`/* inlined css */`]
})
// 注册自定义元素。
// 注册后，页面上的所有“<my vue element>”标记都将升级。
customElements.define('my-vue-element', MyVueElement)
// 您还可以通过编程方式实例化元素：
// (只能在注册后进行)
document.body.appendChild(
  new MyVueElement({
    // 初始道具（可选）
  })
)
复制代码

此方法我们很少使用，但是我们可以用它驱动Vue的UI库。

resolveComponent

如果在当前应用实例中可用，则允许按名称解析 component。如下：

app.component('my-component', {
    template: `<h1> Hello,world! </h1>`,
})
    
render() {
    console.log(resolveComponent('my-component'));
}
复制代码

resolveComponent可以解析组件，获得组件的详情。

但是值得我们注意的是：resolveComponent 只能在 render 或 setup 函数中使用。

resolveDynamicComponent

根据resolveComponent，我们可以类比出resolveDynamicComponent的用法和注意事项，其是用来解析动态组件来获得组件详情的，如下：

render() {
    console.log(resolveDynamicComponent('my-component'));
}
复制代码

显而易见，resolveDynamicComponent 也只能在 render 或 setup 函数中使用。

resolveDirective

类比前两个api，可以看出此api是用来解析指令的，使用如下：

app.directive('focus', {})

render() {
    console.log(resolveDirective('focus'));
}
复制代码

resolveDirective是用来解析指令来获得指令详情的，只能在 render 或 setup 函数中使用。

withDirectives

允许将指令应用于 VNode，返回一个包含应用指令的 VNode，接受两个参数：vnode 和 directives。使用如下：

import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')

return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])
复制代码