@feng3d/reactivity 1.0.7 → 1.0.8

package/dist/index.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.feng3d = {}));
-})(this, function(exports2) {
+})(this, (function(exports2) {
   "use strict";
   class Reactivity {
     constructor() {
@@ -69,8 +69,16 @@
   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);
     }
   }
@@ -1624,7 +1632,88 @@
   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;
+    }
+  }
   exports2.EffectScope = EffectScope;
+  exports2.ReactiveObject = ReactiveObject;
   exports2.batchRun = batchRun;
   exports2.computed = computed;
   exports2.effect = effect;
@@ -1640,5 +1729,5 @@
   exports2.ref = ref;
   exports2.toRaw = toRaw;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-});
+}));
 //# sourceMappingURL=index.umd.cjs.map