Vue 3.0 全局API

#createApp

返回一個(gè)提供應(yīng)用上下文的應(yīng)用實(shí)例。應(yīng)用實(shí)例掛載的整個(gè)組件樹(shù)共享同一個(gè)上下文。

const app = Vue.createApp({})

你可以在 createApp 之后鏈?zhǔn)秸{(diào)用其它方法，這些方法可以在應(yīng)用 API 中找到。

#參數(shù)

該函數(shù)接收一個(gè)根組件選項(xiàng)對(duì)象作為第一個(gè)參數(shù)：

const app = Vue.createApp({
  data() {
    return {
      ...
    }
  },
  methods: {...},
  computed: {...}
  ...
})

使用第二個(gè)參數(shù)，我們可以將根 prop 傳遞給應(yīng)用程序：

const app = Vue.createApp(
  {
    props: ['username']
  },
  { username: 'Evan' }
)

<div id="app">
  <!-- 會(huì)顯示 'Evan' -->
  {{ username }}
</div>

#類(lèi)型聲明

interface Data {
  [key: string]: unknown
}
export type CreateAppFunction<HostElement> = (
  rootComponent: PublicAPIComponent,
  rootProps?: Data | null
) => App<HostElement>

#h

返回一個(gè)”虛擬節(jié)點(diǎn)“，通?？s寫(xiě)為 VNode：一個(gè)普通對(duì)象，其中包含向 Vue 描述它應(yīng)在頁(yè)面上渲染哪種節(jié)點(diǎn)的信息，包括所有子節(jié)點(diǎn)的描述。它的目的是用于手動(dòng)編寫(xiě)的渲染函數(shù)：

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

#參數(shù)

接收三個(gè)參數(shù)：type，props 和 children

#type

• 類(lèi)型：String | Object | Function

• 詳細(xì)：

HTML 標(biāo)簽名、組件或異步組件。使用返回 null 的函數(shù)將渲染一個(gè)注釋。此參數(shù)是必需的。

#props

• 類(lèi)型：Object

• 詳細(xì)：

一個(gè)對(duì)象，與我們將在模板中使用的 attribute、prop 和事件相對(duì)應(yīng)?？蛇x。

#children

• 類(lèi)型：String | Array | Object

• 詳細(xì)：

子代 VNode，使用 h() 生成，或者使用字符串來(lái)獲取“文本 VNode”，或帶有插槽的對(duì)象?？蛇x。

  h('div', {}, [
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
      someProp: 'foobar'
    })
  ])

#defineComponent

從實(shí)現(xiàn)上看，defineComponent 只返回傳遞給它的對(duì)象。但是，就類(lèi)型而言，返回的值有一個(gè)合成類(lèi)型的構(gòu)造函數(shù)，用于手動(dòng)渲染函數(shù)、TSX 和 IDE 工具支持。

#參數(shù)

具有組件選項(xiàng)的對(duì)象

import { defineComponent } from 'vue'
const MyComponent = defineComponent({
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

或者是一個(gè) setup 函數(shù)，函數(shù)名稱(chēng)將作為組件名稱(chēng)來(lái)使用

import { defineComponent, ref } from 'vue'
const HelloWorld = defineComponent(function HelloWorld() {
  const count = ref(0)
  return { count }
})

#defineAsyncComponent

創(chuàng)建一個(gè)只有在需要時(shí)才會(huì)加載的異步組件。

#參數(shù)

對(duì)于基本用法，defineAsyncComponent 可以接受一個(gè)返回 Promise 的工廠函數(shù)。Promise 的 resolve 回調(diào)應(yīng)該在服務(wù)端返回組件定義后被調(diào)用。你也可以調(diào)用 reject(reason) 來(lái)表示加載失敗。

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

當(dāng)使用局部注冊(cè)時(shí)，你也可以直接提供一個(gè)返回 Promise 的函數(shù)：

import { createApp, defineAsyncComponent } from 'vue'
createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})

對(duì)于高階用法，defineAsyncComponent 可以接受一個(gè)對(duì)象：

defineAsyncComponent 方法還可以返回以下格式的對(duì)象：

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent({
  // 工廠函數(shù)
  loader: () => import('./Foo.vue')
  // 加載異步組件時(shí)要使用的組件
  loadingComponent: LoadingComponent,
  // 加載失敗時(shí)要使用的組件
  errorComponent: ErrorComponent,
  // 在顯示 loadingComponent 之前的延遲 | 默認(rèn)值：200（單位 ms）
  delay: 200,
  // 如果提供了 timeout ，并且加載組件的時(shí)間超過(guò)了設(shè)定值，將顯示錯(cuò)誤組件
  // 默認(rèn)值：Infinity（即永不超時(shí)，單位 ms）
  timeout: 3000,
  // 定義組件是否可掛起 | 默認(rèn)值：true
  suspensible: false,
  /**
   *
   * @param {*} error 錯(cuò)誤信息對(duì)象
   * @param {*} retry 一個(gè)函數(shù)，用于指示當(dāng) promise 加載器 reject 時(shí)，加載器是否應(yīng)該重試
   * @param {*} fail  一個(gè)函數(shù)，指示加載程序結(jié)束退出
   * @param {*} attempts 允許的最大重試次數(shù)
   */
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 請(qǐng)求發(fā)生錯(cuò)誤時(shí)重試，最多可嘗試 3 次
      retry()
    } else {
      // 注意，retry/fail 就像 promise 的 resolve/reject 一樣：
      // 必須調(diào)用其中一個(gè)才能繼續(xù)錯(cuò)誤處理。
      fail()
    }
  }
})

