Vue3通用API功能怎么使用寻技术

本文小编为大家详细介绍“Vue3通用API功能怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“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 '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';

，输出结果大不一样，输出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 正确地推导出组件选项内的类型）

如果你使用

<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

进行包裹，从而实现类型推导

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

<Suspense>

是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

虽然

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

本文地址：https://www.xunjs.com/vue/view_17705.html

Tags：通用功能

相关推荐