Vue (响应式原理-模拟-4-Dep)

Dep

功能

收集依赖，添加观察者(watcher)
通知所有观察者

class Dep {constructor() {// 存储所有的观察者this.subs = []}// 添加观察者addSub (sub) {if (sub && sub.update) {this.subs.push(sub)}}// 通知所有观察者notify () {this.subs.forEach(sub => {sub.update()})}
}
// 以下代码在 Observer 类中 defineReactive 方法中添加
// 创建 dep 对象收集依赖
const dep = new Dep()
// getter 中
// get 的过程中收集依赖
Dep.target && dep.addSub(Dep.target)
// setter 中
// 当数据变化之后，发送通知
dep.notify()

Vue (响应式原理-模拟-4-Dep)相关推荐

Vue (响应式原理-模拟-2-Observer)
Observer 功能负责把 data 选项中的属性转换成响应式数据 data 中的某个属性也是对象,把该属性转换成响应式数据数据变化发送通知添加 Dep 和 Watcher 的依赖关系数据变 ...
Vue (响应式原理-模拟-0)
Vue 把data中的成员注入到Vue实例,并且把data中的成员转化为getter/setter Observer 能够对数据对象的所有属性进行监听,如有变动可以拿到最新值并通知Dep Vue 功能 ...
Vue (响应式原理-模拟-5-Watcher)
Watcher 功能当数据变化触发依赖, dep 通知所有的 Watcher 实例更新视图自身实例化的时候往 dep 对象中添加自己 class Watcher {constructor(vm, ...
Vue (响应式原理-模拟-1-vue)
Vue 功能负责接收初始化的参数(选项) 负责把 data 中的属性注入到 Vue 实例,转换成 getter/setter 负责调用 observer 监听 data 中所有属性的变化负责调用 ...
Vue (响应式原理-模拟-3-Compiler)
Compiler 功能负责编译模板,解析指令/插值表达式负责页面的首次渲染当数据变化后重新渲染视图 // 负责解析指令/插值表达式 class Compiler {constructor(vm) ...
模拟Vue响应式原理
模拟Vue响应式原理设计模式发布订阅模式我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向 ...
vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
Vue学习 — Vue响应式原理
一. Object.defineProperty 在学习vue响应式原理之前,必须搞懂 Object.defineProperty. Object.defineProperty(obj, prop, ...
详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

Vue (响应式原理-模拟-4-Dep)

Vue (响应式原理-模拟-4-Dep)相关推荐

最新文章

热门文章