Vue программно принудительно обновляет данные, даже с V-Once - PullRequest
Новая
       21

Vue программно принудительно обновляет данные, даже с V-Once

0 голосов
/ 16 мая 2018

Идея заключается в следующем:

У меня есть компонент с этим шаблоном: 

<span class="message" v-once>
    {{ headline }}
</span>

У меня есть директива v-once в тексте заголовка с того момента, когда компонент фактически находится в процессеПри использовании в реальной среде текст заголовка не может быть изменен.

Теперь я создаю инструмент, в котором мы можем посмотреть детали всех наших компонентов.С помощью этого инструмента у меня есть ввод сообщения на странице, который позволяет пользователю изменять текст, который отображается в компоненте.Это работает нормально, пока v-once не существует.

В целях оптимизации я хотел бы иметь директиву v-once, но мне просто нужен способ переопределить это один раз в моеминструмент.Я надеялся, что смогу использовать $forceUpdate(), но это не сработает (вероятно, все еще принимая во внимание v-once).

Есть ли способ сделать это?Если нет, я могу просто забыть о v-once, но было бы неплохо.

1 Ответ

0 голосов
/ 17 мая 2018

Интересный вопрос. Я не думаю, что вам следует пытаться обновить компонент с помощью директивы v-once, поскольку, как вы упомянули, цель использования состоит в том, чтобы визуализировать один раз и рассматривать этот компонент как статический контент, таким образом ваш компонент получает более высокую производительность.

Из документов:

Рендеринг простых HTML-элементов в Vue выполняется очень быстро, но иногда у вас может быть компонент, содержащий много статического содержимого. В этих случаях вы можете убедиться, что он оценивается только один раз, а затем кэшируется, добавив директиву v-Once в корневой элемент, например: 

<div v-once>
    <h1>Terms of Service</h1>
    ... a lot of static content ...
</div>

Таким образом, вы можете использовать вычисляемое свойство для повышения производительности, поскольку они кэшируются на основе их зависимостей из документов:

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

Заключительные мысли: если ваш компонент обновит или может обновить элемент данных (и вы хотите, чтобы ваше приложение отобразило эти изменения), вам не следует использовать директиву v-once.

...