响应性基础API

news/2024/4/19 10:34:30/文章来源:https://blog.csdn.net/m0_63757700/article/details/129223116

一.什么是proxy和懒代理？

什么是proxy?

proxy对象是用于定义基本操作的自定义行为(如：属性查找，赋值，枚举，函数调用等等)。

什么是懒代理？

懒代理：在初始化的时候不会进行全部代理，而是在访问的时候进行代理，这样就使得cpu的压力分配到不同的阶段，就不会产生很大的开销。

二.reactive与readonly的区别是什么？又该如何进行优化的？

reactive与readonly的区别：

reactive一般只接受ES普通的引用数据类型，尽管它可以接受Proxy对象，但是没有意义，没有必要，

但是，Readonly可以接受Proxy对象且有实际的意义，它可以获取纯对象或者Proxy或者Reflmpl,返回原始代理的只读代理。总的来说，它进行了两步操作，首先是reactive其次另生成了一个只读的Proxy

readonly的只读是深层的只读：访问的任何嵌套property也是只读的。

readonly存在的意义有2个，一个是保护数据不被修改，另一个是提升性能。

例子：


<template>
<div><button @click="h.b.c++">count is: {{ h.b.c }}</button><button @click="t.b.c++">count is: {{ t.b.c }}</button>
</div>
</template><script>
import { reactive, readonly } from "vue";
export default {setup() {let h = reactive({a: 1, b: {c: 2}});//不只读，深层let t = readonly({a: 1, b: {c: 2}});//只读，深层return {h,t};},
};
</script>

运行结果：

第二个由于用的是可读的所以值不会发生变化。

优化：

因为reactive与readonly函数代码的高度相似从而进一步的抽离他们的相同点，对其进行优化，增加代码的可读性

优化步骤：

1.重构get,set操作：vue3把get放入到了一个高阶函数creatGetter中，高阶函数返回get，set也同理，我们现在来封装一下：其中get我们可以通过给定一个传参去判断是否是readonly，而readonly的set有些特殊我们先不进行修改~但是这个代码还是不够美观，继续优化

function createGetter(isReadonly = true) {return function get(target, key) {const res = Reflect.get(target, key)if (isReadonly) {track(target, key)}return res}
}function createSetter() {return function set(target, key, value, receiver) {const res = Reflect.set(target, key, value, receiver)trigger(target, key)return res}
}export const reactive = (raw) => {return new Proxy(raw,  {get: createGetter(),set: createSetter()})
}export const readonly = (raw) => {return new Proxy(raw, {get: createGetter(false),set(target, key, value, receiver) {return true},})
}