Решение проблемы с undefined refs в Vue при定位е DOM

Раньше, работая в компании над проектом, я всегда чувствовал, что использование ref для определения DOM-узлов очень удобно. Но в процессе遇到了 проблему,即在挂钩е mounted(){} используется this.$refs.xxx, и выводится undefined?

Таким образом, я сравнил.vue файлы, используемые ранее для определения ref, и обнаружил между ними различия.

Чтобы понять, почему не удается определить какой-либо DOM-узел, сначала нужно понять, для чего используется функция挂钩а mounted(){}.

Ниже приведен официальный список жизненного цикла vue (часть), как сказано в официальном документе, в начале не нужно его понимать, но по мере вашего обучения и использования, его значение будет越来越高.

　

Таким образом, на этапе mounted структура DOM готова, но здесь готовность требует особого внимания:

Структура DOM уже готова, но если в структуре DOM используется какой-либо узел с v-if, v-show или v-for (т.е. динамическое управление DOM на основе полученных данных с сервера, т.е. ретрансляция), то эти DOM не будут найдены в этапе mounted.

Этот этап mounted, как правило, используется для инициации запросов к серверу, получения данных,配合路由 г钩и для выполнения некоторых операций, просто говоря, это загрузка данных в挂钩е mounted, возвращенные данные не будут обновлять DOM в этой фазе

Так что, если в挂钩е mounted использовать $refs, и если ref является локализацией в DOM-узле с v-if, v-for, v-show, возвращается только undefined, потому что в этапе mounted они просто не существуют!!!

После проверки выяснилось, что上面的端文字是错误的,的主要原因是因为 $refs не может быть определен, если v-if, v-for, v-show и т.д. зависят от параметров, переданных родительским компонентом, эти параметры еще не получены под-child в фазе mounted()......!!!!

Если вы хотите получить данные, когда DOM действительно загружен, вам нужно вызвать глобальный api VUE: this.$nextTick(() => {})

Если сказать, что фаза mounted - это фаза загрузки, то фаза updated - это фаза, в которой данные обновляются до DOM (обработка загруженных данных), в этот момент все ref, данные и т.д.挂在DOM-структуре, в фазе update использование this.$refs.xxx гарантирует, что вы一定能找到该DOM-узел.

Updated и mounted отличаются тем, что каждый раз при обновлении DOM-структуры Vue вызывает钩инговую функцию updated(){}! А mounted выполняется только один раз.

Кратко говоря, если при отладке можно увидеть наличие элемента, его можно использовать в фазе updated, чтобы найти соответствующий DOM-узел с помощью this.$refs.xxx!

Что касается использования $refs, официальная документация особенно указала следующее:

　

Внимание при использовании - -

Вот и все, что есть в этой статье, надеюсь, это поможет вам в изучении. также希望大家多多支持呐喊教程。

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета в качестве добровольного вклада и загружен самостоятельно. Веб-сайт не обладает правами собственности и не производил ручную редактуру, не несет ответственности за связанные с этим юридические обязательства. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении факта нарушения, сайт незамедлительно удалят涉嫌侵权的内容。