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

星辰迷上大海 2024-06-23 10:03:21 阅读 65

目录

vue如何监听对象或者数组某个属性的变化1. 使用 `watch`2. 使用 `computed`解决方式`vm.$set()` 方法


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() { return this.myArray.reduce((acc, cur) => acc + cur, 0); }}

在上述示例中,arraySum 是一个计算属性,它监听 myArray 数组的变化,并计算数组的和。当 myArray 数组发生变化时,arraySum 属性会自动更新。

需要注意的是,对于数组的变化,Vue 还提供了一些特殊的方法,比如 Vue.set 或者使用扩展运算符 ... 来触发响应式更新。在项目中,如果需要监听对象或数组某个属性的变化,可以选择使用 watch 或者 computed,根据具体需求选择合适的方式。需要注意的是,当监听对象或数组某个属性的变化时,要确保这个属性是响应式的,否则监听不到变化。

解决方式

使用 this.$set() 方法:

this.$set() 是 Vue 提供的一个方法,用于设置对象或者数组某个属性的值。当使用 this.$set() 方法设置对象或数组某个属性的值时,Vue 会自动将这个属性变为响应式的,从而能够监听到这个属性的变化。下面是一个示例代码:

this.$set(this.myArray, 0, 'new value'); // 设置数组某一项的值this.$set(this.myObject, 'prop', 'new value'); // 设置对象某个属性的值

使用以下几个数组的方法:

Vue 源码里缓存了数组的原型链,然后重写了以下几个方法,触发这几个方法的时候会 observer 数据,意思是使用这些方法不用再进行额外的操作,视图自动进行更新。推荐使用 splice() 方法,因为 splice() 可以在数组的任何位置进行删除/添加操作。

this.myArray.splice(0, 1, 'new value'); // 使用 splice() 方法设置数组某一项的值

需要注意的是,在监听对象或数组某个属性的变化时,要确保这个属性是响应式的,否则监听不到变化。如果需要监听对象或数组某个属性的变化,可以选择使用 watch 或者 computed,根据具体需求选择合适的方式。

vm.$set() 方法

vm.$set() 是 Vue 提供的一个方法,用于设置对象或数组某个属性的值。当使用 vm.$set() 方法设置对象或数组某个属性的值时,Vue 会自动将这个属性变为响应式的,从而能够监听到这个属性的变化。

vm.$set() 的实现原理是:

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

总之,vm.$set() 方法的实现原理是通过修改对象或数组的属性值,从而触发 Vue 的响应式机制,使得 Vue 能够监听到属性的变化,并及时更新视图。需要注意的是,在使用 vm.$set() 方法时,要确保对象或数组是响应式的,否则无法触发响应式机制。

持续学习总结记录中,回顾一下上面的内容:

在 Vue 中,你可以使用 watchcomputed 来监听对象或数组某个属性的变化。如果直接设置数组的某一项的值或者对象的某个属性值,页面不会更新。解决方式有两个:使用 this.$set() 方法或者使用以下几个数组的方法:splice()push()pop()shift()unshift()sort()reverse()。需要注意的是,要确保对象或数组是响应式的,否则无法触发响应式机制。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。