发布者订阅者模式

vue的响应式系统是由发布者订阅者模式来收集依赖和派发更新的，所以首先实现Dep的类

class Dep {
  constructor() {
    //订阅
    this.subscribe = new Set()
  }
  //添加订阅
  // addEffect(effect) {
  //   this.subscribe.add(effect)
  // }
  //添加订阅
  depend() {
    if (activeEffect) {
      this.subscribe.add(activeEffect)
    }
  }
  //通知更新
  notify() {
    this.subscribe.forEach(effect => {
      effect()
    })
  }
}

测试数据

const info = reactive({ counter: 10, name: "jack" })

const foo = reactive({ height: 18 })

watchEffect(function () {
  console.log("effect1:", info.counter * 2)
})

watchEffect(function () {
  console.log("effect2", info.counter * info.counter)
})

watchEffect(function () {
  console.log("effect3", foo.height)
})

info.counter++
foo.height = 16

实现watchEffect函数

const deep = new Dep()
let activeEffect = null
function watchEffect(effect) {
  activeEffect = effect
  effect()
  //deep.depend()
  activeEffect = null
}

实现defineProperty

//数据响应式函数
//将原始数据传入
function reactive(raw) {
  Object.keys(raw).forEach(key => {

    const dep = getDep(raw, key)
    let value = raw[key]

    //利用defineProperty对函数的value值进行处理
    Object.defineProperty(raw, key, {
      //访问数据
      get() {
        //访问数据时进行收集依赖
        dep.depend()
        return value
      },
      //更改数据时进行通知
      set(newValue) {
        value = newValue
        dep.notify()
      }
    })
  })
  return raw
}

这里需要对dep进行一个处理，一个dep应该收集一个属性，每一个属性对应不同的dep，当数据进行更新时，派发相应的dep对象进而更新相对应的数据

// Map({key: value}): key是一个字符串
// WeakMap({key(对象): value}): key是一个对象, 弱引用
const targetMap = new WeakMap();
function getDep(target, key) {
  // 1.根据对象(target)取出对应的Map对象
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  // 2.取出具体的dep对象
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Dep();
    depsMap.set(key, dep);
  }
  return dep;
}

测试结果

defineProperty

Proxy实现

function reactive(raw) {
  return new Proxy(raw, {
    //target==传入的raw
    get(target, key) {
      //dep不能在get外面定义,因为key在get外面没有,所以需要定义两次
      const dep = getDep(target, key)
      dep.depend()
      return target[key]
    },
    set(target, key, newValue) {
      const dep = getDep(target, key)
      target[key] = newValue
      dep.notify()
    }
  })
}

其他的东西不变，用Proxy代替defineProperty，测试结果是一致的

Proxy

使用Proxy的优势

• Object.definedProperty 是劫持对象的属性时，如果新增元素，那么Vue2需要再次 调用definedProperty，而 Proxy 劫持的是整个对象，不需要做特殊处理
• 修改对象的不同
  • 使用 defineProperty 时，我们修改原来的 obj 对象就可以触发拦截
  • 而使用 proxy，就必须修改代理对象，即 Proxy 的实例才可以触发拦截
• Proxy 能观察的类型比 defineProperty 更丰富
  • has：in操作符的捕获器
  • deleteProperty：delete 操作符的捕捉器

缺点

• Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9