Vue 3.0 全局API

#createApp

返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。

 
  1. const app = Vue.createApp({})

你可以在 createApp 之后链式调用其它方法,这些方法可以在应用 API 中找到。

#参数

该函数接收一个根组件选项对象作为第一个参数:

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

使用第二个参数,我们可以将根 prop 传递给应用程序:

 
  1. const app = Vue.createApp(
  2. {
  3. props: ['username']
  4. },
  5. { username: 'Evan' }
  6. )

 
  1. <div id="app">
  2. <!-- 会显示 'Evan' -->
  3. {{ username }}
  4. </div>

#类型声明

 
  1. interface Data {
  2. [key: string]: unknown
  3. }
  4. export type CreateAppFunction<HostElement> = (
  5. rootComponent: PublicAPIComponent,
  6. rootProps?: Data | null
  7. ) => App<HostElement>

#h

返回一个”虚拟节点“,通常缩写为 VNode:一个普通对象,其中包含向 Vue 描述它应在页面上渲染哪种节点的信息,包括所有子节点的描述。它的目的是用于手动编写的渲染函数

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

#参数

接收三个参数:typeprops 和 children

#type

  • 类型:String | Object | Function

  • 详细:

HTML 标签名、组件或异步组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。

#props

  • 类型:Object

  • 详细:

一个对象,与我们将在模板中使用的 attribute、prop 和事件相对应。可选。

#children

  • 类型:String | Array | Object

  • 详细:

子代 VNode,使用 h() 生成,或者使用字符串来获取“文本 VNode”,或带有插槽的对象。可选。

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

#defineComponent

从实现上看,defineComponent 只返回传递给它的对象。但是,就类型而言,返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。

#参数

具有组件选项的对象

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

或者是一个 setup 函数,函数名称将作为组件名称来使用

 
  1. import { defineComponent, ref } from 'vue'
  2. const HelloWorld = defineComponent(function HelloWorld() {
  3. const count = ref(0)
  4. return { count }
  5. })

#defineAsyncComponent

创建一个只有在需要时才会加载的异步组件。

#参数

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

 
  1. import { defineAsyncComponent } from 'vue'
  2. const AsyncComp = defineAsyncComponent(() =>
  3. import('./components/AsyncComponent.vue')
  4. )
  5. app.component('async-component', AsyncComp)

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

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

对于高阶用法,defineAsyncComponent 可以接受一个对象:

defineAsyncComponent 方法还可以返回以下格式的对象:

 
  1. import { defineAsyncComponent } from 'vue'
  2. const AsyncComp = defineAsyncComponent({
  3. // 工厂函数
  4. loader: () => import('./Foo.vue')
  5. // 加载异步组件时要使用的组件
  6. loadingComponent: LoadingComponent,
  7. // 加载失败时要使用的组件
  8. errorComponent: ErrorComponent,
  9. // 在显示 loadingComponent 之前的延迟 | 默认值:200(单位 ms)
  10. delay: 200,
  11. // 如果提供了 timeout ,并且加载组件的时间超过了设定值,将显示错误组件
  12. // 默认值:Infinity(即永不超时,单位 ms)
  13. timeout: 3000,
  14. // 定义组件是否可挂起 | 默认值:true
  15. suspensible: false,
  16. /**
  17. *
  18. * @param {*} error 错误信息对象
  19. * @param {*} retry 一个函数,用于指示当 promise 加载器 reject 时,加载器是否应该重试
  20. * @param {*} fail 一个函数,指示加载程序结束退出
  21. * @param {*} attempts 允许的最大重试次数
  22. */
  23. onError(error, retry, fail, attempts) {
  24. if (error.message.match(/fetch/) && attempts <= 3) {
  25. // 请求发生错误时重试,最多可尝试 3 次
  26. retry()
  27. } else {
  28. // 注意,retry/fail 就像 promise 的 resolve/reject 一样:
  29. // 必须调用其中一个才能继续错误处理。
  30. fail()
  31. }
  32. }
  33. })

