Vue Router和VueJS的反应性

Question

I've got this code for my vue-router :

{ 
   path: '/templates/:id/items/:itemId', component: Item,
   name: 'item'
},

On the item object, I've got a computed property templateId :

templateId() {
   return parseInt(this.$route.params.id, 10);
},

The issue I have, is, each time I add an anchor to the url (clicking a link, INSIDE the item component), even if the component doesn't change, this property is computed again.

It means that all computed properties depending of templateId will be computed again.

But the templateId value doesn't change at all.

Here is a really simple jsfiddle to explain the issue:

https://jsfiddle.net/1Lgfn9qh/1/

If I remove the watch property (never called), nothing is logged in the console anymore.

Can you explain me what's happening here? Why the computed properties are recomputed, even if no values has been updated? How can I avoid that?

Answer 1

What's causing this behaviour is the fact, that the route object is immutable in Vue. Any successful navigation will result in a completely new route object therefore triggering a re-computation of all computed and watched properties. See https://router.vuejs.org/api/#the-route-object for more details.

To solve this you can watch the route object and filter the relevant vs irrelevant changes for you there

watch: {
  '$route' (to, from) {
    if(to.path != from.path) { // <- you may need to change this according to your needs!
      this.relevantRoute = to
    }
  }
}

And then reference the manually set variable in your computed and/or watched properties

templateId() {
  return parseInt(this.relevantRoute.params.id, 10);
},