fix(useRouteParams, useRouteQuery): effect triggers twice with object…

… getter as watch source (vueuse#4283)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/router/useRouteParams/index.test.ts

@@ -238,6 +238,27 @@ describe('useRouteParams', () => {
     expect(onUpdate).toHaveBeenCalledTimes(1)
   })
 
+  it('should trigger effects only once with getter object as watch source', async () => {
+    const route = getRoute({ page: '1' })
+    const router = { replace: (r: any) => {
+      Object.keys(r.params).forEach(paramsKey => r.params[paramsKey] = String(r.params[paramsKey]))
+      return Object.assign(route, r)
+    } } as any
+    const onUpdate = vi.fn()
+
+    const page = useRouteParams('page', 1, { transform: Number, route, router })
+
+    watch(() => ({ page: page.value }), 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,7 +92,7 @@ export function useRouteParams<
   watch(
     () => route.params[name],
     (v) => {
-      if (param === v)
+      if (param === transform(v as T))
         return
 
       param = v

packages/router/useRouteQuery/index.test.ts

@@ -248,6 +248,27 @@ describe('useRouteQuery', () => {
     expect(onUpdate).toHaveBeenCalledTimes(1)
   })
 
+  it('should trigger effects only once with getter object as watch source', async () => {
+    const route = getRoute({ page: '1' })
+    const router = { replace: (r: any) => {
+      Object.keys(r.query).forEach(queryKey => r.query[queryKey] = String(r.query[queryKey]))
+      return Object.assign(route, r)
+    } } as any
+    const onUpdate = vi.fn()
+
+    const page = useRouteQuery('page', 1, { transform: Number, route, router })
+
+    watch(() => ({ page: page.value }), 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,7 +89,7 @@ export function useRouteQuery<
   watch(
     () => route.query[name],
     (v) => {
-      if (query === v)
+      if (query === transform(v as T))
         return
 
       query = v