vue里面的watcher

Vue是一款前端框架，拥有众多的特性，其中watcher是Vue中很重要的一个。Watcher是Vue.js实现数据响应式的核心，它是实现双向数据绑定的重要工具。本文将对Vue中Watcher的相关知识进行详细介绍。

在Vue中，Watcher是一个用来观察数据变化并触发相应回调函数的对象。Watcher负责监听数据变化并执行对应的回调函数，当数据变化时会更新对应的视图。在Vue的实现中，每个组件都有一个Watcher实例，它会对组件的数据进行观察，并在数据变化时更新相应的视图。由于Watcher是一个全局对象，因此任何一个组件的数据变化都可能触发其他组件的Watcher。这也是Vue.js实现数据响应式的核心之一。

Vue.js实现数据响应式的原理是利用了Javascript的Object.defineproperty()方法来监听对象的属性变化。Watcher通过监听数据变化，然后让Vue.js更新DOM视图来实现双向数据绑定。这个过程可以简单地概括为“模板->数据->DOM”，即Vue.js通过将模板转化为DOM，然后通过监听数据变化，让Vue.js更新DOM视图。

// 一个简单的Watcher实现
class Watcher {
  constructor(vm,expOrFn,cb) {
    this.vm = vm
    this.getter = parsePath(expOrFn)
    this.cb = cb
    this.value = this.get()
  }

  get() {
    Dep.target = this
    const value = this.getter.call(this.vm,this.vm)
    Dep.target = undefined
    return value
  }

  update() {
    const oldValue = this.value
    this.value = this.get()
    this.cb.call(this.vm,this.value,oldValue)
  }
}

Watcher有几个重要的属性和方法。其中，vm属性代表Watcher所在的Vue实例，getter属性代表需要监听的表达式，cb属性表示Watcher的回调函数，value属性表示Watcher当前的值。get()方法用来获取Watcher的当前值，update()方法用来将Watcher的值更新为最新的值。

在Vue中，当某个组件的数据变化时，Vue会依次触发以下几个阶段:

1. 触发setter方法，在数据变化时执行相应的回调函数。
2. 将数据标记为“脏数据”，需要更新组件的数据。
3. 在下一个tick（循环）中执行更新操作。
4. 根据标记的“脏数据”更新组件的视图。
5. 根据组件的更新，触发其他依赖该数据的Watcher。

通过Watcher对象，Vue实现了基于消息机制的数据响应式系统，从而实现了双向数据绑定。Vue的Watcher是非常重要的一部分，可以帮助我们实现组件化开发和数据响应式的实现。