vue3 watchEffect 自动卸载时机引发的疑问？-灵析社区

**个人背景：** 一枚前端开发 **问题场景：** 在开发的时候，有这样一个需求，有一个类似于进度条进度的数据 **mockData** ，A，B，页面都需要使用到这个数据，所以我选择把它放到全局的 pinia 里管理。并且在 A 页面用户点击按钮的时候，开始观察 mockData 的变化。（我这里选择使用了 wathcEffect） **场景模拟：** 1. 这是 mockData import { ref } from "vue"; const count = ref(0); //全局的进度条 mockData setInterval(() => { count.value++; // 不停 +1 console.log("count.value", count.value); }, 1000); export { count }; 2. 这是 A 页面的代码， B 页面没有什么重要的代码，只是作为一个路由跳转到的界面而已。（无需关系 B 页面做了什么） import { watchEffect } from "vue"; import { useRouter } from "vue-router"; import { count } from "@/count++"; const router = useRouter(); function test() { watchEffect(() => { const a = count.value; console.log("a", a); if (a === 10) { router.replace("/red"); } }); } click 3. 我进到 A 页面点击按钮，开始观察 mockData 的变化，当 a 到10的时候，页面跳转 到 B 页面。  4. 此时错误的预期发生了，页面到了 B ，但是对 a 的打印还在输出。  5. 我将 watchEffect 移出函数，则一切正常  **问题：** 为什么会导致这样的现象呢？为什么页面都消失了，但是对于 a 的watch 还没停止。