手写简易Vue响应式：从原理到实现，带你吃透双向绑定的核心

// 添加依赖
addSub(sub) {
if (sub && typeof sub.update === 'function') {
this.subscribers.add(sub)
}
}

// 通知所有依赖更新
notify() {
this.subscribers.forEach(sub => sub.update())
}
}

// 2. 观察者：封装渲染函数，触发更新时执行
class Watcher {
constructor(vm, key, cb) {
this.vm = vm // 当前Vue实例
this.key = key // 要观察的data属性名
this.cb = cb // 回调函数（更新视图）

// 触发一次get，将当前Watcher实例加入依赖收集器
Dep.target = this
this.vm[this.key] // 读取属性，触发get
Dep.target = null // 收集完成后清空
}

// 执行回调更新视图
update() {
this.cb.call(this.vm, this.vm[this.key])
}
}

// 3. 数据劫持：给data的所有属性添加get/set
function observe(data) {
if (typeof data !== 'object' || data === null) return

// 遍历对象属性，劫持get/set
Object.keys(data).forEach(key => {
defineReactive(data, key, data[key])
})
}

function defineReactive(obj, key, val) {
// 递归处理嵌套对象
observe(val)

const dep = new Dep() // 每个属性对应一个Dep实例

Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
// 收集依赖：如果当前有Watcher（Dep.target），就加入收集器
if (Dep.target) {
dep.addSub(Dep.target)
}
return val
},
set(newVal) {
if (newVal === val) return
val = newVal
// 如果新值是对象，也要劫持它的属性
observe(newVal)
// 通知所有依赖更新
dep.notify()
}
})
}

// 4. 简易Vue类：整合以上所有功能
class MiniVue {
constructor(options) {
this.$options = options
this.$data = options.data || {}

// 1. 将data挂载到实例上，方便this.xxx访问
this.proxyData(this.$data)
// 2. 对data进行响应式处理
observe(this.$data)
// 3. 初始渲染视图
this.mount()
}

// 代理data到Vue实例
proxyData(data) {
Object.keys(data).forEach(key => {
Object.defineProperty(this, key, {
get() {
return data[key]
},
set(newVal) {
data[key] = newVal
}
})
})
}

// 模拟模板渲染：这里简化为直接更新DOM
mount() {
// 初始化渲染
this.updateView()
// 给每个data属性添加Watcher，监听变化
Object.keys(this.$data).forEach(key => {
new Watcher(this, key, () => {
this.updateView()
})
})
}

// 更新视图的具体逻辑
updateView() {
console.log('视图更新了！当前数据：', this.$data)
// 真实场景中这里会重新渲染模板，我们简化为打印日志+更新DOM
document.getElementById('app').innerText = `当前计数：${this.count}`
}
}

// 5. 测试代码
const vm = new MiniVue({
data: {
count: 0,
message: 'Hello Vue'
}
})

// 测试修改数据，看视图是否更新
setTimeout(() => {
vm.count = 1 // 会触发视图更新
console.log('修改count后：', vm.count)
}, 1000)