全域性 API：通用

版本

暴露 Vue 的當前版本。

型別： string

示例

import { version } from 'vue'

console.log(version)

nextTick()

等待下一次 DOM 更新重新整理的實用工具。

型別

function nextTick(callback?: () => void): Promise<void>

細節
當你對 Vue 中的響應式狀態進行更改時，產生的 DOM 更新不是同步應用的。相反，Vue 將它們緩衝到“下一個tick”，以確保每個元件只更新一次，無論你進行了多少次狀態更改。
nextTick() 可用於狀態更改後立即等待 DOM 更新的完成。你可以傳遞一個回撥作為引數，或者等待返回的 Promise。

示例

vue

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM not yet updated
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  // DOM is now updated
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

vue

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM not yet updated
      console.log(document.getElementById('counter').textContent) // 0

      await nextTick()
      // DOM is now updated
      console.log(document.getElementById('counter').textContent) // 1
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

另請參閱 this.$nextTick()

defineComponent()

用於定義具有型別推斷的 Vue 元件的型別輔助工具。

型別

// options syntax
function defineComponent(
  component: ComponentOptions
): ComponentConstructor

// function syntax (requires 3.3+)
function defineComponent(
  setup: ComponentOptions['setup'],
  extraOptions?: ComponentOptions
): () => any

型別已簡化以提高可讀性。

細節
第一個引數期望一個元件選項物件。返回值將是相同的選項物件，因為該函式本質上是執行時無操作，僅用於型別推斷目的。
請注意，返回型別有些特殊：它將是一個建構函式型別，其例項型別是基於選項推斷的元件例項型別。這用於當返回型別用作 TSX 中的標籤時的型別推斷。
你可以從 defineComponent() 的返回型別中提取元件的例項型別（相當於其選項中的 this 型別），如下所示
ts
```
const Foo = defineComponent(/* ... */)

type FooInstance = InstanceType<typeof Foo>
```
函式簽名
- 僅支援在 3.3+ 中
defineComponent() 還有一個旨在與 Composition API 和渲染函式或 JSX 一起使用的替代簽名。
而不是傳遞一個選項物件，期望一個函式。這個函式與 Composition API setup() 函式的工作方式相同：它接收屬性和設定上下文。返回值應該是渲染函式 - 支援使用 h() 和 JSX。
js
```
import { ref, h } from 'vue'

const Comp = defineComponent(
  (props) => {
    // use Composition API here like in <script setup>
    const count = ref(0)

    return () => {
      // render function or JSX
      return h('div', count.value)
    }
  },
  // extra options, e.g. declare props and emits
  {
    props: {
      /* ... */
    }
  }
)
```
此簽名的主要用例是與TypeScript（尤其是與TSX）一起使用，因為它支援泛型
tsx
```
const Comp = defineComponent(
  <T extends string | number>(props: { msg: T; list: T[] }) => {
    // use Composition API here like in <script setup>
    const count = ref(0)

    return () => {
      // render function or JSX
      return <div>{count.value}</div>
    }
  },
  // manual runtime props declaration is currently still needed.
  {
    props: ['msg', 'list']
  }
)
```
未來，我們計劃提供一個Babel外掛，該外掛可以自動推斷並注入執行時屬性（例如，對於SFC中的defineProps），以便可以省略執行時屬性的宣告。
關於webpack Treeshaking的說明
因為defineComponent()是一個函式呼叫，它可能會對一些構建工具產生副作用，例如webpack。這將會阻止元件在被使用時進行樹搖。
為了告訴webpack此函式呼叫是安全的，可以樹搖，你可以在函式呼叫之前新增一個/*#__PURE__*/註釋
js
```
export default /*#__PURE__*/ defineComponent(/* ... */)
```
注意，如果你使用Vite，則此操作不是必需的，因為Rollup（Vite使用的底層生產打包器）足夠智慧，可以確定defineComponent()實際上是無副作用的，無需手動註釋。
另請參閱 指南 - 使用Vue與TypeScript

defineAsyncComponent()

定義一個非同步元件，只有當它被渲染時才會進行懶載入。引數可以是載入函式，或者是一個用於更高階載入行為控制的選項物件。

型別

function defineAsyncComponent(
  source: AsyncComponentLoader | AsyncComponentOptions
): Component

type AsyncComponentLoader = () => Promise<Component>

interface AsyncComponentOptions {
  loader: AsyncComponentLoader
  loadingComponent?: Component
  errorComponent?: Component
  delay?: number
  timeout?: number
  suspensible?: boolean
  onError?: (
    error: Error,
    retry: () => void,
    fail: () => void,
    attempts: number
  ) => any
}

另請參閱 指南 - 非同步元件

在GitHub上編輯此頁面

全域性 API：通用 ​

版本 ​

nextTick() ​

defineComponent() ​

函式簽名 ​

關於webpack Treeshaking的說明 ​

defineAsyncComponent() ​

全域性 API：通用

版本

nextTick()

defineComponent()

函式簽名

關於webpack Treeshaking的說明

defineAsyncComponent()