浅析Vue响应式

A和风物语A
88 阅读4分钟

3.0 将带来一个基于 Proxy 的 observer 实现，它可以提供覆盖语言全范围的响应式能力，消除了当前 Vue 2 系列中基于 Object.defineProperty 所存在的一些局限。

Proxy是什么？

Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。 我们先来看看怎么使用。

const p = new Proxy(target, handler);
  • target：所要拦截的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
  • handler：一个对象，定义要拦截的行为
const p = new Proxy({}, {
    get(target, propKey) {
        return '你被拦截了';
    }
});

console.log(p.name);
// 你被拦截了

注意Proxy是用来操作对象的。代理的目的是为了拓展对象的能力。

再看一个例子 我们可以实现一个功能：不允许外部修改对象的name属性。

const p = new Proxy({}, {
    set(target, propKey, value) {
        if (propKey === 'name') {
            thrownewTypeError('name属性不允许修改');
        }
        // 不是 name 属性，直接保存
        target[propKey] = value;
    }
});
p.name = 'proxy';
// TypeError: name属性不允许修改
p.a = 111;
console.log(p.a); // 111

Proxy支持的拦截操作一共 13 种。

ad9a1fa75e20db4c7794a3686f8b13d6.png

vue2.x 是怎么实现数据的响应的呢?

递归遍历data中的数据，使用 Object.defineProperty()劫持 getter和setter，在getter中做数据依赖收集处理，在setter中 监听数据的变化，并通知订阅当前数据的地方。部分源码 src/core/observer/index.js 如下

//创建Observer实例时候执行构造函数会调用到walk，obj为需要监听的对象
  walk (obj: Object) {
    const keys = Object.keys(obj)
    // 对对象进行深度遍历，给对象的每个属性添加响应式
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

//defineReactive
//对val核验，如果是不是浅层对象，则创建Observer实例，知道观察对象为基本数据类型
let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
         // 进行依赖收集，将当前实例添加到Dep的target上
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
          // 是数组则需要对每一个成员都进行依赖收集，如果数组的成员还是数组，则递归。
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // 新的值需要重新进行observe，保证数据响应式
      childOb = !shallow && observe(newVal)
      // 将数据变化通知所有的观察者
      dep.notify()
    }
  })

这么做有什么问题呢？

  • 检测不到对象属性的添加和删除：当你在对象上新加了一个属性newProperty，当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的)。vue.$set是能让vue知道你添加了属性, 它会给你做处理，$set内部也是通过调用Object.defineProperty()去处理的

  • 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。
    原因是：当data中数据比较多且层级很深的时候，会有性能问题，因为要遍历data中所有的数据并给其设置成响应式的。
    可以使用 vm.$set实例方法改变，或者使用vm.items.splice(newLength)

  • vue3.0 使用了Proxy

为什么使用 Proxy 可以解决上面的问题呢？主要是因为Proxy是拦截对象，对对象进行一个"拦截"，外界对该对象的访问，都必须先通过这层拦截。无论访问对象的什么属性，之前定义的还是新增的，它都会走到拦截中，

举个例子

const obj = {
    name: 'app',
    age: '18',
    a: {
        b: 1,
        c: 2,
    },
}
const p = new Proxy(obj, {
    get(target, propKey, receiver) {
        console.log('你访问了' + propKey);
        return Reflect.get(target, propKey, receiver);
    },
    set(target, propKey, value, receiver) {
        console.log('你设置了' + propKey);
        console.log('新的' + propKey + '=' + value);
        Reflect.set(target, propKey, value, receiver);
    }
});
p.age = '20';
console.log(p.age);
p.newPropKey = '新属性';
console.log(p.newPropKey);

可以看到下面输出

// 修改原对象的age属性
你设置了age
新的age=20
你访问了age
20

// 设置新的属性
你设置了newPropKey
新的newPropKey=新属性
你访问了newPropKey
新属性

可以看到，新增的属性，并不需要重新添加响应式处理，因为 Proxy 是对对象的操作，只要你访问对象，就会走到 Proxy 的逻辑中。

