一、数组

1. 不能监听的情况

（1）直接通过下标赋值 arr[i] = value

（2）直接修改数组长度 arr.length = newLen

2. 替代做法

（1）修改值

1. Vue.set(arr, index, newvalue)
2. vm.$set(arr, index, newvalue)
3. arr.splice(index, 1, newvalue)

（2）修改数组长度，

arr.splice(newLen)

3. 注意

调用数组的pop、push、shift、unshift、splice、sort、reverse等方法时是可以监听到数组的变化的

vue内部相当于重写了数组的原型，劫持了这七个方法

二、对象

1. 不能监听的情况

属性的新增和删除

obj.newkey=newvalue

delete obj.key

2. 替代做法

// 新增
1. Vue.set(obj, newkey, newvalue)
2. vm.$set(obj, newkey, newvalue)
3. obj = Object.assign({}, obj, {newkey1: newvalue1, newkey2: newvalue2})
// 删除
1. Vue.delete(obj, key)
2. 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针对某个属性。所以，只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性

参考链接：

1. https://blog.csdn.net/kkkkk0826/article/details/102680084

2. https://cn.vuejs.org/v2/guide/reactivity.html

3. https://www.cnblogs.com/youhong/p/12173354.html

VUE 2 无法监听数组和对象的某些变化相关推荐

vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...
[vue] 分别说说vue能监听到数组或对象变化的场景，还有哪些场景是监听不到的？无法监听时有什么解决方案？
[vue] 分别说说vue能监听到数组或对象变化的场景,还有哪些场景是监听不到的?无法监听时有什么解决方案? 无法监听时的方案: 数组:改变数组的值:this.$set() 改变数组长度:arr.sp ...
watch深度监听数组_vue watch普通监听和深度监听实例详解(数组和对象)
vue watch普通监听和深度监听实例详解(数组和对象) 下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num ...
vue用watch监听对象，打印oldValue和newValue相同的问题
vue用watch监听对象,打印oldValue和newValue相同的问题背景做节目设计器时候,当组件超出限制大小时,需要回滚此次操作,但是数据没有备份,拿不到旧数据.因此在watch中监听变化 ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
vue watch第一次监听不到_Vue 的 computed 和 watch 的区别
computer 计算属性通过计算得出的属性就是计算属性计算属性可以是一个函数或者是一个getter和setter组成的对象看看一个展示名字的实例: 需求一:展示名字 // 引用完整版 Vue, ...
vue，watch监听数据，数据监听
vue,watch监听数据,数据监听三个值: 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep:其值是true或false:确认是否深入监听.(一般 ...
Object.defineProperty也能监听数组变化？
本文简介点赞 + 关注 + 收藏 = 学会了首先,解答一下标题:Object.defineProperty 不能监听原生数组的变化.如需监听数组,要将数组转成对象. 在 Vue2 时是使用了 Ob ...
vue/xx/事件监听，按键与键码值
vue中的事件监听 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...

VUE 2 无法监听数组和对象的某些变化

一、数组

1. 不能监听的情况

2. 替代做法

3. 注意

二、对象

1. 不能监听的情况

2. 替代做法

三、分析 vue 2 无法监听数组和对象的这些变化的原因

1. 对于数组

2. 对象

四、 vue 3响应式原理

VUE 2 无法监听数组和对象的某些变化相关推荐

最新文章

热门文章