根据vue2数组响应式实现原理找到了一个待优化点

news2024/12/24 8:34:10

最近学习了相关知识 写出了 vue2数据响应式原理(5) 通过重写函数实现数组响应式监听但也在这里 我发现 数组响应式 一个是通过for遍历监听已有属性 还有就是重写会改变数组的几个内置函数来监听
但 如果 元素之前没有 且 我们不适用这些内置函数去修改呢?

我们创建一个vue2项目
然后 在data中声明一个数组

data() {
   return {
        currentRecord: "default",
        directoryList: [
            {
                id: 1,
                name: "分组1"
            },
            {
                id: 2,
                name: "分组2"
            }
        ]
    }
},

然后将他们循环遍历在模板上

 <header>
     <ul class="layui-tab-title">
        <li :class = "currentRecord  == 'default'?'currentRecord':''">默认分组
            <i
                class = "el-icon-plus"
                @click = "LockTheFormer()"
            >
            </i>
        </li>
        <li
          v-for = "item in directoryList"
          :key = "item.id"
          :class = "currentRecord  == item.id?'currentRecord':''"
        >{{ item.name }}</li>
    </ul>
</header>

LockTheFormer函数中的内容如下

LockTheFormer(item) {
    this.directoryList[2] =  {
        id: 3,
        name: "分组3"
    }
    console.log(this.directoryList);
},

数组本身有两个下标 对应 0 下标 1 下标
而我们直接给它的 2下标 就是第三个位置赋值

我们将项目跑起来
然后点击加号触发LockTheFormer
在这里插入图片描述
此时 通过console.log(this.directoryList) 我们看到 直接 [2] 给一个还没有的下标赋值是可以直接加进去的

但界面没有响应式更新 vue2 响应式标配的 __ob__也没有标记上新的下标 仿佛成立数据响应式的落网之鱼

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

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

相关文章

报表生成器 FastReport .Net 用户指南(一):基本原理

FastReport .Net是一款全功能的Windows Forms、ASP.NET和MVC报表分析解决方案&#xff0c;使用FastReport .NET可以创建独立于应用程序的.NET报表。 随着FastReport .Net 2023版的正式发布&#xff0c;厂商也发布了最新版的用户手册&#xff0c;从今天起我们将持续更新2023版的…

苹果手机怎么看生产日期?参考方法在这!

案例&#xff1a;怎么查苹果手机买了几年&#xff1f; 【求助&#xff01;我从别人那里买了一部苹果手机&#xff08;非官方&#xff09;&#xff0c;怎么看这个手机用了几年&#xff1f;】 苹果手机作为一款高端手机&#xff0c;备受用户的喜爱。然而&#xff0c;许多用户不知…

utools - 电脑必装软件

目录 一、超级面板二、计算稿纸三、IP地址查询和正则表达式测试四、浏览器书签五、OCR识别六、Markdown编辑器、Emoji表情输入工具七、总结 简介&#xff1a; 今天我要向大家介绍一款非常实用的电脑软件——utools。 官网&#xff1a;utloos &#x1f433;作为一款集成了多种实…

初识c++语法(一)

我们在C语言的基础之上进行c语言的学习。对于我们的c语言来说&#xff0c;c兼容C语言&#xff0c;所以我们以前编写的C语言的程序在c平台上也是可以运行的。唯一不同的就是我们的c对于我们C语言的部分语法做出了优化以及引入了面向对象的概念。所以在刚开始学习c的时候我们可以…

免费馅饼(牛客刷dp)

免费馅饼 比赛主页 我的提交 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 SERKOI最新推出了一种叫做“免费馅饼”的游戏:游戏在一个舞台上进行。舞台的宽度为W格&#…

D. Color with Occurrences(Codeforces Round 811 (Div. 3))

https://codeforces.com/contest/1714/problem/D 题目大意 给定一个字符串 t t t 和一组字符串 s 1 , s 2 , … , s n s_1, s_2, \ldots, s_n s1​,s2​,…,sn​。每次操作可以选择其中一个字符串 s i s_i si​&#xff0c;将 t t t 中所有 s i s_i si​ 的出现位置染…

管理后台项目-04-SPU列表-增删改SPU-获取SKU【续】

目录 1-删除spu 2-添加sku 2.1-获取skuForm页面组件的数据 2.2-收集form表单数据 2.3-保存提交数据 3-查看SKU信息和loading效果 上一篇文章管理后台项目-03-SPU列表-增删改SPU-获取SKU_ycmy2017的博客-CSDN博客内容较多&#xff0c;交互逻辑有点复杂&#xff0c;所以分两…

微风·六·JAVA中“==”、hashcode、equals及字符串常量池的区别

vector线程安全的集合 hashset底层为hashmap 文章目录 1 “”和equals的区别是什么?1.1 “”解释1.2 “equals”解释1.3 注意点&#xff1a;equals不能比较基本数据类型1.4 Integter缓存数组1.4.1 引入案例发现问题1.4.2 解释缓存数组 1.5 字符串常量池1.5.1 案例一1.5.2 案例…

