ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端Vue篇之vue如何监听对象大概数组某个属性的变化 [打印本页]

作者: 刘俊凯 时间: 2024-8-20 11:49
标题: 前端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() {
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 会主动将这个属性变为相应式的，从而能够监听到这个属性的变化。下面是一个示例代码：
1. this.$set(this.myArray, 0, 'new value'); // 设置数组某一项的值
2. this.$set(this.myObject, 'prop', 'new value'); // 设置对象某个属性的值
复制代码
使用以下几个数组的方法：
Vue 源码里缓存了数组的原型链，然后重写了以下几个方法，触发这几个方法的时间会 observer 数据，意思是使用这些方法不用再进行额外的操纵，视图主动进行更新。保举使用 splice() 方法，因为 splice() 可以在数组的任何位置进行删除/添加操纵。
1. 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 中，你可以使用 watch 或 computed 来监听对象或数组某个属性的变化。如果直接设置数组的某一项的值大概对象的某个属性值，页面不会更新。解决方式有两个：使用 this.$set() 方法大概使用以下几个数组的方法：splice()、push()、pop()、shift()、unshift()、sort()、reverse()。须要留意的是，要确保对象或数组是相应式的，否则无法触发相应式机制。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)