Vue中data变量使用的注意事项

因为在Vue中,data中的属性往往都是用于双向绑定,所以Vue会对其有劫持,所以我们在对data属性进行操作时,尽量不要对其直接操作,比如下面代码:

export default {data() {return {list: []}},methods: {init() {for(let i = 0; i < 1000; i++) {this.list.push({key: i,name: '张三'});}console.log(this.list);}},created() {this.init();}
}

最终打印结果如下:

在这里插入图片描述
可以看到包含一个Observer属性,这是Vue自动加上的。

上面代码不断向this.list中添加数据,这样会造成过度数据劫持,造成逻辑处理速度极慢(取值同样如此),可能我们在平时的代码上感受不到,如果将一个比较复杂的canvas渲染动画放进去,全部使用this属性就会发现canvas渲染非常卡顿。

所以我们将init中代码改成:

const list = [];
for(let i = 0; i < 1000; i++) {list.push({key: i,name: '张三'});
}
this.list = list;

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

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

相关文章

h3c 7506 IRF和MAD多活配置案例

IRF配置 irf mac-address persistent always irf auto-update enable irf auto-merge enable undo irf link-delay irf member 1 priority 1 irf member 2 priority 32 irf mode normal irf-port 1/2 port group interface Ten-GigabitEthernet1/1/0/39 mode enhanced port g…

UDP 的报文结构和注意事项

目录 一. UDP的特点 二. UDP协议 1. UDP协议端格式 2.UDP的报文结构 3. 基于UDP的应用层协议 三. (高频面试题) 一. UDP的特点 无连接&#xff1a;知道对端的IP和端口号就直接进行传输&#xff0c;不需要建立连接。不可靠&#xff1a;即使因为网络故障等原因无法将数据报发送…

一文带你快速掌握如何在Windows系统和Linux系统中安装部署MongoDB

文章目录 前言一、 Windows系统中的安装启动1. 下载安装包2. 解压安装启动3. Shell连接(mongo命令)4. Compass-图形化界面客户端 二、 Linux系统中的安装启动和连接1. 下载安装包2. 解压安装3. 新建并修改配置文件4. 启动MongoDB服务5. 关闭MongoDB服务 总结 前言 为了巩固所学…

STM32 低功耗-停止模式

STM32 停止模式 文章目录 STM32 停止模式第1章 低功耗模式简介第2章 停止模式简介2.1 进入停止模式2.1 退出停止模式 第3章 停止模式程序部分总结 第1章 低功耗模式简介 在 STM32 的正常工作中&#xff0c;具有四种工作模式&#xff1a;运行、睡眠、停止以及待机模式。 在系统…

21 | 朝阳医院数据分析

朝阳医院2018年销售数据为例,目的是了解朝阳医院在2018年里的销售情况,通过对朝阳区医院的药品销售数据的分析,了解朝阳医院的患者的月均消费次数,月均消费金额、客单价以及消费趋势、需求量前几位的药品等。 import numpy as np from pandas import Series,DataFrame impo…

Word转PDF工具哪家安全?推荐好用的文件格式转换工具

Word文档是我们最常见也是最常用的办公软件&#xff0c;想必大家都知道了Word操作起来十分的简单&#xff0c;而且功能也是比较齐全的。随着科技的不断进步&#xff0c;如今也是有越来越多类型的办公文档&#xff0c;PDF就是其中之一&#xff0c;那么word转pdf怎么转?Word转PD…

L2CS-Net: 3D gaze estimation

L2CS-Net: Fine-Grained Gaze Estimation in Unconstrained Environments论文解析 摘要1. 简介2. Related Work3. METHOD3.1 Proposed loss function3.2 L2CS-Net 结构3.3 数据集3.4 评价指标 4. 实验4.1 实验结果 论文地址&#xff1a;L2CS-Net: Fine-Grained Gaze Estimation…

日常问题——使用Java转将long类型为date类型,日期是1970年

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一、问题描述 long类型的日期为&#xff1a;1646718195 装换为date类型&#xff1a; Date date new Dat…

ThreadLocal的内存泄漏是怎么发生的

前言 在分析ThreadLocal导致的内存泄露前&#xff0c;需要普及了解一下内存泄露、强引用与弱引用以及GC回收机制&#xff0c;这样才能更好的分析为什么ThreadLocal会导致内存泄露呢&#xff1f;更重要的是知道该如何避免这样情况发生&#xff0c;增强系统的健壮性。 内存泄露 …