参考动态和异步组件

#resolveComponent

WARNING

resolveComponent 只能在 render 或 setup 函数中使用。

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

返回一个 Component。如果没有找到,则返回 undefined

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

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

#参数

接受一个参数:name

#name

  • 类型:String

  • 详细:

已加载的组件的名称。

#resolveDynamicComponent

WARNING

resolveDynamicComponent 只能在 render 或 setup 函数中使用。

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

返回已解析的 Component 或新创建的 VNode,其中组件名称作为节点标签。如果找不到 Component,将发出警告。

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

#参数

接受一个参数:component

#component

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

  • 详细:

有关详细信息,请参阅动态组件上的文档。

#resolveDirective

WARNING

resolveDirective 只能在 render 或 setup 函数中使用。

如果在当前应用实例中可用,则允许通过其名称解析一个 directive

返回一个 Directive。如果没有找到,则返回 undefined

 
  1. const app = Vue.createApp({})
  2. app.directive('highlight', {})

 
  1. import { resolveDirective } from 'vue'
  2. render () {
  3. const highlightDirective = resolveDirective('highlight')
  4. }

#参数

接受一个参数:name

#name

  • 类型:String

  • 详细:

已加载的指令的名称。

#withDirectives

WARNING

withDirectives 只能在 render 或 setup 函数中使用。

允许将指令应用于 VNode。返回一个包含应用指令的 VNode。

 
  1. import { withDirectives, resolveDirective } from 'vue'
  2. const foo = resolveDirective('foo')
  3. const bar = resolveDirective('bar')
  4. return withDirectives(h('div'), [
  5. [foo, this.x],
  6. [bar, this.y]
  7. ])

#参数

接受两个参数:vnode 和 directives

#vnode

  • 类型:vnode

  • 详细:

一个虚拟节点,通常使用 h() 创建。

#directives

  • 类型:Array

  • 详细:

一个指令数组。

每个指令本身都是一个数组,最多可以定义 4 个索引,如以下示例所示。

  • [directive] - 该指令本身。必选。

 
  1. const MyDirective = resolveDirective('MyDirective')
  2. const nodeWithDirectives = withDirectives(h('div'), [[MyDirective]])

  • [directive, value] - 上述内容,再加上分配给指令的类型为 any 的值。

 
  1. const MyDirective = resolveDirective('MyDirective')
  2. const nodeWithDirectives = withDirectives(h('div'), [[MyDirective, 100]])

  • [directive, value, arg] - 上述内容,再加上一个 string 参数,比如:在 v-on:click 中的 click

 
  1. const MyDirective = resolveDirective('MyDirective')
  2. const nodeWithDirectives = withDirectives(h('div'), [
  3. [MyDirective, 100, 'click']
  4. ])

  • [directive, value, arg, modifiers] - 上述内容,再加上定义任何修饰符的 key: value 键值对 Object

 
  1. const MyDirective = resolveDirective('MyDirective')
  2. const nodeWithDirectives = withDirectives(h('div'), [
  3. [MyDirective, 100, 'click', { prevent: true }]
  4. ])

#createRenderer

createRenderer 函数接受两个泛型参数: HostNode 和 HostElement,对应于宿主环境中的 Node 和 Element 类型。

例如,对于 runtime-dom,HostNode 将是 DOM Node 接口,HostElement 将是 DOM Element 接口。

自定义渲染器可以传入特定于平台的类型,如下所示:

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

#参数

接受两个参数:HostNode 和 HostElement

#HostNode

  • 类型:Node

  • 详细:

宿主环境中的节点。

#HostElement

  • 类型:Element

  • 详细:

宿主环境中的元素。

#nextTick

将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

 
  1. import { createApp, nextTick } from 'vue'
  2. const app = createApp({
  3. setup() {
  4. const message = ref('Hello!')
  5. const changeMessage = async newMessage => {
  6. message.value = newMessage
  7. await nextTick()
  8. console.log('Now DOM is updated')
  9. }
  10. }
  11. })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值