Reflect(ES6引入) 是一个内置的对象，它提供拦截 JavaScript 操作的方法。将Object对象一些明显属于语言内部方法（比如Object.defineProperty()）放到Reflect对象上。修改某些Object方法的返回结果，让其变得更合理。让Object操作都变成函数行为。具体内容查看MDN

vue3-reactivity响应式模块源码流程分析

ue3响应式可拆分为三个阶段：

  1. 初始化阶段：原始对象转换为响应式对象，配置handler。用effect包裹原始fn，非lazy情况会立即执行一次，触发fn内响应式对象的get拦截，进入依赖收集阶段。
  2. 依赖收集阶段：当get拦截被触发后，会在track中构建targetMap（关联traget=>具体key=>deps(effect方法集合)之间的关系的weakMap）。
  3. 响应阶段：当target被改变，触发响应式对象的set拦截，从targetMap找到对应的deps并将其全部推入effects中，遍历执行所有与target关联的effect方法。

image.png

vue3 是怎么实现数据的响应的呢?

function reactive(target) {
    // if trying to observe a readonly proxy, return the readonly version.
    if (isReadonly(target)) {
        return target;
    }
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}

function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
    /**省略代码*/
    //创建proxy
    const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers);
    proxyMap.set(target, proxy);
    return proxy;
}

const mutableHandlers = {
    get,
    set,
    deleteProperty,
    has,
    ownKeys
};

const get = createGetter();
function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
        /**省略代码*/
        // 求值
        const res = Reflect.get(target, key, receiver);
        if (!isReadonly) {
            // 依赖收集
            track(target, "get", key);
        }
        /**省略代码*/
        }
        if (shared.isObject(res)) {
            // 递归调用响应式
            return isReadonly ? readonly(res) : reactive(res);
        }
        return res;
    };
}

const set = createSetter();
function createSetter(shallow = false) {
    return function set(target, key, value, receiver) {
        // 1.先获取oldValue
        let oldValue = target[key];

        // 2.设置新值
        const result = Reflect.set(target, key, value, receiver);

        // 3、派发更新
        if (target === toRaw(receiver)) {
            if (!hadKey) {
                trigger(target, "add", key, value);
            }
            else if (shared.hasChanged(value, oldValue)) {
                trigger(target, "set", key, value, oldValue);
            }
        }
        return result;
    };
}

track - 依赖收集

export function track(target: object, type: TrackOpTypes, key: unknown) {
  // 获取当前target对象对应depsMap
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  // 获取当前key对应dep依赖
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {
    // 收集当前的effect作为依赖
    dep.add(activeEffect)
    // 当前的effect收集dep集合作为依赖
    activeEffect.deps.push(dep)
  }
}

trigger - 派发更新

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  // 获取当前target的依赖映射表
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    // never been tracked
    return
  }
  // 声明一个集合和方法，用于添加当前key对应的依赖集合
  const effects = new Set<ReactiveEffect>()
  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
    if (effectsToAdd) {
      effectsToAdd.forEach(effect => effects.add(effect))
    }
  }
 // 根据不同的类型选择使用不同的方式将当前key的依赖添加到effects
 if (type === TriggerOpTypes.CLEAR) {
    ...判断逻辑省略
  }
  // 声明一个调度方法
  const run = (effect: ReactiveEffect) => {
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    } else {
      effect()
    }
  }
  // 循环遍历 按照一定的调度方式运行对应的依赖
  effects.forEach(run)
}

总结

  • Proxy是用来操作对象的，拓展对象的能力。Object.defineProperty() 是对对象属性进行操作。
  • vue2.x在实现响应式的时候会在初始化阶段判断对象的属性是否是Object类型,如果是的话就会递归的调用Observer将子对象也变成响应式。
  • vue3.0 的实现流程则是在初始化阶段的时候只对第一层的属性进行响应式，当返回proxy的属性被访且是对象的话再进行递归响应式，Proxy劫持的是对象本身，并不能劫持子对象的变化，正是利用这种特性可以延时定义子对象响应式的实现，在初始化的时候性能也会得到提升。
  • 可以使用toRaw(res)将proxy转化为普通对象
avatar
文章
阅读
粉丝