解决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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
vue.js路由跳转详解
Aug 28 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
详解JS函数防抖
2020/06/05 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python 提取文件指定列的方法示例
2019/08/07 Python
使用Python实现画一个中国地图
2019/11/23 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
Pycharm小白级简单使用教程
2020/01/08 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
教师中国梦演讲稿
2014/04/23 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers