# 全局 API

# createApp

返回一个提供应用程序上下文的应用程序实例,应用实例挂载的全部组件树共享同一个上下文。

const app = Vue.createApp({})
1

你可以在 createApp后链接其他的方法,方法可以在 应用程序 API找到。

# 参数

方法接收一个根组件选项对象做为第一个参数:

const app = Vue.createApp({
  data() {
    return {
      ...
    }
  },
  methods: {...},
  computed: {...}
  ...
})
1
2
3
4
5
6
7
8
9
10

第二个参数,我们可以传根props给应用程序:

const app = Vue.createApp(
  {
    props: ['username']
  },
  { username: 'Evan' }
)
1
2
3
4
5
6
<div id="app">
  <!-- 将显示 'Evan' -->
  
</div>
1
2
3
4

# Typing

interface Data {
  [key: string]: unknown
}

export type CreateAppFunction<HostElement> = (
  rootComponent: PublicAPIComponent,
  rootProps?: Data | null
) => App<HostElement>
1
2
3
4
5
6
7
8

# h

返回一个‘虚拟节点’,通常缩写为 VNode: 一个普通的对象,它包含了并描述了vue在渲染页面时的那种节点信息,包含对所有子节点的描述。它用于手动编写的 渲染函数:

render() {
  return Vue.h('h1', {}, 'Some title')
}
1
2
3

# 参数

接收3个参数: typepropschildren

# type

  • 类型: String | Object | Function

  • 详细:

    一个html标签名,一个组件或者一个异步组件, 使用返回null的函数将渲染一个注释, 这个参数时必填的。

# props

  • 类型: Object

  • 详细:

    一个对象,与我们将要在模版中使用的属性、prpps和事件相对应,选填参数。

# children

  • 类型: String | Array | Object

  • 详细:

    子VNodes,使用 h()构建,或者使用字符串获取"文本 VNodes",或者使用带有插槽的对象。选填参数。

    h('div', {}, [
      'Some text comes first.',
      h('h1', 'A headline'),
      h(MyComponent, {
        someProp: 'foobar'
      })
    ])
    
    1
    2
    3
    4
    5
    6
    7

# defineComponent

实际上 defineComponent未做任何事,但返回了一个传递给它的对象。 然而,就类型而言,返回的值有一个合成类型构造函数,用于手动渲染函数、TSX和IDE工具支持。

# 参数

组件选项的一个对象

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

或者一个 setup函数,函数名称将用作组件名

import { defineComponent, ref } from 'vue'

const HelloWorld = defineComponent(function HelloWorld() {
  const count = ref(0)
  return { count }
})
1
2
3
4
5
6

# defineAsyncComponent

创建一个异步的组件,仅当组件是必须的时候它才加载。

# 参数

基础用法, defineAsyncComponent可以接收一个工厂函数并返回一个 Promise。 Promise的 resolve回掉应该在服务端返回组件定义后被调用。 你也可以调用 reject(reason)来表示加载失败。

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)
1
2
3
4
5
6
7

当使用 局部注册时, 你也可以直接提供一个函数返回 Promise

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})
1
2
3
4
5
6
7
8
9
10

高级用法, defineAsyncComponent可以接收一个对象:

defineAsyncComponent方法也能返回一个以下格式的对象:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
  // 工厂函数
  loader: () => import('./Foo.vue')
  // 加载异步组件时将使用的组件
  loadingComponent: LoadingComponent,
  // 加载失败时将使用的组件
  errorComponent: ErrorComponent,
  // 延迟之前显示加载的组件,默认: 200ms.
  delay: 200,
  // 如果设置了超时时间,并且超过了限定值,错误组件将显示。默认:无限制时间
  timeout: 3000,
  // 定义组件是否可挂起。默认值: true.
  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()
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

参考: 动态和异步组件

# resolveComponent

WARNING

resolveComponent仅能在 rendersetup函数中使用.

如果在当前应用程序实例中有可用的组件,则允许使用名称名称来做解析。

如果没有找到,则返回一个组件或未定义的组件。

