前端Vue篇之vue如何监听对象或者数组某个属性的变化

目录

vue如何监听对象或者数组某个属性的变化

在 Vue 中，你可以使用

watch

或者

computed

来监听对象或数组某个属性的变化。但是，如果直接设置数组的某一项的值，或者直接设置对象的某个属性值，这个时候，你会发现页面并没有更新。这是因为

Object.defineProperty()

限制，监听不到变化。

1. 使用

watch

watch

是 Vue 提供的一个 API，用于监听对象或者数组某个属性的变化。当被监听的属性发生变化时，

watch

中的处理函数会被调用。下面是一个示例代码：

data(){return{myObject:{prop:'initial value'}};},watch:{'myObject.prop':function(newVal, oldVal){// 在这里处理属性变化}}

在上述示例中，当

myObject.prop

的值发生变化时，

watch

中的处理函数会被调用。

2. 使用

computed

computed

是 Vue 提供的一个计算属性，用于监听对象或数组某个属性的变化。当被监听的属性发生变化时，

computed

属性会自动更新。下面是一个示例代码：

data(){return{myArray:[1,2,3]};},computed:{arraySum(){returnthis.myArray.reduce((acc, cur)=> acc + cur,0);}}

在上述示例中，

arraySum

是一个计算属性，它监听

myArray

数组的变化，并计算数组的和。当

myArray

数组发生变化时，

arraySum

属性会自动更新。

需要注意的是，对于数组的变化，Vue 还提供了一些特殊的方法，比如

Vue.set

或者使用扩展运算符

...

来触发响应式更新。在项目中，如果需要监听对象或数组某个属性的变化，可以选择使用

watch

或者

computed

，根据具体需求选择合适的方式。需要注意的是，当监听对象或数组某个属性的变化时，要确保这个属性是响应式的，否则监听不到变化。

解决方式

1. 使用 this.$set() 方法：this.$set() 是 Vue 提供的一个方法，用于设置对象或者数组某个属性的值。当使用 this.$set() 方法设置对象或数组某个属性的值时，Vue 会自动将这个属性变为响应式的，从而能够监听到这个属性的变化。下面是一个示例代码：this.$set(this.myArray,0,'new value');// 设置数组某一项的值this.$set(this.myObject,'prop','new value');// 设置对象某个属性的值
2. 使用以下几个数组的方法：Vue 源码里缓存了数组的原型链，然后重写了以下几个方法，触发这几个方法的时候会 observer 数据，意思是使用这些方法不用再进行额外的操作，视图自动进行更新。推荐使用 splice() 方法，因为 splice() 可以在数组的任何位置进行删除/添加操作。this.myArray.splice(0,1,'new value');// 使用 splice() 方法设置数组某一项的值

需要注意的是，在监听对象或数组某个属性的变化时，要确保这个属性是响应式的，否则监听不到变化。如果需要监听对象或数组某个属性的变化，可以选择使用

watch

或者

computed

，根据具体需求选择合适的方式。

vm.$set()

方法

vm.$set()

是 Vue 提供的一个方法，用于设置对象或数组某个属性的值。当使用

vm.$set()

方法设置对象或数组某个属性的值时，Vue 会自动将这个属性变为响应式的，从而能够监听到这个属性的变化。

vm.$set()

的实现原理是：

1. 如果目标是数组，直接使用数组的 splice() 方法触发响应式；
2. 如果目标是对象，会先判断属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理。defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法。

总之，

vm.$set()

方法的实现原理是通过修改对象或数组的属性值，从而触发 Vue 的响应式机制，使得 Vue 能够监听到属性的变化，并及时更新视图。需要注意的是，在使用

vm.$set()

方法时，要确保对象或数组是响应式的，否则无法触发响应式机制。

持续学习总结记录中，回顾一下上面的内容：
**在 Vue 中，你可以使用

watch

或

computed

来监听对象或数组某个属性的变化。如果直接设置数组的某一项的值或者对象的某个属性值，页面不会更新。解决方式有两个：使用

this.$set()

方法或者使用以下几个数组的方法：

splice()

、

push()

、

pop()

、

shift()

、

unshift()

、

sort()

、

reverse()

。需要注意的是，要确保对象或数组是响应式的，否则无法触发响应式机制。**