@whitesev/utils 2.10.0 → 2.11.0

package/dist/index.umd.js

@@ -243,7 +243,7 @@
     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==
@@ -5340,7 +5340,6 @@
         }
     }
 
-    // @ts-nocheck
     const VueUtils = {
         /** 标签 */
         ReactiveFlags: {
@@ -5380,9 +5379,11 @@
         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) {
@@ -5400,6 +5401,18 @@
                 }
             }
         }
+        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;
@@ -5469,9 +5482,7 @@
                 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;
                 },
             });
@@ -5482,8 +5493,9 @@
          * 观察被reactive的对象值改变
          * @param source 被观察的对象，这里采用函数返回对象
          * @param changeCallBack 值改变的回调
+         * @param options 配置项
          */
-        watch(source, changeCallBack) {
+        watch(source, changeCallBack, options) {
             let getter;
             if (VueUtils.isReactive(source)) {
                 getter = () => this.traversal(source);
@@ -5495,17 +5507,35 @@
                 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;
@@ -5523,28 +5553,40 @@
             }
             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);
@@ -8226,14 +8268,39 @@
         /**
          * 自定义的动态响应对象
          * @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;