Vue 3 避坑指南(一):避免使用 watch(route)
问题背景
当组件需要响应路由更新的时候,有人提到可以用 watch(route) 方法。这个方法可以监听路由的一切变化。比如,对于一个文章组件,我们可以通过监听路由来达到重新获取文章的目的:
1 | // 监听路由的变化。当我们的路由从 `/articles/1` 跳转到 `/articles/2` 时,下面的执行逻辑是正确的。 |
但是,请千万别这么用。此时组件不仅监听了当前组件路由的变化,也监听了别的组件的路由变化。当路由跳转到不属于当前组件的路由时,上述 watch 响应可能会触发,从而导致错误的执行逻辑:
1 | watch(route, async () => { |
所以,请避免使用 watch(route),因为它可能会监听到不属于自身的路由变化。