Vue3响应式原理解析

2021-07-28 Vue

Vue3响应式简介

Vue响应式系统的核心依然是对数据进行劫持，只不过Vue3采样点是Proxy类，而Vue2采用的是Object.defineProperty()。Vue3之所以采用Proxy类主要有以下原因:

可以提升性能，Vue2是通过层层递归的方式对数据进行劫持，并且数据劫持一开始就要进行层层递归(一次性递归)，如果对象的路径非常深将会非常影响性能。而Proxy可以在用到数据的时候再进行对下一层属性的劫持。
Proxy可以实现对整个对象的劫持，而Object.defineProperty()只能实现对对象的属性进行劫持。所以对于对象上的方法或者新增、删除的属性则无能为力。
Vue2响应式数据在对数组进行处理时，是对数组的几个方法进行了拦截。而且并没有对数组的每个索引进行劫持，对数组的长度变化，数组的插入删除元素无法进行响应式处理。而Vue3采用Proxy在数组长度变化时或者插值时能及时的响应。

// 展示使用Object.defineProperty()存在的缺点
const obj = {name: "vue", arr: [1, 2, 3]};
Object.keys(obj).forEach((key) => {
    let value = obj[key];
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get key is ${key}`);
            return value;
        },
        set(newVal) {
            console.log(`set key is ${key}, newVal is ${newVal}`);
            value = newVal;
        }
    });
});
// 此时给对象新增一个age属性
obj.age = 18; // 因为对象劫持的时候，没有对age进行劫持，所以新增属性无法劫持
delete obj.name; // 删除对象上已经进行劫持的name属性，发现删除属性操作也无法劫持
obj.arr.push(4); // 无法劫持数组的push等方法
obj.arr[3] = 4; // 无法劫持数组的索引操作，因为没有对数组的每个索引进行劫持，并且由于性能原因，Vue2并没有对数组的每个索引进行劫持

// 展示使用Object.defineProperty()存在的缺点
const obj = {name: "vue", arr: [1, 2, 3]};
Object.keys(obj).forEach((key) => {
    let value = obj[key];
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get key is ${key}`);
            return value;
        },
        set(newVal) {
            console.log(`set key is ${key}, newVal is ${newVal}`);
            value = newVal;
        }
    });
});
// 此时给对象新增一个age属性
obj.age = 18; // 因为对象劫持的时候，没有对age进行劫持，所以新增属性无法劫持
delete obj.name; // 删除对象上已经进行劫持的name属性，发现删除属性操作也无法劫持
obj.arr.push(4); // 无法劫持数组的push等方法
obj.arr[3] = 4; // 无法劫持数组的索引操作，因为没有对数组的每个索引进行劫持，并且由于性能原因，Vue2并没有对数组的每个索引进行劫持

// 使用Proxy实现完美劫持
const obj = {name: "vue", arr: [1, 2, 3]};
function proxyData(value) {
    const proxy = new Proxy(value, {
        get(target, key) {
            console.log(`get key is ${key}`);
            const val = target[key];
            if (typeof val === "object") {
                return proxyData(val);
            }
            return val;
        },
        set(target, key, value) {
            console.log(`set key is ${key}, value is ${value}`);
            return target[key] = value;
        },
        deleteProperty(target, key) {
            console.log(`delete key is ${key}`);
        }
    });
    return proxy;
}
const proxy = proxyData(obj);
proxy.age = 18; // 可对新增属性进行劫持
delete proxy.name; // 可对删除属性进行劫持
proxy.arr.push(4); // 可对数组的push等方法进行劫持
proxy.arr[3] = 4; // 可对象数组的索引操作进行劫持

// 使用Proxy实现完美劫持
const obj = {name: "vue", arr: [1, 2, 3]};
function proxyData(value) {
    const proxy = new Proxy(value, {
        get(target, key) {
            console.log(`get key is ${key}`);
            const val = target[key];
            if (typeof val === "object") {
                return proxyData(val);
            }
            return val;
        },
        set(target, key, value) {
            console.log(`set key is ${key}, value is ${value}`);
            return target[key] = value;
        },
        deleteProperty(target, key) {
            console.log(`delete key is ${key}`);
        }
    });
    return proxy;
}
const proxy = proxyData(obj);
proxy.age = 18; // 可对新增属性进行劫持
delete proxy.name; // 可对删除属性进行劫持
proxy.arr.push(4); // 可对数组的push等方法进行劫持
proxy.arr[3] = 4; // 可对象数组的索引操作进行劫持

