解决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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
JavaScript中数组去重的5种方法
Jul 04 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实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
js停止输出代码
2008/07/20 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python的垃圾回收机制详解
2019/08/28 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
python中wx模块的具体使用方法
2020/05/15 Python
python实现单机五子棋
2020/08/28 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
小学美术教学反思
2016/02/17 职场文书
如何做好工作总结!
2019/04/10 职场文书
公司周年庆寄语
2019/06/21 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript