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 &#39;vue&#39;;
const text = ref(&#39;test_0&#39;);
const onBtnClick = () => {
    text.value = &#39;test_1&#39;;
    nextTick(() => {
        const text = (
            document.querySelector<HTMLElement>(&#39;.text&#39;) as HTMLElement
        ).innerText;
        console.log(text);
    });
    text.value = &#39;test_2&#39;;
};
</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 正确地推导出组件选项内的类型）

如果你使用