Vue 新指令 v-memo 案例精析与性能优化

news2024/11/15 8:26:12

        v-memo 用于缓存组件的渲染结果。它通过指定依赖项来决定何时重新渲染组件,只有当依赖项的值发生变化时,组件才会重新渲染,从而提高性能。

        使用场景:v-memo 适用于组件的渲染结果在依赖项不变的情况下不应该频繁更新的场景,例如某些复杂的计算结果或者需要频繁更新但依赖项相对稳定的数据。

        示例代码如下:

<body>  
    <div id="app">  
        <el-divider content-position="left">v-memo依赖项的值未发生改变</el-divider>  
        <el-row>  
            <el-col :span="12">  
                <p>添加v-memo</p>  
                <div v-memo="[info.name,info.age]">  
                    <p>姓名:{{info.name}}</p>  
                    <p>年龄:{{info.age}}</p>  
                    <p>爱好:{{info.hobby}}</p>  
                </div>  
            </el-col>  
            <el-col :span="12">  
                <p>未添加v-memo</p>  
                <div>  
                    <p>姓名:{{info.name}}</p>       
                    <p>年龄:{{info.age}}</p>  
                    <p>爱好:{{info.hobby}}</p>  
                </div>  
            </el-col>  
            <el-col :span="24">  
                <el-button type="primary" @click="updateInfo">更新数据</el-button>  
            </el-col>  
        </el-row>  
        <el-divider content-position="left">v-memo依赖项的值发生改变</el-divider>  
        <el-row>  
            <el-col :span="12">  
                <p>添加v-memo</p>  
                <div v-memo="[grade.chinese,grade.mathematics]">  
                    <p>语文:{{grade.chinese}}</p>  
                    <p>数学:{{grade.mathematics}}</p>  
                    <p>英文:{{grade.english}}</p>  
                </div>  
            </el-col>  
            <el-col :span="12">  
                <p>未添加v-memo</p>  
                <div>  
                    <p>语文:{{grade.chinese}}</p>       
                    <p>数学:{{grade.mathematics}}</p>  
                    <p>英文:{{grade.english}}</p>  
                </div>  
            </el-col>  
            <el-col :span="24">  
                <el-button type="primary" @click="updateGrade">更新数据</el-button>  
            </el-col>  
        </el-row>  
    </div>  
</body>  
<script>  
    const {createApp}=Vue;  
    const app=createApp({  
        data(){  
            return{  
                info:{  
                    name:'Lucy',  
                    age:'32',  
                    hobby:'running'  
                },  
                grade:{  
                    chinese:82,  
                    mathematics:77,  
                    english:102  
                }  
            }  
        },  
        methods:{  
            updateInfo(){  
                this.info.hobby='dance and drawing';  
            },  
            updateGrade(){  
                this.grade.chinese="成绩:72";  
                this.grade.english="口语成绩:30,读写成绩:80";  
            }  
        }  
    })  
    app.use(ElementPlus);  
    app.mount('#app');  
</script>  

        运行结果,截图如下:

        分析:

        对于 info 对象的更新:

        在未添加 v-memo 的部分,由于每次数据更新,整个组件都会重新渲染,所以当 info.hobby 的值从 “running” 变为 “dance and drawing” 时,姓名、年龄以及爱好的显示都会重新渲染。

        在添加了 v-memo 的部分,由于依赖项是 info.name 和 info.age,而更新的是 info.hobby,所以这部分不会重新渲染即姓名和年龄的显示保持不变,另外爱好的显示不会更新。

        对于 grade 对象的更新:

        在未添加 v-memo 的部分,由于数据更新,整个组件会重新渲染,所以当 grade.chinese 和 grade.english 的值发生变化时,语文、数学和英语的显示都会随之重新渲染。

        在添加了 v-memo 的部分,因为依赖项是 grade.chinese 和 grade.mathematics,而此次更新中 grade.chinese 的值格式发生了较大变化,致使相应部分重新渲染,于是语文的显示得以更新。此外,grade.english 也进行了更新,所以英语的显示已会更新。

        更新数据后,运行结果,截图如下:

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

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

相关文章

Windows 虚拟机服务器项目部署

