位置: IT常识 - 正文
vue2中无法监听数组和对象的某些变化问题(vue为什么监听不到对象内部属性)
编辑：rootadmin推荐整理分享vue2中无法监听数组和对象的某些变化问题(vue为什么监听不到对象内部属性)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue3.0监听,vue mousedown监听失败,vue监听页面所有组件 加载完毕,vue中的监听,vue监听不到props的变化,vue监听不到props的变化,vue无法监听数组的变化,vue无法监听数组的变化,内容如对您有帮助，希望把文章链接给更多的朋友！
（1） 直接通过下标赋值 arr[i] = value
（2） 直接修改数组长度 arr.length = newLen
2. 替代做法（1）修改值
1
2
3
Vue.set(arr, index, newvalue)
vm.$set(arr, index, newvalue)
arr.splice(index, 1, newvalue)
（2） 修改数组长度，
1
arr.splice(newLen)
3. 注意调用数组的pop、push、shift、unshift、splice、sort、reverse等方法时是可以监听到数组的变化的
vue内部相当于重写了数组的原型，劫持了这七个方法
二、对象1. 不能监听的情况属性的新增和删除
1
2
obj.newkey=newvalue
delete obj.key
2. 替代做法1
2
3
4
5
6
7
// 新增
Vue.set(obj, newkey, newvalue)
vm.$set(obj, newkey, newvalue)
obj = Object.assign({}, obj, {newkey1: newvalue1, newkey2: newvalue2})
// 删除
Vue.delete(obj, key)
vm.$delete(obj, key)
三、分析 vue 2 无法监听数组和对象的这些变化的原因首先，vue2是通过Object.defineProperty(obj, key, value)这种方式监听数据的
1. 对于数组Object.defineProperty()是可以对数组实现监听操作的，但是vue并没有实现这个功能，因为数组长度不定而且数据可能会很多，如果对每一个数据都实现监听，性能代价太大
但是注意：数组中的元素是引用类型时是会被监听的
2. 对象Object.defineProperty()针对的是对象的某个属性，而且这个操作在vue的初始化阶段就完成了，所以新增的属性无法监听，通过set方法新增对象就相当于初始化阶段的数据响应式处理
四、vue 3响应式原理vue 3是通过proxy直接代理整个对象来实现的，而不是像Object.defineProperty针对某个属性。
所以，只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性
关于vue监听的一些问题对象的监听vue通过object.defineProperty将对象的key转化成getter/setter的形式来追踪变化，但是这种追踪方式只能追踪到数据的修改，对象的属性的删除和增加，这种形式追踪不到。为此vue提供可$set 和$delete两种API来配合使用，解决监听不到属性新增删除问题。
*需要特别注意，在使用$set时，需要传递的参数有三个 vm.$set(target,key,value),target不能是Vue.js实例或者vue.js实例的根数据对象，所谓的根数据对象是指vm.$data *
*在使用$delete时候，也可以中另外一种方法实现，但是不太推荐：
1
2
delete this.obj.name;
this.obg._ob_.dep.notify //手动向依赖发送变化通知;
(说明： _ob_ 是 vue中是否是响应式的判断依据)*
在使用$delete时候，target不能是Vue.js实例或者vue.js实例的根数据对象，
数组的监听vue通过拦截数组原型的方式实现数组的变化的监听，所以有些不是数组原型定义的方法进行的数组操作，发生的变化，是数组感知不到的，比如通过数组下标修改对应位置的值（this.list[0] = 2）,或者通过数组长度改变数组（比如通过数组length清空数组的操作： this.list.length = 0 ）。
所以进行数组操作的时候，尽量使用数组原型方法操作:
1
push pop unshift shift concat reverse sort slice splice join
下一篇：将uniAPP项目导入到微信开发者工具中保姆级教程(uniapp怎么引入elementui)
](https://www.jiuchutong.com/image/20231126/1700986104.jpg)
