vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题

一、数组

1、可以监听到的情况

如push、splice、=赋值(array=[1,2,3])

2、无法监听到的情况

使用下标修改某个元素(这种比较常见)

array[index] = 1

object.a = 3

直接修改数组length

array.length = 5

3、解决方案

this.$set(array, index, data) - 这是个深度的修改,某些情况下可能导致你不希望的结果,因此最好还是慎用

this.dataArr = this.originArr

this.$set(this.dataArr, 0, {data: '修改第一个元素'})

console.log(this.dataArr)

console.log(this.originArr) //同样的 源数组也会被修改 在某些情况下会导致你不希望的结果

上面提到的splice方法进行增删改

利用临时变量进行中转

let tempArr = [...this.targetArr]

tempArr[0] = {data: 'test'}

this.targetArr = tempArr

二、对象

对象和数组都是js里的引用类型,在实际存储中,数据是存储在堆中的,利用存储在栈里的对象名或者数组名的指针进行索引,因此也存在在浅拷贝和深拷贝以及等号赋值时,到底是仅仅新建了一个指针指向了同一份数据,还是两个指针分别指向了两份完全一样的数据的问题

1、可以监听到的

对象的直接=赋值

this.obj = {name: 'test'}

2、无法监听到的

对象属性的增删改

obj: {

prop1: 'data1',

prop2: 'data2'

}

...

// 增

this.obj.prop3 = 'data3'

// 删

delete this.obj.prop1

// 改

this.obj.prop1 = 'data4'

3、解决办法

this.$set(obj, key ,value) - 可实现增、改

watch时添加deep:true深度监听,只能监听到属性值的变化,新增、删除属性无法监听

this.$watch('blog', this.getCatalog, {

deep: true

// immediate: true // 是否第一次触发

});

watch时直接监听某个key

watch: {

'obj.name'(curVal, oldVal) {

// TODO

}

}

object.assign()+直接=赋值

this.watchObj = Object.assign({}, this.watchObj, {

name: 'xiaoyue',

age: 15,

});

补充知识:vue 监听不到数组或对象值的变化怎么办

一、vue监听数组的变化

vue能购监听到数组变化的场景

通过赋值的形式改变正在被监听的数组;

通过splice(index, num, val) 的形式改变正在被监听的数组;

通过数组的push的形式改变正在被监听的数组。

vue无法监听数组变化的场景

通过数组索引改变数组元素的值;

改变数组的长度;

vue无法监听数组变化的场景

this.$set(arr, index, newVal);

通过splice(index,num,val);

使用临时变量作为中转,重新赋值数组;

二、vue监听对象的变化

vue能够监听到对象变化的场景

通过直接赋值的场景。

eg:watchObj = {name:“zyk”}

vue无法监听到对象变化的场景

对象的增加、删除、修改无法被vue监听到

vue解决无法监听对象变化的方法

使用 this.$set(object, key, value)(vue 无法监听 this.set 修改原有属性)

使用Object.assign(),直接赋值的原理;(推荐使用)

以上这篇解决vue无法侦听数组及对象属性的变化问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

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

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

相关文章

哈维玛德学院 计算机,这些美国大学名气不高,却有最顶级的工程专业

上一期我们盘点了有博士学位的Top50 大学工程专业排名今天我们继续盘点 2018USNEWS 工程专业排名不过这个排名主要针对的是没有博士学位的 Top50 大学和上一期那些大名鼎鼎的大学相比这里面很多大学并不怎么为人熟知因为这个榜单大部分都是区域性大学事实上,工程专业…

Hbase介绍

1、为什么出现hbase?hadoop 的NameNode适合大文件,不适合小文件。HDFS不适合大量小文件的存储,因namenode将文件系统的元数据存放在内存中,因此存储的文件数目受限于 namenode的内存大小。HDFS中每个文件、目录、数据块占用150Byt…

math 向上取整_自我说明:关于Math和File类的具体说明.

