fix(useStorage): read object only when it's serialized differently (#…

…2782) (#3091)

Co-authored-by: chenglu <jiale.qiu@unionman.com.cn>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/useStorage/index.test.ts

@@ -1,5 +1,5 @@
 import { debounceFilter, promiseTimeout } from '@vueuse/shared'
-import { isVue3, ref } from 'vue-demi'
+import { isVue3, ref, toRaw } from 'vue-demi'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTwoTick, useSetup } from '../../.test'
 import { StorageSerializers, customStorageEventName, useStorage } from '.'
@@ -164,10 +164,12 @@ describe('useStorage', () => {
       data: 123,
     })
 
+    const storeRaw = toRaw(store.value)
     store.value.name = 'b'
     await nextTwoTick()
 
     expect(storage.setItem).toBeCalledWith(KEY, '{"name":"b","data":123}')
+    expect(storeRaw).toBe(toRaw(store.value))
 
     store.value.data = 321
     await nextTwoTick()

packages/core/useStorage/index.ts

@@ -254,7 +254,8 @@ export function useStorage<T extends(string | number | boolean | object | null)>
 
     pauseWatch()
     try {
-      data.value = read(event)
+      if (event?.newValue !== serializer.write(data.value))
+        data.value = read(event)
     }
     catch (e) {
       onError(e)