STL文件格式详解【3D】

STL&#xff08;StereoLithography&#xff1a;立体光刻&#xff09;文件是 3 维表面几何形状的三角形表示。 表面被逻辑地细分或分解为一系列小三角形&#xff08;面&#xff09;。 每个面由垂直方向和代表三角形顶点&#xff08;角&#xff09;的三个点来描述。 切片算法使用…

MySQL_事务学习笔记

事务 注意&#xff1a;一定要使用 Innodb 存储引擎 概述&#xff1a;一组操作的集合&#xff0c;是不可分割的工作单元&#xff0c;会把一个部分当成一个整体来处理&#xff0c;事务会把操作同时提交或者是撤销。要么同时成功&#xff0c;要么同时失败。 比如&#xff1a;上云…

ESG撑不起波司登的“出海野心”

文 | 螳螂观察 作者 | 青月 ESG&#xff08;环境、社会和企业治理&#xff09;这把“火”&#xff0c;烧的是越来越“旺”了。 在“双碳”目标和市场的双重驱动下&#xff0c;各大企业这几年都不约而同的开始关注起ESG&#xff0c;特别是在二级市场上&#xff0c;不少上市公…

竞赛项目 深度学习的水果识别 opencv python

文章目录 0 前言2 开发简介3 识别原理3.1 传统图像识别原理3.2 深度学习水果识别 4 数据集5 部分关键代码5.1 处理训练集的数据结构5.2 模型网络结构5.3 训练模型 6 识别效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习…

Die2Die(D2D)和chip2chip(C2C)之间的高速互联接口

随着chiplet的兴起&#xff0c;Die2Die的高速互联越来越重要&#xff0c;相比于传统的C2C(chip2chip)的互联&#xff0c;D2D的片间距离很近(10mm量级)&#xff0c;且这些小的chip(裸片)最终形成一个封装【多芯片模块&#xff08;MCM&#xff09;】。所以D2D的互联信道短&#x…

什么是Selenium?使用Selenium进行自动化测试

什么是 Selenium&#xff1f;   Selenium 是一种开源工具&#xff0c;用于在 Web 浏览器上执行自动化测试&#xff08;使用任何 Web 浏览器进行 Web 应用程序测试&#xff09;。   等等&#xff0c;先别激动&#xff0c;让我再次重申一下&#xff0c;Selenium 仅可以测试We…

如何将视频转换成音频mp3格式?试一下这几种转换方法

MP3格式是一种被广泛使用的音频格式&#xff0c;可以在几乎所有音频播放器和设备上播放。此外&#xff0c;由于视频文件通常包含大量图像信息&#xff0c;因此其文件大小通常比相应的音频文件要大得多。将视频转换为MP3格式音频可以大大减小文件大小&#xff0c;从而节省硬盘空…

深兰科技熊猫汽车牵手首恒出行,人工智能技术提升商用车运营服务

8月8日&#xff0c;深兰科技集团旗下熊猫新能源汽车(上海)有限公司(下称熊猫新能源汽车)与河南首恒出行服务有限公司(下称首恒出行)在深兰科技总部举行签约仪式&#xff0c;首恒出行将向熊猫新能源汽车年定向采购10000台商用车&#xff0c;双方将在汽车后市场领域进行技术合作。…

使用公式与格式控制Excel快速实现计划甘特图

项目中都会遇到做任务计划的需求&#xff0c;有的客户要求需要有甘特图的形式本文介绍如何使用excel 单元格实现甘特图显示&#xff0c;调整任务时间自动填充单元格填色实现甘特图效果。废话不多说&#xff0c;先看效果。 准备工作先创建两列开始时间与完成时间&#xff0c;这…

使用KETTLE工具在Oracle和Dm8之间迁移数据

oracle 代码测试数据 CREATE TABLE PRODUCT_CATEGORY ( PRODUCT_CATEGORYID NUMBER(11,0) NOT NULL , NAME VARCHAR2(255) NOT NULL ENABLE, PRIMARY KEY (PRODUCT_CATEGORYID) )INSERT ALL into PRODUCT_CATEGORY(PRODUCT_CATEGORYID, NAME)VALUES(2,国学) into PRODUCT_CATEG…

uni——不规则tab切换(skew)

案例展示 案例代码 <!-- 切换栏 --> <view class"tabBoxs"><view class"tabBox"><block v-for"(item,index) in tabList" :key"index"><view class"tabItem":class"current item.id&…