@whitesev/utils 2.10.0 → 2.11.0

package/dist/index.esm.js

@@ -237,7 +237,7 @@ const clearTimeout$1 = (timerId) => loadOrReturnBroker().clearTimeout(timerId);
 const setInterval$1 = (...args) => loadOrReturnBroker().setInterval(...args);
 const setTimeout$1 = (...args) => loadOrReturnBroker().setTimeout(...args);
 
-const version = "2.10.0";
+const version = "2.11.0";
 
 /* eslint-disable */
 // ==UserScript==
@@ -5334,7 +5334,6 @@ class GMMenu {
     }
 }
 
-// @ts-nocheck
 const VueUtils = {
     /** 标签 */
     ReactiveFlags: {
@@ -5374,9 +5373,11 @@ class ReactiveEffect {
     active = true;
     fn;
     scheduler;
-    constructor(fn, scheduler) {
+    options;
+    constructor(fn, scheduler, options) {
         this.fn = fn;
         this.scheduler = scheduler;
+        this.options = options; // 默认值为'same'
     }
     run(cb) {
         if (!this.active) {
@@ -5394,6 +5395,18 @@ class ReactiveEffect {
             }
         }
     }
+    stop() {
+        if (this.active) {
+            // 清除依赖关系
+            if (this.deps && this.deps.length) {
+                this.deps.forEach((dep) => {
+                    dep.delete(this);
+                });
+                this.deps.length = 0;
+            }
+            this.active = false;
+        }
+    }
 }
 class RefImpl {
     _value;
@@ -5463,9 +5476,7 @@ class Vue {
             set(target, key, value, receiver) {
                 const oldValue = target[key];
                 const result = Reflect.set(target, key, value, receiver);
-                if (oldValue !== value) {
-                    that.trigger(target, "set", key, oldValue, value);
-                }
+                that.trigger(target, "set", key, oldValue, value);
                 return result;
             },
         });
@@ -5476,8 +5487,9 @@ class Vue {
      * 观察被reactive的对象值改变
      * @param source 被观察的对象，这里采用函数返回对象
      * @param changeCallBack 值改变的回调
+     * @param options 配置项
      */
-    watch(source, changeCallBack) {
+    watch(source, changeCallBack, options) {
         let getter;
         if (VueUtils.isReactive(source)) {
             getter = () => this.traversal(source);
@@ -5489,17 +5501,35 @@ class Vue {
             return;
         }
         let oldValue;
+        const unwatch = () => {
+            effect.stop();
+        };
         const job = () => {
             const newValue = effect.run((activeEffect) => {
                 this.activeEffect = activeEffect;
             });
             changeCallBack(newValue, oldValue);
+            if (options?.once) {
+                // 仅触发一次
+                unwatch();
+            }
             oldValue = newValue;
         };
-        const effect = new ReactiveEffect(getter, job);
+        const effect = new ReactiveEffect(getter, job, {
+            triggerMethod: "not-same",
+            ...(options ?? {}),
+        });
         oldValue = effect.run((activeEffect) => {
             this.activeEffect = activeEffect;
         });
+        if (options) {
+            if (options.immediate) {
+                job();
+            }
+        }
+        return {
+            unwatch,
+        };
     }
     toReactive(value) {
         return VueUtils.isObject(value) ? this.reactive(value) : value;
@@ -5517,28 +5547,40 @@ class Vue {
         }
         return result;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     trigger(target, type, key, oldValue, value) {
         const depsMap = this.targetMap.get(target);
         if (!depsMap)
             return;
         const effects = depsMap.get(key);
-        this.triggerEffect(effects, "effects");
+        this.triggerEffect(effects, type, "effects", oldValue, value);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    triggerEffect(effects, name) {
+    triggerEffect(effects, _type, _name, oldValue, value) {
         if (effects) {
+            const isSame = oldValue === value;
             effects.forEach((effect) => {
-                if (effect.scheduler) {
-                    effect.scheduler();
+                if (effect.options.triggerMethod === "not-same") {
+                    if (isSame) {
+                        return;
+                    }
+                    if (effect.scheduler) {
+                        effect.scheduler();
+                    }
+                    else {
+                        effect.run();
+                    }
                 }
-                else {
-                    effect.run();
+                else if (effect.options.triggerMethod === "set") {
+                    if (effect.scheduler) {
+                        effect.scheduler();
+                    }
+                    else {
+                        effect.run();
+                    }
                 }
             });
         }
     }
-    track(target, type, key) {
+    track(target, _type, key) {
         if (!this.activeEffect)
             return;
         let depsMap = this.targetMap.get(target);
@@ -8220,14 +8262,39 @@ class Utils {
     /**
      * 自定义的动态响应对象
      * @example
-     * let vue = new Utils.Vue();
-     * let reactive = new vue.reactive({});
-     * vue.watch(()=>reactive["name"], (newValue, oldValue)=>{
+     * const vue = new Utils.Vue();
+     * const reactive = vue.reactive({
+     *   name: "",
+     * });
+     * vue.watch(()=>reactive.name, (newValue, oldValue)=>{
+     *     console.log("newValue ==> " + newValue);
+     *     console.log("oldValue ==> " + oldValue);
+     * })
+     * reactive.name = "测试";
+     * > newValue ==> 测试
+     * > oldValue ==>
+     * reactive.name = "null";
+     * > newValue ==> null
+     * > oldValue ==> 测试
+     * reactive.name = "null";
+     * @example
+     * const vue = new Utils.Vue();
+     * const reactive = vue.reactive({
+     *   name: "",
+     * });
+     * vue.watch(()=>reactive.name, (newValue, oldValue)=>{
      *     console.log("newValue ==> " + newValue);
      *     console.log("oldValue ==> " + oldValue);
+     * },{
+     *   triggerMethod: "set",
      * })
-     * vue["name"] = "测试";
-     * > "测试"
+     * reactive.name = "测试";
+     * > newValue ==> 测试
+     * > oldValue ==>
+     * reactive.name = "测试";
+     * > newValue ==> 测试
+     * > oldValue ==> 测试
+     *
      */
     Vue = Vue;
     ModuleRaid = ModuleRaid;