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


Posted in Javascript onJuly 17, 2020

一、数组

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无法侦听数组及对象属性的变化问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
老生常谈js数据类型
Aug 03 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 #Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 #Javascript
简单了解常用的JavaScript 库
Jul 16 #Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
浅谈js中的attributes和Attribute的用法与区别
Jul 16 #Javascript
JS自定义右键菜单实现代码解析
Jul 16 #Javascript
JS如何在不同平台实现多语言方式
Jul 16 #Javascript
You might like
与文件上传有关的php配置参数总结
2013/06/14 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python实现祝福弹窗效果
2019/04/07 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
keras输出预测值和真实值方式
2020/06/27 Python
python tqdm库的使用
2020/11/30 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
档案管理员岗位职责
2013/12/01 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
叶问观后感
2015/06/15 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server