更新时间：2020年07月17日 09:50:58 作者：sue7
这篇文章主要介绍了解决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无法侦听数组及对象属性的变化问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
-
-
Vue路由传递参数与重定向的使用方法总结
路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源,下面这篇文章主要给大家介绍了关于Vue路由传递参数与重定向的使用方法,需要的朋友可以参考下
2022-10-10
-
el-menu实现横向溢出截取的示例代码
在进行vue开发的时候,我们不可避免会使用到导航菜单,element方便的为我们提供了导航菜单组件,下面这篇文章主要给大家介绍了关于el-menu实现横向溢出截取的相关资料,需要的朋友可以参考下
2022-06-06
-
-
vue如何使用driver.js实现项目功能向导指引
driver.js 是一个轻量级、无依赖的原生JavaScript引擎，在整个页面中驱动用户的注意力，强大的、高度可定制的原生JavaScript引擎，无外部依赖，支持所有主流浏览器，这篇文章主要介绍了vue如何使用driver.js实现项目功能向导指引,需要的朋友可以参考下
2023-03-03
-
-
详解Vue中CSS样式穿透问题
这篇文章主要介绍了VUE中CSS样式穿透问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
-
-
vue文件运行的方法教学
在本篇文章里小编给大家分享了关于vue文件运行的方法教学内容，有需要的朋友们跟着学习下。
2019-02-02
-
-
vue打包项目版本号自加的操作步骤
项目每次打包后都需要改动项目版本号，这个改动每次都需要在package.json中修改version，比较麻烦，到底有没有一种打包后版本号自加的办法，这篇文章主要介绍了vue打包项目版本号自加的步骤,需要的朋友可以参考下
2022-09-09
