Vue的data、computed、watch源码浅谈

如果data.msg更新了，则就会触发watchWatcher的update方法

直接上代码：

// watch
import Watcher from './watcher'
export default function watch(getter, callback) {
 new Watcher(getter, { watch: true, callback })
}

没错又是直接用了getter，只是这次传入的选项是{ watch: true, callback }，接下来看看Watcher内部进行了什么处理：

export default class Watcher {
 constructor(getter, options = {}) {
  const { computed, watch, callback } = options
  this.getter = getter
  this.computed = computed
  this.watch = watch
  this.callback = callback
  this.value = undefined
  if (computed) {
   this.dep = new Dep()
  } else {
   this.get()
  }
 }
}

首先是构造函数中，对watch选项和callback进行了保存，其他没变。

然后在update方法中。

 update() {
  if (this.computed) {
   ...
  } else if (this.watch) {
   const oldValue = this.value
   this.get()
   this.callback(oldValue, this.value)
  } else {
   ...
  }
 }

在调用this.get去更新值之前，先把旧值保存起来，然后把新值和旧值一起通过调用callback函数交给外部，就这么简单。
我们仅仅是改动寥寥几行代码，就轻松实现了非常重要的api：watch。

总结。

有了精妙的Watcher和Dep的设计，Vue内部的响应式api实现的非常简单，不得不再次感叹一下尤大真是厉害啊！

到此这篇关于Vue的data、computed、watch源码浅谈的文章就介绍到这了,更多相关Vue data、computed、watch源码内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！