vue中watcher

在Vue中，Watcher（观察者）是一个关键的概念。它用于监听Vue实例中的数据变化，并在数据变化时执行相应的逻辑。

Watcher有两种类型：计算属性的Watcher和侦听器的Watcher。

计算属性的Watcher是用于监听计算属性的变化。当计算属性依赖的数据发生变化时，计算属性的Watcher会被触发并重新计算该属性的值。

侦听器的Watcher是用于监听指定数据的变化。你可以使用`watch`选项来定义侦听器。当指定数据发生变化时，侦听器的Watcher会被触发并执行相应的回调函数。

下面是一个示例，演示如何在Vue组件中使用Watcher：

Vue.component('my-component', {
  data() {
    return {
      counter: 0
    };
  },
  watch: {
    counter(newVal, oldVal) {
      // 在counter发生变化时执行的逻辑
      console.log('counter发生了变化');
    }
  }
});

在上面的示例中，当`counter`发生变化时，侦听器的Watcher会被触发，并打印出一条消息。

相关问题

vue watcher

Vue的Watcher是一个观察者对象，它负责监听数据的变化并执行相应的回调函数。使用Watcher可以观察属性的变化并执行自定义操作，同时还可以访问该属性在变化之前的旧值和变化之后的新值。在Vue中，Watcher是Observer和Dep之间的桥梁，每个Observer对应一个Dep，它内部维护一个数组，保存与该Observer相关的Watcher。通过使用Composition API，我们可以将观察者分配给自定义变量，然后调用该变量来停止观察者。例如，可以使用watch函数来创建一个观察者，并通过传递一个回调函数来定义观察者的行为。可以使用unwatch函数来停止观察者的执行。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [理解 Vue 中的观察者](https://blog.csdn.net/weixin_47967031/article/details/127337694)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [sport应用](https://blog.csdn.net/psobb24/article/details/108270269)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue源码中 watcher有哪些类型

在Vue源码中，Watcher有三种类型：

1. 渲染Watcher（render watcher）：在组件渲染过程中，会创建一个渲染Watcher，它会观察组件中的所有状态（data、props、computed等），当状态发生变化时，它会重新渲染组件。

2. 计算属性Watcher（computed watcher）：当计算属性被访问时，会创建一个计算属性Watcher，它会观察计算属性依赖的状态（data、props、computed等），当依赖的状态发生变化时，它会重新计算计算属性的值。

3. 监听器Watcher（user watcher）：当开发者使用$watch监听一个状态时，会创建一个监听器Watcher，它会观察指定的状态，当状态发生变化时，它会执行回调函数。