Vue3响应式示例

Vue3的响应式系统被放到了一个单独的@vue/reactivity模块中，其提供了reactive、effect、computed等方法，其中reactive用于定义响应式的数据，effect相当于是Vue2中的watcher，computed用于定义计算属性。源码目录结构： !

import {reactive, effect, computed} from "@vue/reactivity";
const state = reactive({
    name: "vincent",
    age: 24,
    arr: ['a','b','c']
});
console.log(state); // 这里返回的是Proxy代理后的对象
effect(() => {
    console.log("effect run");
    app.innerHTML = state.name + '==' + state.age + '_' + state.arr.length
    console.log(state.name); // 每当name数据变化将会导致effect重新执行
});


setTimeout(() => {
  state.name = "vue"; // 数据发生变化后会触发使用了该数据的effect重新执行
  state.arr.length = 2
}, 1000)


const user = computed(() => { // 创建一个计算属性，依赖name和age
    return `name: ${state.name}, age: ${state.age}`;
});
effect(() => { // name和age变化会导致计算属性的value发生变化，从而导致当前effect重新执行
    console.log(`user is ${user.value}`);
});

import {reactive, effect, computed} from "@vue/reactivity";
const state = reactive({
    name: "vincent",
    age: 24,
    arr: ['a','b','c']
});
console.log(state); // 这里返回的是Proxy代理后的对象
effect(() => {
    console.log("effect run");
    app.innerHTML = state.name + '==' + state.age + '_' + state.arr.length
    console.log(state.name); // 每当name数据变化将会导致effect重新执行
});


setTimeout(() => {
  state.name = "vue"; // 数据发生变化后会触发使用了该数据的effect重新执行
  state.arr.length = 2
}, 1000)


const user = computed(() => { // 创建一个计算属性，依赖name和age
    return `name: ${state.name}, age: ${state.age}`;
});
effect(() => { // name和age变化会导致计算属性的value发生变化，从而导致当前effect重新执行
    console.log(`user is ${user.value}`);
});

reactive实现原理

Vue3中采用proxy实现数据代理, 核心就是拦截get方法和set方法，当获取值时收集effect函数，当修改值时触发对应的effect重新执行

reactive() 方法本质是传入一个要定义成响应式的target目标对象，然后通过Proxy类去代理这个target对象，最后返回代理之后的对象，如:

export function reactive(target) {
    return new Proxy(target, {
        get() {

        },
        set() {
            
        }
    });
}

export function reactive(target) {
    return new Proxy(target, {
        get() {

        },
        set() {
            
        }
    });
}

源码：

// 创建响应式数据
function reactive(target) { 
    if (target && target["__v_isReadonly" /* IS_READONLY */]) {
        return target;
    }
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}

// 创建浅的响应式数据
function shallowReactive(target) {
    return createReactiveObject(target, false, shallowReactiveHandlers, shallowCollectionHandlers, shallowReactiveMap);
}

// 创建仅读
function readonly(target) {
    return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);
}

// 创建浅的仅读数据
function shallowReadonly(target) {
    return createReactiveObject(target, true, shallowReadonlyHandlers, shallowReadonlyCollectionHandlers, shallowReadonlyMap);
}

function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
    // 对目标数据进行判断，如果不是对象 直接返回
    if (!isObject(target)) {
        return target;
    }
    if (target["__v_raw" /* RAW */] &&
        !(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) {
        return target;
    }
    // 目标对象是否有被代理过
    const existingProxy = proxyMap.get(target);
    // 被代理过了 直接返回缓存中的代理数据
    if (existingProxy) {
        return existingProxy;
    }
    // 是否需要被跳过
    const targetType = getTargetType(target);
    if (targetType === 0 /* INVALID */) {
        return target;
    }
    // 对目标对象进行代理 并判断是普通对象、数组还是集合类型数据
    const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers);
    // 把代理后的数据进行缓存
    proxyMap.set(target, proxy);
    return proxy;

// 创建响应式数据
function reactive(target) { 
    if (target && target["__v_isReadonly" /* IS_READONLY */]) {
        return target;
    }
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}

