Vue (响应式原理-模拟-5-Watcher)

Watcher
	功能当数据变化触发依赖， dep 通知所有的 Watcher 实例更新视图自身实例化的时候往 dep 对象中添加自己

class Watcher {constructor(vm, key, cb) {this.vm = vm// data 中的属性名称this.key = key// 当数据变化的时候，调用 cb 更新视图this.cb = cb// 在 Dep 的静态属性上记录当前 watcher 对象，当访问数据的时候把 watcher 添加到dep 的 subs 中Dep.target = this// 触发一次 getter，让 dep 为当前 key 记录 watcherthis.oldValue = vm[key]// 清空 targetDep.target = null // 防止重复添加}update () {const newValue = this.vm[this.key]if (this.oldValue === newValue) {return}this.cb(newValue)}
}

Vue (响应式原理-模拟-5-Watcher)相关推荐

Vue (响应式原理-模拟-2-Observer)
Observer 功能负责把 data 选项中的属性转换成响应式数据 data 中的某个属性也是对象,把该属性转换成响应式数据数据变化发送通知添加 Dep 和 Watcher 的依赖关系数据变 ...
Vue (响应式原理-模拟-4-Dep)
Dep 功能收集依赖,添加观察者(watcher) 通知所有观察者 class Dep {constructor() {// 存储所有的观察者this.subs = []}// 添加观察者addSu ...
Vue (响应式原理-模拟-3-Compiler)
Compiler 功能负责编译模板,解析指令/插值表达式负责页面的首次渲染当数据变化后重新渲染视图 // 负责解析指令/插值表达式 class Compiler {constructor(vm) ...
Vue (响应式原理-模拟-1-vue)
Vue 功能负责接收初始化的参数(选项) 负责把 data 中的属性注入到 Vue 实例,转换成 getter/setter 负责调用 observer 监听 data 中所有属性的变化负责调用 ...
Vue (响应式原理-模拟-0)
Vue 把data中的成员注入到Vue实例,并且把data中的成员转化为getter/setter Observer 能够对数据对象的所有属性进行监听,如有变动可以拿到最新值并通知Dep Vue 功能 ...
模拟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 (响应式原理-模拟-5-Watcher)

Vue (响应式原理-模拟-5-Watcher)相关推荐

最新文章

热门文章