模拟Vue响应式原理
设计模式
发布订阅模式
我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信 号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执 行。这就叫做"发布/订阅模式"（publish-subscribe pattern）
- 订阅者
- 发布者
- 信号中心
class EventBus {
constructor() {
this.events = {}
}
$on(eventType, handler) {
this.events[eventType] = this.events[eventType] || []
this.events[eventType].push(handler)
}
$emit(eventType, params) {
if (this.events[eventType]) {
this.events[eventType].forEach(item => item(params))
}
}
}
let ebus=new EventBus()
ebus.$on('click',a=>{
console.log('handler1',a)
})
ebus.$on('click',()=>{
console.log('handler2')
})
ebus.$emit('click',1)
观察者模式
观察者模式没有订阅中心
观察者（订阅者）–Watcher
- update()：当事件发生时，具体要做的事情
目标（发布者）–Dep
- subs数组：存储所有的观察者
- addSub()：添加观察者
- notify()：当事件发生，调用所有观察者的update()方法
// 发布者-目标
class Dep {
constructor() {
// 记录所有的订阅者
this.subs = []
}
// 添加订阅者
addSub(sub) {
if (sub && sub.update) {
this.subs.push(sub)
}
}
// 发布通知
notify() {
this.subs.forEach(sub => {
sub.update()
})
}
}
// 订阅者-观察者
class Watcher {
update() {
console.log('update');
}
}
// 发布者
const dep = new Dep()
// 订阅者
const watcher = new Watcher()
// 添加订阅者
dep.addSub(watcher)
// 发布通知
dep.notify()
总结
- 观察者模式是由具体目标调度，比如当事件触发，Dep就会去调用观察者的方法，所以观察者与订阅者之间是存在依赖关系的
- 发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在
模拟实现Vue响应式原理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cvQkqFcU-1657956362388)(模拟Vue响应式原理.assets/image-20220621180906533.png)]
Vue
功能
- 接收初始化的参数（选项）
- 把data中的属性注入到Vue实例，转换成getter/setter
- 调用observer监听data中所有属性的变化
- 调用compiler解析指令、插值表达式
结构
属性
- $options
- $el
- $data
方法
- static _proxyData()
模拟实现
class Vue {
constructor(options) {
// 1、通过属性保存选项的数据
this.$options = options || {};
this.$data = options.data || {};
this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;
// 2、把data中的成员转换成getter和setter，注入到Vue实例中
this._proxyData(this.$data);
// 3、调用observer对象，监听数据的变化
new Observer(this.$data);
// 4、调用compiler对象，解析指令和插值表达式
new Compiler(this)
}
// 数据代理
_proxyData(data) {
// 遍历data中的所有属性
Object.keys(data).forEach(key => {
// 把data的属性注入到Vue实例中
Object.defineProperty(this, key, {
enumerable: true,
configurable: true,
get() {
return data[key]
},
set(newVal) {
if (newVal === data[key]) {
return
}
data[key] = newVal
}
})
});
}
}
Observer
功能
- 负责把data选项中的属性转换成响应式数据
- data中的某个属性也是对象，把该属性转换成响应式数据
- 数据变化发送通知
结构
方法
-
walk(data)
遍历data中所有的属性，调用defineReactive
-
defineReactive(data,key,value)
定义响应式数据
模拟实现
class Observer {
constructor(data) {
this.walk(data)
}
// 遍历data中所有的属性，调用defineReactive
walk(data) {
// 1、判断data是否是对象
if (!data || typeof data !== 'object') {
return
}
// 2、遍历data对象的所有属性
Object.keys(data).forEach(key => {
this.defineReactive(data, key, data[key])
})
}
// 定义响应式数据
defineReactive(obj, key, val) {
const that = this
// 负责收集依赖，并发送通知
const dep = new Dep()
// 如果val是对象，把val内部的属性转换成响应式数据
this.walk(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
// 收集依赖 Dep.target就是观察者对象，将会在watcher中添加
Dep.target && dep.addSub(Dep.target)
// 此处不return obj[key]是因为会再次触发当前key的getter造成死循环
return val
},
set(newVal) {
if (newVal === val) {
return
}
val = newVal
that.walk(newVal)
//发送通知
dep.notify()
}
})
}
}
Compiler
功能
- 负责编译模板，解析指令/插值表达式
- 负责页面的首次渲染
- 当数据变化后重新渲染视图
结构
属性
-
el
Vue构造函数中传入的el
-
vm
Vue实例对象，保存供Compiler中的方法使用
方法
-
compile(el)
遍历DOM对象的所有节点，判断节点类型。文本节点->解析插值表达式，元素节点->解析指令
-
compileElement(node)
元素节点-解析指令
-
compileText(node)
文本节点-解析插值表达式
-
isDirective(attrName)
判断元素属性是否为指令，供compileElement调用
-
isTextNode(node)
判断当前节点是否为文本节点
-
isElementNode(node)
判断当前节点是否为元素节点
模拟实现
class Compiler {
constructor(vm) {
this.el = vm.$el
this.vm = vm
// 编译模板
this.compiler(this.el)
}
// 编译模板，处理文本节点和元素节点
compiler(el) {
const childNodes = el.childNodes
Array.from(childNodes).forEach(node => {
// 处理文本节点
if (this.isTextNode(node)) {
this.compilerText(node)
} else if (this.isElementNode(node)) {
// 处理元素节点
this.compilerElement(node)
}
// 判断node是否有子节点，递归调用compiler处理子节点
if (node.childNodes && node.childNodes.length) {
this.compiler(node)
}
})
}
// 编译元素节点，处理指令
compilerElement(node) {
// 遍历所有的属性节点
Array.from(node.attributes).forEach(attr => {
// 判断是否是指令
let attrName = attr.name
if (this.isDirective(attrName)) {
// v-text->text
attrName = attrName.substr(2)
let key = attr.value
this.update(node, key, attrName)
}
})
}
// 调用对应指令的方法
update(node, key, attrName) {
const updateFn = this[attrName + 'Updater']
updateFn && updateFn.call(this, node, this.vm[key], key)
}
// 处理 v-text 指令
textUpdater(node, value, key) {
node.textContent = value
new Watcher(this.vm, key, (newValue) => {
node.textContent = newValue
})
}
// v-model
modelUpdater(node, value, key) {
node.value = value
// 实现双向绑定
node.addEventListener('input', () => {
this.vm[key] = node.value
})
new Watcher(this.vm, key, (newValue) => {
node.value = newValue
})
}
// v-show
showUpdater(node, value, key) {
!value && node.setAttribute('style', 'display:none;')
}
// 编译文本节点，处理插值表达式
compilerText(node) {
// console.dir(node);
// {{ msg }}
const reg = /\{\{(.+?)\}\}/
const value = node.textContent
if (reg.test(value)) {
let key = RegExp.$1.trim()
node.textContent = value.replace(reg, this.vm[key])
// 创建watcher对象，当数据改变更新视图
new Watcher(this.vm, key, (newValue) => {
node.textContent = newValue
})
}
}
// 判断元素属性是否是指令 根据是否以'v-'开头
isDirective(attrName) {
return attrName.startsWith('v-')
}
// 判断节点是否是文本节点
isTextNode(node) {
return node.nodeType === 3
}
// 判断节点是否是元素节点
isElementNode(node) {
return node.nodeType === 1
}
}
Dep(Dependency)
功能
- 收集依赖，添加观察者（watcher)
- 通知所有观察者
结构
属性
-
subs
用来存储所有的watcher
方法
-
addSub(sub)
添加watcher
-
notify()
发送通知
模拟实现
class Dep {
constructor() {
// 初始化存储watcher的数组
this.subs = []
}
// 添加watcher
addSub(sub) {
// 判断是否为观察者
if (sub && sub.update) {
this.subs.push(sub)
}
}
// 发送通知
notify() {
this.subs.forEach(sub => {
sub.update()
})
}
}
Watcher
功能
- 当数据变化触发依赖，dep通知所有的Watcher实例更新视图
- 自身实例化的时候，往dep对象中添加自己
结构
属性
-
vm
-
key
data的key
-
cb
一个回调函数，指明如何更新视图
-
oldValue
更新前的值
方法
- update()
模拟实现
class Watcher {
constructor(vm, key, cb) {
this.vm = vm
// data中的属性名称
this.key = key
// 回调函数负责更新视图
this.cb = cb
// 把watcher对象记录到Dep类的静态属性target
Dep.target = this
// 触发get方法，在get方法中会调用addSub
// 保存旧值
this.oldValue = vm[key]
Dep.target = null
}
// 当数据发生变化时，更新视图
update() {
let newValue = this.vm[this.key]
// 数据未发生变化，不更新视图
if (newValue === this.oldValue) {
return
}
// 更新视图
this.cb(newValue)
}
}
// 回调函数负责更新视图
this.cb = cb
// 把watcher对象记录到Dep类的静态属性target
Dep.target = this
// 触发get方法，在get方法中会调用addSub
// 保存旧值
this.oldValue = vm[key]
Dep.target = null
}
// 当数据发生变化时，更新视图
update() {
let newValue = this.vm[this.key]
// 数据未发生变化，不更新视图
if (newValue === this.oldValue) {
return
}
// 更新视图
this.cb(newValue)
}
}
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
