@feng3d/reactivity 1.0.6 → 1.0.8

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2019 feng
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2019 feng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,159 +1,159 @@
-# @feng3d/reactivity
-
-feng3d的响应式库，使用方式以及API与@vue/reactivity基本保持一致。
-
-源码：https://gitee.com/feng3d/reactivity
-
-文档：https://feng3d.com/reactivity
-
-## 网站
-
-https://feng3d.com/reactivity
-
-## 安装
-```
-npm install @feng3d/reactivity
-```
-
-## 快速开始
-
-```ts
-import { ref, computed } from "@feng3d/reactivity";
-
-const a = ref(1);
-const b = ref(2);
-const c = computed(() => a.value + b.value);
-
-console.log(c.value); // 3
-a.value = 3;
-console.log(c.value); // 5
-```
-
-## 缘由
-在feng3d引擎中使用`@vue/reactivity`代替`@feng3d/watcher`来维护数据驱动功能时发现性能严重下降。
-
-为了解决这个问题，我重新实现了一个响应式库，并且在性能上进行了优化。
-
-### 问题示例
-
-示例： https://feng3d.com/reactivity/#复杂情况取值
-
-| 运行库 | 性能(ms) | 速度(x) |
-| --- | --- | --- |
-| @feng3d/reactivity | 2.8 | 286 |
-| @vue/reactivity | 801 | 1 |
-
-### 测试代码
-```ts
-复杂情况取值(ref, computed, 10000);
-
-export function 复杂情况取值(ref: <T>(value?: T) => { value: T }, computed: <T>(func: (oldValue?: T) => T) => { readonly value: T }, count: number)
-{
-    const result = { time: undefined, values: [] };
-
-    const b = ref(2);
-
-    function 递归(depth = 10)
-    {
-        if (depth <= 0) return computed(() =>
-        {
-            return b.value
-        }).value;
-
-        return computed(() =>
-        {
-            return 递归(depth - 1) + 递归(depth - 2);
-        }).value;
-    }
-
-    const cb = computed(() =>
-    {
-        return 递归(16);
-    });
-
-    b.value++;
-    cb.value;
-
-    const start = performance.now();
-    for (let i = 0; i < count; i++)
-    {
-        ref(1).value++; // 添加此行代码将会导致 @vue/reactivity 版本的性能下降，而 @feng3d/reactivity 版本的性能保持不变
-
-        cb.value;
-    }
-    result.time = performance.now() - start;
-
-    result.values.push(cb.value);
-
-    return result;
-}
-```
-
-### 分析
-@feng3d/reactivity自下而上的使用脏标记进行维护状态，当发生变化时只会冒泡一次到父节点，全局有变化时（ref(1).value++ 标记变化）并不会触发重新计算。
-@vue/reactivity自上而下的使用版本号进行维护状态，当全局有变化时（ref(1).value++ 标记变化）每次取值时都会遍历整个树的子节点比对版本号判断是否需要重新计算。
-
-## 性能情况
-### 使用不同方式维护子节点
-
-// 修改第一个元素 `arr[0].value++;`
-| 方式 | 性能(ms) | 速度(x) | 隐患 |
-| --- | --- | --- | --- |
-| 失效子节点字典 | 126 | 8.8 | 当节点失效时无法完全清除子节点，并且无法保障检查节点的顺序，导致触发过时的依赖性能或许更差，但一般情况性能最佳。 |
-| 全量子节点链表 | 679 | 1.6 | 无 |
-| 全量子节点字典 | 1110 | 1 | 无 |
-| @vue/reactivity | 216 | 5.1 | 无 |
-
-// 修改最后一个元素 `arr[9999].value++`
-| 方式 | 性能(ms) | 速度(x) | 隐患 |
-| --- | --- | --- | --- |
-| 失效子节点字典 | 125 | 9.68 | 当节点失效时无法完全清除子节点，并且无法保障检查节点的顺序，导致触发过时的依赖性能或许更差，但一般情况性能最佳。 |
-| 全量子节点链表 | 730 | 1.65 | 无 |
-| 全量子节点字典 | 1210 | 1 | 无 |
-| @vue/reactivity | 253 | 4.78 | 无 |
-
-```ts
-import { computed, ref } from "@feng3d/reactivity";
-
-数组取值(ref, computed, 1000)
-
-export function 数组取值(ref: <T>(value?: T) => { value: T }, computed: <T>(func: (oldValue?: T) => T) => { readonly value: T },count: number)
-{
-    const result = { time: undefined, values: [] };
-
-    const arr:{
-        value: number;
-    }[] = new Array(10000).fill(0).map(() => ref(0));
-
-    const cb = computed(() =>
-    {
-        return arr.reduce((prev, curr) => prev + curr.value, 0);
-    });
-
-    const start = performance.now();
-    for (let i = 0; i < count; i++)
-    {
-        // arr[0].value++; // 修改第一个元素
-        arr[9999].value++; // 修改最后一个元素
-        cb.value;
-    }
-    result.time = performance.now() - start;
-
-    result.values.push(cb.value);
-
-    return result;
-}
-
-```
-
-## 为了库的简单易用性不支持以下内容
-- markRaw
-- shallowRef
-- shallowReactive
-- shallowReadonly
-- readonly
-- computed 中 setter
-- __v_skip
-
-## 扩展
+# @feng3d/reactivity
+
+feng3d的响应式库，使用方式以及API与@vue/reactivity基本保持一致。
+
+源码：https://gitee.com/feng3d/reactivity
+
+文档：https://feng3d.com/reactivity
+
+## 网站
+
+https://feng3d.com/reactivity
+
+## 安装
+```
+npm install @feng3d/reactivity
+```
+
+## 快速开始
+
+```ts
+import { ref, computed } from "@feng3d/reactivity";
+
+const a = ref(1);
+const b = ref(2);
+const c = computed(() => a.value + b.value);
+
+console.log(c.value); // 3
+a.value = 3;
+console.log(c.value); // 5
+```
+
+## 缘由
+在feng3d引擎中使用`@vue/reactivity`代替`@feng3d/watcher`来维护数据驱动功能时发现性能严重下降。
+
+为了解决这个问题，我重新实现了一个响应式库，并且在性能上进行了优化。
+
+### 问题示例
+
+示例： https://feng3d.com/reactivity/#复杂情况取值
+
+| 运行库 | 性能(ms) | 速度(x) |
+| --- | --- | --- |
+| @feng3d/reactivity | 2.8 | 286 |
+| @vue/reactivity | 801 | 1 |
+
+### 测试代码
+```ts
+复杂情况取值(ref, computed, 10000);
+
+export function 复杂情况取值(ref: <T>(value?: T) => { value: T }, computed: <T>(func: (oldValue?: T) => T) => { readonly value: T }, count: number)
+{
+    const result = { time: undefined, values: [] };
+
+    const b = ref(2);
+
+    function 递归(depth = 10)
+    {
+        if (depth <= 0) return computed(() =>
+        {
+            return b.value
+        }).value;
+
+        return computed(() =>
+        {
+            return 递归(depth - 1) + 递归(depth - 2);
+        }).value;
+    }
+
+    const cb = computed(() =>
+    {
+        return 递归(16);
+    });
+
+    b.value++;
+    cb.value;
+
+    const start = performance.now();
+    for (let i = 0; i < count; i++)
+    {
+        ref(1).value++; // 添加此行代码将会导致 @vue/reactivity 版本的性能下降，而 @feng3d/reactivity 版本的性能保持不变
+
+        cb.value;
+    }
+    result.time = performance.now() - start;
+
+    result.values.push(cb.value);
+
+    return result;
+}
+```
+
+### 分析
+@feng3d/reactivity自下而上的使用脏标记进行维护状态，当发生变化时只会冒泡一次到父节点，全局有变化时（ref(1).value++ 标记变化）并不会触发重新计算。
+@vue/reactivity自上而下的使用版本号进行维护状态，当全局有变化时（ref(1).value++ 标记变化）每次取值时都会遍历整个树的子节点比对版本号判断是否需要重新计算。
+
+## 性能情况
+### 使用不同方式维护子节点
+
+// 修改第一个元素 `arr[0].value++;`
+| 方式 | 性能(ms) | 速度(x) | 隐患 |
+| --- | --- | --- | --- |
+| 失效子节点字典 | 126 | 8.8 | 当节点失效时无法完全清除子节点，并且无法保障检查节点的顺序，导致触发过时的依赖性能或许更差，但一般情况性能最佳。 |
+| 全量子节点链表 | 679 | 1.6 | 无 |
+| 全量子节点字典 | 1110 | 1 | 无 |
+| @vue/reactivity | 216 | 5.1 | 无 |
+
+// 修改最后一个元素 `arr[9999].value++`
+| 方式 | 性能(ms) | 速度(x) | 隐患 |
+| --- | --- | --- | --- |
+| 失效子节点字典 | 125 | 9.68 | 当节点失效时无法完全清除子节点，并且无法保障检查节点的顺序，导致触发过时的依赖性能或许更差，但一般情况性能最佳。 |
+| 全量子节点链表 | 730 | 1.65 | 无 |
+| 全量子节点字典 | 1210 | 1 | 无 |
+| @vue/reactivity | 253 | 4.78 | 无 |
+
+```ts
+import { computed, ref } from "@feng3d/reactivity";
+
+数组取值(ref, computed, 1000)
+
+export function 数组取值(ref: <T>(value?: T) => { value: T }, computed: <T>(func: (oldValue?: T) => T) => { readonly value: T },count: number)
+{
+    const result = { time: undefined, values: [] };
+
+    const arr:{
+        value: number;
+    }[] = new Array(10000).fill(0).map(() => ref(0));
+
+    const cb = computed(() =>
+    {
+        return arr.reduce((prev, curr) => prev + curr.value, 0);
+    });
+
+    const start = performance.now();
+    for (let i = 0; i < count; i++)
+    {
+        // arr[0].value++; // 修改第一个元素
+        arr[9999].value++; // 修改最后一个元素
+        cb.value;
+    }
+    result.time = performance.now() - start;
+
+    result.values.push(cb.value);
+
+    return result;
+}
+
+```
+
+## 为了库的简单易用性不支持以下内容
+- markRaw
+- shallowRef
+- shallowReactive
+- shallowReadonly
+- readonly
+- computed 中 setter
+- __v_skip
+
+## 扩展
 - 扩大被反应式的对象的类型范围，只有`Object.isExtensible`不通过的对象不被响应化。Float32Array等都允许被响应化。

