Инструкции Vue: разница между v-if и v-show

Оглавление

предисловие 

1. Что такое v-if и v-show?

Во-вторых, разница между v-if и v-show

        1. Различные принципы управления

        2. Процесс компиляции отличается

        3. Производительность потребления отличается

Подведем итог:


предисловие 

        Говоря о фреймворке Vue.js, который родился в 2013 году, Ю Юйси, работающий в Google, был вдохновлен Angular, извлек из него свои любимые части и разработал облегченный фреймворк. Популярный сегодня во всем мире фреймворк Vue.js содержит множество встроенных инструкций, сегодня мы подробно остановимся на встроенных инструкциях Vue v-if и v-show и приложим пример для иллюстрации .


1. Что такое v-if и v-show?

         v-show и v-if — это часто используемые директивы Vue, часто используемые для управления шаблонами и элементами.


Во-вторых, разница между v-if и v-show

        1. Различные принципы управления

                Принцип управления v-if заключается в уничтожении или создании элементов во всем дереве dom для достижения эффекта управления рендерингом, а v-show

        Принцип управления заключается в добавлении display: none для скрытия или отображения элементов, которые необходимо обработать.

        2. Процесс компиляции отличается

                v-if является «истинным» условным рендерингом, потому что он гарантирует, что обработчики событий и дочерние компоненты внутри условного блока будут надлежащим образом уничтожены и воссозданы во время перехода. v-show намного проще — элемент всегда отображается независимо от начального состояния и просто переключается на основе CSS.

        3. Производительность потребления отличается

                Переключение v-if требует работы с деревом dom, поэтому частое использование переключения v-if потребляет много производительности. Однако v-show уже отобразил все данные в начальном состоянии, поэтому потребление производительности v-show в начальном состоянии относительно велико. Поэтому потребность требует частого использования переключения между скрытием и отображением на странице, рекомендуется использовать v-show, если требуется только однократный рендеринг, можно использовать v-if для переключения нескольких элементов.


Подведем итог:

        В целом, в области основного интерфейса разработчики, которые изучают vue framework, должны освоить использование v-if и v-show.Возможно, в небольших проектах, разработанных ими самими по пути обучения, эффекты v- if и v-show в основном одинаковы, но для некоторых крупных проектов, которые будут встречаться на рабочем месте в будущем, использование v-if и v-show необходимо использовать с осторожностью, а производительность может быть вызвана неправильным использованием. команды.

Guess you like

Origin blog.csdn.net/m0_63547755/article/details/125742323