Vue响应式原理

2021-03-01  本文已影响0人  翔子丶
数据驱动
数据响应式核心原理
image-20210228175816518.png

如果一个对象中有多个属性需要设置为响应式时

// 遍历 data 对象的所有属性
Object.keys(data).forEach(key => {
    // 把 data 中的属性,转换成 vm 的 setter/setter
    Object.defineProperty(vm, key, {
        enumerable: true,
        configurable: true,
        get () {
            console.log('get: ', key, data[key])
            return data[key]
        },
        set (newValue) {
            console.log('set: ', key, newValue)
            if (newValue === data[key]) {
                return
            }
            data[key] = newValue
            // 数据更改,更新 DOM 的值
            document.querySelector('#app').textContent = data[key]
        }
    })
})
image-20210228181053154.png image-20210301082218883.png
// 目标(发布者)
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')
    }
}

// 测试
let dep = new Dep()
let watcher = new Watcher()
dep.addSub(watcher)
dep.notify()
上一篇 下一篇

猜你喜欢

热点阅读