首页 > 其他分享 >VUE系列---深度解析 Vue 优化策略

VUE系列---深度解析 Vue 优化策略

时间:2024-07-23 19:18:47浏览次数:12  
标签:异步 VUE show --- Vue 组件 优化 加载

在前端开发中,性能优化一直是一个重要的课题。Vue.js 提供了多种优化策略,帮助开发者构建高性能的应用。本文将深入解析以下几个优化策略:

  • 使用 v-oncev-ifv-show 的区别和优化
  • 通过异步组件提升性能

一、v-oncev-ifv-show 的区别和优化

1. v-once

v-once 指令用于一次性地渲染元素及其子组件。在初始渲染后,它们将不会再响应数据变化,适用于那些不需要响应数据变化的静态内容。

使用示例
<template>
  <div v-once>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Optimization',
      description: 'This content will not change.'
    };
  }
};
</script>

 

优化效果

v-once 可以减少不必要的 DOM 更新和重新渲染,提升性能,特别适用于静态内容或内容不会频繁更新的场景。

2. v-ifv-show

v-ifv-show 都用于条件渲染,但它们的工作机制和应用场景有所不同。

v-if

v-if 是“真正”的条件渲染,因为它会在切换过程中销毁和重建元素及其绑定的事件监听器和子组件。

使用示例
<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-if="visible">This is conditionally rendered content.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    }
  }
};
</script>

 

优化效果

由于 v-if 是按需渲染的,初次渲染时不会插入 DOM 节点,因此适用于元素在多数情况下都不显示的场景。

v-show

v-show 通过设置元素的 CSS display 属性来显示或隐藏元素。

使用示例
<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="visible">This is conditionally rendered content.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    }
  }
};
</script>

 

优化效果

由于 v-show 只是简单地切换 display 属性,切换开销较小,适用于需要频繁显示和隐藏的元素。

区别总结
  • v-if:元素和子组件会在条件为假时销毁,适用于不常显示的内容。
  • v-show:元素和子组件始终保留,仅切换 display 属性,适用于需要频繁切换的内容。
3. v-oncev-ifv-show 的应用场景
  • v-once:用于静态内容,减少不必要的 DOM 更新。
  • v-if:用于条件变化较少的内容,按需渲染减少初始渲染开销。
  • v-show:用于需要频繁切换显示状态的内容,切换开销小。

二、通过异步组件提升性能

异步组件允许我们在需要时才加载组件,这有助于减小初始包大小,加快页面加载速度。

1. 定义异步组件

可以使用 import 函数将组件定义为异步组件。

使用示例
<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <component :is="asyncComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asyncComponent: null
    };
  },
  methods: {
    loadComponent() {
      this.asyncComponent = () => import('./AsyncComponent.vue');
    }
  }
};
</script>

 

优化效果

异步组件可以在需要时才加载,减小初始包体积,提高加载速度,特别适用于大型应用中的不常用组件。

2. 路由级异步组件

在 Vue Router 中,可以通过异步组件定义路由。

使用示例
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: () => import('./components/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./components/About.vue')
  }
];

const router = new VueRouter({
  routes
});

export default router;

 

优化效果

按需加载路由组件,有效减小初始包大小,加快页面初始加载速度。

3. 异步组件加载状态

可以通过 webpack 提供的魔法注释来定义异步组件的加载状态。

使用示例
<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <component :is="asyncComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asyncComponent: null
    };
  },
  methods: {
    loadComponent() {
      this.asyncComponent = () => ({
        component: import(/* webpackChunkName: "async-component" */ './AsyncComponent.vue'),
        loading: LoadingComponent,
        error: ErrorComponent,
        delay: 200,
        timeout: 3000
      });
    }
  }
};
</script>

 

优化效果

通过自定义加载状态和错误组件,可以提高用户体验,在加载时间较长或加载失败时提供友好的提示。

三、总结

通过合理使用 v-oncev-ifv-show,可以有效减少不必要的 DOM 更新和渲染开销,提高应用性能。同时,异步组件的使用能够减小初始包大小,加快页面加载速度。希望本文对大家在 Vue 应用中的性能优化有所帮助。

 

