Почему здесь не происходит бесконечный рендер Vue-компонента?

Question

[EranosyanEduard]

Здравствуйте. Я - фронтенд-разработчик, разработка происходит на VueJS.

В рамках рабочей задачи я должен преобразовать код оригинальных компонентов из библиотеки Vuetify в SFC-формат.

В данный момент я столкнулся с проблемой в компоненте VMenu. В подготовленном мною экземпляре VMenu я получаю ошибку: "mixin.ts:68 [Vue warn]: You may have an infinite update loop in a component render function.", которая происходит из-за вызова в render-функции метода genActivator. Код в данной части соответствует оригинальному Vuetify-коду. Причиной ошибки является то, что оригинальный метод genActivator изменяет состояние компонента (activatorNode).

Скажите, пжл, почему в оригинальном Vuetify-коде вызов данного метода в render-функции не приводит к указанной выше ошибке:
render-функция, определение метода genActivator

Comments

[Aetae]

В рамках рабочей задачи я должен преобразовать код оригинальных компонентов из библиотеки Vuetify в SFC-формат.

Зачем? Бесполезный труд по замедлению и забагованию кода, который никто не будет поддерживать...

По поводу вопроса: вроде как устанавливаемое свойство используется только в рамках самого вызова genActivator(установка и чтение происходит в одной атомарной операции) и, похоже, vue достаточно умный, чтоб не перерисовывать в таком случае. Не видя вашего кода - сложно сказать в чём разница.

[EranosyanEduard]

Aetae, большое спасибо за ваш ответ. Вы меня подтолкнули к проверке вашего предположения и действительно Vue не ругается, если в данном случае просто изменять значения состояния activatorNode.

Я подготовил пример, чтобы разговор был предметней.

Компонент VHover необходим только для провоцирования рендера компонента Example. В примере 2-а случая, провоцирующий ошибку и нет. Ошибка происходит при использовании слота default в явном виде.

Я обратил внимание, что если изменить тело метода getRoot компонента Example следующим образом, то всё работает корректно, но почему я не понимаю:

// Было
getRoot(): VNode[] {
  this.root = this.$scopedSlots.default(this.bindings) || [];
  return this.root;
}

// Стало
getRoot(): VNode[] {
  const root = this.$scopedSlots.default(this.bindings) || [];
  this.root = root;
  return root;
}

[Aetae]

EranosyanEduard, ну почему - понятно: во втором случае идёт только присвоение(set) this.root, в первом - сначала присвоение(set), потом получение(get).
Vue просто следит за get и set, и если был хотя-бы один get - при следующем set он дёргает render. (Плюс какие-то оптимизации на атомарность, очевидно не применяющиеся в данном примере).

Этот случай скорее всего не связан с основным вопросом.