Для отладки проблем с шаблонами я обычно рекомендую переносить любую сложную логику в метод. Оттуда легко отладить с помощью типичных инструментов.
Проблемы с вычислениями Vue обычно делятся на три лагеря:
<сильный>1. Вы отлаживаете какую-то сложную логику в вычисляемом
В этом случае попробуйте перенести сложность в метод и просто вызвать его из вычисляемого. Затем вы можете использовать debugger, console.log и точки останова, как вам больше нравится.
Однако, когда вы делаете это, вам нужно убедиться, что любые данные/реквизиты, от которых вы зависите для реактивности, остаются в определении вычислений, чтобы вы не нарушили реактивность. В этом подходе вычисление становится больше сбором аргументов для метода/методов, которые выполняют тяжелую работу.
<сильный>2. Ваша логика довольно проста, но работает не так, как ожидалось
В этих случаях я обычно открываю Vue devtools, выбираю компонент, которому принадлежит вычисляемый компонент, а затем использую $vm для проверки состояния компонента и запускаю промежуточные фрагменты вычисляемой логики, пока не найду проблему.
Вы можете получить доступ к любым данным/реквизитам/вычислениям непосредственно на $vm, например $vm.myProp.
Обратите внимание, что вы должны выбрать компонент в devtools для установки $vm.
<сильный>3. Расчетное значение зависит от реактивности, но не меняется
Здесь мой подход часто совпадает с № 2.
Есть ли опечатки в названиях реактивных элементов, от которых вы зависите? Если что-то всегда оценивается как ложное, это может быть связано с тем, что опечатка относится к несуществующему свойству и возвращает undefined (ложь).
Кроме того, если вы зависите от изменения вложенного состояния данных или реквизита, убедитесь, что вы используете Vue.set / this.$set в зависимости от ситуации.
person
Matt Sanders
schedule
17.03.2021
