全局 API：常规
本次笔记
version
nextTick()
defineComponent()
defineAsyncComponent()
defineCustomElement()
1.version
暴露当前所使用的 Vue 版本。
- 类型 string
- 示例
import { version } from 'vue'
console.log(version)
2.nextTick()
等待下一次 DOM 更新刷新的工具方法。
- 类型
function nextTick(callback?: () => void): Promise<void>
- 详细信息
当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是 同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个**“tick”才一起执行**。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。
nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。
- 示例
<template>
<button id="counter" @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const count = ref(0)
async function increment() {
count.value++
// DOM 还未更新
console.log(document.getElementById('counter').textContent) // 0
await nextTick()
// DOM 此时已经更新
console.log(document.getElementById('counter').textContent) // 1
}
</script>
defineComponent() —整不懂
在定义 Vue 组件时提供类型推导的辅助函数。
- 类型
// 选项语法
function defineComponent(
component: ComponentOptions
): ComponentConstructor
// 函数语法 (需要 3.3+)
function defineComponent(
setup: ComponentOptions['setup'],
extraOptions?: ComponentOptions
): () => any
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
}
defineCustomElement()
这个方法和 defineComponent 接受的参数相同，不同的是会返回一个原生自定义元素类的构造器。
- 类型
function defineCustomElement(
component:
| (ComponentOptions & { styles?: string[] })
| ComponentOptions['setup']
): {
new (props?: object): HTMLElement
}
- 示例
import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
/* 组件选项 */
})
// 注册自定义元素
customElements.define('my-vue-element', MyVueElement)
