当我精通vue2的源码dep和watcher的关系时

watcher与dep的关系程序运行分析

初始化执行 _init => initState() + vm.$mounted

initState => initData + initWatch + initComputed

1. initData 中执行observer(),进行响应式处理

• 创建Observer类 => Observer类中对data进行遍历defineReactive,修改get和set函数
• defineReactive函数中创建私有变量dep(new Dep),每一个get和set对应一个dep
• get中判断Dep类的静态属性target有值，当前watcher的deps添加当前dep，当前dep的subs添加当前watcher；并返回value；
• set中赋值后执行dep.notify函数,执行dep的subs中的watcher循环update(执行queueWatcher=>flushWatcher=>延迟队列queue中watcher.run=>执行再次更新)；

2. initWatch

• 截取watch的key属性和监听需要处理的handler函数
• 对每一个key创建一个watcher,watcher函数中如果有user则获取到值后再次执行handler函数，实现监听功能

//            vm key handler
new Watcher(vm,exprOrfn,handler,{
   
   ...options,user:true}

3. initComputed

• 获取到所有computed属性的key,handler
• 创建vm._computedWatcher,遍历赋值key：new Watcher

for(let key in computed){
   
   
    // getters 为computed的handler计算函数
    // lazy：true在watcher中区分时computed的属性，执行函数为计算函数
    // watcher中用dirty取初始化lazy，默认为true，表示第一次或者需要再次执行handler计算函数,为false读取缓存的值，即watcher的value
    _computedWatcher[key] = 
    new Watcher(vm