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.hqwc.cn/news/61400.html

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

相关文章

Unity游戏源码分享-儿童益智数学大脑训练游戏

Unity游戏源码分享-儿童益智数学大脑训练游戏 5秒内选择答案 项目下载地址&#xff1a;https://download.csdn.net/download/Highning0007/88198773

JavaFx异常: Not on FX application thread; currentThread = Timer-0

我的定时器任务中有两个控件&#xff1a; FXML TextArea Display; FXML Label Label_Display; 执行下方代码会抛出&#xff1a;Exception in thread "Timer-0" java.lang.IllegalStateException: Not on FX application thread; currentThread Timer-0 Timer_tas…

xcode打包导出ipa

转载&#xff1a;xcode打包导出ipa 目录 转载&#xff1a;xcode打包导出ipa 第一步&#xff1a;注册苹果开发者账号 第二步&#xff1a;下载APP Uploader 第三步&#xff1a;使用xcode打包导出ipa文件&#xff0c;供其他人内测 众所周知&#xff0c;在开发苹果应用时需要使…

操作系统 -- 进程间通信

一、概述 进程经常需要与其他进程通信。例如&#xff0c;在一个shell管道中&#xff0c;第一个进程的输出必须传送给第二个进程&#xff0c;这样沿着管道传递下去。因此在进程之间需要通信&#xff0c;而且最好使用一种结构良好的方式&#xff0c;不要使用中断。在下面几节中&…

多模态模型评价

论文1 【Evaluating Object Hallucination in Large Vision-Language Models】 这篇文章主要是评价视觉-语言模型中出现“幻觉”的评价。论文中是这样定义幻觉的 we find that LVLMs suffer from the hallucination problem, i.e., they tend to generate objects that are in…

03微服务到底是什么

一句话导读 微服务是一种架构模式&#xff0c;英文翻译 microservice&#xff0c;微服务架构的核心理念是将大型、复杂的单体应用拆分成更小的、自治的组件&#xff0c;每个组件即为一个微服务 目录 一句话导读 一、微服务的定义 二、微服务的特点 1.独立性 2.松耦合 3.可伸…

TOMCAT部署及优化(Tomcat配置文件参数优化,Java虚拟机(JVM)调优)

TOMCAT tomcat &#xff1a;是一个开放源代码的web应用服务器&#xff0c;基于java代码开发的。也可以理解为tomacat就是处理动态请求和基于java代码的页面开发。可以在html当中写入java代码&#xff0c;tomcat可以解析html页面当中的java&#xff0c;执行动态请求&#xff0c;…

linux (platform driver)平台设备驱动匹配方法

linux2.6驱动开发系列教程_linux 驱动开发教程_老徐拉灯的博客-CSDN博客 linux驱动基础开发1——linux 设备驱动基本概念_老徐拉灯的博客-CSDN博客 linux驱动基础开发2——linux 驱动开发前奏&#xff08;模块编程&#xff09;_linux驱动模块开发环境_老徐拉灯的博客-CSDN博客…

IDEA每次启动indexing解决办法

每次启动indexing很浪费时间。 解决办法 setting中搜索index 设置如下&#xff1a; 这样设置以后&#xff0c;启动速度明显快多了。 参考 https://blog.csdn.net/qq_45162113/article/details/121128721

MySQL高级-存储引擎+存储过程+索引(详解01)

目录 1.mysql体系结构 2.存储引擎 2.1.存储引擎概述 2.2.1.InnoDB 2.2.2.MyISAM 2.2.3.存储引擎选择 3.存储过程 3.1.存储过程和函数概述 3.2.创建存储过程 3.3.调用存储过程 3.4.查看存储过程 3.5.删除存储过程 3.6.语法 3.6.1.变量 3.6.2.if条件判断 3.6.3.…

汽车上的电源模式详解

① 一般根据钥匙孔开关的位置来确定整车用电类别&#xff0c;汽车上电源可以分为常电&#xff0c;IG电&#xff0c;ACC电 1&#xff09;常电。常电表示蓄电池和发电机输出直接供电&#xff0c;即使点火开关在OFF档时&#xff0c;也有电量供应。一般来讲模块的记忆电源及需要在车…

爬虫与搜索引擎优化:通过Python爬虫提升网站搜索排名

作为一名专业的爬虫程序员&#xff0c;我深知网站的搜索排名对于业务的重要性。在如今竞争激烈的网络世界中&#xff0c;如何让自己的网站在搜索引擎结果中脱颖而出&#xff0c;成为关键。今天&#xff0c;和大家分享一些关于如何通过Python爬虫来提升网站的搜索排名的技巧和实…