本文共 994 字，大约阅读时间需要 3 分钟。

2. Observer

• 功能
  • 负责把 data 选项中的属性转换成响应式数据
  • data 中的某个属性也是对象，把该属性转换成响应式数据
  • 数据变化发送通知
• 代码

class Observer {     constructor(data) {       this.walk(data)  }  // 遍历 data 对象的所有属性  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) {       let that = this    // 负责收集依赖，并发送通知    let dep = new Dep()    // 如果 val 是对象，把 val 内部的属性转换成响应式数据    this.walk(val)    Object.defineProperty(obj, key, {         enumerable: true, // 可枚举      configurable: true, // 可配置      get() {           // 收集依赖        Dep.target && dep.addSub(Dep.target)        return val      },      set(newValue) {           // 数据没有发生变化 return 停止执行        if (newValue === val) {             return        }        val = newValue        // 使新设置的值也拥有 get 和 set 方法        that.walk(newValue)        // 发送通知        dep.notify()      }    })  }}