Vue: Chrome вкладка вылетает при попытке отобразить длинную строку

Question

У меня есть компонент vue, целью которого является отображение строки.

Строка может быть очень длинной - у протестированной мною было около 3 мегабайт.

При попытке отобразить строку такого размера вкладка chrome вылетает при загрузке процессора до 100 %. Консоль понятна.

Вот упрощенный код компонента:

<template>
    <div>
        {{ output }}
    </div>
</template>

<script>
export default {
    name: "OutputField",
    props: ['output']
}
</script>

Проблема не возникает на Firefox. Он также исчезает после того, как {{ output }} закомментирован - что наводит меня на мысль, что оно не имеет ничего общего с логикой c родительского компонента. И последнее, но не менее важное: при прямой вставке строки во внутренний HTML элемента div она отображается правильно даже на Chrome.

. Я был бы очень признателен за объяснение этого поведения и предложения о том, как отображать строку так, чтобы это не приводило к ней. Заранее спасибо!

Answer 1

После более подробного изучения проблемы мне удалось сузить возможную причину, чтобы указать c строку, которая портит поведение Vuetify в Chrome.

Создала отдельный вопрос, поскольку добавление подробностей здесь начальный трудно читаемый.

Доступно здесь: вставлено в строку в Vuetify crash Chrome tab

Answer 2

Поскольку единственной целью вашего компонента является отображение значения, переданного в качестве реквизита, вы должны использовать функциональный компонент . В основном это компонент, который избавляет от накладных расходов, которые vue должны иметь в состоянии (данные, методы и т. Д. c.). Вместо этого он будет иметь дело только с реквизитом, переданным ему.

Вы можете настроить его следующим образом:

ChildComponent. vue

<template functional>
  <div>{{ props.outputVal }}</div>
</template>

ParentComponent. vue

<ChildComponent outputVal="stringToDisplay">

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

Вот пример, который отображает огромную строку: https://codesandbox.io/s/vue-functional-components-xbpci