Fix issues with computed refs recomputing every time

This is a Vue issue (vuejs/core#12337), where computed refs that have no reactive dependencies will be recomputed every time. The issue was masked by the access of `instance[vueStoreWatchScope]` in the watch code, but Reactive doesn't use watches, so it was still encountering the issue.

Author: thecodewarrior

src/index.ts

@@ -11,6 +11,7 @@ export function createStore<T extends object>(model: T): T {
   const reactiveInstance = reactive(model)
   addComputed(reactiveInstance, descriptors)
   createWatches(reactiveInstance, descriptors)
+  fixRecomputeIfNoDeps()
   return reactiveInstance as T
 }
 
@@ -32,6 +33,7 @@ export class Reactive {
     const reactiveThis = reactive(this)
     // watches require late initialization to work properly, so we only do computed properties
     addComputed(reactiveThis, descriptors)
+    fixRecomputeIfNoDeps()
     return reactiveThis
   }
 }
@@ -81,6 +83,7 @@ const VueStore: VueStore = function VueStore(this: object, constructor?: { new(.
           if (wrapperClass.prototype === Object.getPrototypeOf(this)) {
             addComputed(reactiveThis, descriptors)
             createWatches(reactiveThis, descriptors)
+            fixRecomputeIfNoDeps()
           }
           return reactiveThis
         }
@@ -98,3 +101,17 @@ const vueStoreDecorated = Symbol("vue-class-store__decorated")
 function isDecorated(prototype: object) {
   return Object.hasOwn(prototype, vueStoreDecorated)
 }
+
+/**
+ * Creates a reactive dependency on a static value, which alleviates the issue where computed properties with no
+ * dependencies are recomputed every time (see issue: [vuejs/core#12337](https://github.com/vuejs/core/issues/12337))
+ *
+ * This can safely be removed when [vuejs/core#12341](https://github.com/vuejs/core/pull/12341) is merged and released
+ */
+function fixRecomputeIfNoDeps() {
+  // we use a key into an object instead of a ref because it'll show up more clearly in the renderTriggered debug report
+  noDepTarget[noDepKey]
+}
+
+const noDepKey = Symbol("vue-class-store__noDepFix")
+const noDepTarget = reactive({})

tests/shared_common.ts

@@ -1,6 +1,6 @@
 import {assert, expect} from 'chai';
 import {computed} from "vue";
-import {spy} from "./test_utils";
+import {bumpGlobalVersion, spy} from "./test_utils";
 
 /**
  * Shared between `createStore`, `@VueStore`, and `extends Reactive`
@@ -61,6 +61,7 @@ export function testCommon(
       })
 
       cachedComputed.value // <- constructs first value
+      bumpGlobalVersion()
       cachedComputed.value // <- should be cached
       expect(constructSpy).to.be.called.once
     });
@@ -83,6 +84,7 @@ export function testCommon(
         })
 
         cachedComputed.value // <- constructs first value
+        bumpGlobalVersion()
         cachedComputed.value // <- should be cached
         expect(constructSpy).to.be.called.once
       });
@@ -106,6 +108,7 @@ export function testCommon(
         })
 
         cachedComputed.value // <- constructs first value
+        bumpGlobalVersion()
         cachedComputed.value // <- should be cached
         expect(constructSpy).to.be.called.once
       });
@@ -128,6 +131,7 @@ export function testCommon(
         })
 
         cachedComputed.value // <- constructs first value
+        bumpGlobalVersion()
         cachedComputed.value // <- won't be cached
         expect(constructSpy).to.be.called.exactly(2)
       });
@@ -158,6 +162,7 @@ export function testCommon(
         })
 
         cachedComputed.value // <- constructs first value
+        bumpGlobalVersion()
         cachedComputed.value // <- should be cached
         expect(constructSpy).to.be.called.once
       });
@@ -183,6 +188,7 @@ export function testCommon(
       })
 
       cachedComputed.value // <- constructs first value
+      bumpGlobalVersion()
       cachedComputed.value // <- should be cached
       expect(constructSpy).to.be.called.once
     });
@@ -206,6 +212,7 @@ export function testCommon(
       })
 
       cachedComputed.value // <- constructs first value
+      bumpGlobalVersion()
       cachedComputed.value // <- won't be cached
       expect(constructSpy).to.be.called.exactly(2)
     });
@@ -236,6 +243,7 @@ export function testCommon(
       })
 
       cachedComputed.value // <- constructs first value
+      bumpGlobalVersion()
       cachedComputed.value // <- should be cached
       expect(constructSpy).to.be.called.once
     });
@@ -268,6 +276,7 @@ export function testCommon(
       })
 
       cachedComputed.value // <- constructs first value
+      bumpGlobalVersion()
       cachedComputed.value // <- should be cached
       expect(constructSpy).to.be.called.once
     });

tests/test_utils.ts

@@ -1,6 +1,6 @@
 import chai from 'chai';
 import {default as spiesPlugin} from 'chai-spies';
-import {watch, WatchSource} from "vue";
+import {ref, watch, WatchSource} from "vue";
 
 chai.use(spiesPlugin)
 
@@ -114,3 +114,11 @@ export async function testGC<V>(
   }
   return ratio > threshold
 }
+
+/**
+ * Computed values won't check if they're dirty when the global version is unchanged, so this will bump it to ensure the
+ * dirty check actually runs.
+ */
+export function bumpGlobalVersion() {
+  ref(0).value++
+}

tests/vuestore_extends.spec.ts

@@ -1,7 +1,7 @@
 import {assert, expect} from 'chai';
 import VueStore from '../src';
 import Vue, {computed, nextTick, reactive, watch} from "vue";
-import {spy, SpySet} from "./test_utils";
+import {bumpGlobalVersion, spy, SpySet} from "./test_utils";
 import {testWatches} from "./shared_watches";
 import {testProperties} from "./shared_properties";
 import {testPrivateMembers} from "./shared_private_members";
@@ -125,6 +125,7 @@ describe("@VueStore + extends VueStore", () => {
       })
 
       cachedComputed.value // <- constructs first value
+      bumpGlobalVersion()
       cachedComputed.value // <- should be cached
       expect(constructSpy).to.be.called.once
     });
@@ -147,6 +148,7 @@ describe("@VueStore + extends VueStore", () => {
       })
 
       cachedComputed.value // <- constructs first value
+      bumpGlobalVersion()
       cachedComputed.value // <- won't be cached
       expect(constructSpy).to.be.called.exactly(2)
     });
@@ -177,6 +179,7 @@ describe("@VueStore + extends VueStore", () => {
       })
 
       cachedComputed.value // <- constructs first value
+      bumpGlobalVersion()
       cachedComputed.value // <- should be cached
       expect(constructSpy).to.be.called.once
     });