useRoute() is not reactive

[ModyQyW]

Repo

Live Demo

npm i -g pnpm
pnpm install
pnpm run dev

• Should See route.query: {} at first.
• Step 1: Click toQuery button. Should see route.query: { "a": "1" }.
• Step 2: Click useQuery2 button. Should see route.query: { "a": "2" }, but actually see route.query: { "a": "1" }.
• Step 3: Click useQuery1 button. Should see route.query: { "a": "1" }.

Why I see route.query: { "a": "1" } in Step 2? I did something wrong? Any suggestions? :D

• 一开始应该会看到 route.query: {}。
• 步骤 1：点击 toQuery 按钮。应该会看到 route.query: { "a": "1" }。
• 步骤 2：点击 useQuery2 按钮。应该会看到 route.query: { "a": "2" }，但实际上看到 route.query: { "a": "1" }。
• 步骤 3：点击 useQuery1 按钮。应该会看到 route.query: { "a": "1" }。

为什么我在步骤 2 会看到 route.query: { "a": "1" }？我写错哪里了吗？有什么建议吗？:D

[ModyQyW]

I used vuejs/composition-api#809 (comment) temporarily to solve this problem.

[ambit-tsai]

It was fixed in v1.1.6.

[ModyQyW]

I just update to 1.1.6 and find the bug is still there. Just try the live demo please. @ambit-tsai

[ambit-tsai]

That's my fault. I‘ve test on your demo, then changed the source code in your repo.
This leads to differences in results. I will debug it later.

[ModyQyW]

Could you please reopen it? And close it again after fixed. Thanks.

[jhxxs]

this problem still exists🤔

[Zhang-Wei-666]

@ambit-tsai 不是响应式的问题解决了, 有空看看么 ~

[ModyQyW]

这个库的描述是 A util package to use Vue 2 with Composition API easily.。理论上，这个库应该要支持 Vue 2 支持的浏览器，即要支持所有兼容 ECMAScript 5 的浏览器，最少也要支持 IE 11。

toReactive 使用了 Proxy，它在 IE 11 上不能被 polyfill，破坏了 IE 11 的兼容性。我认为这不是一个合理的解决方案。

Links:

• toReactive
• Vue 2 兼容性
• Vue 3 Rfc vue3 ie11 support