Vue3通用API功能怎麼使用

通用API

version （暴漏目前使用的Vue版本）

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

nextTick （Dom更新完成後觸發，用於取得更新後的Dom）

當我們更改響應式state時，Vue更新DOM並不是同步即時更新的，而是將同步執行的所有state更新快取起來，同步程式碼執行完後再去執行Dom更新操作，很大程度的優化了render性能，減少了Dom更新次數；

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

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

使用案例

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

點擊更新按鈕後，輸出test_2。但是，如果註解掉text.value = 'test_1';，輸出結果大不一樣，輸出test_0。

為什麼會有這個問題？

text.value賦值運算是同步即時的，當程式碼執行遇到響應式state的變更時，會提交一個檢視更新邏輯到微任務佇列，遇到nextTick，也會向微任務佇列提交。所以上述程式碼，視圖更新邏輯在nextTick前邊，檢視更新邏輯的執行是將text.value = 'test_1'和text.value = 'test_2'合併後再更新視圖，所以輸出test2;

註解掉text.value = 'test_1'後，nextTick 在微任務佇列的順序就在檢視更新邏輯前邊了，所以輸出test_0。

defineComponent（型別推導的輔助函式, 讓TypeScript 正確地推導出元件選項內的型別）

如果你使用752f0c4521bd75dec1baff2d2a067fcf語法，就需要使用defineProps讓TS推導出元件的Props

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

如果沒有使用setup#語法，考慮使用defineComponent進行包裹，從而實現類型推導

import { defineComponent } from 'vue'
export default defineComponent({
  // 启用了类型推导
  props: {
    message: String
  },
  setup(props) {
    props.message // 类型：string | undefined
  }
})

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

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

如果專案用Vite，不需要做任何處理，因為Vite 底層的Rollup會智能的認為defineComponent沒有副作用。

defineAsyncComponent （非同步元件）

開發過程中，有一些場景例如：彈框內的表單、其它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其它參數設定

 const AsyncComp = defineAsyncComponent({
        // 加载函数
        loader: () => import('./Foo.vue'),
        // 加载异步组件时使用的组件
        loadingComponent: LoadingComponent,
        // 展示加载组件前的延迟时间，默认为 200ms
        delay: 200,
        // 加载失败后展示的组件
        errorComponent: ErrorComponent,
        // 如果提供了一个 timeout 时间限制，并超时了
        // 也会显示这里配置的报错组件，默认值是：Infinity
        timeout: 3000
    });

Suspense

bb06e69d307cb52103d07d8f9dd385e5 是內建元件，用來在元件樹中協調對非同步依賴的處理。它讓我們可以在元件樹上層等待下層的多個嵌套非同步依賴項解析完成，並且可以在等待時渲染一個載入狀態。

雖然defineAsyncComponent具備loadingComponent參數來配置載入非同步元件時的Loading元件，但是在一些場景，是需要使用Suspense來使用的。例如：A元件依賴了B、C、D，如果三個都是非同步元件，載入的過程要顯示3個Loading，而Suspense可以設定所有子元件存在未載入時而現實的Loading。

defineCustomElement (使用Vue元件開發Web Components)

關於Web Components的介紹請參考文章Web Components入門

#Vue 提供了一個和定義一般Vue 元件幾乎完全一致的defineCustomElement方法來支援建立自訂元素。

import { defineCustomElement } from 'vue';
const MyVueElement = defineCustomElement({
    /* 组件选项 */
});
// 注册自定义元素
customElements.define('my-vue-element', MyVueElement);

以上是Vue3通用API功能怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！