vue项目优化问题

news2024/12/23 16:01:39

文章目录

    • 1、常见的系统优化方案
    • 2、非常见的优化手段(但同样是很有用的)
      • 1、组件懒加载
      • 2、组件代码分割
      • 3、函数编译
      • 4、组件通讯

1、常见的系统优化方案

图片懒加载、图片压缩、路由组件按需加载(异步加载)、减少console、if判断、cdn加速、axios统一管理请求、v-if与v-show依据情况来使用、计算属性与侦听器依据情况使用、Production生产模式开启代码压缩、v-for合理绑定key值、缓存组件、虚拟列表…

2、非常见的优化手段(但同样是很有用的)

组件懒加载、组件代码分割、函数编译、组件通讯

1、组件懒加载

<template>
	<div>
		<span @click="name='lazy'">点击切换name</span>
		<component :is="name"></component>
	</div>
</template>
<script>
	// import lazy from './components/lazy.vue'
	import Vue from "vue";
	//全局组测lazy组件
	//一旦注册完毕,在其他组件页面也可以使用该组件
	Vue.component("lazy", function (resolve) {
	//查看console打印来确认是否进行了懒加载组件
		console.log('加载lazy模块__________');
		require(["./components/lazy"], resolve);
	});
	export default {
		data() {
			return {
		
				name:""
			};
		},
		components: {
		//局部注册lazy组件
		//只在当前组件下才能使用
			/*lazy:function (resolve) {
				console.log("局部加载lazy模块__________");
				require(["./components/lazy"], resolve);
			}*/
		},
	};
</script>
<style scoped>
</style>

传统写法:

<template>
	<div>
		<p>name==={{ name }}</p>
		<span @click="name = 'lazy'">点击切换name</span>
		<component :is="name"></component>
	</div>
</template>
<script>
	import lazy from './components/lazy.vue'
	export default {
		data() {
			return {
				name: "",
			};
		},
		components: {
			lazy
		},
	};
</script>
<style scoped>
</style>

对比:
在这里插入图片描述
没使用lazy的组件的时候并没有加载1.js文件
在这里插入图片描述
当我们点击使用lazy组件的时候,会进行lazy组件的加载,即加载1.js文件
在这里插入图片描述

lazy组件对应的js文件名字便是1.js,这个文件名是可控的,通过下列代码来进行名字更换,多个同名文件会合并为同一个js文件

<template>
	<div>
		<p>name==={{ name }}</p>
		<span @click="name == 'lazy' ?name =null:name = 'lazy' ">点击切换name</span>
		<component :is="name"></component>
	</div>
</template>
<script>
	import Vue from "vue";

	export default {
		data() {
			return {
				name: "",
			};
		},
		components: {
		//tjq便是我修改后的文件名字,之前是叫做1.js
			lazy: () => import(/* webpackChunkName: "tjq" */ `./components/lazy`),
		},
	};
</script>

在这里插入图片描述

2、组件代码分割

在这里插入图片描述
这种方法就是因为上诉情况的产生而出现的,一个vue文件能写4300行,其中html标签就写了近1000行

经过一系列的拆分,由之前的单组件变成了10个组件,并且这种拆分极大的改善了后期维护人员的心态
在这里插入图片描述

3、函数编译

并非一味的使用函数编译来达到性能优化效果,但是函数编译的效率是毋庸置疑的

<template>
	<div>
        <HelloWorld ></HelloWorld> 
        <p v-for="item in 5" :key="item">{{item}}</p>
	</div>
</template>
<script>
	import HelloWorld from "./components/HelloWorld.vue";
	export default {
		data() {
			return {};
		},
		created() {
			console.log('xxx某些操作');
		},
		components: {
			HelloWorld,
		},
	};
</script>
<style scoped>
</style>

如果你的组件类似上诉的情况,那么你完全没必要去使用函数编程,传统的模板编程就能达到我们想要的效果,相对的如果页面逻辑相对复杂,就可以考虑函数编程,但是如果是复杂到像上方4300行代码一样的组件就不建议你去使用函数编程了(除非是真的非常需要极致的性能)
函数编程介绍

4、组件通讯

