vue源码中 watcher有哪些类型
时间: 2024-06-06 19:08:19 浏览: 8
在Vue源码中,Watcher有三种类型:
1. 渲染Watcher(render watcher):在组件渲染过程中,会创建一个渲染Watcher,它会观察组件中的所有状态(data、props、computed等),当状态发生变化时,它会重新渲染组件。
2. 计算属性Watcher(computed watcher):当计算属性被访问时,会创建一个计算属性Watcher,它会观察计算属性依赖的状态(data、props、computed等),当依赖的状态发生变化时,它会重新计算计算属性的值。
3. 监听器Watcher(user watcher):当开发者使用$watch监听一个状态时,会创建一个监听器Watcher,它会观察指定的状态,当状态发生变化时,它会执行回调函数。
相关问题
vue中watcher
在Vue中,Watcher(观察者)是一个关键的概念。它用于监听Vue实例中的数据变化,并在数据变化时执行相应的逻辑。
Watcher有两种类型:计算属性的Watcher和侦听器的Watcher。
计算属性的Watcher是用于监听计算属性的变化。当计算属性依赖的数据发生变化时,计算属性的Watcher会被触发并重新计算该属性的值。
侦听器的Watcher是用于监听指定数据的变化。你可以使用`watch`选项来定义侦听器。当指定数据发生变化时,侦听器的Watcher会被触发并执行相应的回调函数。
下面是一个示例,演示如何在Vue组件中使用Watcher:
```javascript
Vue.component('my-component', {
data() {
return {
counter: 0
};
},
watch: {
counter(newVal, oldVal) {
// 在counter发生变化时执行的逻辑
console.log('counter发生了变化');
}
}
});
```
在上面的示例中,当`counter`发生变化时,侦听器的Watcher会被触发,并打印出一条消息。
vue中computed与watcher
在Vue中,computed和watcher是两种不同的属性,用于响应式地处理数据的变化。
computed属性是基于依赖关系进行缓存的计算属性。它是一个函数,在Vue实例中定义,可以根据依赖的数据自动计算出一个新的值。当依赖的数据发生变化时,computed属性会重新计算,但是如果依赖的数据没有发生改变,则会从缓存中读取上一次的计算结果。computed属性的优点是可以通过简单的getter函数来定义,使得代码更加清晰和可读。
watcher是一个观察者,用于监听某个特定数据的变化。它可以监听单个值、对象、数组或者整个Vue实例。当被监听的数据发生变化时,watcher会执行相应的回调函数。watcher可以用于处理一些需要在数据变化时执行异步或者开销较大的操作,或者在数据变化时执行一些副作用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)