vue前端开发自学,异步加载组件,提升用户端的客户体验度

这篇具有很好参考价值的文章主要介绍了vue前端开发自学,异步加载组件,提升用户端的客户体验度。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue前端开发自学,异步加载组件,提升用户端的客户体验度!现实项目开发时,组件的数量非常庞大,如果都是一口气加载完,对手机用户来说,体验度会很差。因此,非常有必要使用异步加载。

那就是,用到了哪个组件,再去加载它就行了。用不到的时候,不加载它。下面看看代码案例。

<template>
  <h3>动态切换组件的显示</h3>
  <keep-alive>
    <component :is="ComponetShow"></component>
  </keep-alive>
  
  <button @click="changeShow">切换组件显示</button>
</template>
<script>
import {defineAsyncComponent} from "vue"
import ComA from './components/ComA.vue'
//异步加载组件B
const ComB = defineAsyncComponent(
  () => {
    return  import("./components/ComB.vue")
  }
)

  export default{
    data(){
      return{
        ComponetShow:"ComA"
      }
    },
    components:{
      ComA,
      ComB
    },
    methods:{
      changeShow(){
        this.ComponetShow = this.ComponetShow == "ComA" ? "ComB":"ComA"
      }
    }
   
  }
</script>

如图,这个就是测试代码所有内容。我们针对组件ComB.vue做了一些小的修正。使用了一个官方提供的函数。需要提前引入这个函数。调用该函数。

const ComB = defineAsyncComponent(
  () => {
    return  import("./components/ComB.vue")
  }
)

这段代码,很明显是被包围起来 了,使用官方提供的这个函数,就可以实现异步加载的效果。

下面给大家展示一下,在控制台里观测到的网络请求情况。

vue前端开发自学,异步加载组件,提升用户端的客户体验度,vue,vue.js,javascript,前端

如图所示。初始化!页面 渲染已经完毕了。但是并未看见请求ComB.vue的事情!这个就是异步的好处。

vue前端开发自学,异步加载组件,提升用户端的客户体验度,vue,vue.js,javascript,前端

如图,当我们切换组件显示。改成显示ComB.vue时,才触发了该网络请求。文章来源地址https://www.toymoban.com/news/detail-795098.html

到了这里,关于vue前端开发自学,异步加载组件,提升用户端的客户体验度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 学习Vue:【性能优化】异步组件和懒加载

    在Vue.js应用开发中,性能优化是一个至关重要的主题,而异步组件和懒加载是提升性能的有效方法之一。本文将介绍什么是异步组件和懒加载,以及如何在Vue.js中应用这些技术来提升应用性能。 异步组件 异步组件是指在需要的时候再去加载组件的一种方式。传统上,在Vue.

    2024年02月12日
    浏览(41)
  • vue前端性能优化之分包策略、异步组件、Gzip压缩

    目录 一、Gzip压缩 二、异步组件 三、分包策略 最后           项目的性能优化是有完整项目经历的开发者都会遇到得一个问题。这是整个项目开发最后的一步,也是最关键的一步,做一个项目并不是单单完成功能就算结束了,作为开发者,更要站在用户角度去进行项目体

    2024年02月09日
    浏览(49)
  • 前端开发必备技能!用简单CSS代码绘制三角形,提升用户体验

        🎬 江城开朗的豌豆 :个人主页  🔥 个人专栏  :《 VUE 》 《 javaScript 》  📝  个人网站  :《 江城开朗的豌豆🫛 》  ⛺️ 生活的理想,就是为了理想的生活 ! 目录  ⭐  专栏简介  📘  文章引言 一、前言 二、实现过程 三、原理分析 ⭐  写在最后         欢

    2024年02月07日
    浏览(48)
  • vue前端开发自学,透传属性的练习demo

    vue前端开发自学,透传属性的练习demo!以上代码是,父组件的情况。也是App.vue的入口文件内容。 这是子组件内容,AttrComponent.vue的代码内容。可以看出来,它里面是有且仅有一个根元素,H3标签,如果多一个就不行了。透传属性就会失效了。必须是有且仅有一个根元素才行。

    2024年01月23日
    浏览(42)
  • 前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求

    前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13219 效果图如下: 实现代码如下: 使用方法 HTML代码实现部分 组件实现代码

    2024年02月11日
    浏览(54)
  • vue前端开发自学,插槽练习第二次,name属性的使用

    vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性,来自定义一个名字,这样,就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候,很简答,只需要在slot标签里面加上name=“mz”; 下面看代码。 这个内容是app.vue入口文件的内容源码。下面

    2024年02月02日
    浏览(51)
  • vue3前端开发,自学一下reactive,ref的差异是什么。

    vue3前端开发,自学,学习一下,reactive和ref的差别。以及基础用法。 前言,这2个东西,都能对外输出动态的数据对象。但是,有点区别,是,reactive只支持输入一个对象作为参数,ref则还可以支持简单的数据信息作为参数。待会有案例代码展示。 下面看看代码内容。第一个

    2024年01月18日
    浏览(49)
  • vue前端开发自学练习,Props数据传递-类型校验,默认值的设置!

     vue前端开发自学练习,Props数据传递-类型校验,默认值的设置! 实际上,vue开发框架的时候,充分考虑到了前端开发人员可能会遇到的各种各样的情况,比如大家经常遇到的,数据类型的校验,再比如,默认值的设定等等。下面给大家展示一下,源码。和实际的效果。 如图,

    2024年01月23日
    浏览(37)
  • 前端组件开发指南:构建可复用、高效的用户界面

    在现代Web开发中,前端组件扮演着重要的角色。它们是构建用户界面的基本构建块,能够使开发人员更高效地开发、测试和维护代码。本文将带您深入了解前端组件的概念、优势以及如何使用常见的前端框架构建可复用的组件。 前端组件是一种封装了HTML、CSS和JavaScript代码的

    2024年02月16日
    浏览(49)
  • 解密JavaScript的异步机制:打破单线程限制,提升性能与用户体验

     🎬 江城开朗的豌豆 :个人主页  🔥 个人专栏  :《 VUE 》 《 javaScript 》  📝  个人网站  :《 江城开朗的豌豆🫛 》  ⛺️ 生活的理想,就是为了理想的生活 !   目录 一、JavaScript的异步编步机制 二、事件循环(Event Loop)和任务队列(Task Queue) 三、宏任务和微任务

    2024年02月08日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包