Vue.js высокая загрузка процессора без взаимодействия

#vue.js #vuejs2 #vue-reactivity

#vue.js #vuejs2 #vue-реактивность

Вопрос:

Я разрабатываю веб-сайт с компонентом vue: я написал несколько компонентов vue (на основе bootstrap-vue) и использую их как обычные html-теги (но с атрибутами v-bind для передачи значений) в свой html (чтобы они были «в DOM»).). Все в порядке, за исключением того, что браузер (chrome) использует почти 100% процессора при отображении страницы (0%, если страница все еще доступна, но отображается другая вкладка).

Нет взаимодействия с пользователем (щелчок, перемещение указателя, …) и нет запущенного кода (таймеры, асинхронные вызовы …), Поэтому (я думаю) не должно быть запущено javascript и почти не используется процессор.

Может быть, с реактивностью происходит что-то странное? Возможно, проблема с основным циклом Vue, например, событие (изменение значения), вызывающее одно и то же событие (изменение значения), вызывающее одно и то же событие (изменение значения) ….. и так далее…

Есть идеи о причине проблемы? Есть ли какой-либо способ узнать, запущен ли какой-либо код javascript или какой-либо специальный инструмент vue?

Комментарии:

1. Вы можете использовать вкладку «Производительность» в «Инструментах разработчика» и записать свою страницу на одну секунду, а затем посмотреть, какие сценарии вызываются

2. На вкладке производительность у меня есть только график кадров в секунду и никаких данных, связанных со сценарием. Что такое кадры / сек, всегда ли Vue обновляет событие, даже если изменений вообще нет?

3. Посмотрите дальше на этой вкладке. Это должно быть в нижней панели на вкладке Снизу вверх. Вы расширяете «Вызов функции»

4. Спасибо, Селим, но я очень внимательно посмотрел, и в Chrome и Firefox нет такого «вызова функции», связанного с «вызовом функции». Под «Инструментами разработчика» вы подразумеваете официальный плагин vue?