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

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>

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

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

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

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

Penggunaan satu (dapatkan komponen daripada pelayan)defineAsyncComponent

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

. 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

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

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