Proxy理解以及vue3响应式原理

Proxy的应用可以使函数更加强大，业务逻辑更加清楚，而且在编写自己的框架或者通用组件时非常好用。Proxy涉及的内容非常多，那这里我就带你入门并且介绍给你后续的学习方法。

在学习新知识之前，先来回顾一下定义对象的方法。

var obj={
    add:function(val){
        return val+10;
    },
    name:'I am 大鲨鱼'
 
};
console.log(obj.add(100));
console.log(obj.name);

声明了一个obj对象，增加了一个对象方法add和一个对象属性name，然后在控制台进行了打印。

声明Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。

var proxy = new Proxy(target, handler);

需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

现在把上边的obj对象改成我们的Proxy形式。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am 大鲨鱼'
}, {
        get:function(target,key,property){
            console.log('come in Get');
            return target[key];
        }
    });
 
console.log(pro.name);

可以在控制台看到结果，先输出了come in Get。相当于在方法调用前的钩子函数。

get属性

get属性是在你得到某对象属性值时预处理的方法，他接受三个参数

target：得到的目标值
key：目标的key值，相当于对象的属性
property：这个不太常用， proxy 实例本身（严格地说，是操作行为所针对的对象），参数可选。
set属性

set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。

• target:目标值。
• key：目标的Key值。
• value：要改变的值。
• receiver：改变前的原始值。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am qyz'
}, {
        get:function(target,key){
            console.log('come in Get');
            return target[key];
        },
        set:function(target,key,value,receiver){
            console.log(`    setting ${key} = ${value}`);
            return target[key] = value;
        }
 
    });
 
console.log(pro.name);
pro.name='大鲨鱼';
console.log(pro.name);

apply的使用

apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。看下边的代码。

let target = function () {
    return 'I am 大鲨鱼';
};
var handler = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments);
    }
}
 
var pro = new Proxy(target, handler);
 
console.log(pro());

vue3的响应式原理

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

import {reactive, effect, computed} from "@vue/reactivity";
const state = reactive({
    name: "qyz",
    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}`);
});

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

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

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;

• 通过Reflect（反射）: 对源对象的属性进行操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let obj = {zhangsan:100,lisi:200}
			Object.defineProperty(obj,'wangwu',{
				get(){
					return 300
				}
			})
			Object.defineProperty(obj,'wangwu',{
				get(){
					return 400
				}
			})
		</script>
	</body>
</html>

 换成Reflect：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let obj = {zhangsan:100,lisi:200}
			Reflect.defineProperty(obj,'wangwu',{
				get(){
					return 300
				}
			})
			Reflect.defineProperty(obj,'wangwu',{
				get(){
					return 400
				}
			})
		</script>
	</body>
</html>

不报错 兼容性更好 用Object.defineProperty不好捕获错误 要用try…catch很麻烦

用Reflect可以很好捕获错误

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let obj = {zhangsan:100,lisi:200}
			const a = Reflect.defineProperty(obj,'wangwu',{
				get(){
					return 300
				}
			})
			const b = Reflect.defineProperty(obj,'wangwu',{
				get(){
					return 400
				}
			})
			console.log(a);
			console.log(b);
		</script>
	</body>
</html>

 由此可见 vue3 使用Proxy和Reflect结合实现响应式原理。