网站搭建在线支付,如何制作网站网页,手机网站链接微信,如何用网页设计制作个人网站文章内容来源#xff1a;《Vue.js设计与实现》 —— 当当网 #xff0c;作者#xff1a;霍春阳#xff08;HcySunYang#xff09;
一、通过 Proxy 实现基本的响应式数据#xff1a;
function Section1 () {// 存储副作用函数的桶const bucket new Set();// 原始数据co…文章内容来源《Vue.js设计与实现》 —— 当当网 作者霍春阳HcySunYang
一、通过 Proxy 实现基本的响应式数据
function Section1 () {// 存储副作用函数的桶const bucket new Set();// 原始数据const data {text: hello world}// 对原始数据的代理let obj new Proxy(data, {// 拦截读取操作get (target, key) {// 将副作用函数 effect 添加到存储副作用的桶中bucket.add(effect);// 返回属性值return target[key];},set (target, key, newVal) {// 设置属性值target[key] newVal;// 将副作用函数从桶里取出并执行bucket.forEach(fn fn());// 返回 true 代表设置操作成功return true;}});// 副作用函数function effect () {document.body.innerText obj.text;}effect ();setTimeout(() {obj.text hello vue3}, 1000);// 旧 ↑↑↑↑
}
Section1();二、设计一个较完善的响应式系统
/*** 解决 一、中 effect 副作用函数是硬编码命名函数的情况* 提供一个注册副作用函数的机制*/
function Section2 () {// 存储副作用函数的桶const bucket new Set();// 原始数据const data {text: hello world}// 用一个全局变量存储被注册的的副作用函数let activeEffect;// effect 函数用于注册副作用函数function effect(fn) {// 当调用effect注册副作用函数时将副作用函数 fn 赋值给 activeEffectactiveEffect fn;// 执行副作用函数fn();}/*** 重写 obj 的 Proxy*/const obj new Proxy(data, {get (target, key) {// 如果 activeEffect 存在副作用函数赋值给了activeEffect就将 activeEffect 存储的副作用函数收集到“桶”里if (activeEffect) { // 比旧obj的proxy 新增bucket.add(activeEffect); // 比旧obj的proxy 新增} // 比旧obj的proxy 新增// 返回属性值return target[key];},set (target, key, newVal) {target[key] newVal;bucket.forEach(fn fn());return true;}});/*** 如何使用 effect 函数*/// 1、匿名函数effect (// 一个匿名的副作用函数() {document.body.innerText obj.text;})// 2、具名函数function setBodyInnerText () {document.body.innerText obj.text;}effect(setBodyInnerText);setTimeout(() {obj.text hello Section2}, 2000);// 以上 ↑↑↑↑ 将 副作用函数存储到activeEffect中在把activeEffect收集到 “桶”里响应系统不再依赖副作用函数的名字了/*** 由于上面没有在副作用函数和被操作的目标字段之间建立明确的联系* 如果调用 obj 不存在的属性例如obj.notExit与obj.text相关的副作用也会执行这是不正确的。*/effect(// 匿名函数() {console.log(effect run); // 会打印两次document.body.innerText obj.text;});setTimeout(() {// 副作用函数中并没有读取 notExit 属性的值 ↑↑↑obj.notExit hello Vue3}, 1000);
}
// Section2();function Section3 () {// 原始数据const data {text: hello world}/*** 解决 副作用函数 和 被操作的目标字段 之间建立明确联系的问题。* target表示一个代理对象Proxy所代理的原始对象* key表示被操作的字段名* effectFn表示被注册的副作用函数* 以上3个角色的关系如下* target* |__ key* |__ effectFn* * 2、如果有2个副作用函数同时读取同一个对象的属性值* effect(function effectFn () { obj.text; });* effect(function effectFn2 () { obj.text; });* 那么关系如下* target* |__ text* |__ effectFn* |__ effectFn2* * 3、如果一个副作用函数中读取了同一个对象的2个不同属性* effect (function effectFn () {* obj.text;* obj.text2;* });* 那么关系如下* target* |__ text* |__ effectFn* |__ text2* |__ effectFn* * 4、如果在不同副作用函数中读取了2个不同对象的不同属性* effect (function effectFn () {* obj1.text1;* });* effect (function effectFn2 () {* obj2.text2;* });* 那么关系如下* target* |__ text* |__ effectFn* * target2* |__ text2* |__ effectFn2* * target 对应 n 个 key, 每个 key 又对应了 n 个 effectFn* 为了保证一一对应关系需要用 WeakMap、Map 和 Set 将 target、key、effectFn 关联起来*/// 实现新的“桶”首先使用 WeakMap 替代 Set 作为桶的数据结构// 存储副作用函数的桶const bucket new WeakMap();// 用一个全局变量存储被注册的的副作用函数let activeEffect;// effect 函数用于注册副作用函数function effect(fn) {// 当调用effect注册副作用函数时将副作用函数 fn 赋值给 activeEffectactiveEffect fn;// 执行副作用函数fn();}// 修改 get / set 拦截器代码const obj new Proxy(data, {// 拦截读取操作get (target, key) {// 没有 activeEffect 直接 return 属性值if (!activeEffect) return target[key];// 1、根据 target 从“桶”中取得 depsMap, 是 target 对应的 MapMap 包含了 target 各个 key以及不同 key 对应的不同 effectFnlet depsMap bucket.get(target);// 如果 depsMap 不存在就新建一个 Map 与 target 关联if (!depsMap) {// 这里的Map后续用来存储 target 的 keybucket.set(target, (depsMap new Map())); }// 2、再根据 key 从 depsMap 中取得 deps deps是一个 Set 类型里面存储着所有与当前 key 相关联的副作用函数effectslet deps depsMap.get(key);// 如果 deps 不存在就新建一个 Set 与 key 关联if (!deps) {// 这里的 Set后续用于存储与 key 关联的副作用函数 effectsdepsMap.set(key, (deps new Set()));}// 3、最后将当前激活的副作用函数添加到“桶”里deps.add(activeEffect);// 返回属性值return target[key];},// 拦截设置操作set (target, key, newVal) {// 设置属性值target[key] newVal;// 根据 target 从桶中取出 depsMapdepsMap如果存在就是Map数据是 key ---- effects 对应关系let depsMap bucket.get(target);// 如果 depsMap 不存在就不执行后续操作if (!depsMap) return// 根据 key 从 depsMap 取出 effects effects 是 Set 数据存储的是所有与 key 关联的副作用函数let effects depsMap.get(key);// 如果存在关联副作用函数执行每一个副作用函数effects effects.forEach(fn fn());}});effect(// 匿名函数() {console.log(effect run); // 只打印1次已确立 effect 和 key 的明确联系document.body.innerText obj.text;});setTimeout(() {// 副作用函数中并没有读取 notExit 属性的值 ↑↑↑obj.notExit hello Section3}, 1000);
}
// Section3();function Section4 () {/*** 为何 target 和 key 的关系要使用 WeakMap ?* 1、WeakMap 是弱引用Map 是强引用。* 2、WeakMap 的 key 是弱引用在 WeakMap 的表达式执行完之后垃圾回收器grabage collector就会将对象 target 从内存中移除。* 3、Map 的 key 是强引用在 Map 的表达式执行完之后对于对象 target 来说它仍然作为 Map 的 key 被引用着因此垃圾回收器不会把它从内存中移除。* 举例*/// 创建 Map 数据const mapData new Map();// 创建 WeakMap 数据const weakmapData new WeakMap();// IIFE 立即执行函数执行表达式(function() {const key1 { foo: 1 };const key2 { bar: 2 };// Map 数据执行表达式在此处引用 key1 对象作为 mapData 的 keymapData.set(key1, 1);// WeakMap 数据执行表达式在此处引用 key2 对象作为 weakmapData 的 keyweakmapData.set(key2, 2);// 此处已执行完表达式console.log(mapData.keys : , mapData.keys); // 打印mapData.keys : ƒ keys() { [native code] }for (const k of mapData.keys()) {console.log(k : , k); // 打印k : {foo: 1}};console.log(weakmapData.keys : , weakmapData.keys); // 打印weakmapData.keys : undefinedconsole.log(weakmapData : , weakmapData);// 打印weakmapData : WeakMap {{…} 2}console.log(weakmapData.get(key2) : , weakmapData.get(key2));// 打印weakmapData.get(key2) : 2/*** 执行完 mapData.set() 和 weakmapData.set() 后* 1、Map数据对于 key1 对象它仍然作为 mapData 的 key 被引用着不会被垃圾回收器从内存中移除可通过 mapData.keys 打印出 key1 对象。* 2、WeakMap 数据对于 key2 对象由于 WeakMap 的 key 是弱引用它不影响垃圾回收器的工作在.set()表达式执行完之后垃圾回收器就会将 key2 对象从内存中移除并且我们无法通过 weakmapData 的 key 值也就无法通过 weakmapData 取得 key2 对象。* 3、简单说WeakMap 对 key 是弱引用不影响垃圾回收器的工作。根据这个特性可知一旦 key 被垃圾回收器回收那么对应的键和值就访问不到了。* 4、WeakMap 应用场景用于存储那些只有当 key 所引用的对象存在时没有被回收才有价值的信息。* 例如上面的场景如果 key2 对象没有任何引用了说明用户侧不再需要它这时垃圾回收器就会完成回收任务。如果用 Map 代替 WeakMap 那么即使用户侧对 key2 没有任何引用这个 key2 也不会被回收最终可能导致内存溢出。*/})()
}// Section4();/*** 第5节 封装处理* 1、将 get 拦截函数里 编写副作用函数收集到 “桶” 里的逻辑单独封装到一个 track 函数中表示追踪。* 2、将 set 拦截函数里 触发副作用函数重新执行的逻辑单独封装到一个 trigger 函数中表示触发。*/function Section5 () {// 原始数据const data { text: hello world };// 存储副作用函数的桶const bucket new WeakMap();// 用一个全局变量存储被注册的的副作用函数let activeEffect;// effect 函数用于注册副作用函数function effect(fn) {// 当调用effect注册副作用函数时将副作用函数 fn 赋值给 activeEffectactiveEffect fn;// 执行副作用函数fn();}// 在 get 拦截函数内调用 track 函数追踪变化function track (target, key) {// 没有 activeEffect直接 return 属性值if (!activeEffect) return;let depsMap bucket.get(target);if (!depsMap) {bucket.set(target, (depsMap new Map()))};let deps depsMap.get(key);if (!deps) {depsMap.set(key, (deps new Set()))};deps.add(activeEffect);}// 在 set 拦截函数内调用 trigger 函数触发副作用函数function trigger (target, key) {const depsMap bucket.get(target);if (!depsMap) return;const effects depsMap.get(key);effects effects.forEach(fn fn());}const obj new Proxy(data, {// 拦截读取操作get (target, key) {// 将副作用函数 activeEffect 添加到存储副作用函数的桶中track(target, key);// 返回属性值return target[key];},// 拦截设置操作set (target, key, newVal) {// 设置属性值target[key] newVal;// 把副作用函数从桶里取出并执行trigger (target, key);}})effect(// 匿名函数() {console.log(effect run); // 只打印1次已确立 effect 和 key 的明确联系document.body.innerText obj.text;});effect(// 匿名函数() {// 打印2次设置 obj.notExit 时触发打印console.log(obj.notExit: , obj.notExit);});setTimeout(() {// 副作用函数中并没有读取 notExit 属性的值 ↑↑↑obj.notExit hello Section5}, 1000);
}
Section5();
