淘先锋技术网

首页 1 2 3 4 5 6 7

在Vue项目中,watch是很重要的一个特性,它用于监听一个数据的变化,并可以在变化后执行相应的操作。在watch中有一些术语需要了解:

vm.$watch(expOrFn, callback, [options])

expOrFn是要监听的数据,可以是一个函数或者一个字符串,callback是回调函数,当expOrFn发生变化时就会执行这个回调函数,options是一个可选参数对象,可以通过它进行更细致的控制。

监听数组的变化时,我们需要使用Vue提供的$watch方法。当数组发生变化时,watch监听的是这个数组的变化,而并不是其中某个元素的变化。

this.$watch('arr', function (newValue, oldValue) {
console.log(newValue, oldValue);
});

对象的监听和数组很相似,只不过它只监听对象的属性变化,而不是整个对象。与数组一样,对象也是引用类型,所以它的引用没有改变,只有它的属性发生了变化时,才会触发监听事件。

this.$watch('obj.a', function (newValue, oldValue) {
console.log(newValue, oldValue);
});

对于数据的深度监控,我们可以设置deep属性来实现对对象下所有属性的监听。

this.$watch('obj', function (newValue, oldValue) {
console.log(newValue, oldValue);
}, { deep: true });

我们也可以使用immediate属性在watch中立即执行回调函数,而不必等到数据变化时再执行。

this.$watch('num', function (newValue, oldValue) {
console.log(newValue, oldValue);
}, { immediate: true });

除了上述属性,我们还可以使用handler属性来指定回调函数。这在我们需要多次监听同一个数据时非常有用。

this.$watch('num', {
handler: function (newValue, oldValue) {
console.log(newValue, oldValue);
}
});

最后,我们需要注意的是,当我们在watch中监听的数据改变时,它的this指向的是Vue实例。如果我们要在回调函数中使用其他的作用域,那么需要使用bind方法来指定作用域。

this.$watch('num', function () {
console.log(this);
}.bind(this));

总结一下:watch是Vue中非常实用的一个功能,可以用来监听数组、对象的变化,并进行相应的操作。我们可以通过设置深度监听、立即执行回调函数、指定回调函数等属性,来更好地控制watch的行为。