在 Vue.js 中,watch
侦听器用于观察和响应 Vue 实例上的数据变动。当你想在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。与计算属性不同,watch
侦听器允许你执行更复杂的逻辑,包括异步操作,并且只有当观察的数据实际发生变化时才会触发。
watch 的基本用法
你可以在 Vue 实例的 watch
选项中添加一个或多个侦听器。每个侦听器都是一个函数,或者是一个包含 handler
方法和其他选项的对象。
示例:
new Vue({ | |
el: '#app', | |
data: { | |
message: 'Hello Vue!' | |
}, | |
watch: { | |
message: function (newVal, oldVal) { | |
console.log('message changed from ' + oldVal + ' to ' + newVal); | |
} | |
} | |
}) |
在这个例子中,我们创建了一个侦听器来观察 message
属性的变化。当 message
的值改变时,侦听器函数会被调用,并且会接收到新值和旧值作为参数。
深度侦听
如果你需要侦听一个对象的所有属性,而不是只侦听对象的引用变化,你可以使用 deep
选项。但是请注意,深度侦听会使你的应用变慢,因为它会递归地遍历对象的所有属性。
示例:
new Vue({ | |
el: '#app', | |
data: { | |
obj: { | |
a: 1, | |
b: 2 | |
} | |
}, | |
watch: { | |
obj: { | |
handler: function (newVal, oldVal) { | |
console.log('obj changed'); | |
}, | |
deep: true | |
} | |
} | |
}) |
在这个例子中,我们使用了深度侦听来观察 obj
对象的所有属性。但是,只有当 obj
对象的属性被改变时,侦听器才会被触发,而不是当 obj
的引用被改变时。
立即执行
默认情况下,watch
侦听器在数据变化之后立即执行。但是,如果你希望在侦听器创建时立即执行一次,你可以使用 immediate
选项。
示例:
new Vue({ | |
el: '#app', | |
data: { | |
message: 'Hello Vue!' | |
}, | |
watch: { | |
message: { | |
handler: function (newVal, oldVal) { | |
console.log('message changed from ' + oldVal + ' to ' + newVal); | |
}, | |
immediate: true | |
} | |
} | |
}) |
在这个例子中,侦听器在创建时立即执行了一次,输出了初始的 message
值。之后,当 message
的值改变时,侦听器也会再次执行。