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

vue常见优化手段

news 文章来源：https://blog.csdn.net/qq_45732872/article/details/134755535 2025/5/10 7:46:21

永远不要过早优化

why？过早优化的代价就是开发时间变长，开发成本增加，它会慢慢的让我们的代码变得不可阅读，难以维护；这些都是优化带来的代价。有句话是这样说的：命运馈赠的礼物，早已在暗中标好了价格

优化的原则就是：因地制宜，见招拆招

使用key（唯一且稳定）

对于通过循环生成的列表，应给每个列表项一个 稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素

使用冻结的对象

冻结的对象不会被响应化，使用Object.freeze(obj)来对一个对象进行冻结， 那如何来看一个对象是否是冻结对象呢？那就可以通过Object.isFrozen(obj)传入这个对象，它会返回一个布尔值。

它的应用场景是用于展示大批量数据的时候，且这些数据不需要响应式的特性，就可以用冻结对象来提升渲染性能，减少渲染时间，提升用户体验。

使用函数式 组件 （参加函数式组件）

vue不会为函数式组件创建实例，所以能提升性能

使用计算属性

如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性来缓存它们

非实时绑定的表单项

当使用 v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能的开销。

我们可以通过使用lazy或不适用v-model的方式解决该问题，但要注意，这样可能会导致在某一时间段内数据和表单项的值是不一致的。 （v-model.lazy）他不会去监听数据的每一次变化，而是监听@change事件，不用lazy的话 监听的是@input事件

保持对象引用稳定

在绝大部分情况下，vue触发rerender的时机是其依赖的数据发生变化

若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做出任何处理的

