js watch方法监听多个参数
时间: 2023-10-21 18:12:39 浏览: 38
在JavaScript中,没有内置的方法可以直接监听多个参数的变化。但是,我们可以使用第三方库或自己实现一个通用的监听函数来实现这个功能。
下面是一个使用第三方库`vue`的例子,它提供了一个`watch`方法来监听对象的属性变化:
```javascript
let data = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3'
};
const vm = new Vue({
data: data
});
vm.$watch(
function() {
return [this.prop1, this.prop2, this.prop3];
},
function(newValues, oldValues) {
console.log('Properties changed:', oldValues, '->', newValues);
}
);
data.prop1 = 'new value'; // Properties changed: ["value1", "value2", "value3"] -> ["new value", "value2", "value3"]
data.prop2 = 'another new value'; // Properties changed: ["new value", "value2", "value3"] -> ["new value", "another new value", "value3"]
```
在上面的例子中,我们使用了`vue`库的`vm.$watch()`方法来监听对象的属性变化。我们将要监听的属性放在一个数组中作为第一个参数传递给`$watch()`方法,然后在回调函数中处理属性变化的逻辑。
如果你不想使用第三方库,你可以自己实现一个监听函数。下面是一个简单的实现:
```javascript
function watch(obj, props, callback) {
let values = props.map(prop => obj[prop]);
setInterval(() => {
let newValues = props.map(prop => obj[prop]);
if (!deepEqual(values, newValues)) {
callback(newValues, values);
values = newValues;
}
}, 100);
}
function deepEqual(obj1, obj2) {
return JSON.stringify(obj1) === JSON.stringify(obj2);
}
let data = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3'
};
watch(data, ['prop1', 'prop2', 'prop3'], (newValues, oldValues) => {
console.log('Properties changed:', oldValues, '->', newValues);
});
data.prop1 = 'new value'; // Properties changed: ["value1", "value2", "value3"] -> ["new value", "value2", "value3"]
data.prop2 = 'another new value'; // Properties changed: ["new value", "value2", "value3"] -> ["new value", "another new value", "value3"]
```
在上面的例子中,我们定义了一个`watch()`函数,它接受一个对象、一个属性数组和一个回调函数作为参数。在`watch()`函数中,我们使用`setInterval()`方法来定时检查属性值的变化,并在变化时调用回调函数。我们还实现了一个`deepEqual()`函数来比较两个对象是否相等。