Comment utiliser la fonction API générale de Vue3

API générale

version (expose la version de Vue actuellement utilisée)

import Vue from 'vue';
export default {
    setup(props, context) {
        console.log(Vue.version);
        return {};
    }
};

nextTick (déclenchée une fois la mise à jour du Dom terminée, utilisée pour obtenir le Dom mis à jour)

Lorsque nous modifions le state réactif, Vue update DOM n'est pas mis à jour de manière synchrone en temps réel, mais met en cache toutes les mises à jour d'état exécutées de manière synchrone. Une fois le code de synchronisation exécuté, l'opération de mise à jour Dom est effectuée, ce qui est très. difficile. Les performances de render ont été optimisées dans une large mesure et le nombre de mises à jour de Dom a été réduit 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 正确地推导出组件选项内的类型）

如果你使用f84f58e8776554134faa77b8b91daf01语法，就需要使用defineProps让TS推导出组件的Props

<script setup lang="ts">
// 启用了 TypeScript
import { ref } from &#39;vue&#39;
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

bb06e69d307cb52103d07d8f9dd385e5 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

虽然defineAsyncComponent具备loadingComponent参数来配置加载异步组件时的Loading组件，但是在一些场景，是需要使用Suspense来使用的。例如：A组件依赖了B、C、D，如果三个都是异步组件，加载的过程要显示3个Loading，而Suspense可以配置所有子组件存在未加载时而现实的Loading。

defineCustomElement (使用Vue组件开发Web Components)

关于Web Components的介绍请参考文章 Web Components入门

Vue 提供了一个和定义一般 Vue 组件几乎完全一致的defineCustomElement

Un problème causé par cette fonctionnalité est que nous ne pouvons pas le faire ; update stateLe vrai Dom est obtenu après le changement, donc Vue fournit nextTick pour obtenir le Dom mis à jour après state🎜

import { defineCustomElement } from 'vue';
const MyVueElement = defineCustomElement({
    /* 组件选项 */
});
// 注册自定义元素
customElements.define('my-vue-element', MyVueElement);

🎜Cas d'utilisation🎜rrreee🎜Après avoir cliqué sur le bouton Mettre à jour, test_2 est affiché. Cependant, si text.value = 'test_1'; est commenté, le résultat de sortie est assez différent, test_0 est affiché. 🎜🎜Pourquoi y a-t-il ce problème ? 🎜🎜 L'opération d'affectation text.value est synchrone et en temps réel. Lorsque l'exécution du code rencontre des changements dans l'état réactif, une logique de mise à jour de la vue sera. soumis Accédez à la file d'attente des microtâches et lorsque nextTick est rencontré, il sera également soumis à la file d'attente des microtâches. Par conséquent, dans le code ci-dessus, View Update Logic se trouve devant nextTick, et l'exécution de View Update Logic consiste à modifier text.value = 'test_1' et <code>text.value = 'test_2' sont fusionnés avant de mettre à jour la vue, donc test2 est affiché ;🎜🎜Après avoir commenté text.value = 'test_1', nextTick dans la file d'attente des microtâches est juste avant afficher la logique de mise à jour, donc test_0 est sorti. 🎜🎜defineComponent (fonction auxiliaire pour l'inférence de type, permettant à TypeScript de déduire correctement le type dans l'option du composant)🎜🎜Si vous utilisez la syntaxe 752f0c4521bd75dec1baff2d2a067fcf, vous avez besoin pour utiliser defineProps, TS dérive les Props🎜rrreee🎜Si vous n'utilisez pas la syntaxe setup, pensez l'utilisation de definitionComponent est enveloppée pour obtenir une déduction de type🎜rrreee🎜Si le projet utilise Webpack, veuillez noter que defineComponent peut empêcher le composant de secouer l'arbre Afin de garantir que le composant Le <code>tree shaker sécurisé doit être traité pendant le développement🎜rrreee🎜Si le projet utilise Vite, il n'est pas nécessaire d'effectuer aucun traitement, car le RollupVite /code> pensera intelligemment que defineComponent n'a aucun effet secondaire. 🎜🎜defineAsyncComponent (composant asynchrone)🎜🎜Pendant le processus de développement, il existe certains scénarios tels que : les formulaires dans les boîtes contextuelles, les composants sous d'autres onglets, etc. n'ont pas besoin d'être chargés lors de l'initialisation de la page. Nous pouvons envisager d'utiliser <. code>defineAsyncComponent pour le déclarer comme composant asynchrone afin d'augmenter la vitesse d'initialisation de la page. 🎜🎜Utilisation un (obtenir des composants du serveur)🎜rrreee🎜Utilisation deux (charger les composants locaux de manière asynchrone)🎜rrreee🎜defineAsyncComponent autre configuration de paramètres🎜rrreee🎜Suspense🎜🎜bb06e69d307cb52103d07d8f9dd385e5 est un dans le composant. Utilisé pour coordonner le traitement des dépendances asynchrones dans l'arborescence des composants. Cela nous permet d'attendre plus haut dans l'arborescence des composants que plusieurs dépendances asynchrones imbriquées ci-dessous soient résolues et de restituer un état de chargement en attendant. 🎜🎜Bien que defineAsyncComponent ait le paramètre loadingComponent pour configurer le composant Loading lors du chargement de composants asynchrones, dans certains scénarios, Suspense doit être utilisé. Par exemple : un composant dépend de B, C et D. Si tous les trois sont des composants asynchrones, le processus de chargement affichera trois chargements, et Suspense pourra configurer tous les sous-composants pour qu'ils aient un chargement réel lorsqu'ils ne sont pas chargés. 🎜🎜defineCustomElement (Développement de composants Web à l'aide de composants Vue)🎜🎜Pour une introduction aux Composants Web, veuillez vous référer à l'article Premiers pas avec les composants Web🎜🎜Vue fournit un defineCustomElement presque identique à la définition de la méthode générale des composants Vue pour prendre en charge la création d'éléments personnalisés. 🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!