真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue3通用API功能如何使用

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

成都創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司,專注成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站營(yíng)銷推廣,域名注冊(cè),虛擬主機(jī)綿陽(yáng)服務(wù)器托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題,請(qǐ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時(shí),Vue更新DOM并不是同步實(shí)時(shí)更新的,而是將同步執(zhí)行的所有state更新緩存起來(lái),同步代碼執(zhí)行完后再去執(zhí)行Dom更新操作,很大程度的優(yōu)化了render性能,減少了Dom更新次數(shù);

而這一特性帶來(lái)的一個(gè)問題,我們無(wú)法在state更改后獲取到真實(shí)的Dom,所以Vue提供了nextTick來(lái)獲取state更新后的Dom

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

使用案例



import { ref, nextTick } from 'vue';
const text = ref('test_0');
const onBtnClick = () => {
    text.value = 'test_1';
    nextTick(() => {
        const text = (
            document.querySelector('.text') as HTMLElement
        ).innerText;
        console.log(text);
    });
    text.value = 'test_2';
};

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

為什么會(huì)有這個(gè)問題?

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

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

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

如果你使用

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

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

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

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

如果項(xiàng)目用Vite,不需要做任何處理,因?yàn)?code>Vite底層的Rollup會(huì)智能的認(rèn)為defineComponent沒有副作用。

defineAsyncComponent (異步組件)

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

用法一(從服務(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'),
        // 加載異步組件時(shí)使用的組件
        loadingComponent: LoadingComponent,
        // 展示加載組件前的延遲時(shí)間,默認(rèn)為 200ms
        delay: 200,
        // 加載失敗后展示的組件
        errorComponent: ErrorComponent,
        // 如果提供了一個(gè) timeout 時(shí)間限制,并超時(shí)了
        // 也會(huì)顯示這里配置的報(bào)錯(cuò)組件,默認(rèn)值是:Infinity
        timeout: 3000
    });
Suspense

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

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

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

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

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

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

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


當(dāng)前文章:Vue3通用API功能如何使用
分享鏈接:http://weahome.cn/article/pcgedc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部