Cara menggunakan fungsi API am Vue3

API Biasa

versi (mendedahkan versi Vue yang sedang digunakan)

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

nextTick (dicetuskan selepas kemas kini Dom selesai, digunakan untuk mendapatkan Dom yang dikemas kini)

Apabila kami menukar state responsif, kemas kini Vue DOM tidak dikemas kini secara serentak dalam masa nyata Sebaliknya, semua kemas kini keadaan yang dilaksanakan secara serentak dicache Selepas kod penyegerakan dilaksanakan, operasi kemas kini Dom dilakukan, iaitu sangat besar. Ia mengoptimumkan render prestasi pada tahap tertentu dan mengurangkan bilangan Dom kemas kini

dan masalah yang disebabkan oleh ciri ini ialah kita tidak boleh mendapatkan state sebenar selepas Dom berubah, jadi Vue menyediakan nextTick untuk mendapatkan statekemas kiniDom

function nextTick(callback?: () => void): Promise<void>

Kes penggunaan

<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>

Selepas mengklik butang 更新, test_2 ialah keluaran. Walau bagaimanapun, jika text.value = 'test_1'; diulas, hasil output agak berbeza dan test_0 ialah output.

Kenapa ada masalah ini?

text.value operasi penugasan adalah segerak dan masa nyata Apabila pelaksanaan kod bertemu dengan perubahan kepada 响应式state, 视图更新逻辑 akan diserahkan kepada baris gilir microtask Apabila nextTick ditemui, ia juga akan diserahkan ke baris gilir microtask. Oleh itu, dalam kod di atas, 视图更新逻辑 berada di hadapan nextTick, dan pelaksanaan 视图更新逻辑 adalah untuk menggabungkan text.value = 'test_1' dan text.value = 'test_2' sebelum mengemas kini paparan, jadi ujian output2; > selepas mengulas

,

berada di hadapan text.value = 'test_1' dalam baris gilir microtask, jadi test_0 ialah output. nextTick视图更新逻辑defineComponent (fungsi pembantu untuk jenis inferens, membenarkan TypeScript menyimpulkan dengan betul jenis dalam pilihan komponen)

Jika anda menggunakan sintaks

, anda perlu menggunakan

untuk biarkan <script setup lang=&#39;ts&#39;> Deduced component definePropsTS

<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>

PropsJika sintaks

tidak digunakan, pertimbangkan untuk menggunakan

untuk membalutnya untuk mencapai jenis terbitansetuprreeedefineComponentJika projek menggunakan Webpack , anda perlu memberi perhatian

Ia mungkin menyebabkan komponen tidak boleh menjadi

Untuk memastikan komponen selamat defineComponent, kita perlu melakukan beberapa pemprosesan semasa pembangunan tree shaking

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

<. 🎜>Jika projek menggunakan Vite, tidak perlu melakukan sebarang pemprosesan, kerana tree shakingPendasar

akan secara bijak berfikir bahawa

tidak mempunyai kesan sampingan. ViteRollupdefineAsyncComponent (komponen tak segerak) defineComponent

Semasa proses pembangunan, terdapat beberapa senario seperti: borang dalam kotak pop timbul, komponen di bawah tab lain, dsb. tidak perlu dimuatkan semasa pemulaan halaman Kami boleh mempertimbangkan untuk menggunakan

untuk mengisytiharkannya sebagai komponen tak segerak untuk meningkatkan kelajuan pemulaan halaman.

Penggunaan satu (dapatkan komponen daripada pelayan)defineAsyncComponent

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

Penggunaan dua (muat komponen setempat secara tidak segerak)

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

defineAsyncComponent konfigurasi parameter lain

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

Suspense

ialah komponen terbina dalam yang digunakan untuk menyelaraskan pemprosesan kebergantungan tak segerak dalam pepohon komponen. Ia membolehkan kami menunggu lebih tinggi di atas pepohon komponen untuk beberapa kebergantungan tak segerak bersarang di bawah untuk diselesaikan dan menyebabkan keadaan pemuatan semasa menunggu.

Walaupun <Suspense> mempunyai parameter

untuk mengkonfigurasi komponen Memuatkan apabila memuatkan komponen tak segerak, dalam beberapa senario, ia perlu menggunakan

. Contohnya: Komponen A bergantung pada B, C dan D. Jika ketiga-tiga komponen tak segerak, proses pemuatan akan memaparkan tiga Pemuatan dan defineAsyncComponent boleh mengkonfigurasi semua subkomponen untuk mempunyai Pemuatan sebenar apabila ia tidak dimuatkan. loadingComponentSuspensedefineCustomElement (Membangunkan Komponen Web menggunakan komponen Vue)Suspense

Untuk pengenalan kepada

, sila rujuk artikel Bermula dengan Komponen Web

Vue menyediakan hampir lengkap takrifan komponen Vue am Pendekatan Web Components yang konsisten untuk menyokong penciptaan elemen tersuai.

rreeee

Atas ialah kandungan terperinci Cara menggunakan fungsi API am Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!