如何在退出时停止Vue.js 3 watch（）API触发

我在显示产品信息的Vue组件中实现了一个

watch

。

watch

监视

vue路由器的
route
对象，以更改
ProductID
参数。当它发生变化时，我想从后端API获取产品详细信息

要查看
路线
，我在
Product.vue
中执行此操作：

import { useRoute } from 'vue-router'

    export default {
      setup() {
        const route = useRoute();

        async function getProduct(ProductID) {
          await axios.get(`/api/product/${ProductID}`).then(..do something here)
        }
    
        // fetch the product information when params change
        watch(() => route.params.ProductID, async (newID, oldID) => {
            await getProduct(newId)
          },
          //watch options
          {
          deep: true,
          immediate: true
          }
        )
      },
    }

上述代码有效，但如果用户离开
Product.vue
，例如使用“后退”按钮返回主页，则会再次触发
watch
，并尝试使用
undefined
作为产品ID调用API（因为
ProductID
param在主页
route
上不存在）例如
http://localhost:8080/api/product/undefined
。这会在应用程序中引发错误

当用户离开
Product.vue
时，为什么会触发
watch
如何正确地防止这种情况？我可以使用
if（newID）{await getProduct（newID）}
来实现，但这似乎与
手表应该执行的操作背道而驰

watch
在vue内部但与组件无关的对象中注册观察者。我认为这是一个
Map
。因此销毁组件对反应性系统没有影响


只需忽略
newID
未定义的情况，就像您已经做过的那样。但是为了防止将代码包装在一个大的
if
块中，只需在回调开始时使用
if（newID==undefined）return；
即可。如果您的ID总是真实的（
0
和
“
都是无效ID）您甚至可以使用
if（！newID）return；


在不使用监视选项的情况下进行尝试监视选项是必需的，否则页面上不会显示任何内容这是关于
watch
不依赖某个组件的文档吗？希望了解更多关于它的工作原理以及它在Vue生命周期中的位置。