Vue3通用API功能示例剖析
通用API
version （暴漏當前使用的Vue版本）
import Vue from 'vue';
export default {
setup(props, context) {
console.log(Vue.version);
return {};
}
};
nextTick （Dom更新完成后觸發(fā)，用于獲取更新后的Dom）
當我們更改響應式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">
<h2 class="text">{{ text }}</h2>
<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í)行遇到響應式state的更改時，會提交一個視圖更新邏輯到微任務隊列，遇到nextTick，也會向微任務隊列提交。 所以上述代碼，視圖更新邏輯在nextTick前邊，視圖更新邏輯的執(zhí)行是將text.value = 'test_1'和text.value = 'test_2'合并后再更新視圖，所以輸出test2;
注釋掉text.value = 'test_1'后，nextTick在微任務隊列的順序就在視圖更新邏輯前邊了，所以輸出test_0。
defineComponent（類型推導的輔助函數(shù), 讓 TypeScript 正確地推導出組件選項內(nèi)的類型）
如果你使用<script setup lang='ts'>語法，就需要使用defineProps讓TS推導出組件的Props
<script setup lang="ts">
// 啟用了 TypeScript
import { ref } from 'vue'
const props = defineProps({ msg: String })
const count = ref(1)
</script>
<template>
<!-- 啟用了類型檢查和自動補全 -->
{{ count.toFixed(2) }}
</template>
如果沒有使用setup語法，考慮使用defineComponent進行包裹，從而實現(xiàn)類型推導
import { defineComponent } from 'vue'
export default defineComponent({
// 啟用了類型推導
props: {
message: String
},
setup(props) {
props.message // 類型：string | undefined
}
})
如果項目用Webpack，需要注意下，defineComponent可能導致組件無法被tree shaking, 為了確保組件被安全的tree shaking，需要我們開發(fā)時做一下處理
export default /*#__PURE__*/ defineComponent(/* ... */)
如果項目用Vite，不需要做任何處理，因為Vite底層的Rollup會智能的認為defineComponent沒有副作用。
defineAsyncComponent （異步組件）
開發(fā)過程中，有一些場景例如：彈框內(nèi)的表單、其它Tab下的組件等在頁面初始化時不需要加載，我們可以考慮使用defineAsyncComponent來聲明成異步組件，從而提高頁面初始化的速度。
用法一(從服務器獲取組件)
import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
// ...從服務器獲取組件
resolve(/* 獲取到的組件 */);
});
});
用法二(異步加載本地組件)
import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(
() => import('./components/MyComponent.vue')
);
defineAsyncComponent其它參數(shù)配置
const AsyncComp = defineAsyncComponent({
// 加載函數(shù)
loader: () => import('./Foo.vue'),
// 加載異步組件時使用的組件
loadingComponent: LoadingComponent,
// 展示加載組件前的延遲時間，默認為 200ms
delay: 200,
// 加載失敗后展示的組件
errorComponent: ErrorComponent,
// 如果提供了一個 timeout 時間限制，并超時了
// 也會顯示這里配置的報錯組件，默認值是：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);以上就是Vue3通用API功能示例剖析的詳細內(nèi)容，更多關(guān)于Vue3通用API剖析的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本篇文章主要介紹了vue服務端渲染的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了vue中遇到scrollIntoView無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在Vue前端項目中,可以通過修改配置文件來指定啟動的端口號,本文就來介紹 一下vue項目啟動端口更改的實現(xiàn),感興趣的可以了解一下2023-10-10
Vue?ElementUI?table實現(xiàn)表格斜線分隔線
這篇文章主要為大家詳細介紹了Vue?ElementUI?table實現(xiàn)表格斜線分隔線，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue+Element-ui彈窗?this.$alert?is?not?a?function問題
這篇文章主要介紹了Vue+Element-ui彈窗?this.$alert?is?not?a?function問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在?Web?應用程序中,有時需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個全屏功能的工具類,希望對大家有所幫助2024-03-03
本文主要介紹了淺談Vue組件及組件的注冊方法，詳細的介紹了什么是組件，及其組件注冊的兩種方式(全局和局部)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了Vue中的ESLint配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單單獨移除一個字段驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
使用vite搭建ssr活動頁架構(gòu)的實現(xiàn)
本文主要介紹了使用vite搭建ssr活動頁架構(gòu)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07