const app = Vue.createApp({})
app.component('MyComponent', {
  /* ... */
})
1
2
3
4
import { resolveComponent } from 'vue'
render() {
  const MyComponent = resolveComponent('MyComponent')
}
1
2
3
4

# 参数

接收一个参数: name

# name

  • 类型: String

  • 详细:

    已加载的组件名称。

# resolveDynamicComponent

WARNING

resolveDynamicComponent仅能在 rendersetup函数中使用.

允许使用与 <component :is="">相同的机制来解析一个组件。

返回已解析的组件或新创建的VNode,并以组件名作为节点标记。如果没有找到该组件,将引发警告。

import { resolveDynamicComponent } from 'vue'
render () {
  const MyComponent = resolveDynamicComponent('MyComponent')
}
1
2
3
4

# 参数

接收一个参数 component

# component

  • 类型: String | Object (组件选项对象)

  • 详细:

    更多细节,请参阅有关 动态组件的文档.

# resolveDirective

WARNING

resolveDirective仅可以在 rendersetup函数中使用.

如果它在当前的应用程序实例可用,则允许根据指令的名称解析它。

如果未找到,则返回一个指令或者为定义。

const app = Vue.createApp({})
app.directive('highlight', {})
1
2
import { resolveDirective } from 'vue'
render () {
  const highlightDirective = resolveDirective('highlight')
}
1
2
3
4

# 参数

接收一个参数: name

# name

  • 类型: String

  • 详细:

    已加载指令的名称。

# withDirectives

WARNING

withDirectives仅可以在 rendersetup函数中使用.

允许应用指令到 VNode。返回一个带有应用指令的 VNode

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

return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])
1
2
3
4
5
6
7
8

# 参数

接收2个参数: vnodedirectives.

# vnode

  • 类型: vnode

  • 详细:

    一个虚拟节点,通常用来创建 h().

# directives

  • 类型: Array

  • 详细:

    一个指令数组。

    每个指令本身就是一个数组,它允许最多定义4哥索引,示例如下:

    • [directive] - 指令自己. 必填.
    const MyDirective = resolveDirective('MyDirective')
    const nodeWithDirectives = withDirectives(h('div'), [[MyDirective]])
    
    1
    2
    • [directive, value] - 如上,再加上一个要赋值给指令 any类型的值
    const MyDirective = resolveDirective('MyDirective')
    const nodeWithDirectives = withDirectives(h('div'), [[MyDirective, 100]])
    
    1
    2
    • [directive, value, arg] - 如上,再加上一个 String参数, 例如: 在 v-on:click中的 click
    const MyDirective = resolveDirective('MyDirective')
    const nodeWithDirectives = withDirectives(h('div'), [
      [MyDirective, 100, 'click']
    ])
    
    1
    2
    3
    4
    • [directive, value, arg, modifiers] - 如上,再加上一个 定义任何修饰符的 key: value 键值对 Object
    const MyDirective = resolveDirective('MyDirective')
    const nodeWithDirectives = withDirectives(h('div'), [
      [MyDirective, 100, 'click', { prevent: true }]
    ])
    
    1
    2
    3
    4

# createRenderer

The createRenderer function accepts two generic arguments: HostNode and HostElement, corresponding to Node and Element types in the host environment.

For example, for runtime-dom, HostNode would be the DOM Node interface and HostElement would be the DOM Element interface.

Custom renderers can pass in the platform specific types like this:

import { createRenderer } from 'vue'
const { render, createApp } = createRenderer<Node, Element>({
  patchProp,
  ...nodeOps
})
1
2
3
4
5

# Arguments

Accepts two arguments: HostNode and HostElement

# HostNode

  • Type: Node

  • Details:

    The node in the host environment.

# HostElement

  • Type: Element

  • Details:

    The element in the host environment.

# nextTick

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

import { createApp, nextTick } from 'vue'

const app = createApp({
  setup() {
    const message = ref('Hello!')
    const changeMessage = async newMessage => {
      message.value = newMessage
      await nextTick()
      console.log('Now DOM is updated')
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

See also: $nextTick instance method