Vue3汎用API関数の使い方-Vue.js-php.cn

General API

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

import Vue from &#39;vue&#39;;
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 がコンポーネントオプションの型を正しく推測できるようにします)

人気のチュートリアル

詳細>