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

[chenglu4343]

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

⚠️ Slowing down new functions

Warning: Slowing down new functions

As the VueUse audience continues to grow, we have been inundated with an overwhelming number of feature requests and pull requests. As a result, maintaining the project has become increasingly challenging and has stretched our capacity to its limits. As such, in the near future, we may need to slow down our acceptance of new features and prioritize the stability and quality of existing functions. Please note that new features for VueUse may not be accepted at this time. If you have any new ideas, we suggest that you first incorporate them into your own codebase, iterate on them to suit your needs, and assess their generalizability. If you strongly believe that your ideas are beneficial to the community, you may submit a pull request along with your use cases, and we would be happy to review and discuss them. Thank you for your understanding.

---

Description

details in #2782

The customStorageEventName is used to synchronize storage across different locations. When a storage stores an object and triggers a change, it also triggers this customStorageEventName, which then performs a read operation. As a result, each time the data is changed, it proxies a new object, leading to the triggering of many unexpected watches.

Additional context

---

🤖 Generated by Copilot at 7addf79

Fixed a bug in useStorage hook that caused unwanted reactivity and mutation when using deep reactive objects. Added a test case to verify the fix.

🤖 Generated by Copilot at 7addf79

• Prevent mutating store ref when using deep reactive objects in useStorage hook (link, link, link)

• Import toRaw function from vue-demi in useStorage/index.test.ts to access the raw value of the store ref (link)
• Modify update function in useStorage/index.ts to compare serialized values and avoid updating data ref if new value is an object and equal to current value (link)
• Add test case in useStorage/index.test.ts to assert that storage.setItem is called with expected value and store ref is not changed when modifying a property of a deep reactive object (link)

[antfu]

This doesn't seem to be very efficient. We better:

• Compare raw data with the serialized data.value (one serialization)
• And read the event when they are not equal (one parsing)

[chenglu4343]

thanks