目录 一、部署JDK下载JDK安装JDK1.双击 jdk.exe 安装程序2.点击【下一步】3.默认安装位置&#xff0c;点击【下一步】4.等待提取安装程序5.默认安装位置&#xff0c;点击【下一步】6.等待安装7.安装成功&#xff0c;点击【关闭】 二、部署TomcatTomcat主要特点包括&#xff1a;…

抖音视频图文根据ID获得评论信息网站源码

抖音视频图文根据ID获得评论信息单页源码&#xff0c;id是视频的id&#xff0c;可以自定义第几条评论开始&#xff0c;不填默认为0&#xff0c;评论数量最大数量50&#xff0c;默认是20。 接口返回参数&#xff1a; "comments": 评论信息集合 { "uid": 评…

【Android面试八股文】请描述一下 android 的系统架构?

Android 是一个基于 Linux 的开源软件堆栈,针对多种不同设备类型打造。下图显示了 Android 平台的主要组件。 早期的Android架构如下图所示 官方网站最新的Android平台架构图,如下所示: Linux 内核 Android 平台的基础是 Linux 内核。例如,Android 运行时 (ART) 依赖…

重生奇迹MU 群战王牌

圣导师是重生奇迹MU游戏中八大职业之一&#xff0c;拥有风度翩翩、潇洒自如的形象和神一样的实力。无论是刷怪、PK、打boss还是混战&#xff0c;圣导师都表现出压制其他职业的强大气势。因此&#xff0c;这个职业在游戏中备受欢迎&#xff0c;人气非常高。 实力强大的二代隐藏…

<数据集>钢板缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1986张 标注数量(xml文件个数)&#xff1a;1986 标注数量(txt文件个数)&#xff1a;1986 标注类别数&#xff1a;7 标注类别名称&#xff1a;[crescent gap, silk spot, water spot, weld line, oil spot, punchin…

代码检查规则语言CodeNavi中代码语句的节点和节点属性

本文分享至华为云社区《CodeNavi 中代码语句的节点和节点属性》。作者&#xff1a;Uncle_Tom 1. 前期回顾 《寻找适合编写静态分析规则的语言》 根据代码检查中的一些痛点&#xff0c;提出了希望寻找一种适合编写静态分析规则的语言。 可以满足用户对代码检查不断增加的各种需求…

电脑摄像头可以用手机的吗?虚拟摄像头如何下载安装使用?超详细解答

一、电脑摄像头是否可以用手机摄像头代替&#xff1f; 随着电子设备研究的不断发展&#xff0c;电脑与手机之间的连接与互动已经变得越来越便捷。那么&#xff0c;关于电脑摄像头是否可以用手机的问题&#xff0c;答案是肯定的。不过&#xff0c;这通常需要通过一些特定的软件…

CUDA编程 - clock 学习记录

clock 学习记录 一、完整代码二、核函数流程三、main 函数流程四、学习总结&#xff08;共享内存的声明和使用&#xff09;&#xff1a;4.1、例子4.2、数据从全局内存复制到共享内存&#xff1a; 该程序利用CUDA并行计算能力&#xff0c;执行归约操作以找到每个块内的最小值&am…

PyTorch论文

2019-12 PyTorch: An Imperative Style, High-Performance Deep Learning Library 设计迎合4大趋势&#xff1a; 1. array-based (Tensor) 2. GPU加速 3. 自动求导 (Auto Differentiation) 4. 拥抱Python生态 4大设计原则&#xff1a; 1. 使用算法和数据开发者熟悉的Python做编…

IDEA Tomcat环境配置(CATALINA_BASE、乱码encoding)

IDEA Tomcat环境配置(CATALINA_BASE、乱码encoding) 基础配置 在idea中启动tomcat&#xff0c;默认会在用户目录生成一堆临时运行目录&#xff0c;因为他读的CATALINA_BASE为用户目录 如何处理 在tomcat配置里面的Stratup/Connection里面分别为Run和Debug在Pass environment v…

Profibus_DP转ModbusTCP网关模块连马保与上位机通讯

