Vue项目中实用组件详解与懒加载实践（ts版）

137 浏览量更新于2024-09-02 收藏 90KB PDF 举报

本文将深入探讨Vue项目中几个实用的组件开发，特别是在使用TypeScript (ts) 的背景下。作者分享了他们在构建项目时的经验，特别是针对那些对TypeScript还不熟悉的开发者，提到了如何通过Vue CLI 3 来构建TodoList应用开启ts之旅。重点讨论了Vue路由中的懒加载技术，以及如何在Vue中实现类似React中react-loadable的功能，即通过高阶组件（Higher-Order Component，HOC）来处理组件的按需加载。在Vue路由配置中，如`{ path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') }`，懒加载确保了当访问'/about'路径时，组件About.vue才会被异步加载，生成如`about.39d4f7ae.js`这样的单独文件。然而，与React中的react-loadable不同，Vue本身并未内置这种功能，但开发者可以通过模仿HOC的方式实现组件的动态加载过程。作者介绍了如何在Vue中实现类似HOC的解决方案，即定义一个名为`AsyncComponent`的函数，接收一个待加载的组件（作为Promise）作为参数，同时提供一个`loading`组件在加载期间显示，以及一个`error`组件处理加载失败的情况。这使得Vue开发者可以根据需要创建更灵活的用户体验，同时保持代码的可维护性。本文将围绕Vue项目中如何利用TypeScript进行开发，结合路由懒加载和自定义HOC的概念，为读者展示如何在实际项目中提高性能和用户体验。对于希望提升Vue开发技能，并理解ts在组件管理中的作用的开发者来说，本文是一篇非常有价值的学习资料。

详解详解Vue 项目中的几个实用组件（项目中的几个实用组件（ts））

前言前言

这段时间使用 ts 和 vue 做了一个项目，项目从 0 开始搭建，在建设和优化的同时，实现了很多自己的想法，有那么一两个组

件可能在我本人看来有意义，所以从头回顾一下当初的想法，同样也可以做到一个记录的作用。如果还没有使用过 ts 的同学

可以通过使用 Vue Cli3 + TypeScript + Vuex + Jest 构建 todoList 这边文章开始你的 ts 之旅，后续代码也是在 todoList 的结

构上改进的

vue 路由中的懒加载路由中的懒加载

你真的用好了路由的懒加载吗？

在 2.x 的文档中、cli 的初始化项目中都会默认生成一个路由文件，大致如下：

{

path: '/about',

name: 'about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () =>

import(/* webpackChunkName: "about" */ './views/About.vue')

}

通过路由懒加载的组件会在 webpack 打包之后生成名为 about 的 dist/js/about.39d4f7ae.js 文件。

但是在 react 中，react-loadable 可以使路由在懒加载之前先加载一个其他的组件（一般是 loading ）过度这个加载的过程。

A higher order component for loading components with promises.

其实这也就是 react 的高阶组件（HOC），那么根据 HOC 的思想，我们能否在 vue 中也实现这样一个 HOC 呢？答案是

YES

让我们看一下官方的介绍:

const AsyncComponent = () => ({

// The component to load (should be a Promise)

component: import('./MyComponent.vue'),

// A component to use while the async component is loading

loading: LoadingComponent,

// A component to use if the load fails

error: ErrorComponent,

// Delay before showing the loading component. Default: 200ms.

delay: 200,

// The error component will be displayed if a timeout is

// provided and exceeded. Default: Infinity.

timeout: 3000

})

这个 2.3+ 新增的功能，使我们的开始有了可能，我们创建一个 loadable.ts 的高阶组件，利用 render 函数生成组件并返回。

import LoadingComponent from './loading.vue';

export default (component: any) => {

const asyncComponent = () => ({

component: component(),

loading: LoadingComponent,

delay: 200,

timeout: 3000

});

return {

render(h: any) {

return h(asyncComponent, {});

}

};

在 routes 中使用该组件

import loadable from './loadable';

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38518006

粉丝: 3
资源: 996

Vue项目中实用组件详解与懒加载实践（ts版）

基于vue3、ts构建的后台管理系统.zip

Vue项目接入Paypal实现示例详解

agile-admin vue3-element-plus-admin vue3.0 ts typescript e.zip

VUE Elemen-ui之穿梭框使用方法详解

TypeScript教程入门指南详解案例教程

ts-template：:memo:| 预先配置了带有ESLint，Jest，Prettier和Github Actions for CI的Typescript模板

Vue项目集成Typescript配置详解

Vue中ECharts图表自适应解决方案详解

Vue+Bootstrap收藏点赞功能详解及实现

Vue.js script setup 响应式详解：ref, computed, watch

最新资源