vue3原理解析

╰+哭是因爲堅強的太久メ 2022-10-30 12:28 174阅读 0赞

大家都知道vue2的时候是使用了**Object.defineProperties**方法通过set和get来进行数据的劫持，从而达到响应式数据。

在vue3中则是使用es6 proxy代理，将对象进行转化拦截，使用weakMap做弱引用缓存。当触发代理的get时就会调用track，在track里面会把对应的effect收集到targetMap（targetMap就是map数据）

set时会执行trigger，trigger函数如果有获取有对应的effect，就会触发effect。

下面通过手动一个案例来进行深度的一个学习，彻底认识reactive，effect，computed等函数具体是如何实现的

const root = document.querySelector('#app')
    const btn = document.querySelector('#btn')
    const ob = reactive({
      name: '小明',
      number: 11
    })
    
    let cNumber = computed(() => ob.number * 2)
    effect(() => {
      root.innerHTML = `<h1>${ob.name}---${ob.number}---${cAge.value}</h1>`
    })
    btn.onclick = function () {
      ob.number += 1
    }

老规矩，倒推思想，如上述代码，每点击一次按钮，就会给`obj.number + 1`然后执行`effect`，计算属性也会相应的 `ob.number * 2` 执行，最终我们要去一一实现上面的功能；

###    1.首先，我们需要一个reactive用来接收对象的函数，其内部通过`es6`的`proxy api`来实现的，短短几行就已经实现了reactive函数，[proxy如果不知道是什么，点击前往查看一下阮一锋的es6教学][proxy_es6] ###

**（Reflect** 是一个内置的对象，它提供拦截 JavaScript 操作的方法）

const handlers = {
      get (target, key, receiver) {
        return Reflect.get(target, key, receiver)
      },
      set (target, key, value, receiver) {
        return Reflect.set(target, key, value, receiver)
      }
    }
    function reactive (target) {
      observed = new Proxy(target, handlers)
      return observed
    }
    let person = {
      name: '小明',
      number: 11
    }
    
    let ob = reactive(person)

但是这样会有很多的问题，每执行一次reactive就new了一个proxy，有点浪费资源，所以我们要进行优化，把代理过的对象都缓存下来，下次直接去访问缓存对象。通过弱引用WeakMap进行缓存，跟es6 map用法差不多，只不过map是强引用，见如下代码：

const toProxy = new WeakMap() // 缓存代理过的对象
    const toRaw = new WeakMap() // 缓存被代理过的对象
    // handlers 跟上面的一样，为了篇幅这里省略
    function reactive (target) {
      let observed = toProxy.get(target)
      // 如果是缓存代理过的
      if (observed) {
        return observed
      }
      if (toRaw.has(target)) {
        return target
      }
      observed = new Proxy(target, handlers)
      toProxy.set(target, observed) // 缓存observed
      toRaw.set(observed, target) // 缓存target
      return observed
    }
    
    let person = {
      number: '小明',
      age: 11
    }
    
    let ob = reactive(person)
    ob = reactive(person) // 返回都是缓存的
    ob = reactive(ob) // 返回都是缓存的
    
    console.log(ob.number) // 10
    ob.number = 20
    console.log(ob.number) // 20

这时候缓存就做好了，但是还有一个问题，如果代理`target`对象层级比较深的话，`proxy`是做不到深层代理的，所以继续优化

// 对象类型判断
    const isObject = val => val !== null && typeof val === 'object'
    const toProxy = new WeakMap() // 缓存代理过的对象
    const toRaw = new WeakMap() // 缓存被代理过的对象
    const handlers = {
      get (target, key, receiver) {
        const res = Reflect.get(target, key, receiver)
        return isObject(res) ? reactive(res) : res//⭐️⭐️⭐️⭐️⭐️⭐️
      },
      set (target, key, value, receiver) {
        const result = Reflect.set(target, key, value, receiver)
        return result
      }
    }
    function reactive (target) {
      let observed = toProxy.get(target)
      // 如果是缓存代理过的
      if (observed) {
        return observed
      }
      if (toRaw.has(target)) {
        return target
      }
      observed = new Proxy(target, handlers)
      toProxy.set(target, observed) // 缓存observed
      toRaw.set(observed, target) // 缓存target
      return observed
    }

嗯，这下应该差不多了，isObject(res) ? reactive(res) : res。。。。。。判断是否是对象，如果是的话，继续执行reactive

### **2.实现effect** ###

effect(() => {
      root.innerHTML = `<h1>${ob.name}---${ob.number}---${cAge.value}</h1>`
    })

function effect (fn, options = {}) {
      const effect = createReactiveEffect(fn, options)
      if (!options.lazy) {
        effect()
      }
      return effect
    }
    //创建一个新的effect函数，并且给这个effect函数挂在一些属性，为后面做computed准备，这个effect函数里面调用run函数, 最后在返回出新的effect
    function createReactiveEffect(fn, options) {
      const effect = function effect(...args) {
        return run(effect, fn, args) // 里面执行fn
      }
      // 给effect挂在一些属性
      effect.lazy = options.lazy
      effect.computed = options.computed
      effect.deps = []
      return effect
    }
    
    const activeEffectStack = [] // 声明一个数组，来存储当前的effect，订阅时候需要
    function run (effect, fn, args) {
      if (activeEffectStack.indexOf(effect) === -1) {
        try {
          // 把effect push到数组中
          activeEffectStack.push(effect)
          return fn(...args)
        }
        finally {
          // 清除已经收集过得effect，为下个effect做准备
          activeEffectStack.pop()
        }
      }
    }

