Vue3汎用API関数の使い方

General API

version (現在使用されている Vue バージョンを公開します)

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

nextTick (Dom の更新完了後にトリガーされ、更新された Dom を取得するために使用されます)

応答性の state を変更すると、VueupdateDOM はリアルタイムで同期的に更新されませんが、同期的に実行されるすべての状態更新はキャッシュされ、同期コードは実行が完了したら、Dom 更新操作を実行します。これにより、render のパフォーマンスが大幅に最適化され、Dom 更新の数が削減されます;

そして、この機能がもたらす 1 つの問題は次のとおりです。 state が変更された後は実際の Dom を取得できないため、Vue は更新された state Dom# を取得するための nextTick を提供します。 ##

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>

Update ボタンをクリックした後、test_2 を出力します。ただし、text.value = 'test_1'; をコメントアウトすると、出力結果は大きく異なり、test_0 が出力されます。

なぜこの問題が発生するのでしょうか?

text.value割り当て操作は同期的でリアルタイムです。コードの実行で 応答状態の変化が発生すると、ビュー更新ロジック##が発生します。 # マイクロタスク キューに移動し、nextTick が検出されると、それもマイクロタスク キューに送信されます。したがって、上記のコードでは、View 更新ロジック が nextTick の前にあり、Text.value = 'test_1' を変更することで View 更新ロジック が実行されます。 と text.value = 'test_2'マージ後にビューを更新するため、test2 を出力します;コメントアウト

text.value = 'test_1'

,nextTick マイクロタスク キュー内の順序は View update ロジック よりも前であるため、test_0 が出力されます。 defineComponent (型推論のための補助関数。TypeScript がコンポーネント オプションの型を正しく推測できるようにします)

752f0c4521bd75dec1baff2d2a067fcf# を使用する場合## 構文。

setup を使用しない場合は、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>

を導出させる必要があります。構文、型導出を実現するためのラップには

defineComponent の使用を検討してください。

import { defineComponent } from 'vue'
export default defineComponent({
  // 启用了类型推导
  props: {
    message: String
  },
  setup(props) {
    props.message // 类型：string | undefined
  }
})

プロジェクトで Webpack を使用する場合、defineComponent

によりコンポーネントが

にならない可能性があることに注意してください。ツリーシェイキング、コンポーネントが安全であることを保証するために ツリーシェイキング、開発中に何らかの処理を行う必要があります

export default /*#__PURE__*/ defineComponent(/* ... */)

プロジェクトが Vite を使用している場合、これを行う必要はありません。 Vite

基礎となる

Rollup は、defineComponent には副作用がないと知的に判断するため、あらゆる処理を実行します。 defineAsyncComponent (非同期コンポーネント)

開発プロセス中に、ポップアップ ボックス内のフォーム、他のタブの下のコンポーネントなどをロードする必要がないようなシナリオがいくつかあります。ページの初期化速度を向上させるために、

defineAsyncComponent

を使用して非同期コンポーネントとして宣言することを検討できます。

import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
        // ...从服务器获取组件
        resolve(/* 获取到的组件 */);
    });
});

使用法 1 (サーバーからコンポーネントを取得)

import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(
    () => import('./components/MyComponent.vue')
);

使用法 2 (ローカル コンポーネントを非同期でロード)

 const AsyncComp = defineAsyncComponent({
        // 加载函数
        loader: () => import('./Foo.vue'),
        // 加载异步组件时使用的组件
        loadingComponent: LoadingComponent,
        // 展示加载组件前的延迟时间，默认为 200ms
        delay: 200,
        // 加载失败后展示的组件
        errorComponent: ErrorComponent,
        // 如果提供了一个 timeout 时间限制，并超时了
        // 也会显示这里配置的报错组件，默认值是：Infinity
        timeout: 3000
    });

defineAsyncComponentその他のパラメーター構成

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

Suspense

bb06e69d307cb52103d07d8f9dd385e5

は、コンポーネント ツリー内の非同期依存関係の処理を調整するために使用される組み込みコンポーネントです。これにより、以下の複数の入れ子になった非同期依存関係が解決されるまでコンポーネント ツリーの上位で待機し、待機中に読み込み状態をレンダリングできます。

defineAsyncComponent

には、非同期コンポーネントを読み込むときに読み込みコンポーネントを構成するための

loadingComponent パラメーターがありますが、一部のシナリオでは、次の Suspense を使用する必要があります。 。例: コンポーネントは B、C、D に依存します。3 つすべてが非同期コンポーネントの場合、読み込みプロセスでは 3 つの読み込みが表示され、Suspense はすべてのサブコンポーネントが実際の読み込みを持つように構成できます。読み込まれていない。 defineCustomElement (Vue コンポーネントを使用した Web コンポーネントの開発)

Web コンポーネント

の概要については、「Web コンポーネント入門」の記事を参照してください

Vue は と 定義を提供します 一般に、Vue コンポーネントには、カスタム要素の作成をサポートするためにほぼ同じ defineCustomElement

メソッドがあります。

rree

以上がVue3汎用API関数の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。