视频直播网站开发的最佳实践

随着互联网技术的不断发展&#xff0c;视频直播成为了网络世界中的一股热潮。无论是企业还是个人&#xff0c;都可以通过搭建自己的视频直播网站来实现自己的目标。但是&#xff0c;对于很多企业来说&#xff0c;视频直播网站的开发是一项复杂的任务。因此&#xff0c;本文将介…

响应式开发(HTML5CSS3)实现媒体查询的功能案例

目录 前言 一、媒体查询知识点 二、实现功能的尺寸 三、代码部分 1.不带嵌套的媒体查询功能 1.1.代码段 1.2.运行结果 2.带嵌套的媒体查询功能 2.1.代码段 2.2.运行结果 2.2.3视频效果 前言 1.本文讲解的响应式开发技术&#xff08;HTML5CSS3Bootstrap&#xff09…

C语言开发环境搭建及调试

C简介 可移植 标准C C/C &#xff08;系统硬件操作的接口&#xff0c;windows&#xff0c;Linux不一样&#xff09; 跨平台 Java Python 下载 去官网选择Visual Studio 2019下载 安装过程中勾选使用C的桌面开发 安装好之后点击创建新项目——空项目 位置最好放在根目录下&…

从数据管理到数据资产管理

数据已经与土地、劳动力、资本、技术并称为五种生产要素&#xff0c;数据的价值是毋庸置疑的。数据甚至成为了国家的基础性战略资源&#xff0c;数字经济也正在成为经济增长的强大创新动力。那么—— 数据到底指的是什么&#xff1f; 数据管理又是怎么回事&#xff1f; 数据如何…

Django项目之经济预测平台,应用LSTM、GBDT等算法

一、平台功能与技术点 1.技术点&#xff1a;Python3.9、Django4.1.7&#xff0c; tensorflow2.11.0&#xff0c;keras2.11.0&#xff0c;numpy1.24.2、bootstrap、ajax、MySQL等等 2.功能&#xff1a;正常前后端&#xff0c;前台主要完成经济预测功能&#xff08;特征和标签都…

✨✨✨ ❃ ♕ ꕥXpath解析html获取表情符号,丰富你的文章 ꧁ ꧂꧁ ꧂

✨✨✨ ❃ ♕ ꕥXpath解析html获取表情符号&#xff0c;丰富你的文章 ꧁ ꧂꧁ ꧂ 1. 推荐几个好玩的表情符号网站2. xpath解析html获取表情3. xpath解析html源码3.1 parse_li.py3.2 symbol2.html 参考 1. 推荐几个好玩的表情符号网站 &#x1f495; &#x1f9da; &#x1f6b…

SPDK软件栈基础概念

SPDK SPDK软件架构SSD和SPDK中controller和nsSPDK RPC &#xff08;一&#xff09;driverSPDK virtio-PCIe 和 vhost-user &#xff08;二&#xff09;Storage Services(存储设备)对象存储SPDK BlobStore&BlobFS SPDK 块设备驱动块设备驱动层的其他模块 &#xff08;三&…

KMP字符串匹配算法详解

目录 简单的暴力匹配算法KMP算法next数组next数组的优化 简单的暴力匹配算法 对于字符串的匹配通常是给出一个主串str和一个模式串sub&#xff0c;然后在主串pos位置开始匹配&#xff0c;如果能在str中找到sub那么就返回sub在str中首次出现的首个字符的下标&#xff0c;否则返…

地球系统模式(CESM)

目前通用地球系统模式&#xff08;Community Earth System Model&#xff0c;CESM&#xff09;在研究地球的过去、现在和未来的气候状况中具有越来越普遍的应用。CESM由美国NCAR于2010年07月推出以来&#xff0c;一直受到气候学界的密切关注。近年升级的CESM2.0在大气、陆地、海…

【论文笔记】VideoGPT: Video Generation using VQ-VAE and Transformers

论文标题&#xff1a;VideoGPT: Video Generation using VQ-VAE and Transformers 论文代码&#xff1a;https://wilson1yan. github.io/videogpt/index.html. 论文链接&#xff1a;https://arxiv.org/abs/2104.10157 发表时间&#xff1a; 2021年9月 Abstract 作者提出了…

git 常用命令及遇到问题

自己没事&#xff0c;把git常用命令做个记录总结。方便自己和初学者查看&#xff0c;本文针对初学者&#xff0c;如果你已经是工作多年高手&#xff0c;请跳过。 git的几个区认识&#xff0c;分别为工作区&#xff0c;缓存区&#xff0c;版本库。 工作区&#xff1a;包含.git…

靶机精讲:BNE0x03Simple

主机发现 nmap扫描 端口扫描 服务扫描 脚本扫描 第二十页路径有目录 web渗透 搜索该版本漏洞 CuteCMS漏洞利用 下载下来 查看文件&#xff0c;发现是远程文件上传漏洞 按步骤进行注册 点进去 构造利用文件&#xff0c;反弹shell 最后语法错误应为0>1 尝试上传 根据漏洞扫…