Profibus转ModbusTCP网关模块&#xff08;XD-ETHPB20&#xff09;广泛应用于工业自动化领域。例如&#xff0c;可以将Profibus网络中的传感器数据转换为ModbusTCP协议&#xff0c;实现数据的实时监控和远程控制。本文介绍了如何利用Profibus转ModbusTCP网关&#xff08;XD-ETHP…

【Linux】进程信号详解

一、信号 1. 信号的概念 Linux提供的让用户或进程给其他进程发送异步信息的一种方式&#xff0c;信号由进程发送的&#xff0c;属于软件中断。 2. 信号的作用 当 进程执行出现致命错误 或 进程所需的软件条件不具备 时&#xff0c;给操作系统提供的一种及时终止进程的机制当用…

【qt】考试系统项目

话不多说,先一睹芳颜 咱们的账号,题库和答案都是通过文件获取的. 话不多说,直接开干 目录 一.登录窗口1.界面设计2.邮箱验证3.登录验证 二.题库窗口1.考试计时2.布局管理器3.题库显示4.按钮布局5.计算分数 三.窗口交互四.完整代码五.结语 一.登录窗口 1.界面设计 这里添加背…

跟着操作,解决iPhone怎么清理内存难题

在如今智能手机功能日益强大的时代&#xff0c;我们使用手机拍照、录制视频、下载应用、存储文件等操作都会占用手机内存。当内存空间不足时&#xff0c;手机运行会变得缓慢&#xff0c;甚至出现卡顿、闪退等现象。因此&#xff0c;定期清理iPhone内存是非常必要的。那么&#…

人工智能与专家系统:构建智慧决策的未来

引言 随着信息技术的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经成为当今科技领域的一个重要分支&#xff0c;并在多个行业中展现出了巨大的潜力和影响力。人工智能通过模拟人类的智能行为&#xff0c;使计算机能够执行诸如学习、推理、解决问题和理解自然语言…

vite-服务端渲染(ssr)项目线上频繁刷新(踩坑记录)

今天来分享一个我在公司修改之前前端留下来的项目的坑。来说说大致的一个经过把&#xff0c;我老板说这个项目是之前的一个前端做的&#xff0c;用的是ssr服务端渲染的技术&#xff0c;不过他项目在线上会一直频繁的刷新&#xff0c;据说他想破脑袋都想不出来&#xff0c;最终因…

周鸿祎为什么建议Java、前端、大数据、PHP开发都要学一下大模型?_ai大模型全栈工程师跟java有关吗

ChatGPT的出现在全球掀起了AI大模型的浪潮&#xff0c;2023年可以被称为AI元年&#xff0c;AI大模型以一种野蛮的方式&#xff0c;闯入你我的生活之中。 从问答对话到辅助编程&#xff0c;从图画解析到自主创作&#xff0c;AI所展现出来的能力&#xff0c;超出了多数人的预料&…

【企业级监控】Zabbix监控网站并发连接数

Zabbix自定义监控项与触发器 文章目录 Zabbix自定义监控项与触发器资源列表基础环境前言一、什么是zabbix的Key值二、获取远程Key值2.1、获得主机的Key值2.2、被监控端安装Agent2.3、zabbix_get命令获取Agent数据举例2.3.1、zabbx_get获取cpu核心数2.3.2、获取目标主机系统和内…

windows中超详细深度学习环境配置之安装显卡驱动、cuda、cudnn、pytorch、torchvision、pycharm

超详细介绍安装Gpu版本的pytorch深度学习环境 一、显卡驱动安装1.1 下载驱动1.2 安装驱动 二、cuda安装2.1 下载cuda2.2 安装cuda2.3 检查cuda是否安装成功 三、安装cudnn3.1 cudnn下载3.2 cudnn安装 四、安装miniconda4.1 miniconda下载4.2 miniconda安装4.3 添加环境变量 五、…

数字营销以打造“会员体系”为主要目标的好处和优势

​蚓链数字化营销实践观察&#xff1a;在数字化时代&#xff0c;企业的营销方式发生了深刻的变革。会员体系作为一种常见的营销策略&#xff0c;在数字营销领域中发挥着越来越重要的作用。 首先&#xff0c;我们来总结一下会员体系的特点和优势 &#xff08;一&#xff09;个性…