在 Vue.js 中，watch 是一个强大的选项，用于观察和响应 Vue 实例上数据的变化。它允许你定义当某个数据属性发生变化时应该执行的回调函数。这在处理复杂的数据逻辑、异步操作或需要在数据变化时执行特定操作的场景中非常有用。
1、基本用法
watch 选项可以作为一个对象放在 Vue 实例的 data 选项之后，其键是要观察的属性名，值是一个回调函数或包含多个选项的对象。
- 简单的回调函数
new Vue({el: '#app',data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {// 当 question 发生变化时，这个函数会被调用question(newQuestion, oldQuestion) {this.answer = 'Waiting for you to stop typing...';this.getAnswer();}},methods: {getAnswer() {if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)';return;}this.answer = 'Thinking...';axios.get('https://yesno.wtf/api').then(response => {this.answer = _.capitalize(response.data.answer);}).catch(error => {this.answer = 'Error! Could not reach the API. ' + error;});}}
});
在这个例子中，watch 监视 question 数据属性的变化，当 question 改变时，会调用 question 对应的回调函数，并传入新的值和旧的值。
- 对象形式的 watch
new Vue({el: '#app',data: {someObject: {a: 1,b: 2}},watch: {// 深度监视 someObject 及其子属性的变化someObject: {handler(newVal, oldVal) {console.log('someObject changed:', newVal, oldVal);},deep: true,immediate: true // 在绑定时立即以当前的属性值触发回调}}
});
watch 选项的详细配置
handler: 当数据变化时调用的回调函数。
deep: 设置为 true 时，会深度递归监视对象内部的所有属性。
immediate: 设置为 true 时，会在监视器创建时立即执行一次回调函数，此时回调函数的参数是初始值。
2、停止监视
在某些情况下，你可能需要在组件销毁或某个条件满足时停止监视某个属性。Vue 提供了 unwatch 方法来实现这一点。
const vm = new Vue({el: '#app',data: {someData: 'Initial value'},watch: {someData(newVal, oldVal) {console.log(`someData changed from ${oldVal} to ${newVal}`);}},created() {// 保存 unwatch 函数以便后续调用this.unwatchSomeData = this.$watch('someData', (newVal, oldVal) => {console.log(`Another watch on someData: ${oldVal} -> ${newVal}`);});},beforeDestroy() {// 组件销毁前停止监视if (this.unwatchSomeData) {this.unwatchSomeData();}}
});
在这个例子中，我们在 created 钩子中保存了 unwatch 函数，并在 beforeDestroy 钩子中调用它来停止监视。
3、总结
watch 选项在 Vue.js 中非常强大，允许你响应数据属性的变化并执行复杂的逻辑。通过合理使用 handler、deep 和 immediate 选项，你可以更灵活地控制监视行为。此外，通过 unwatch 方法，你还可以根据需要停止监视。希望这个详解能帮助你更好地理解和使用 Vue.js 中的 watch 选项。
如您在阅读中发现不足，欢迎留言！！！