function hasChanged(x,y) {if(x === y) {return x === 0 && 1 / x !== 1 / y} else {return x === x || y === y      // NaN === NaN   输出为false}
}

因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。

对于原始数据类型，保持其值不变即可。

对于对象类型，保持其引用不变即可。

从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染。

使用v-show代替v-if

对于频繁切换显示状态的元素，使用v-show可以保证虚拟dom树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点极其重要

**关键字:**频繁切换显示状态、内部包含大量dom元素

使用延迟装载

JS传输完成后，浏览器开始执行JS构造页面。

但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏

一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来

延迟装载是一个思路，本质上就是利用 requestAnimationFrame事件分批渲染内容，它的具体实现多种多样

你

相关文章：

vue常见优化手段

永远不要过早优化 why？过早优化的代价就是开发时间变长，开发成本增加，它会慢慢的让我们的代码变得不可阅读，难以维护；这些都是优化带来的代价。有句话是这样说的：命运馈赠的礼物，早已在暗中标好…...

编程日记 2023/12/2 23:19:46

vue3通过v-model实现父子组件通信

单一值传递 父组件 <template><div ><h1>v-model实现父子组件通讯</h1><hr><child1 v-model"num"></child1><!-- 上下两个是等价的 --><child1 :modelValue"num" update:modelValue"handle&quo…...

编程日记 2023/12/2 23:18:45

java设计模式学习之【桥接模式】

文章目录 引言桥接模式简介定义与用途&#xff1a;实现方式 使用场景优势与劣势桥接模式在Spring中的应用绘图示例代码地址 引言 想象你正在开发一个图形界面应用程序&#xff0c;需要支持多种不同的窗口操作系统。如果每个系统都需要写一套代码&#xff0c;那将是多么繁琐&am…...

编程日记 2023/12/2 23:15:43

prometheus|云原生|kubernetes内部安装prometheus

架构说明&#xff1a; prometheus是云原生系统内的事实上的监控标准&#xff0c;而kubernetes集群内部自然还是需要就地取材的部署prometheus服务了 那么&#xff0c;prometheus-server部署的方式其实是非常多的&#xff0c;比如&#xff0c;kubesphere集成方式&#xff0c;h…...

编程日记 2023/12/2 23:14:42

利用Python中的Manim进行数学绘画和创作

相信很多同学就算没听过3Blue1Brown&#xff0c;也一定曾看过他们出品的视频&#xff0c;其从独特的视觉角度解说各种数学概念&#xff0c;内容包括线性代数、微积分、神经网络、傅里叶变换以及四元数等晦涩难懂的知识点。例如最火的《线性代数本质》系列视频。 那么这些视频是…...

编程日记 2023/12/2 23:12:40

Uniapp

UniApp是一个强大的跨平台应用开发框架 随着移动互联网的快速发展&#xff0c;跨平台应用开发成为了一个重要的需求。UniApp就是一个能够满足这一需求的强大框架。本文将介绍UniApp的基本概念、优势、使用方法和未来发展。 一、UniApp概述 UniApp是一个基于Vue.js开发的跨平…...

编程日记 2023/12/2 23:11:39

HNU-青蛙与蚊子

【问题描述】 有 n 只青蛙位于坐标轴 OX 上&#xff0c;对于每只青蛙&#xff0c;有两个已知值 xi、ti&#xff0c;表示第 i 只青蛙在坐标的位置&#xff08;各不相同&#xff09;以及它的舌头的长度。同样有 m 只蚊子一只接一只的落到坐标轴上&#xff0c;对于每只蚊子&#x…...

编程日记 2023/12/2 23:10:37

【新论文】【模型攻击】DiffAttack 针对基于扩散的对抗性净化的逃避攻击

DiffAttack: Evasion Attacks Against Diffusion-Based Adversarial Purification 作者: Mintong Kang; Dawn Song; Bo Li 链接: http://arxiv.org/pdf/2311.16124v1 备注: Accepted to NeurIPS 2023 摘要: 基于扩散的净化防御利用扩散模型去除对抗样本的精心设计的扰动&#…...

编程日记 2023/12/2 23:09:36

【Redis缓存】RedisTemplate如何获取符合要求的key,批量获取key

RedisTemplate如何获取符合要求的key,批量获取key 一、方法/命令二、数据使用 一、方法/命令 如果使用命令的形式&#xff0c;输入以下命令即可 keys *如果使用RedisTemplate&#xff0c;则方法为 redisTemplate.keys()获取所有符合条件的key。 二、数据使用 redis中缓存了…...

编程日记 2023/12/2 23:08:36

springboot核心原理之@SpringbootApplication

1.SpringbootApplication Configuration标志的类 在spring ioc启动的时候就会加载创建这个类对象 EnableAutoConfiguration 中有两个注解 &#xff08;1&#xff09;AutoConfigurationPackage 扫描主程序包(主程序main所在包及其子包) 可以看到这个类 &#xff1a; static c…...

编程日记 2023/12/2 23:06:33

阻抗匹配电阻原理及其应用

一、匹配电阻的作用 1、阻抗匹配 当信号频率比较高&#xff0c;上升沿比较陡时&#xff0c;电子信号经过阻抗不同的地方时也会产设反射。 PCB的单线阻抗一般会设计成50Ω&#xff0c;发射端阻抗一般是17到40&#xff0c;而接收端一般是MOS管的输入&#xff0c;阻抗是比较大的…...

编程日记 2023/12/2 23:05:32

IDEA2023安装教程（超详细）

文章目录 前言安装IntelliJ IDEA1. 下载IntelliJ IDEA2. 运行安装程序3. 选择安装路径4. 选择启动器设置5. 等待安装完成6. 启动IntelliJ IDEA7. 配置和设置8. 激活或选择许可证9. 开始使用 总结 前言 随着软件开发的不断发展&#xff0c;IntelliJ IDEA成为了许多开发人员首选…...

编程日记 2023/12/2 23:04:31

【MySql】悲观锁和乐观锁的介绍

一、并发控制 当程序中可能出现并发的情况时&#xff0c;就需要保证在并发情况下数据的准确性&#xff0c;以此确保当前用户和其他用户一起操作时&#xff0c;所得到的结果和他单独操作时的结果是一样的。这就叫做并发控制。并发控制的目的是保证一个用户的工作不会对另一个用…...

编程日记 2023/12/2 23:01:27

手写实现一个动态代理框架

手写实现一个动态代理框架 什么是代理模式什么是动态代理动态代理中的编译、类加载与对象实例化手写实现一个动态代理框架实现细节DynamicProxyHandlerProxy生成代码写入代码到磁盘文件调用编译器进行编译调用类加载器进行类加载反射实例化删除前面生成的java文件和class文件 C…...

编程日记 2023/12/2 22:59:24

Leetcode226. 翻转二叉树

文章目录 题目介绍题目分析解题思路边界条件&#xff1a;节点为空时返回空子问题&#xff1a;交换左右子节点 整体代码 题目介绍 题目分析 题目要求我们将树中每个节点的左右子节点全部交换,最后返回交换后的树的根节点。 解题思路 这题是比较常见的递归&#xff0c;直接找边…...

编程日记 2023/12/2 22:58:24

使用WalletConnect Web3Modal v3 链接钱包基础教程

我使用的是vueethers 官方文档&#xff1a;WalletConnect 1.安装 yarn add web3modal/ethers ethers 或者 npm install web3modal/ethers ethers2.引用 新建一个js文件&#xff0c;在main.js中引入&#xff0c;初始化配置sdk import {createWeb3Modal,defaultConfig, } from…...

编程日记 2023/12/2 22:56:22

黄金比例设计软件Goldie App mac中文版介绍

Goldie App mac是一款测量可视化黄金比例的工具。专门为设计师打造&#xff0c;可以帮助他们在Mac上测量和可视化黄金比例&#xff0c;从而轻松创建出完美、平衡的设计。 Goldie App mac体积小巧&#xff0c;可以驻留在系统的菜单栏之上&#xff0c;随时提供给用户调用。 拥有独…...

编程日记 2023/12/2 22:55:21

el-select实现可复制一段“关键词“（多个）实现搜索 以及 回车选中搜索项

el-select实现可复制一段"关键词"&#xff08;多个&#xff09;实现搜索 以及 回车选中搜索项 <el-selectref"productRef"filterableclearablev-model"fItem.productName"multiple:reserve-keyword"true"remote:filter-method&quo…...

编程日记 2023/12/2 22:54:19

C++解析xml示例

C解析xml示例 1. Xml文档介绍1.1 特点及作用1.2 Xml优点1.2.1 良好的可拓展性1.2.2 内容与形式分离 1.3 Xml组成1.3.1 Xml声明1.3.2 根元素1.3.3 元素1.3.4 属性1.3.5 实体1.3.6 注释 2 C解析Xml2.1 tinyXml2类库2.2 关键接口2.2.1 LoadFile2.2.2 RootElement2.2.3 FirstChildE…...

编程日记 2023/12/2 22:50:13

记录 | linux find+rm查找并直接删除

findrm查找并直接删除&#xff1a; find ./ -name "xx_name" |xargs rm -rf...

编程日记 2023/12/2 22:48:12

24.有哪些生命周期回调方法？有哪几种实现方式？

有哪些生命周期回调方法？有哪几种实现方式？ 有两个重要的bean 生命周期方法， 第一个是init ， 它是在容器加载bean的时候被调用。第二个方法是 destroy 它是在容器卸载类的时候被调用。bean 标签有两个重要的属性（init-method和destroy-method）。用它们你可以自己定制初始…...

编程日记 2023/12/2 22:45:10

C++详解

//7&#xff0e;用new建立一个动态一维数组&#xff0c;并初始化int[10]{1,2,3,4,5,6,7,8,9,10},用指针输出&#xff0c;最后销毁数组所占空间。 #include<iostream> #include<string> using namespace std; int main() { int *p; pnew int[10]; for(i…...

编程日记 2023/12/2 22:42:07

mybatis数据输入-实体类型的参数

1、建库建表 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSERT INTO t_emp(emp_name,emp_salary) VALUES("tom",200.33); INSERT INTO…...

编程日记 2023/12/2 22:41:06

Java-接口

目录 定义 格式 使用 接口中成员的特点 成员变量 构造方法 成员方法 JDK8新特性&#xff1a;可以定义有方法体的方法 默认方法 作用 定义格式 注意事项 静态方法 定义格式 注意事项 JDK9新特性&#xff1a;可以定义私有方法 私有方法的定义格式 接口和接口之…...

编程日记 2023/12/2 22:40:05

mysql常用命令行代码

连接到 MySQL 服务器&#xff1a; mysql -u your_username -p替换 your_username 为你的 MySQL 用户名。系统会提示你输入密码。 退出 MySQL 命令行&#xff1a; EXIT;或者按 Ctrl D。 显示所有数据库&#xff1a; SHOW DATABASES;选择数据库&#xff1a; USE your_database…...

编程日记 2023/12/2 22:37:01

Python压缩、解压文件

#!/usr/bin/python3 # -*- coding:utf-8 -*- """ author: JHC file: util_compress.py time: 2023/5/28 14:58 desc: rarfile 使用需要安装 rarfile 和 unrar 并且将 unrar.exe 复制到venv/Scrpits目录下 &#xff08;从WinRar安装目录下白嫖的&#xff09; 下载…...

编程日记 2023/12/2 22:36:00

面试就是这么简单，offer拿到手软（一）—— 常见非技术问题回答思路

面试系列&#xff1a; 面试就是这么简单&#xff0c;offer拿到手软&#xff08;一&#xff09;—— 常见非技术问题回答思路 面试就是这么简单&#xff0c;offer拿到手软&#xff08;二&#xff09;—— 常见65道非技术面试问题 文章目录 一、前言二、常见面试问题回答思路问…...

编程日记 2023/12/2 22:34:59

134. 加油站（贪心算法）

根据题解 这道题使用贪心算法&#xff0c;找到当前可解决问题的状态即可 「贪心算法」的问题需要满足的条件&#xff1a; 最优子结构&#xff1a;规模较大的问题的解由规模较小的子问题的解组成&#xff0c;规模较大的问题的解只由其中一个规模较小的子问题的解决定&#xff…...

编程日记 2023/12/2 22:33:58

Springboot3+vue3从0到1开发实战项目（二）

前面完成了注册功能这次就来写登录功能&#xff0c; 还是按照这个方式来 明确需求&#xff1a; 登录接口 前置工作 &#xff1a; 想象一下登录界面&#xff08;随便在百度上找一张&#xff09; 看前端的能力咋样了&#xff0c; 现在我们不管后端看要什么参数就好 阅读接口文档…...

编程日记 2023/12/2 22:32:57

Spring中Bean的生命周期

1.生命周期 Spring应用中容器管理了我们每一个bean的生命周期&#xff0c;为了保证系统的可扩展性&#xff0c;同时为用户提供自定义的能力&#xff0c;Spring提供了大量的扩展点。完整的Spring生命周期如下图所示&#xff0c;绿色背景的节点是ApplictionContext生命周期特有的…...

编程日记 2023/12/2 22:30:55