上面的代码，把传进来的`effect`推送到一个`activeEffectStack`数组中，然后执行传进来的`fn(...args)`，就是effect (fn）里面的fn。也就触发了effect中的参数函数，

这样子就会触发到`proxy`的`getter`，就是执行到下面的`handlers.get`函数，接下来就是在set和get中进行依赖收集与派发更新

const handlers = {
      get (target, key, receiver) {
        const res = Reflect.get(target, key, receiver)
        // effect 收集  ⭐️⭐️⭐️⭐️⭐️
        track(target, key)
        return isObject(res) ? reactive(res) : res
      },
      set (target, key, value, receiver) {
        const result = Reflect.set(target, key, value, receiver)
        const extraInfo = { oldValue: target[key], newValue: value }
        // trigger effect ⭐️⭐️⭐️⭐️⭐️
        trigger(target, key, extraInfo)
        return result
      }
    }

// 存储effect
    const targetMap = new WeakMap()
    function track (target, key) {
      // 拿到上面push进来的effect
      const effect = activeEffectStack[activeEffectStack.length - 1]
      if (effect) {
        let depsMap = targetMap.get(target)
        if (depsMap === void 0) {
          depsMap = new Map()
          // targetMap如果不存在target 的 Map 就设置一个
          targetMap.set(target, depsMap)
        }
        let dep = depsMap.get(key)
        if (dep === void 0) {
          dep = new Set()
          // 如果depsMap里面不存在key 的 Set 就设置一个
          depsMap.set(key, dep)
        }
        if (!dep.has(effect)) {
          // 收集当前的effect
          dep.add(effect)
          // effect 收集当前的dep
          effect.deps.push(dep)
        }
      }
    }

从`run`函数里面的`activeEffectStack`拿到当前的`effect`，如果有`effect`，就从`targetMap`里面拿`depsMap`，`targetMap`如果不存在`target` 的 `Map` 就设置一个`targetMap.set(target, depsMap)`，再从`depsMap` 里面拿 `key` 的 `Set` ，如果`depsMap`里面不存在 `key` 的 `Set` 就设置一个`depsMap.set(key, dep)`，下面就是收集前的`effect`和`effect` 收集当前的`dep`了。收集完毕后，`targetMap`的数据结构就类似下面的样子的了

// track的作用就是完成下面的数据结构
    targetMap = {
      target: {
        name: [effect]，
        age: [effect]
      }
    }
    // targetMap 是WeakMap 数据结构，为了理解就用对象表示
    // [effect] 是 Set数据结构，为了理解就用数组表示

`track`执行完毕之后，`handlers.get`就会返回 `res`，进行一系列收集之后，fn执行完毕，`run`函数最后就执行`finally {activeEffectStack.pop()}`，因为`effect`已经收集结束了，清空为了下一个`effect`收集做处理。

依赖收集已经完毕了，但是当我们更新数据的时候，例如`ob.number += 1`，更改数据会触发`proxy`的`getter`，也就是会调用`handlers.set`函数，里面就执行了`trigger(target, key, extraInfo)`，`trigger`函数如下

// effect 的触发
    function trigger(target, key, extraInfo) {
      // 拿到所有target的订阅
      const depsMap = targetMap.get(target)
      // 没有被订阅到
      if (depsMap === void 0) {
        return;
      }
      const effects = new Set() // 普通的effect
      const computedRunners = new Set() // computed 的 effect
      if (key !== void 0) {
        let deps = depsMap.get(key)
        // 拿到deps订阅的每个effect，然后放到对应的Set里面
        deps.forEach(effect => {
          if (effect.computed) {
            computedRunners.add(effect)
          } else {
            effects.add(effect)
          }
        })
      }
      const run = effect => {
        effect()
      }
      // 循环调用effect
      computedRunners.forEach(run)
      effects.forEach(run)
    }

上面的代码的意思是，拿到对应`key`的`effect`，然后执行`effect`，然后执行`run`，然后执行`fn`，然后就是`get`上面那一套流程了，最后拿到数据是更改后新的数据，然后更改视图。

### 3.实现computed函数 ###

还是先看用法，`let cNumber = computed(() => ob.number * 2)`，上面写effect的时候，有很多次提到为`computed`做准备，其实`computed`就是基于`effect`来实现的，下面我们看代码

function computed(fn) {
      const getter = fn
      // 手动生成一个effect，设置参数
      const runner = effect(getter, { computed: true, lazy: true })
      // 返回一个对象
      return {
        effect: runner,
        get value() {
          value = runner()
          return value
        }
      }
    }

如果`options.lazy`为`true`就不会立刻执行，就相当于`let cNumber = computed(() => ob.number * 2)`不会立刻执行runner函数，当`cNumber.value`才真正的执行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70][]

[proxy_es6]: https://es6.ruanyifeng.com/#docs/proxy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70]: /images/20221024/8e111abf59a94eb091bf8d18fb064ea7.png