vue watcher的种类

147 阅读2分钟

对于data props 观测数据变化 dep是连接数据与观察者的桥梁 data props 听过observe defineReactive等操作来把data props对象的每一个属性变成响应式的, 同时内部会持有一个dep的实例, 当我们访问这些数据的时候会触发dep的depend 来收集依赖(就是当前正在被计算的watcher也就是Dep.target就会作为订阅者来订阅这些数据的变化) 当我们修改这些数据的时候,会触发setter去通知也就是调用dep的notify方法去通知我们这些订阅者去做update逻辑

对于computed属性 内部会创建computed watcher 每个computed watcher会持有一个Dep的实例 但我们访问这个computed属性的时候会调用我们computed watcher的evalute方法去计算 就会触发他内部持有的dep的depend去收集依赖 (就是当前正在被计算的watcher也就是Dep.target就会作为订阅者来订阅这些数据的变化) 当计算属性依赖的值发生变化的时候会触发computed watcher重新计算会调用dep的notify 去通知那些订阅了computed属性的订阅者来触发他们的更新

对于watch属性呢 会创建一个user watcher用户自定义的watcher 可以去观测data props computed的变化 当数据发生变化我们创建的watcher去观测了某些数据或者计算属性 当他们发生变化就会通知Dep的去遍历所有的watcher去触发update方法 如果设置了sync为true机会立即调run方法 如果没有设置就会调用queueWatcher在nextTick的时候去调用run方法 run里面会求值 如果求值有变化就会调用用户定义的回调函数

对于数据的渲染还有重新渲染 每个组件都会执行$mount方法 内部会创建一个唯一的render watcher 这个watcher会在执行render的时候也就是渲染成vnode的过程中 会访问在data中定义的数据或者计算属性等 render watcher就相当于订阅者订阅了他所依赖的数据和计算属性的变化 变化的时候就会触发数据set去通知或者computed watcher的notify就会触发render watcher的update 去执行他们的run方法然后会执行updateComponent方法