其实组件通讯也是一个可以优化的地方,常见的props和$emit是优于vuex和pinia的,vuex和pinia是优于事件总线的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/745444.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面试算法题—编程题2023

面试算法题—编程题2023 一、冒泡排序二、选择排序三、快速排序四、其它排序 最近在看一些面试题&#xff0c;发现很多面试过程中都会要求手写排序编程题&#xff0c;经过一番查找整理&#xff0c;可以快速学习和使用相关排序算法题&#xff0c;通俗易懂&#xff0c;手撕代码吊…

6月城市之星领跑活动获奖名单已出炉

经过一个月的角逐&#xff0c;6月城市之星领跑活动上榜名单终于出炉啦&#xff0c;本次城市赛道是根据最后登陆且6月份有入围博客之星用户的城市一共368个城市&#xff0c;城市人数划分区间具体情况如下&#xff1a; 200以上城市2个&#xff0c;其中有一些博主的城市由于未获取…

小程序测试笔记——你想知道的知识全都有

目录 1、你知道测试小程序跟普通的APP有什么异同么&#xff1f; 原生APP 小程序 2、你真真切切的了解什么是小程序么&#xff1f; 3、然后给你一个小程序&#xff0c;你要如何开展测试呢&#xff1f; 一、为什么要学习小程序测试? 二、微信小程序是什么? 概念&#xf…

FTP挂载网络磁盘

项目中使用存储阵列或NAS等网络存储作为文件存储地址&#xff0c;服务器与存储之间通过网络进行传输&#xff0c;当我把ftp指向的存储地址修改为网络磁盘时&#xff0c;会出现550等读取不到目录问题&#xff1b;以下为解决方案&#xff1a; 1.在服务器中新增windows用户&#x…

Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理

前言 如果对 vue3 的语法不熟悉的&#xff0c;可以移步Vue3.0 基础入门&#xff0c;快速入门。 Pinia 详情可移步官网参看&#xff1a;Pinia 官网 1. 安装依赖 yarn add pinia // or npm install pinia 2. 构建 src/store/user.js // src/store/user.js import { defineSt…

fiddler在软件测试中的使用(详细版)

目录 1.抓包&#xff0c;辅助定位bug&#xff08;web中类似谷歌浏览器F12开发调试工具&#xff09; 1.1APP抓包分析 2.构建需要的测试场景&#xff08;通过拦截篡改接口的请求或返回&#xff09; 2.1断点篡改请求参数 2.1.1如果需要篡改请求参数&#xff0c;则需要在请求前…

IO流、IO模型

一、IO流分类 1.按照流的方向&#xff1a;输出流和输入流 2.按照流的角色&#xff1a;节点流和处理流 3.按照操作单元&#xff1a;字节流和字符流 二、基类 1.字节输入流和输出流&#xff1a; InputStream、OutputStream 2.字符输入流和输出流&#xff1a;Reader、Writer 三、为…

连锁门店运营管理系统有哪些?应该如何选择?

连锁门店运营管理过程中会面临很多难点&#xff0c;比如不同门店之间很难做到统一管理、销售数据无法实时同步、库存调拨效率低&#xff0c;很容易出现库存不足或过剩的情况... 选择一套合适的连锁门店管理系统&#xff0c;连锁店可以实时获得各个门店的销售、库存和其他关键数…

安达发|APS项目对企业有哪些要求?

尽管APS技术存在相当多的优点&#xff0c;但可以为企业带来其他IT技术以往所不及的收益和管理助力&#xff1b;但这是以APS项目成功部署并发挥作用为前提的。由于APS项目的特性要求较高&#xff0c;目前能够将APS技术运用于运筹和生产活动的企业还非常少。原因有很多&#xff0…

【CNN记录】pytorch中BatchNorm2d

torch.nn.BatchNorm2d(num_features, eps1e-05, momentum0.1, affineTrue, track_running_statsTrue, deviceNone, dtypeNone) 功能&#xff1a;对输入的四维数组进行批量标准化处理&#xff08;归一化&#xff09; 计算公式如下&#xff1a; 对于所有的batch中样本的同一个ch…

