一、数组

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

Logo

前往低代码交流专区

更多推荐