fix(useRouteHash, useRouteParams, useRouteQuery): fix effect triggering multiple times (#4113)

Author: aethr

packages/router/useRouteHash/index.test.ts

@@ -1,5 +1,5 @@
-import { nextTick, reactive, ref } from 'vue-demi'
-import { describe, expect, it } from 'vitest'
+import { computed, nextTick, reactive, ref, watch } from 'vue-demi'
+import { describe, expect, it, vi } from 'vitest'
 import { useRouteHash } from '.'
 
 describe('useRouteHash', () => {
@@ -74,6 +74,28 @@ describe('useRouteHash', () => {
     expect(hash.value).toBe('foo')
   })
 
+  it('should trigger effects only once', async () => {
+    const route = getRoute()
+    const router = { replace: (r: any) => Object.assign(route, r) } as any
+    const onUpdate = vi.fn()
+
+    const hash = useRouteHash('baz', { route, router })
+    const hashObj = computed(() => ({
+      hash: hash.value,
+    }))
+
+    watch(hashObj, onUpdate)
+
+    hash.value = 'foo'
+
+    await nextTick()
+    await nextTick()
+
+    expect(hash.value).toBe('foo')
+    expect(route.hash).toBe('foo')
+    expect(onUpdate).toHaveBeenCalledTimes(1)
+  })
+
   it('should allow ref or getter as default value', () => {
     let route = getRoute()
     const router = { replace: (r: any) => route = r } as any

packages/router/useRouteHash/index.ts

@@ -51,6 +51,9 @@ export function useRouteHash(
   watch(
     () => route.hash,
     () => {
+      if (route.hash === _hash)
+        return
+
       _hash = route.hash
       _trigger()
     },

packages/router/useRouteParams/index.test.ts

@@ -1,4 +1,4 @@
-import { effectScope, nextTick, reactive, ref, watch } from 'vue-demi'
+import { computed, effectScope, nextTick, reactive, ref, watch } from 'vue-demi'
 import { describe, expect, it, vi } from 'vitest'
 import type { Ref } from 'vue-demi'
 import { useRouteParams } from '.'
@@ -216,6 +216,28 @@ describe('useRouteParams', () => {
     expect(onUpdate).not.toHaveBeenCalled()
   })
 
+  it('should trigger effects only once', async () => {
+    const route = getRoute()
+    const router = { replace: (r: any) => Object.assign(route, r) } as any
+    const onUpdate = vi.fn()
+
+    const page = useRouteParams('page', 1, { transform: Number, route, router })
+    const pageObj = computed(() => ({
+      page: page.value,
+    }))
+
+    watch(pageObj, onUpdate)
+
+    page.value = 2
+
+    await nextTick()
+    await nextTick()
+
+    expect(page.value).toBe(2)
+    expect(route.params.page).toBe(2)
+    expect(onUpdate).toHaveBeenCalledTimes(1)
+  })
+
   it('should keep current query and hash', async () => {
     let route = getRoute()
     const router = { replace: (r: any) => route = r } as any

packages/router/useRouteParams/index.ts

@@ -92,6 +92,9 @@ export function useRouteParams<
   watch(
     () => route.params[name],
     (v) => {
+      if (param === v)
+        return
+
       param = v
 
       _trigger()

packages/router/useRouteQuery/index.test.ts

@@ -1,4 +1,4 @@
-import { effectScope, nextTick, reactive, ref, watch } from 'vue-demi'
+import { computed, effectScope, nextTick, reactive, ref, watch } from 'vue-demi'
 import { describe, expect, it, vi } from 'vitest'
 import type { Ref } from 'vue-demi'
 import { useRouteQuery } from '.'
@@ -226,6 +226,28 @@ describe('useRouteQuery', () => {
     expect(onUpdate).not.toHaveBeenCalled()
   })
 
+  it('should trigger effects only once', async () => {
+    const route = getRoute()
+    const router = { replace: (r: any) => Object.assign(route, r) } as any
+    const onUpdate = vi.fn()
+
+    const page = useRouteQuery('page', 1, { transform: Number, route, router })
+    const pageObj = computed(() => ({
+      page: page.value,
+    }))
+
+    watch(pageObj, onUpdate)
+
+    page.value = 2
+
+    await nextTick()
+    await nextTick()
+
+    expect(page.value).toBe(2)
+    expect(route.query.page).toBe(2)
+    expect(onUpdate).toHaveBeenCalledTimes(1)
+  })
+
   it('should keep current query and hash', async () => {
     let route = getRoute()
     const router = { replace: (r: any) => route = r } as any

packages/router/useRouteQuery/index.ts

@@ -89,6 +89,9 @@ export function useRouteQuery<
   watch(
     () => route.query[name],
     (v) => {
+      if (query === v)
+        return
+
       query = v
 
       _trigger()