class Dep {
constructor () {
this.subs = []
}
addSub () {
this.subs.push(Dep.target)
}
notify () {
for (let i = 1; i < this.subs.length; i++) {
this.subs[i].cb()
}
}
}
Dep.target = null
class Watch {
constructor (exp, cb) {
this.exp = exp
this.cb = cb
Dep.target = this
data[exp]
}
}
function defineReactive (data, key, val) {
observer()
let dep = new Dep()
Object.defineProperty(data, key, {
configurable: true,
enumerable: true,
get () {
dep.addSub()
return val
},
set (newVal) {
if (newVal === val) {
return
} else {
data[key] = newVal
observer(newVal)
dep.notify()
}
}
})
}
class Observer {
constructor(data) {
let keys = Object.keys(data)
for (let i = 0; i < keys.length; i++) {
defineReactive(data, keys[i], data[keys[i]])
}
}
}
function observer (data) {
if (Object.prototype.toString.call(data) === '[object Object]') {
new Observer(data)
} else {
return data
}
}
let data = {
a: 1,
b: {
c: 3
}
}
observer(data)
new Watch('a', () => {
alert(1)
})
new Watch('a', () => {
alert(2)
})
new Watch('b.c', () => {
alert(3)
})
data.a = 33
console.log(data,'data')
console