// 遍历对象，给每个属性装上监听器function observe(target) {    if (target && typeof target === 'object') {        Object.keys(target).forEach(key => {            defineReactive(target, key, target[key])        })    }}// 核心：Object.defineProperty 拦截 get/setfunction defineReactive(target, key, val) {    observe(val) // 递归处理嵌套对象    const dep = new Dep() // 每个属性一个依赖管理器    Object.defineProperty(target, key, {        enumerable: true,        configurable: false,        get() {            // 读取时，收集依赖            if (Dep.target) {                dep.addSub(Dep.target)            }            return val        },        set(value) {            if (val === value) return            val = value            // 设置时，通知所有依赖更新            dep.notify()        }    })}

实现依赖管理器

class Dep {    constructor() {        this.subs = []    }    addSub(watcher) {        this.subs.push(watcher)    }    notify() {        this.subs.forEach(watcher => watcher.update())    }}Dep.target = null

Watcher 的实现也很简单：

class Watcher {    constructor(vm, key, callback) {        this.vm = vm        this.key = key        this.callback = callback        // 触发 get，收集依赖        Dep.target = this        vm[key] // 读取属性        Dep.target = null    }    update() {        this.callback(this.vm[this.key])    }}

这就是 Vue2 响应式的基本原理。Vue3 换成了 Proxy，但核心思想没变。

PART 03

来个实战：股票行情系统

光看原理不过瘾，来个接地气的例子——股票行情系统。

场景：多个看板组件订阅股票价格，价格变动时自动更新。

先定义股票服务

// 股票数据源class StockService {    constructor() {        this.stocks = {            'AAPL': { price: 178.5, name: '苹果' },            'GOOGL': { price: 142.3, name: '谷歌' },            'TSLA': { price: 245.8, name: '特斯拉' }        }        this.subscribers = new Map() // 订阅者列表    }    // 订阅股票变化    subscribe(stockCode, callback) {        if (!this.subscribers.has(stockCode)) {            this.subscribers.set(stockCode, [])        }        this.subscribers.get(stockCode).push(callback)    }    // 取消订阅    unsubscribe(stockCode, callback) {        const subs = this.subscribers.get(stockCode)        if (subs) {            const index = subs.indexOf(callback)            if (index > -1) subs.splice(index, 1)        }    }    // 更新价格，通知所有订阅者    updatePrice(stockCode, newPrice) {        if (this.stocks[stockCode]) {            const oldPrice = this.stocks[stockCode].price            this.stocks[stockCode].price = newPrice            // 通知订阅者            const subs = this.subscribers.get(stockCode)            if (subs) {                subs.forEach(callback => {                    callback({                        code: stockCode,                        name: this.stocks[stockCode].name,                        oldPrice,                        newPrice,                        change: ((newPrice - oldPrice) / oldPrice * 100).toFixed(2)                    })                })            }        }    }}

看板组件示例

// 大盘看板const mainBoard = (data) => {    console.log(`📊 大盘看板：${data.name} 最新价 $${data.newPrice} (${data.change}%)`)}// 涨跌幅看板const changeBoard = (data) => {    const emoji = data.change >= 0 ? '📈' : '📉'    console.log(`${emoji} 涨跌幅：${data.name}${data.change}%`)}// 成交提醒看板const alertBoard = (data) => {    if (Math.abs(data.change) > 5) {        console.log(`🚨 大幅波动提醒：${data.name} 涨跌 ${data.change}%！`)    }}

使用起来

const stockService = new StockService()// 订阅 AAPLstockService.subscribe('AAPL', mainBoard)stockService.subscribe('AAPL', changeBoard)stockService.subscribe('AAPL', alertBoard)// 价格变动，自动通知所有看板stockService.updatePrice('AAPL', 182.3)// 输出：// 📊 大盘看板：苹果 最新价 $182.3 (2.13%)// 📈 涨跌幅：苹果 2.13%

一个股票变动，所有订阅者同时收到通知。简洁又解耦。

PART 04

EventEmitter 也要会写

面试常考的还有 EventEmitter。

它的特点是支持任意事件名，比观察者模式更灵活。

class EventEmitter {    constructor() {        this.handlers = {} // 事件名 -> 回调队列    }    // 订阅事件    on(eventName, callback) {        if (!this.handlers[eventName]) {            this.handlers[eventName] = []        }        this.handlers[eventName].push(callback)    }    // 发布事件    emit(eventName, ...args) {        const callbacks = this.handlers[eventName]        if (callbacks) {            callbacks.slice().forEach(cb => cb(...args))        }    }    // 取消订阅    off(eventName, callback) {        const callbacks = this.handlers[eventName]        if (callbacks) {            const index = callbacks.indexOf(callback)            if (index > -1) callbacks.splice(index, 1)        }    }    // 只触发一次    once(eventName, callback) {        const wrapper = (...args) => {            callback(...args)            this.off(eventName, wrapper)        }        this.on(eventName, wrapper)    }}

用法示例

const emitter = new EventEmitter()// 监听用户登录emitter.on('login', (user) => {    console.log(`${user.name} 登录了`)})// 监听消息emitter.on('message', (msg) => {    console.log(`收到消息：${msg}`)})// 触发emitter.emit('login', { name: '张三' })emitter.emit('message', '你好！')

Vue 的 EventBus 就是这个原理。虽然 Vue3 不推荐用了，但手写实现必须掌握。

PART 05

观察者模式 vs 发布-订阅模式

面试常问：这两个模式有什么区别？

说白了就一点：有没有第三者。

观察者模式：发布者直接通知订阅者。

发布者 → 直接 → 订阅者

发布-订阅模式：通过事件总线，发布者和订阅者不直接通信。

发布者 → 事件总线 → 订阅者

代码对比

观察者模式: 发布者和订阅者有直接联系：

class Publisher {    constructor() {        this.observers = []    }    add(observer) {        this.observers.push(observer) // 直接持有引用    }    notify(data) {        this.observers.forEach(o => o.update(data)) // 直接调用    }}

发布-订阅模式 :  通过中间层解耦：

class PubSub {    constructor() {        this.subscribers = {}    }    subscribe(topic, callback) {        // 不需要知道谁在订阅        if (!this.subscribers[topic]) {            this.subscribers[topic] = []        }        this.subscribers[topic].push(callback)    }    publish(topic, data) {        // 发布者也不需要知道谁订阅了        const callbacks = this.subscribers[topic]        if (callbacks) {            callbacks.forEach(cb => cb(data))        }    }}