vue中computed与watcher

在Vue中，computed和watcher是两种不同的属性，用于响应式地处理数据的变化。

computed属性是基于依赖关系进行缓存的计算属性。它是一个函数，在Vue实例中定义，可以根据依赖的数据自动计算出一个新的值。当依赖的数据发生变化时，computed属性会重新计算，但是如果依赖的数据没有发生改变，则会从缓存中读取上一次的计算结果。computed属性的优点是可以通过简单的getter函数来定义，使得代码更加清晰和可读。

watcher是一个观察者，用于监听某个特定数据的变化。它可以监听单个值、对象、数组或者整个Vue实例。当被监听的数据发生变化时，watcher会执行相应的回调函数。watcher可以用于处理一些需要在数据变化时执行异步或者开销较大的操作，或者在数据变化时执行一些副作用。

相关问题

vue2computed函数使用

computed函数是Vue.js中的一个特殊属性，用于定义计算属性。计算属性是基于其他数据属性计算得出的属性，它的值是根据一定的逻辑计算得出的，而不是直接从数据属性中取得的。computed函数可以接收一个对象作为参数，对象中的每个属性都是对应的计算属性的定义。

在Vue.js中，当计算属性第一次被访问时，Vue会调用计算属性的getter函数来计算属性的值，并将计算属性的依赖关系与当前的Watcher进行绑定。当计算属性依赖的数据发生变化时，Vue会调用相关的Watcher来更新计算属性的值。

在计算属性的定义中，我们可以使用this关键字来访问组件的数据属性和其他计算属性。当计算属性依赖的数据属性发生改变时，计算属性会重新计算得到新的值。

回到你的问题，当调用computed函数时，会执行Watcher.evaluate()方法，该方法会去调用相关computed定义的方法，并将该方法与computed的Watcher绑定。在调用computed方法时，如果该方法内部依赖了data中的属性，会通过调用get()方法的depend()函数将data的Dep和computed的Watcher绑定。这样就确保了当data的属性发生变化时，computed的Watcher会重新计算。

至于你提到的watcher.depend()，它的作用是在computed属性第一次计算时，主动去绑定computed的Watcher依赖的其他Watcher。这样，当其他Watcher发生变化时，computed的Watcher也会被触发重新计算。

如果我们删去watcher.depend()这段代码，当其他Watcher发生变化时，computed的Watcher就不会被触发重新计算，计算属性的值也不会更新。

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，它会观察指定的状态，当状态发生变化时，它会执行回调函数。