diff --git a/package.json b/package.json index c76266c..fed6e53 100644 --- a/package.json +++ b/package.json @@ -19,4 +19,4 @@ "lint-staged": { "*.{js,css,md}": "prettier --write" } -} +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index e1f14d3..8ac2870 100644 --- a/src/index.js +++ b/src/index.js @@ -85,24 +85,24 @@ function trigger(target, key, type, newValue) { */ const effectsToRun = new Set(); effects && - effects.forEach((effect) => { - effectsToRun.add(effect); + effects.forEach((effectFn) => { + effectsToRun.add(effectFn); }); // for ... in 循环时, 因为增加和删除都会影响对象的长度和 for 循环的次数,要重新执行一遍副作用函数 if (type === triggerType.ADD || type === triggerType.DELETE) { iterateEffects && - iterateEffects.forEach((effect) => { - effectsToRun.add(effect); + iterateEffects.forEach((effectFn) => { + effectsToRun.add(effectFn); }); } // 当类型是 triggerType.add 时, 并且是数组时,将函数加入到effectsToRun中运行 if (type === triggerType.ADD && Array.isArray(target)) { const lengthEffects = depsMap.get("length"); lengthEffects && - lengthEffects.forEach((effect) => { - if (effect !== activeEffect) { - effectsToRun.add(effect); + lengthEffects.forEach((effectFn) => { + if (effectFn !== activeEffect) { + effectsToRun.add(effectFn); } }); } @@ -187,7 +187,8 @@ function createReactive(obj, isShallow = false, isReadonly = false) { } // 只读属性不触发收集依赖 - if (!isReadonly) { + // 或者 property 属性类型不是 symbol 值时,不触发依赖 ( for ... of 遍历时 property属性是 symbol [@@Symbol.iterator]) + if (!isReadonly && typeof p !== "symbol") { track(target, p); } @@ -210,7 +211,9 @@ function createReactive(obj, isShallow = false, isReadonly = false) { }, // 拦截 for ... in 的响应式变量 ownKeys(target) { - track(target, ITERATE_KEY); + // for ... in 遍历时。检测对象是否是数组,如果是数组,使用 length 属性建立连接 + // 否则 ITERATE_KEY 属性建立连接 + track(target, Array.isArray(target) ? "length" : "ITERATE_KEY"); return Reflect.ownKeys(target); }, // 拦截 delete 操作符 diff --git a/src/index.spec.js b/src/index.spec.js index ec687fe..7077117 100644 --- a/src/index.spec.js +++ b/src/index.spec.js @@ -199,14 +199,26 @@ import { computed, effect, reactive, readonly, shallowReactive, shallowReadonly, /** * todo: 代理数组 - * 数组索引与 length : + * 数组索引与 length + * 数组遍历 */ -// 数组索引与 length -const arr = reactive(["foo"]); +// // 数组索引与 length +// const arr = reactive(["foo"]); +// effect(() => { +// console.log(arr[0]); +// }); +// +// arr[0] = "bar"; +// arr.length = 0; + +// for ... in 数组遍历 +const arr = reactive([1, 2, 3]); effect(() => { - console.log(arr.length); + for (const res in arr) { + console.log(res); + } }); -arr[2] = "bar"; +// arr[3] = "bar"; arr.length = 0; diff --git a/src/note.excalidraw b/src/note.excalidraw index 0461c4f..f0a9ad6 100644 --- a/src/note.excalidraw +++ b/src/note.excalidraw @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4fb121fb92b120d76b6f54a160c6d0d4c081b84bdccf227effa74bb63c71f181 -size 1611979 +oid sha256:3d9dd37a9ce8c102b487bbd3e3e4ac15cebdd275037dd585cce920e71c8fe6ad +size 1656068