贯穿AI生命周期各阶段的道德问题:数据标注部分

随着AI在市场上得到更广泛的采用并被作为各种用例中的工具实现&#xff0c;更多的挑战也应势而生。AI项目遇到了一个长期的关键问题&#xff0c;即合乎道德的AI以及数据中的偏见处理。在AI发展初期&#xff0c;这个问题并不明显。 数据偏见是指数据集中某个元素的代表权重过大或…

Sui开发者网络、测试网和主网的异同之处

Sui在主网正式上线前&#xff0c;发布了两波测试网以及独立的开发者网络供开发者和项目方进行测试。主网与这些网络在部分功能和参数方面有些许不同&#xff0c;本文盘点了这三个网络在功能和参数方面的异同。查看网络信息及更新计划 验证节点集 Sui网络由一组独立的验证节点…

apk反编译检测代码是否混淆

把 apk 当成 zip 并解压&#xff0c;得到 classes.dex 文件&#xff08;有时可能不止一个 dex 文件&#xff0c;但文 件名大多类似&#xff09; 使用 dex2jar 执行如下命令&#xff1a; dex2jar.bat classes.dex 文件路径 得到 classes.dex.jar 然后使用 jd-gui 打开 jar 文件&…

CAN总线

目录 1. 总体概述  1.1 基本概念 1.2 通讯方式 1.3 为什么使用CAN? 1.4 CAN的协议及组成 2. 上帝视角看CAN的通讯过程 2.1 数据传输原理实现 2.3 通信的整个过程 2.2.1 空闲状态 2.2.2 开始数据传输 2.2.3 仲裁机制 2.2.4 位时序 2.2.5 一次数据传输的例子 3.…

【C/C++ 力扣leetcode】4道简单题

文章目录 前言一、寻找正序数组的中位数中位数的概念C语言版C版 二、寻找无序数组的中位数冒泡排序的概念C语言版C版 三、整数反转代码实现原理详解 四、字符串转整数原理详解代码实现 总结 前言 刷题之——Leetcode道简单题&#xff0c;通过这4道简单题&#xff0c;C/C有新的…

MachineLearningWu_12_BuildNNUsingNumpyOrTF

x.1 咖啡机的例子 我们以煮咖啡为例子来做一个判断煮的咖啡是否符合自己预期的实验。假设煮咖啡的好坏有两个因素决定&#xff0c;温度和煮的时间&#xff0c;图中x表示煮的咖啡很好&#xff0c;o表示煮的咖啡不好&#xff0c;我们根据这个实验来建模&#xff0c;并将模型通过…

简述DHCP服务器获取IP地址的过程

简述DHCP服务器获取IP地址的过程 如何搭建DHCP服务 要在Linux系统上搭建DHCP服务器&#xff0c;你可以按照以下步骤进行操作&#xff1a; 1.安装DHCP服务器软件包&#xff1a; sudo yum install dhcp2.配置DHCP服务器&#xff1a; 打开/etc/dhcp/dhcpd.conf文件&#xff0c…

前向传播之——得分函数

前向传播之-得分函数 1.1 得分函数&#xff1a; 剧透:深度学习必备的两个大知识点分别是前向传播和反向传播啦&#xff0c;这里节课我们会先着手把前方传播的所涉及的所有知识点搞定!我相信这部分对于咱们即便没有什么基础的同学来说也是很容易理解的。 得分函数&#xff1a…

Vue从小白到入门

文章目录 &#x1f34b;Vue是什么?&#x1f34b;MVVM思想 &#x1f34b;vue2快速入门&#x1f34b;注意事项 &#x1f34b;数据单向渲染&#x1f34b;数据双向渲染&#x1f34b;作业布置 &#x1f34b;事件绑定&#x1f34b;事件处理机制&#x1f34b;注意事项和细节&#x1f…

Android屏幕适配方案

方案一&#xff1a; 安卓app禁止跟随系统字体大小&#xff0c;显示大小而改变。 1、定义工具类 public final class DisplayUtil {/*** 禁用7.0&#xff08;23&#xff09;以上显示大小改变和文字大小*/public static Resources disabledDisplayDpiChange(Resources res) {C…