package/dist/index.js

@@ -65,8 +65,16 @@ function noTrack(fn) {
 let _shouldTrack = true;
 function batch(dep, isRunning) {
   if (isRunning) {
+    const index = _isRunedDeps.indexOf(dep);
+    if (index !== -1) {
+      console.warn("dep already in _isRunedDeps");
+    }
     _isRunedDeps.push(dep);
   } else {
+    const index = _needEffectDeps.indexOf(dep);
+    if (index !== -1) {
+      console.warn("dep already in _needEffectDeps，存在多重依赖问题。可能是由于副作用中多次修改了同一个响应式对象。");
+    }
     _needEffectDeps.push(dep);
   }
 }
@@ -1620,11 +1628,89 @@ const toReactive = (value) => {
 function isProxy(value) {
   return value ? !!value[ReactiveFlags.RAW] : false;
 }
+class ReactiveObject {
+  constructor() {
+    this._effectScope = new EffectScope();
+    this._destroyCallbacks = [];
+  }
+  /**
+   * 创建并运行副作用
+   *
+   * 功能：
+   * 1. 将传入的函数包装为副作用
+   * 2. 自动收集副作用中访问的响应式属性作为依赖
+   * 3. 当依赖变化时自动重新执行副作用
+   * 4. 在类销毁时自动停止副作用
+   *
+   * 使用场景：
+   * - 监听属性变化并执行相应操作
+   * - 自动更新UI或重新计算派生状态
+   * - 执行清理或初始化逻辑
+   *
+   * @param fn 副作用函数，会在依赖变化时自动执行
+   *
+   * 使用示例：
+   * ```typescript
+   * this.effect(() => {
+   *   // 访问响应式属性，建立依赖关系
+   *   const value = reactive(this).someProperty;
+   *
+   *   // 执行相应的逻辑
+   *   this.updateUI(value);
+   * });
+   * ```
+   */
+  effect(fn) {
+    let eff;
+    this._effectScope.run(() => {
+      eff = effect(fn);
+    });
+    return eff;
+  }
+  /**
+   * 销毁时执行的函数
+   * @param callback 销毁时执行的函数
+   */
+  destroyCall(callback) {
+    this._destroyCallbacks.push(callback);
+  }
+  /**
+   * 销毁响应式类实例
+   *
+   * 执行清理操作：
+   * 1. 执行所有注册的清理函数
+   * 2. 停止所有副作用作用域，防止副作用继续执行
+   * 3. 清理引用，帮助垃圾回收，防止内存泄漏
+   *
+   * 重要：
+   * - 子类重写此方法时必须调用 super.destroy()
+   * - 确保在类实例不再使用时调用此方法
+   * - 调用后实例将无法再使用 effect() 方法
+   *
+   * 使用示例：
+   * ```typescript
+   * class MyClass extends ReactiveObject {
+   *   destroy() {
+   *     // 执行子类特定的清理逻辑
+   *     this.cleanup();
+   *
+   *     // 必须调用父类的destroy方法
+   *     super.destroy();
+   *   }
+   * }
+   * ```
+   */
+  destroy() {
+    var _a2, _b2;
+    (_a2 = this._destroyCallbacks) == null ? void 0 : _a2.forEach((item) => item());
+    this._destroyCallbacks = null;
+    (_b2 = this._effectScope) == null ? void 0 : _b2.stop();
+    this._effectScope = null;
+  }
+}
 export {
-  EffectReactivity,
   EffectScope,
-  Reactivity,
-  RefReactivity,
+  ReactiveObject,
   batchRun,
   computed,
   effect,