// 创建浅的响应式数据
function shallowReactive(target) {
    return createReactiveObject(target, false, shallowReactiveHandlers, shallowCollectionHandlers, shallowReactiveMap);
}

// 创建仅读
function readonly(target) {
    return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);
}

// 创建浅的仅读数据
function shallowReadonly(target) {
    return createReactiveObject(target, true, shallowReadonlyHandlers, shallowReadonlyCollectionHandlers, shallowReadonlyMap);
}

function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
    // 对目标数据进行判断，如果不是对象 直接返回
    if (!isObject(target)) {
        return target;
    }
    if (target["__v_raw" /* RAW */] &&
        !(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) {
        return target;
    }
    // 目标对象是否有被代理过
    const existingProxy = proxyMap.get(target);
    // 被代理过了 直接返回缓存中的代理数据
    if (existingProxy) {
        return existingProxy;
    }
    // 是否需要被跳过
    const targetType = getTargetType(target);
    if (targetType === 0 /* INVALID */) {
        return target;
    }
    // 对目标对象进行代理 并判断是普通对象、数组还是集合类型数据
    const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers);
    // 把代理后的数据进行缓存
    proxyMap.set(target, proxy);
    return proxy;

vue3新增了Map,Set, WeakMap,WeakSet等集合。在对target对象进行代理时要分开进行处理。在对目标对象进行拦截时最重要的就是collectionHandlers和baseHandlers。

以baseHandlers为例：baseHandlers即mutableHandlers，Proxy的handler可以代理很多方法，比如get、set、deleteProperty、has、ownKeys，如果将这些方法直接都写在handlers上，那么handlers就会变得非常多代码，所以可以将这些方法分开

import { isObject } from "@vue/shared";
import { reactive, readonly } from "./reactive";

const get = createGetter();
const shallowGet = createGetter(false, true);
const readonlyGet = createGetter(true);
const shallowReadonlyGet = createGetter(true, true)

const set = createSetter();
const shallowSet = createSetter(true);

/**
 * @param isReadonly 是不是仅读
 * @param shallow 是不是浅响应
 */
function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver);

        if (!isReadonly) { // 如果是仅读的无需收集依赖
            console.log('依赖收集')
        }

        if (shallow) { // 浅无需返回代理
            return res
        }

        if (isObject(res)) { // 取值时递归代理
            return isReadonly ? readonly(res) : reactive(res)
        }
        return res;
    }
}

function createSetter(shallow = false) {
    return function set(target, key, value, receiver) {
        const result = Reflect.set(target, key, value, receiver);
        return result;
    }
}

export const mutableHandlers = {
    get,
    set
};
export const readonlyHandlers = {
    get: readonlyGet,
    set(target, key) {
        console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`)
        return true;
    }
};
export const shallowReactiveHandlers = {
    get: shallowGet,
    set: shallowSet
};
export const shallowReadonlyHandlers = {
    get: shallowReadonlyGet,
    set(target, key) {
        console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`)
        return true;
    }
};

import { isObject } from "@vue/shared";
import { reactive, readonly } from "./reactive";

const get = createGetter();
const shallowGet = createGetter(false, true);
const readonlyGet = createGetter(true);
const shallowReadonlyGet = createGetter(true, true)

const set = createSetter();
const shallowSet = createSetter(true);

/**
 * @param isReadonly 是不是仅读
 * @param shallow 是不是浅响应
 */
function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver);

        if (!isReadonly) { // 如果是仅读的无需收集依赖
            console.log('依赖收集')
        }

        if (shallow) { // 浅无需返回代理
            return res
        }

        if (isObject(res)) { // 取值时递归代理
            return isReadonly ? readonly(res) : reactive(res)
        }
        return res;
    }
}

function createSetter(shallow = false) {
    return function set(target, key, value, receiver) {
        const result = Reflect.set(target, key, value, receiver);
        return result;
    }
}

export const mutableHandlers = {
    get,
    set
};
export const readonlyHandlers = {
    get: readonlyGet,
    set(target, key) {
        console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`)
        return true;
    }
};
export const shallowReactiveHandlers = {
    get: shallowGet,
    set: shallowSet
};
export const shallowReadonlyHandlers = {
    get: shallowReadonlyGet,
    set(target, key) {
        console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`)
        return true;
    }
};

