当前位置：首页 > news >正文

vue3-组件中的变化

news 2025/8/18 17:29:19

1. 路由

1. 安装指令：npm i vue-router@next
2. 创建路由：createRouter

在这里插入图片描述

2. 异步组件（defineAsyncComponent）

defineAsyncComponent 是用于定义异步组件的函数。
defineAsyncComponent 接受一个工厂函数作为参数，这个工厂函数返回一个 Promise，用于异步加载组件。当组件需要被渲染时，Vue 3 会自动调用工厂函数来加载组件。

defineAsyncComponent 的属性：3. loader: 一个工厂函数，用于加载异步组件。默认情况下，loader 函数会使用 import() 来加载组件。如果需要自定义加载逻辑，可以在此处指定自定义的加载函数。4. delay: 指定组件加载的延迟时间，以毫秒为单位。在设置的延迟时间内，组件会显示一个占位符。如果未设置该属性，默认延迟时间为 200ms。5. timeout: 指定组件加载的超时时间，以毫秒为单位。如果组件加载时间超过设置的超时时间，会触发 onError 钩子函数。如果未设置该属性，默认超时时间为 Infinity，即不会触发超时错误。6. suspensible: 指定组件是否可挂起。如果设置为 true，在组件加载过程中，可以触发 onSuspense 钩子函数，并显示占位符。如果未设置该属性，默认为 true。7. onError: 组件加载出错时的钩子函数。可以在此处处理组件加载出错的情况。8. onSuspense: 组件挂起时的钩子函数。可以在此处处理组件挂起的情况。9. loadingComponent  指定异步组件加载过程中显示的占位符组件（在组件为完成加载的时候就会调用这个属性）。可以是一个组件选项对象或一个组件的引用10.errorComponent 属性来指定异步组件加载失败时显示的错误组件。

<template><div><AsyncComponent /></div>
</template><script>
import { defineAsyncComponent } from 'vue';
import PlaceholderComponent from './components/PlaceholderComponent.vue';
import ErrorComponent from './components/ErrorComponent.vue';// 定义异步组件
const AsyncComponent = defineAsyncComponent(() => {// 返回一个 Promise，用于异步加载组件() => import('./components/AsyncComponent.vue'),{// 配置选项loadingComponent: PlaceholderComponent, // 指定占位符组件errorComponent: ErrorComponent, // 指定错误组件delay: 200, // 延迟时间为 200mstimeout: 3000, // 超时时间为 3000mssuspensible: true, // 组件可挂起onError: (error) => {console.error('Error while loading component:', error);},onSuspense: () => {console.log('Component is suspended.');},// 也可以指定自定义的加载函数// loader: () => {//   return fetch('/api/async-component').then((res) => res.json());// },
});
</script>

Teleport

Teleport 是 Vue 3 中的一个新特性，用于在 DOM 中将组件的内容移动到指定的目标位置。它类似于 Vue 2 中的，但在 Vue 3 中进行了重命名。

<!-- ParentComponent.vue -->
<template><div><!-- 在 DOM 中指定一个目标位置，可以是一个已存在的元素，也可以是动态生成的元素 --><div id="teleport-target"></div><!-- 使用 Teleport 渲染组件的内容到指定目标位置 --><teleport to="#teleport-target"><ModalComponent /></teleport></div>
</template><script>
import { defineComponent } from 'vue';
import ModalComponent from './ModalComponent.vue';export default defineComponent({components: {ModalComponent,},
});
</script>