Math类:Math类,不允许有子类,它直接继承于object.Math类包含执行基本数字运算的方法.如基本指数,对数,平方根和三角函数.Math的基本方法:System.out.pintln(“1.绝对值:”Math.abs(16)”t”Math.abs(-16)”…

眼图 非差分线_LVDS低电压差分信号简介

LVDS低电压差分信号简介1. 名词解释1.1. 背景随着数据传输速率越来越高,现在计算机系统中的数据传输接口基本上都串行化了,像USB、PCIe、SATA、DP等等外部总线将并行总线挤压到只剩下内存总线这个最后的堡垒。当然,就算是并行传输总线最后的倔…

无内存在优盘可以启动计算机吗,没有U盘不要紧,内存卡做启动盘装Win7方法

现在最流行的win7系统安装方法大多以U盘来安装,那么如果你没有U盘呢?为了安装个Win7系统是不是要去买个U盘?当然不用,如果你还有空闲不用的手机内存卡,那么也是可以制作U盘启动盘来安装Win7系统的。准备工具&#xff1…

微信小程序request请求动态获取数据

微信小程序开发文档链接 1 后台代码: clickButton:function(){var that this;wx.request({url: http://localhost:9096/admin.php/index/jj,method : POST,header: { content-type: application/x-www-form-urlencoded },data : {},success: function (res) {//console.log(re…

HBase中的HMaster、HRegionServer、Zookeeper

原文链接:http://blog.csdn.net/mm_bit/article/details/51304233 ----------------------------------- HMaster是Hbase主/从集群架构中的中央节点。通常一个HBase集群存在多个HMaster节点,其中一个为Active Master,其余为Backup Master. Hbase每时每刻只有一个hm…

spyder python调试_使用spyder编译器单步调试python

1、将需要进行单步调试的函数在脚本中进行调用(十分重要的一步)。由于python是解释型语言,在进行单步调试的时候需要告诉系统你使用了这个函数,单步调试才会进入你所需要调式的函数。如下图所示,我们定义了createDataS…

label qt 自动换行_QT编写一个登录界面

前言继上篇:一起学Qt之基础篇---入门今天上手实操用QT编写一个登录界面~系统权限这个词大家肯定不陌生,你进入一个网站也是,如果不登录,就是以游客的身份进去的,要想看到某些信息肯定需要进行登录,更完善的…

我的世界服务器怎么修改书与笔,我的世界书与笔怎么做 我的世界书与笔怎么用...

第一步先收集甘蔗,然后合成纸,甘蔗在河边,池塘边,沼泽地一般都会生成,我们也可以拿回家种植,但是甘蔗必须种在水边,其他地方种植不了,其他地方玩家怎么右键甘蔗都是没有反应的。第二…

python csv模块用法_python使用csv模块如何将数据存放在一张表的不同行?

def save2csv(file_nameNone, headerNone, dataNone): """ 保存成CSV格式文件,方便Excel直接打开 :param file_name: 保存的文件名 :param header: 表头,每一列的名字 :param data: 具体填充数据 :return: """ if file_name is None or isinstan…

虚拟机 服务器 root,虚拟机切换到root账户

虚拟机切换到root账户 内容精选换一换一、安装虚拟机1、下载VMware workstation 14 ,安装时按照默认配置安装2、下载ubuntu-18.04.1-desktop-amd64.iso镜像文件3、打开 VMware workstation ,新建虚拟机4、配置虚拟机内存,磁盘,网络…

每一行末尾添加分号

文本内容如下: TMP_TBX_100_0_A1 TMP_TBX_100_0_A10 TMP_TBX_100_0_A12 TMP_TBX_100_0_A13 TMP_TBX_100_0_A14 TMP_TBX_100_0_A15 TMP_TBX_100_0_A15_2 TMP_TBX_100_0_A16 TMP_TBX_100_0_A17 TMP_TBX_100_0_A18 TMP_TBX_100_0_A19 TMP_TBX_100_0_A19_2 TMP_TBX_100…

壮观霉素抗性基因原理_基因组学深入挖掘·研究方案(下篇)

前情回顾上次小编为大家讲解了四种以基因组为基础的多组学联合研究方案(基因组与转录组,深入挖掘基因表达信息;基因组联合代谢组与转录组,锁定关键通路;基因组与群体进化,解析物种发展历程;基因…

Shell脚本大量示例

几乎所有的脚本里都有某种流控制结构,很少有例外。流控制是什么?假定有一个脚本,包含下列几个命令: #!/bin/sh # make a directory mkdir /home/dave/mydocs # copy all doc files cp *.docs /home/dave/docs # delete all doc fi…

Spark 常见问题小结

原文地址:http://www.aboutyun.com/thread-9946-1-1.html -------------------------------------- 问题导读 1、当前集群的可用资源不能满足应用程序的需求,怎么解决? 2、内存里堆的东西太多了,有什么好办法吗? …

dataframe数据标准化处理_数据预处理——标准化/归一化(实例)

这次我们来说说关于数据预处理中的数据标准化及归一化的问题。主要以理论实例的方式为大家展示。本次实验也将会展示部分数据以及代码,有兴趣的小伙伴可以自己动手试试~在本次实例过程中,我们使用的数据是:2010-2018年间广州市经济与环境的时…

python实现自动打电话软件_全自动手势联系软件 让你轻轻松松打电话

电话号码超级多的童鞋们,由于手机里存储的电话太多,每次要找某个人的电话很难找,有木有同感的?小编今天像大家推荐一款新潮的帮助你轻松找到想要的电话的模式,有没有很想知道呢?其实小编本来是想卖个关子的…

电脑的虚拟服务器位置,如何配置基于IP地址的虚拟主机

满意答案虚拟主机简介:1. 把一台运行在互联网上的服务器分成多个虚拟的服务器。2. 每一个虚拟主机都具有独立的域名和完整的Internet服务器(支持WWW,FTP,E-mail等)。3. 一台服务器上的不同虚拟主机是各自独…

VMware配置额外内存设置

配置额外内存设置 额外内存设置用于控制主机系统中的内存管理器如何将虚拟机从物理 RAM 中换出。 要配置额外内存设置,请选择[编辑] > [首选项] > [内存]。 [调整所有虚拟机内存使其适应预留的主机 RAM] 选择此选项会对给定时间内可以运行的虚拟机的数量和内…