Vue Router и VueJS реактивность - PullRequest
Новая
       20

Vue Router и VueJS реактивность

3 голосов
/ 02 июня 2019

У меня есть этот код для моего vue-router: 

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

В объекте item у меня есть вычисленное свойство templateId: 

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

Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда я добавляю привязку к URL-адресу (нажимая на ссылку, ВНУТРИ компонента item), даже если компонент не изменяется, это свойство вычисляется снова.

Это означает, что все вычисленные свойства в зависимости от templateId будут вычислены снова.

Но значение templateId вообще не меняется.

Вот действительно простой jsfiddle, чтобы объяснить проблему:

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

Если я удаляю свойство watch (никогда не вызываемое), в консоли больше ничего не регистрируется.

Можете ли вы объяснить мне, что здесь происходит? Почему вычисленные свойства пересчитываются, даже если значения не были обновлены? Как я могу избежать этого?

1 Ответ

2 голосов
/ 02 июня 2019

Причиной такого поведения является тот факт, что объект route является неизменным в Vue. Любая успешная навигация приведет к созданию совершенно нового объекта маршрута, что приведет к повторному вычислению всех вычисляемых и наблюдаемых свойств. См. https://router.vuejs.org/api/#the-route-object для более подробной информации.

Чтобы решить эту проблему, вы можете watch объект маршрута и отфильтровать релевантные и нерелевантные для вас изменения там 

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

А затем ссылаться на переменную, установленную вручную, в ваших вычисляемых и / или наблюдаемых свойствах 

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