首先,我们需要了解$watch()
方法是什么以及它的作用。$watch()
是Vue.js中一个重要的观察者模式,在Vue.js中可以通过$watch()
方法来监视某个数据对象的变化,一旦发生变化就执行回调函数。下面详细介绍它的用法。
监听对象watch
简单的例子
我们可以通过如下代码创建一个简单的对象,并监听其中一个属性:
var data = {message: 'Hello World'};
var vm = new Vue({
data: data
});
vm.$watch('message', function(newValue, oldValue) {
console.log('数据变化了', newValue, oldValue);
});
在这个例子里,我们创建了一个Vue实例 vm
,并把一个数据对象data
作为Vue实例的data
属性。在后面通过$watch()
方法来监听message
属性的变化。一旦message
属性发生变化就会执行传入的回调函数并打印出新值和旧值。
深度监听对象
有时候,我们要监听的是一个对象的某个嵌套属性的变化。这时,可以通过设置deep:true
来实现深度监听。比如:
var data = {
user: {
name: 'Tom',
age: 18,
job: {
title: 'Front-end Developer',
salary: 10000
}
}
};
var vm = new Vue({
data: data
});
vm.$watch('user', function(newValue, oldValue) {
console.log('数据变化了', newValue, oldValue);
}, {deep:true});
在这个例子里,如果我们修改data.user.job.title
的值,那么浏览器控制台就会输出数据变化了
。
立即触发监听回调
在有些场景下,我们可能不想等到监听的值发生改变再去处理某些操作,而是立即就处理。这时可以通过设置immediate:true
来实现。比如:
var data = {message: 'Hello World'};
var vm = new Vue({
data: data
});
vm.$watch('message', function(newValue, oldValue) {
console.log('数据变化了', newValue, oldValue);
}, {immediate:true});
在这个例子里,我们设置了immediate:true
,所以当监听开始时,就会立即触发回调函数,打印数据变化了 Hello World undefined
。
监听数组watch
简单的例子
我们可以通过如下代码创建一个简单的数组,并监听数组的变化:
var data = [1,2,3,4,5];
var vm = new Vue({
data: data
});
vm.$watch('length', function(newValue, oldValue) {
console.log('数组长度变化了', newValue, oldValue);
});
在这个例子里,我们创建了一个Vue实例 vm
,并把一个数据数组data
作为Vue实例的data
属性。在后面通过$watch()
方法来监听length
属性的变化。由于数组的length属性会随着数组内容的变化而变化,所以数组内容的变化也会被监听到。
监听数组元素变化
有时候,我们需要监听数组元素的变化。Vue.js提供了$watch()
的第三个参数options
,通过设置options.deep:true
即可实现。
var data = [{name:'Tom', age: 18}, {name:'Jerry', age: 19}];
var vm = new Vue({
data: data
});
vm.$watch('0.age', function(newValue, oldValue) {
console.log('元素变化了', newValue, oldValue);
}, {deep:true});
在这个例子里,我们可以看到,我们设置了监听数组元素的变化,并且指定监听的元素是第0个元素的age
属性,所以当我们修改data[0].age
的值时,就会发生输出元素变化了
。
结论
$watch()
是Vue.js中一个非常有用的方法,能够帮助我们监听对象及数组的变化,及时执行回调函数并做出响应。尤其当我们需要监听对象中嵌套的属性,以及数组中元素的变化时,$watch()
的优势更加突出。
以上就是 Vue.Js中的$watch()
方法的使用攻略,希望对大家有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue.Js中的$watch()方法总结 - Python技术站