Proxy的handlers对象中的get和set方法都可以拿到被代理的对象target、获取或修改了对象的哪个key，设置了新的值value，以及被代理后的对象receiver，目前拦截到用户的get操作后仅仅是从target中取出对应的值并返回回去，拦截到用户的set操作后仅仅是修改了target中对应key的值并返回回去。

对于数组中的操作此时会存在一个问题，如果我们执行state.arr.push(4)这样的一个操作，会发现仅仅触发了arr的取值操作，并没有收到arr新增了一个值的通知。因为Proxy代理只是浅层的代理，只代理了一层，所以我们拿到的arr是一个普通数组，此时对普通数组进行操作是不会收到通知的。正是由于Proxy是浅层代理，所以避免了一上来就递归，我们需要修改get，在取到的值是对象的时候再去代理这个对象，如:

function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver); // 等价于target[key]
        console.log(`拦截到了get取值操作`, target, key);
      + if (isObject(res)) { // 如果取到的值是一个对象，则代理这个值
      +    return reactive(res);
      + }
        return res;
    }
}

function createGetter(isReadonly = false, shallow = false) {
    return function get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver); // 等价于target[key]
        console.log(`拦截到了get取值操作`, target, key);
      + if (isObject(res)) { // 如果取到的值是一个对象，则代理这个值
      +    return reactive(res);
      + }
        return res;
    }
}

此时我们再次执行state.arr.push(4)，可以看到输出结果如下:

拦截到了get取值操作 {name: "lihb", age: 18, arr: Array(3)} arr
拦截到了get取值操作 (3) [1, 2, 3] push
拦截到了get取值操作 (3) [1, 2, 3] length
拦截到了set设置值操作 (4) [1, 2, 3, 4] 3 4
拦截到了set设置值操作 (4) [1, 2, 3, 4] length 4

拦截到了get取值操作 {name: "lihb", age: 18, arr: Array(3)} arr
拦截到了get取值操作 (3) [1, 2, 3] push
拦截到了get取值操作 (3) [1, 2, 3] length
拦截到了set设置值操作 (4) [1, 2, 3, 4] 3 4
拦截到了set设置值操作 (4) [1, 2, 3, 4] length 4

同时也触发了length的修改，其实我们将4 push进入数组后，数组的length会自动修改，也就是说不需要再去设置一遍length的值了，同样的我们执行state.arr[0] = 1也会触发set操作，设置的是同样的值也会触发set操作，所以我们需要判断一下设置的新值和旧值是否相同，不同才需要触发set操作。

import { isObject, hasOwn, hasChanged } from "./shared";
function createSetter(shallow = false) {
    return function set(target, key, value, receiver) {
        const hadKey = hasOwn(target, key);
        const oldValue = target[key]; // 修改前获取到旧的值
        const result = Reflect.set(target, key, value, receiver); // 等价于target[key] = value
        if (!hadKey) {  // 如果当前target对象中没有该key，则表示是新增属性
            console.log(`用户新增了一个属性，key is ${key}, value is ${value}`);
        } else if (hasChanged(value, oldValue)) { // 判断一下新设置的值和之前的值是否相同，不同则属于更新操作
            console.log(`用户修改了一个属性，key is ${key}, value is ${value}`);
        }
        return result;
    }
}

import { isObject, hasOwn, hasChanged } from "./shared";
function createSetter(shallow = false) {
    return function set(target, key, value, receiver) {
        const hadKey = hasOwn(target, key);
        const oldValue = target[key]; // 修改前获取到旧的值
        const result = Reflect.set(target, key, value, receiver); // 等价于target[key] = value
        if (!hadKey) {  // 如果当前target对象中没有该key，则表示是新增属性
            console.log(`用户新增了一个属性，key is ${key}, value is ${value}`);
        } else if (hasChanged(value, oldValue)) { // 判断一下新设置的值和之前的值是否相同，不同则属于更新操作
            console.log(`用户修改了一个属性，key is ${key}, value is ${value}`);
        }
        return result;
    }
}

此时再次执行state.arr.push(4)就不会触发length的更新了，执行state.arr[0] = 1也不会触发索引为0的值更新了。

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# vue3 # 源码学习

···

Vue3响应式简介 #

Vue3响应式示例 #

reactive实现原理 #

Vue3响应式简介

Vue3响应式示例

reactive实现原理