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.rhkb.cn/news/83736.html

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

相关文章

MIT6.006 课程笔记P1 - 思考如何进行 PeakFinding

文章目录 寻找峰值 peak暴力算法分而治之从1D到2D朴素算法Attemp#2 寻找峰值 peak 给出一个数组 a b c d e f g h i 并给予数字 index 1 2 3 4 5 6 7 8 9 那么如果某个数字是 peak &#xff0c;那么他将 大于等于左边的数 且 大于等于右边的数 或者 a > b 这里的 a 也是峰值…

fastadmin、vue、react图标库适用于多种框架

在二开fastadmin中&#xff0c;在写vue以及react时&#xff0c;侧边导航栏以及按钮中常常需要很多图标&#xff0c;那么这些图标应该去哪里得到呢&#xff0c;在这里给大家一个链接&#xff0c;这里有丰富的图标库&#xff0c;可以找到自己想要的进行使用。 点击下方链接&…

Leetcode-每日一题【剑指 Offer 13. 机器人的运动范围】

题目 地上有一个m行n列的方格&#xff0c;从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动&#xff0c;它每次可以向左、右、上、下移动一格&#xff08;不能移动到方格外&#xff09;&#xff0c;也不能进入行坐标和列坐标的数位之和大于k的格子。例…

【自然语言处理】大模型高效微调:PEFT 使用案例

文章目录 一、PEFT介绍二、PEFT 使用2.1 PeftConfig2.2 PeftModel2.3 保存和加载模型 三、PEFT支持任务3.1 Models support matrix3.1.1 Causal Language Modeling3.1.2 Conditional Generation3.1.3 Sequence Classification3.1.4 Token Classification3.1.5 Text-to-Image Ge…

K8S系列文章之 自动化运维利器 Ansible

Ansible-安装 第一步&#xff1a;安装我们的epel扩展源 yum -y install epel-release 我这里会报/var/run/yum.pid 已被锁定&#xff0c;如果没有直接进行下一步 [rootmaster home]# yum -y install epel-release 已加载插件&#xff1a;fastestmirror, langpacks /var/run/…

基于Pyqt5+serial的串口电池监测工具

本章,其他的没有,废话没有,介绍一下新开源了一个公司的测试工具,写了差不多三周吧。先来看看界面: 这是一个串口调试界面,使用Pyqt5+serial完成。升级功能暂未移入,占一个坑位。 基于serial二次开发的功能各位如有需要可以照搬走,这是一个纯手写的轮子,稳定! 左侧使用…

【网络基础知识铺垫】

文章目录 1 :peach:计算机网络背景:peach:1.1 :apple:网络发展:apple: 2 :peach:协议:peach:2.1 :apple:协议分层:apple:2.2 :apple:OSI七层模型:apple:2.3 :apple:TCP/IP模型:apple:2.4 :apple:TCP/IP模型与操作系统的关系:apple: 3 :peach:网络传输基本流程:peach:4 :peach:网…

Apache2.4源码安装与配置

环境准备 openssl-devel pcre-devel expat-devel libtool gcc libxml2-devel 这些包要提前安装&#xff0c;否则httpd编译安装时候会报错 下载源码、解压缩、软连接 1、wget下载[rootnode01 ~]# wget https://downloads.apache.org/httpd/httpd-2.4.57.tar.gz --2023-07-20 …

CVE漏洞复现-CVE-2021-3493 Linux 提权内核漏洞

CVE-2021-3493 Linux 提权内核漏洞 漏洞描述 CVE-2021-3493 用户漏洞是 Linux 内核中没有文件系统中的 layfs 中的 Ubuntu over 特定问题&#xff0c;在 Ubuntu 中正确验证有关名称空间文件系统的应用程序。buntu 内核代码允许低权限用户在使用 unshare() 函数创建的用户命名…

面试热题(最长上升子序列)

给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 输入&#xff1…