參考：動(dòng)態(tài)和異步組件

#resolveComponent

WARNING

resolveComponent 只能在 render 或 setup 函數(shù)中使用。

如果在當(dāng)前應(yīng)用實(shí)例中可用，則允許按名稱(chēng)解析 component。

返回一個(gè) Component。如果沒(méi)有找到，則返回 undefined。

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

import { resolveComponent } from 'vue'
render() {
  const MyComponent = resolveComponent('MyComponent')
}

#參數(shù)

接受一個(gè)參數(shù)：name

#name

• 類(lèi)型：String

• 詳細(xì)：

已加載的組件的名稱(chēng)。

#resolveDynamicComponent

WARNING

resolveDynamicComponent 只能在 render 或 setup 函數(shù)中使用。

允許使用與 <component :is=""> 相同的機(jī)制來(lái)解析一個(gè) component。

返回已解析的 Component 或新創(chuàng)建的 VNode，其中組件名稱(chēng)作為節(jié)點(diǎn)標(biāo)簽。如果找不到 Component，將發(fā)出警告。

import { resolveDynamicComponent } from 'vue'
render () {
  const MyComponent = resolveDynamicComponent('MyComponent')
}

#參數(shù)

接受一個(gè)參數(shù)：component

#component

• 類(lèi)型：String | Object (組件的選項(xiàng)對(duì)象)

• 詳細(xì)：

有關(guān)詳細(xì)信息，請(qǐng)參閱動(dòng)態(tài)組件上的文檔。

#resolveDirective

WARNING

resolveDirective 只能在 render 或 setup 函數(shù)中使用。

如果在當(dāng)前應(yīng)用實(shí)例中可用，則允許通過(guò)其名稱(chēng)解析一個(gè) directive。

返回一個(gè) Directive。如果沒(méi)有找到，則返回 undefined。

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

import { resolveDirective } from 'vue'
render () {
  const highlightDirective = resolveDirective('highlight')
}

#參數(shù)

接受一個(gè)參數(shù)：name

#name

• 類(lèi)型：String

• 詳細(xì)：

已加載的指令的名稱(chēng)。

#withDirectives

WARNING

withDirectives 只能在 render 或 setup 函數(shù)中使用。

允許將指令應(yīng)用于 VNode。返回一個(gè)包含應(yīng)用指令的 VNode。

import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')
return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])

#參數(shù)

接受兩個(gè)參數(shù)：vnode 和 directives。

#vnode

• 類(lèi)型：vnode

• 詳細(xì)：

一個(gè)虛擬節(jié)點(diǎn)，通常使用 h() 創(chuàng)建。

#directives

• 類(lèi)型：Array

• 詳細(xì)：

一個(gè)指令數(shù)組。

每個(gè)指令本身都是一個(gè)數(shù)組，最多可以定義 4 個(gè)索引，如以下示例所示。

• [directive] - 該指令本身。必選。

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

• [directive, value] - 上述內(nèi)容，再加上分配給指令的類(lèi)型為 any 的值。

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

• [directive, value, arg] - 上述內(nèi)容，再加上一個(gè) string 參數(shù)，比如：在 v-on:click 中的 click。

  const MyDirective = resolveDirective('MyDirective')
  const nodeWithDirectives = withDirectives(h('div'), [
    [MyDirective, 100, 'click']
  ])

• [directive, value, arg, modifiers] - 上述內(nèi)容，再加上定義任何修飾符的 key: value 鍵值對(duì) Object。

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

#createRenderer

createRenderer 函數(shù)接受兩個(gè)泛型參數(shù)： HostNode 和 HostElement，對(duì)應(yīng)于宿主環(huán)境中的 Node 和 Element 類(lèi)型。

例如，對(duì)于 runtime-dom，HostNode 將是 DOM Node 接口，HostElement 將是 DOM Element 接口。

自定義渲染器可以傳入特定于平臺(tái)的類(lèi)型，如下所示：

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

#參數(shù)

接受兩個(gè)參數(shù)：HostNode 和 HostElement。

#HostNode

• 類(lèi)型：Node

• 詳細(xì)：

宿主環(huán)境中的節(jié)點(diǎn)。

#HostElement

• 類(lèi)型：Element

• 詳細(xì)：

宿主環(huán)境中的元素。

#nextTick

將回調(diào)推遲到下一個(gè) DOM 更新周期之后執(zhí)行。在更改了一些數(shù)據(jù)以等待 DOM 更新后立即使用它。

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')
    }
  }
})

參考：$nextTick 實(shí)例方法