在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的行为。