标签:异步,VUE,show,---,Vue,组件,优化,加载
From: https://www.cnblogs.com/zx618/p/18319380

相关文章

  • [米联客-安路飞龙DR1-FPSOC] FPGA基础篇连载-03安路TD结合modelsim仿真
    软件版本:Anlogic-TD5.9.1-DR1_ES1.1操作系统:WIN1064bit硬件平台:适用安路(Anlogic)FPGA实验平台:米联客-MLK-L1-CZ06-DR1M90G开发板板卡获取平台:https://milianke.tmall.com/登录"米联客"FPGA社区http://www.uisrc.com视频课程、答疑解惑!1概述FPGA开发中对设计的代码功能......
  • 数据结构----队列中的链式队列
     目录 链式队列       1.1逻辑结构:线性结构       1.2存储结构:链式存储      1.3链式队列的操作:                        (1)创建一个空的队列                (2)入列     ......
  • 【学习笔记】Kylin-Desktop-V10-SP1 麒麟系统安装CrossOver软件的详细操作步骤
    一、前期准备1.关于CrossOverCrossOver是一款系统兼容软件,它让您可以在Mac和Linux系统上直接运行Windows应用,不用安装虚拟机;直接通过CrossOver软件,从dock直接启动Windows应用说明:CrossOver软件是一款付费使用软件,但支持14天试用期2.安装麒麟系......
  • Python贝叶斯、transformer自注意力机制self-attention个性化推荐模型预测课程平台学
    全文链接:https://tecdat.cn/?p=37090原文出处:拓端数据部落公众号 分析师:KungFu近年来,在线课程凭借便捷的网络变得越来越流行。为了有更好的用户体验,在线课程平台想要给用户推荐他们所感兴趣的课程,以便增大点击率和用户黏性。解决方案任务/目标根据学生所选的历史课程,预测出......
  • Milvus 核心组件(3)--- MinIO详解
    目录背景MinIO安装dockerdesktop安装UbuntuUI在docker中的安装Minio下载及安装启动miniodockerimage保存启动minioweb网页下一次启动MinIO基本概念基本概述主要特性应用场景MinIO使用连接server创建bucket查询bucket上传文件到bucket一般用......
  • 未来已来:LLMops如何重塑AI-native新范式的运维格局[行业范式]、以及主流LLMops推荐
    未来已来:LLMops如何重塑AI-native新范式的运维格局[行业范式]、以及主流LLMops推荐1.LLMops是当前AIinfra必争新标地行业格局:AIinfra蓬勃发展,359个应用总估值13T,融资$29.8B,从DevOps->MLOps->LLMOps演进;LLMOps是all-in-one的大模型原生应用的开发和运营新......
  • C++核心编程-4、类和对象4—多态
    4.7多态4.7.1多态的基本语法 示例代码如下:#include<iostream>usingnamespacestd;//多态的基本概念//满足动态多态的条件:1、有继承的关系2、子类要重写父类的虚函数//重写:函数返回值类型函数名参数列表完全相同//动态多态的使用://父类的指针或者引用执行......
  • Mac ml-agents release 19(v0
    Macml-agentsrelease19(v0.28.0)踩雷主要参考这篇博客:ML-Agents在MacM1上的安装跟着这篇安装完,在激活虚拟环境的终端输入mlagents-learn检验,如果正常应输出如下:后面超时报错不用管,因为还没在unity中启动训练环境。但是在跟完这篇博客后我这里并未成功执行此命令,报了几......
  • 记一次Vue.nextTick失效的解决经历
    问题背景在一个老页面上渲染echarts,在vue的mounted里面使用this.$nextTick,无法获取到ref。也就是获取不到dom。解决思路一开始怀疑vue的版本不对,但是后来vue升级到vue2.6.14,还是不行。控制台也没有任何报错,页面能正常渲染。这个时候我开始想,是不是使用的vuejs文件是生产版......
  • 每日一题-P1344
    本来求边数又建了个图跑流,然后看题解发现直接流量置为A*w+1(A为足够大的数)感觉很强#include<bits/stdc++.h>usingnamespacestd;#definelllonglongconstintA=1e5;constllinf=1e18;intn,m,s,t;structedge{ intv;llw;intnx;}e[10005];intcnt,hd[205],cur[......