本文最后更新于 106 天前，如有失效请评论区留言。

reactivity响应式

之前简单实现了dep的监听和更新，具体的在vue2和vue3中分别是使用了 Object.defineProperty Proxy作为监听，而不是只监听.value属性

首先是调用reactive方法传入一个对象，开始监听这个对象，当这个对象发生改变时，调用watchEffect传入的方法，这就是要达到的结果

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log(state.msg);
})

再接着围绕这个结果开始构建出 reactive 函数和 watchEffect

let activeEffect
function watchEffect (effect) {
  activeEffect = effect
  effect()
  activeEffect = null
}

watchEffect还是和上一篇一样，定义一个变量保存，以便收集依赖时添加进set

再把之前的收集依赖和派发更新一同拷贝过来

class Dep {
  subscribers = new Set()
  depend () {
    if (activeEffect) {
      this.subscribers.add(activeEffect)
    }
  }
  notify (effect) {
    this.subscribers.forEach(effect => {
      effect()
    })
  }
}

然后就是reactive的实现方法，在vue2中，因为兼容性，采用了Object.defineProperty,分别监听每一个对象的键值

function reactive (raw) {
  Object.keys(raw).forEach((key) => {
    const dep = new Dep()
    let value = raw[key]

    Object.defineProperty(raw, key, {
      get () {
        dep.depend()
        return value
      },
      set (newValue) {
        value = newValue
        dep.notify()
      }
    })
  })
  return raw
}

vue3中，则直接使用es6的proxy监听整个对象，更加提升效率，不用每个都去遍历，也可以监听到新增和删除的属性，还有像array这种对象不用再hook里面的七个常用方法就可以直接监听到

function reactive (raw) {
  return new Proxy(raw, reactiveHandles)
}

接着就去详细实现reactiveHandles里面的方法

const targetMap = new WeakMap()

function getDep (target, key) {
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }
  let dep = depsMap.get(key)
  if (!dep) {
    dep = new Dep()
    depsMap.set(key, dep)
  }
  return dep
}
const reactiveHandles = {
  get (target, key, receiver) {
    const dep = getDep(target, key)
    dep.depend()
    // return target[key]
    return Reflect.get(target, key, receiver)
  },
  set (target, key, value, receiver) {
    const dep = getDep(target, key)
    const result = Reflect.set(target, key, value, receiver)
    dep.notify()
    return result
  }
}

首先通过get、和set方法监听取值和赋值操作，在get里添加依赖，添加收集的时候用key作为键dep对象作为值，这里添加了一个WeakMap弱引用到这个对象，当这个对象没有依赖时，便于垃圾回收清理。

在set中拿到对应key的dep，触发watchEffect里面的方法，达到响应式

set和get中调用的Reflect，可以去看这篇文章，详细的介绍了Reflect.get(target, key, receiver) 和 target[key] 的区别

这里每一个key都对应一个新的dep对象，dep里的subscribers可能会有收集到的effect函数，因为如果watchEffect传入的函数没有访问这个key，也就不会触发get收集函数

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
</body>

</html>
<script>
  let activeEffect

  class Dep {
    subscribers = new Set()
    depend () {
      if (activeEffect) {
        this.subscribers.add(activeEffect)
      }
    }
    notify (effect) {
      this.subscribers.forEach(effect => {
        effect()
      })
    }
  }
  function watchEffect (effect) {
    activeEffect = effect
    effect()
    activeEffect = null
  }

  const targetMap = new WeakMap()

  function getDep (target, key) {
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      depsMap = new Map()
      targetMap.set(target, depsMap)
    }
    let dep = depsMap.get(key)
    if (!dep) {
      dep = new Dep()
      depsMap.set(key, dep)
    }
    return dep
  }
  const reactiveHandles = {
    get (target, key, receiver) {
      const dep = getDep(target, key)
      dep.depend()
      // return target[key]
      return Reflect.get(target, key, receiver)
    },
    set (target, key, value, receiver) {
      const dep = getDep(target, key)
      const result = Reflect.set(target, key, value, receiver)
      dep.notify()
      return result
    }
  }

  // vue2 写法
  /* function reactive (raw) {
    Object.keys(raw).forEach((key) => {
      const dep = new Dep()
      let value = raw[key]

      Object.defineProperty(raw, key, {
        get () {
          dep.depend()
          return value
        },
        set (newValue) {
          value = newValue
          dep.notify()
        }
      })
    })
    return raw
  } */
  function reactive (raw) {
    return new Proxy(raw, reactiveHandles)
  }

  const state = reactive({
    count: 0
  })

  watchEffect(() => {
    console.log(state.msg);
  })

  state.count++
</script>

reactivity响应式

发送评论 编辑评论

推荐文章

发送评论编辑评论