智慧影院--java开源电影票优惠券制作系统快速开发

搭建一个智慧影院可以通过使用Java开源电影票优惠券制作系统来快速开发。这个系统可以帮助影院管理电影票的销售和优惠活动&#xff0c;提供便捷的购票方式和优惠券的生成与使用功能。 首先&#xff0c;我们需要建立一个数据库来存储电影、影厅、放映计划、订单等信息。在数据…

Spring Security6入门及自定义登录

一、前言 Spring Security已经更新到了6.x,通过本专栏记录以下Spring Security6学习过程&#xff0c;当然大家可参考Spring Security5专栏对比学习 Spring Security5专栏地址&#xff1a;security5 Spring Security是spring家族产品中的一个安全框架&#xff0c;核心功能包括…

Oracle 开发篇+Java通过HiKariCP访问Oracle数据库

标签&#xff1a;HikariCP、数据库连接池、JDBC连接池、释义&#xff1a;HikariCP 是一个高性能的 JDBC 连接池组件&#xff0c;号称性能最好的后起之秀&#xff0c;是一个基于BoneCP做了不少的改进和优化的高性能JDBC连接池。 ★ Java代码 import java.sql.Connection; impor…

大数据传输的定义与大数据传输解决方案的选择

当我们需要处理大量的数据时&#xff0c;我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议&#xff0c;以保证数据的快速、可靠和安全的移动。常用的大数据传输技术有Hadoop分布式文件系统&a…

整理mongodb文档:改

个人博客 整理mongodb文档:改 求关注&#xff0c;求批评&#xff0c;求进步 文章概叙 本文主要讲的是mongodb的updateOne以及updateMany&#xff0c;主要还是在shell下进行操作&#xff0c;也讲解下主要的参数upsert以及更新的参数。 数据准备 本次需要准备的数据不是很多…

【Spring】使用注解的方式获取Bean对象(对象装配)

目录 一、了解对象装配 1、属性注入 1.1、属性注入的优缺点分析 2、setter注入 2.1、setter注入的优缺点分析 3、构造方法注入 3.1、构造方法注入的优缺点 二、Resource注解 三、综合练习 上一个博客中&#xff0c;我们了解了使用注解快速的将对象存储到Spring中&#x…

《大型网站技术架构设计》第二篇 架构-性能

不同视角下的网站性能 1、用户 从用户角度&#xff0c;网站性能就是用户在浏览器上直观感受到的网站响应速度快还是慢。用户感受到的时间。 2、开发人员 开发人员关注的主要是应用程序本身及其相关子系统的性能&#xff0c;包括响应延迟、系统吞吐量、并发处理能力、系统稳定…

nsqd的架构及源码分析

文章目录 一 nsq的整体代码结构 二 回顾nsq的整体架构图 三 nsqd进程的作用 四 nsqd启动流程的源码分析 五 本篇博客总结 在博客 nsq整体架构及各个部件作用详解_YZF_Kevin的博客-CSDN博客 中我们讲了nsq的整体框架&#xff0c;各个部件的大致作用。如果没看过的&…

【100天精通python】Day30:使用python操作数据库_数据库基础入门

专栏导读 专栏订阅地址&#xff1a;https://blog.csdn.net/qq_35831906/category_12375510.html 1 数据库基础知识介绍 1.1 什么是数据库&#xff1f; 数据库是一个结构化存储和组织数据的集合&#xff0c;它可以被有效地访问、管理和更新。数据库的目的是为了提供一种可靠的…

paddleseg数据集自定义比例划分为测试集test.txt,训练集train.txt,验证集val.txt

将语义分割的数据集标注好后如下所示&#xff1a; 整理好图片和标签文后需要按照比例划分为训练集&#xff0c;验证集&#xff0c;测试集。 具体划分代码见下&#xff1a; import glob import os.path import argparse import warnings import numpy as npdef parse_args():p…