vue源码解析之watch原理

3,308 阅读2分钟

方法执行时机

在beforeCreate之后,created之前,会initState

initState中会调用initWatch

源码分析

initWatch

这段代码只是简单的进行遍历,然后每个watch都使用createWater进行处理

createWatcher

  1. 获取到监听回调
  2. 调用vm.$watch

$watch

vm.$watch做了主要的两件事

  1. 为每个watch配发watcher;
  2. 根据immediate配置来判断是否立即执行监听回调

watcher

新建watcher的时候主要做了以下几件事情:

  1. 监听的 key
  2. 监听回调 (Watch 中的cb)
  3. 监听配置的options
getter

Watch中this.getter的本质是为了获取对象的key值对应的get方法,getter是在watcher.get中执行的:

深度监听

traverse

traverse方法很好理解,主要做的事情是:

  1. 通过读取,就可以让这个属性收集到 watch-watcher;
  2. 深层级的对象,其中的每个属性也都是响应式的,每个属性都有自己的依赖收集器,通过不断深入的读取每个属性,这样每个属性就都可以收集到 watch-watcher 了;这样不管对象内多深的属性变化,都会通知到 watch-watcher,于是这样就完成了深度监听;
update

监听的数据变化的时候,就能通知 watch-watcher 更新,所谓通知更新,就是手动调用 watch.update

vue系列课程

最近会陆续的对vue进行源码分析,一系列课程如下:

state系列

  1. props原理
  2. methods原理
  3. data原理
  4. computed原理
  5. watch原理

lifecycle系列

  1. 生命周期原理

event系列

  1. event原理

render系列

  1. render原理

inject/provide系列

  1. inject/provide原理

plugins系列

  1. vue-router原理
  2. Vue Router 那些事
  3. Vuex你应该知道的事
  4. vue源码解析之vuex原理
  5. Vue自定义插件

组件系列

  1. keep-alive原理
  2. Vue 单文件组件
  3. Vue组件间通信
  4. vue虚拟列表

指令系列

  1. Vue自定义指令
  2. vue源码解析之Directives原理

算法系列

  1. diff原理
  2. Vue编译器源码分析

异步任务

  1. vue源码解析之NextTick原理

其他

  1. vue单元测试
  2. Vue轮播组件
  3. 你不知道的vue那些事
  4. vue技巧大解密
  5. 面试-高级前端之VUE数据响应式实现