本文小编为大家详细介绍“Vue3通用API功能怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue3通用API功能怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
通用API
version （暴漏当前使用的Vue版本）
import Vue from 'vue';
export default {
setup(props, context) {
console.log(Vue.version);
return {};
}
};nextTick （Dom更新完成后触发，用于获取更新后的Dom）
当我们更改响应式
state时，
Vue更新
DOM并不是同步实时更新的，而是将同步执行的所有state更新缓存起来，同步代码执行完后再去执行Dom更新操作，很大程度的优化了
render性能，减少了
Dom更新次数；
而这一特性带来的一个问题，我们无法在
state更改后获取到真实的
Dom，所以Vue提供了
nextTick来获取
state更新后的
Dom
function nextTick(callback?: () => void): Promise<void>
使用案例
<template>
<div class="test_demo">
<h3 class="text">{{ text }}</h3>
<button @click="onBtnClick">更新</button>
</div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue';
const text = ref('test_0');
const onBtnClick = () => {
text.value = 'test_1';
nextTick(() => {
const text = (
document.querySelector<HTMLElement>('.text') as HTMLElement
).innerText;
console.log(text);
});
text.value = 'test_2';
};
</script>点击
更新按钮后，输出test_2。但是，如果注释掉
text.value = 'test_1';，输出结果大不一样，输出test_0。
为什么会有这个问题？
text.value赋值操作是同步实时的，代码执行遇到
响应式state的更改时，会提交一个
视图更新逻辑到微任务队列，遇到nextTick，也会向微任务队列提交。 所以上述代码，
视图更新逻辑在
nextTick前边，
视图更新逻辑的执行是将
text.value = 'test_1'和
text.value = 'test_2'合并后再更新视图，所以输出test2;
注释掉
text.value = 'test_1'后，
nextTick在微任务队列的顺序就在
视图更新逻辑前边了，所以输出test_0。
defineComponent（类型推导的辅助函数, 让 TypeScript 正确地推导出组件选项内的类型）
如果你使用
<script setup lang='ts'>语法，就需要使用
defineProps让
TS推导出组件的
Props
<script setup lang="ts">
// 启用了 TypeScript
import { ref } from 'vue'
const props = defineProps({ msg: String })
const count = ref(1)
</script>
<template>
<!-- 启用了类型检查和自动补全 -->
{{ count.toFixed(2) }}
</template>如果没有使用
setup语法，考虑使用
defineComponent进行包裹，从而实现类型推导
import { defineComponent } from 'vue'
export default defineComponent({
// 启用了类型推导
props: {
message: String
},
setup(props) {
props.message // 类型：string | undefined
}
})如果项目用Webpack，需要注意下，
defineComponent可能导致组件无法被
tree shaking, 为了确保组件被安全的
tree shaking，需要我们开发时做一下处理
export default /*#__PURE__*/ defineComponent(/* ... */)
如果项目用Vite，不需要做任何处理，因为
Vite底层的
Rollup会智能的认为
defineComponent没有副作用。
defineAsyncComponent （异步组件）
开发过程中，有一些场景例如：弹框内的表单、其它Tab下的组件等在页面初始化时不需要加载，我们可以考虑使用
defineAsyncComponent来声明成异步组件，从而提高页面初始化的速度。
用法一(从服务器获取组件)
import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
// ...从服务器获取组件
resolve(/* 获取到的组件 */);
});
});用法二(异步加载本地组件)
import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(
() => import('./components/MyComponent.vue')
);defineAsyncComponent其它参数配置
const AsyncComp = defineAsyncComponent({
// 加载函数
loader: () => import('./Foo.vue'),
// 加载异步组件时使用的组件
loadingComponent: LoadingComponent,
// 展示加载组件前的延迟时间，默认为 200ms
delay: 200,
// 加载失败后展示的组件
errorComponent: ErrorComponent,
// 如果提供了一个 timeout 时间限制，并超时了
// 也会显示这里配置的报错组件，默认值是：Infinity
timeout: 3000
});Suspense
<Suspense>是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。
虽然
defineAsyncComponent具备
loadingComponent参数来配置加载异步组件时的Loading组件，但是在一些场景，是需要使用
Suspense来使用的。例如：A组件依赖了B、C、D，如果三个都是异步组件，加载的过程要显示3个Loading，而
Suspense可以配置所有子组件存在未加载时而现实的Loading。
defineCustomElement (使用Vue组件开发Web Components)
关于
Web Components的介绍请参考文章 Web Components入门
Vue 提供了一个和定义一般 Vue 组件几乎完全一致的
defineCustomElement方法来支持创建自定义元素。
import { defineCustomElement } from 'vue';
const MyVueElement = defineCustomElement({
/* 组件选项 */
});
// 注册自定义元素
customElements.define('my-vue-element', MyVueElement);