Vue3通用API功能如何使用

這篇文章主要介紹了Vue3通用API功能如何使用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue3通用API功能如何使用文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站營銷推廣，域名注冊，虛擬主機(jī)，綿陽服務(wù)器托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費用等問題，請聯(lián)系成都創(chuàng)新互聯(lián)公司。

通用API

version （暴漏當(dāng)前使用的Vue版本）

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

nextTick （Dom更新完成后觸發(fā)，用于獲取更新后的Dom）

當(dāng)我們更改響應(yīng)式state時，Vue更新DOM并不是同步實時更新的，而是將同步執(zhí)行的所有state更新緩存起來，同步代碼執(zhí)行完后再去執(zhí)行Dom更新操作，很大程度的優(yōu)化了render性能，減少了Dom更新次數(shù)；

而這一特性帶來的一個問題，我們無法在state更改后獲取到真實的Dom，所以Vue提供了nextTick來獲取state更新后的Dom

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

使用案例

<template>
    <div class="test_demo">
        <h4 class="text">{{ text }}</h4>
        <button @click="onBtnClick">更新</button>
    </div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue';
const text = ref('test_0');
const onBtnClick = () => {
    text.value = 'test_1';
    nextTick(() => {
        const text = (
            document.querySelector<HTMLElement>('.text') as HTMLElement
        ).innerText;
        console.log(text);
    });
    text.value = 'test_2';
};
</script>

點擊更新按鈕后，輸出test_2。但是，如果注釋掉text.value = 'test_1';，輸出結(jié)果大不一樣，輸出test_0。

為什么會有這個問題？

text.value賦值操作是同步實時的，代碼執(zhí)行遇到響應(yīng)式state的更改時，會提交一個視圖更新邏輯到微任務(wù)隊列，遇到nextTick，也會向微任務(wù)隊列提交。 所以上述代碼，視圖更新邏輯在nextTick前邊，視圖更新邏輯的執(zhí)行是將text.value = 'test_1'和text.value = 'test_2'合并后再更新視圖，所以輸出test2;

注釋掉text.value = 'test_1'后，nextTick在微任務(wù)隊列的順序就在視圖更新邏輯前邊了，所以輸出test_0。

defineComponent（類型推導(dǎo)的輔助函數(shù), 讓 TypeScript 正確地推導(dǎo)出組件選項內(nèi)的類型）

如果你使用<script setup lang='ts'>語法，就需要使用defineProps讓TS推導(dǎo)出組件的Props

<script setup lang="ts">
// 啟用了 TypeScript
import { ref } from 'vue'
const props = defineProps({ msg: String })
const count = ref(1)
</script>
<template>
  <!-- 啟用了類型檢查和自動補(bǔ)全 -->
  {{ count.toFixed(2) }}
</template>

如果沒有使用setup語法，考慮使用defineComponent進(jìn)行包裹，從而實現(xiàn)類型推導(dǎo)

import { defineComponent } from 'vue'
export default defineComponent({
  // 啟用了類型推導(dǎo)
  props: {
    message: String
  },
  setup(props) {
    props.message // 類型：string | undefined
  }
})

如果項目用Webpack，需要注意下，defineComponent可能導(dǎo)致組件無法被tree shaking, 為了確保組件被安全的tree shaking，需要我們開發(fā)時做一下處理

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

如果項目用Vite，不需要做任何處理，因為Vite底層的Rollup會智能的認(rèn)為defineComponent沒有副作用。

defineAsyncComponent （異步組件）

開發(fā)過程中，有一些場景例如：彈框內(nèi)的表單、其它Tab下的組件等在頁面初始化時不需要加載，我們可以考慮使用defineAsyncComponent來聲明成異步組件，從而提高頁面初始化的速度。

用法一(從服務(wù)器獲取組件)

import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
        // ...從服務(wù)器獲取組件
        resolve(/* 獲取到的組件 */);
    });
});

用法二(異步加載本地組件)

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

defineAsyncComponent其它參數(shù)配置

 const AsyncComp = defineAsyncComponent({
        // 加載函數(shù)
        loader: () => import('./Foo.vue'),
        // 加載異步組件時使用的組件
        loadingComponent: LoadingComponent,
        // 展示加載組件前的延遲時間，默認(rèn)為 200ms
        delay: 200,
        // 加載失敗后展示的組件
        errorComponent: ErrorComponent,
        // 如果提供了一個 timeout 時間限制，并超時了
        // 也會顯示這里配置的報錯組件，默認(rèn)值是：Infinity
        timeout: 3000
    });

Suspense

<Suspense> 是一個內(nèi)置組件，用來在組件樹中協(xié)調(diào)對異步依賴的處理。它讓我們可以在組件樹上層等待下層的多個嵌套異步依賴項解析完成，并可以在等待時渲染一個加載狀態(tài)。

雖然defineAsyncComponent具備loadingComponent參數(shù)來配置加載異步組件時的Loading組件，但是在一些場景，是需要使用Suspense來使用的。例如：A組件依賴了B、C、D，如果三個都是異步組件，加載的過程要顯示3個Loading，而Suspense可以配置所有子組件存在未加載時而現(xiàn)實的Loading。

defineCustomElement (使用Vue組件開發(fā)Web Components)

關(guān)于Web Components的介紹請參考文章 Web Components入門

Vue 提供了一個和定義一般 Vue 組件幾乎完全一致的defineCustomElement方法來支持創(chuàng)建自定義元素。

import { defineCustomElement } from 'vue';
const MyVueElement = defineCustomElement({
    /* 組件選項 */
});
// 注冊自定義元素
customElements.define('my-vue-element', MyVueElement);

關(guān)于“Vue3通用API功能如何使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue3通用API功能如何使用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：Vue3通用API功能如何使用
文章URL：http://bm7419.com/article12/pcgedc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、域名注冊、小程序開發(fā)、App設(shè)計、網(wǎng)站排名、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)