Советы по Vue: Оптимизация приложений Vue с помощью v-once и v-memo

Vue похож на любой другой инструмент, который мы используем в Интернете — ваш пробег зависит от того, как вы его используете. Если вы пишете плохо оптимизированный код, вы все равно получите медленный сайт, даже если в Vue есть множество трюков для улучшения производительности. Поэтому сегодня мы рассмотрим, как можно оптимизировать производительность с помощью двух малоизвестных HTML-атрибутов Vue, известных как v-once и v-memo. Оба атрибута позволяют нам оптимизировать процесс повторного рендеринга компонента или дерева компонентов.

Эти два атрибута на самом деле используются не очень регулярно, но они могут быть очень полезны в целом ряде различных обстоятельств. В этом руководстве, я надеюсь, мне удастся дать вам понимание того, что делает каждый из них, чтобы вы могли использовать их в своем следующем проекте Vue.

v-once в Vue

Когда реактивный элемент обновляется, Vue обновляет DOM и любые переменные CSS Vue соответствующим образом. Однако, если вы знаете, что что-то должно быть отображено только один раз, вы можете напрямую сказать Vue, чтобы он никогда не обновлял эту часть дерева DOM. Для этого мы используем магический атрибут v-once. Давайте рассмотрим пример, где я использую v-once на теге <h1>:

<script setup>
import { ref } from 'vue'

let message = ref("Hello World")

let updateMessage = () => {
    message.value = 'Goodbye World'
}
</script>

<template>
    <h1 v-once>{{message}}</h1>
    <input :value="message" />
    <button @click="updateMessage">
        Update Message
    </button>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь у нас есть реактивная переменная message, установленная на Hello World, которая может быть обновлена по нажатию кнопки на Goodbye World. Мы используем эту переменную message как в заголовке h1, так и в качестве значения нашего input.

Хотя нажатие на кнопку обновит значение input — в h1 все еще будет старый текст Hello World, поскольку он имеет атрибут v-once. По сути, h1 отображается только один раз и больше никогда не обновляется. Это очень полезно при использовании переменных, когда они обновляются в одних местах, но не обновляются в других. Это также очень полезно для оптимизации кода! Это также относится к любой переменной, упомянутой в <h1> или ее подструктуре — вся структура отображается только один раз.

v-once можно использовать практически везде — в том числе в циклах v-for — что делает его универсально полезным в Vue.

v-memo

v-memo похож на v-once, но он дает нам немного больше гибкости. В v-memo мы можем определить массив переменных, при обновлении которых мы будем заново отображать данный элемент и все теги в нем. Это относится даже к переменным, не упомянутым в HTML-теге — так что мы можем принудительно перерисовать элемент, используя этот метод.

Прелесть этого метода в том, что если у нас есть ситуация, когда несколько переменных всегда обновляются в одно и то же время, мы можем избежать нескольких повторных рендерингов. Давайте посмотрим на модифицированную версию кода, который мы использовали для v-once. Здесь у нас теперь две переменные — message и question. Каждая обновляется при нажатии на отдельные кнопки — одна для вопроса, другая для сообщения. Я использую v-memo на теге <h1>, чтобы обновить только его, если message обновится:

<script setup>
import { ref } from 'vue'

let message = ref("Hello World")
let question = ref("How are you?")

let updateMessage = () => {
  message.value = 'Goodbye World'
}
let updateQuestion = () => {
  question.value = 'What is your name?'
}
</script>

<template>
  <h1 v-memo="[ message ]">{{message}} - {{question}}</h1>
  <button @click="updateMessage">
    Update Message
  </button>
  <button @click="updateQuestion">
    Update Question
  </button>
</template>
Вход в полноэкранный режим Выйти из полноэкранного режима

Если мы нажмем на кнопку Update Question, для пользователя ничего не изменится, поскольку v-memo следит только за изменениями в message, а не в question — но переменная question все равно будет обновляться в фоновом режиме. Однако если мы нажмем на кнопку Обновить сообщение, то <h1> обновится немедленно, так как мы сказали v-memo обновляться только в случае изменения этой переменной.

Это довольно изящный трюк для оптимизации, но у него есть и другие применения. Например, вы можете обновлять элемент и все элементы/переменные внутри него только при выполнении определенного условия в вашем коде. Единственное, что следует отметить, вы не можете использовать v-memo в цикле v-for — так что за этим нужно следить.

Вы можете определить несколько переменных для v-memo, добавив их в объект массива внутри v-memo, как показано ниже:

<h1 v-memo="[ message, question ]"></h1>
Войти в полноэкранный режим Выйти из полноэкранного режима

Также интересно отметить, что передача пустого массива заставляет v-memo работать так же, как и v-once 😄:

<h1 v-memo="[]"></h1>
Вход в полноэкранный режим Выход из полноэкранного режима

Заключение

Надеюсь, вам понравился этот совет по vue и обзор v-once и v-memo. Оба этих атрибута очень полезны, и я надеюсь, что вы найдете способ использовать их в своем следующем проекте Vue. Для получения дополнительной информации о Vue, вы можете ознакомиться с другими статьями, которые я написал на моем блоке здесь.

Оцените статью
devanswers.ru
Добавить комментарий