模拟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)
}

}