這篇文章主要介紹了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)公司。
import Vue from 'vue'; export default { setup(props, context) { console.log(Vue.version); return {}; } };
當(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
使用案例
{{ text }}
點(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。
如果你使用語(yǔ)法,就需要使用
defineProps
讓TS
推導(dǎo)出組件的Props
{{ count.toFixed(2) }}
如果沒有使用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
沒有副作用。
開發(fā)過程中,有一些場(chǎng)景例如:彈框內(nèi)的表單、其它Tab下的組件等在頁(yè)面初始化時(shí)不需要加載,我們可以考慮使用defineAsyncComponent
來(lái)聲明成異步組件,從而提高頁(yè)面初始化的速度。
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') );
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 });
是一個(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。
關(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è)資訊頻道。