Vue之Watcher的用法是什么

Vue中的Watcher是一个观察者对象，用于监听数据的变化并执行相应的回调函数。Watcher的用法如下：

1. 在Vue实例中创建一个Watcher对象：

const vm = new Vue({ data() { return { message: 'Hello World' } }, watch: { message(newVal, oldVal) { console.log('message的值发生了变化：', newVal, oldVal) } } }) 

2. 在watch选项中定义要监听的数据和相应的回调函数：

watch: { message(newVal, oldVal) { console.log('message的值发生了变化：', newVal, oldVal) } } 

3. 在回调函数中处理数据变化的逻辑：

message(newVal, oldVal) { console.log('message的值发生了变化：', newVal, oldVal) } 

4. 可以在回调函数中访问到新值和旧值，通过参数newVal和oldVal获取：

message(newVal, oldVal) { console.log('message的值发生了变化：', newVal, oldVal) } 

5. Watcher还可以用来监听计算属性和深度监听对象中的变化：

watch: { // 监听计算属性 fullName(newVal, oldVal) { console.log('fullName的值发生了变化：', newVal, oldVal) }, // 深度监听对象 obj: { handler(newVal, oldVal) { console.log('obj的值发生了变化：', newVal, oldVal) }, deep: true } } 

总结一下，Watcher的用法就是在Vue实例的watch选项中定义要监听的数据和回调函数，在回调函数中处理数据变化的逻辑。