Vue.js

外观

本页

全局 API：通用 ​

版本 ​

暴露 Vue 的当前版本。

  • 类型： string

  • 示例

    js
    import { version } from 'vue'

console.log(version)

nextTick() ​

等待下一次 DOM 更新刷新的实用工具。

  • 类型

    ts
    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 组件的类型辅助工具。

  • 类型

    ts
    // 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() ​

定义一个异步组件，只有当它被渲染时才会进行懒加载。参数可以是加载函数，或者是一个用于更高级加载行为控制的选项对象。

  • 类型

    ts
    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上编辑此页面