Google chrome Vue:Chrome选项卡在尝试显示长字符串时崩溃

我有一个vue组件，其目的是显示字符串

字符串可能很长-我测试的字符串大约有3兆字节

当试图显示这样大小的字符串时，chrome选项卡崩溃，CPU使用率高达100%。控制台是透明的

以下是组件的简化代码：

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

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

{{output}}
导出默认值{
名称：“OutputField”，
道具：[“输出”]
}

Firefox上没有出现此问题。 一旦

{{output}}

被注释掉，它也会消失——这让我相信它与父组件的逻辑无关。 最后但并非最不重要的一点是，当直接将字符串插入div的innerHTML时，即使在Chrome上也能正确显示该字符串

---

我非常希望您能对这种行为进行解释，并建议如何以不会导致错误的方式显示字符串。提前谢谢

由于组件的唯一用途是显示作为道具传递的值，因此应该使用。它基本上是一个组件，消除了vue需要有状态（数据、方法等）的开销。相反，它将只处理传递给它的道具

您可以这样设置：

ChildComponent.vue

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

<ChildComponent outputVal="stringToDisplay">

{{props.outputVal}}

ParentComponent.vue

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

<ChildComponent outputVal="stringToDisplay">

它可能不会让页面立即响应，因为要显示的数据太多了，但它应该会大大提高性能，至少允许显示字符串

下面是一个显示巨大字符串的示例：

---

在进一步研究了这个问题后，我设法缩小了具体字符串在Chrome中扰乱Vuetify行为的可能原因

创建了一个单独的问题，因为在这里添加细节会使最初的问题难以阅读

---

可在此处找到：

谢谢！这并没有解决问题，但它让我有了另一个发现。我尝试使用您发布的功能组件，但在尝试显示我的测试字符串时，它仍然崩溃。然后我试着用“newarray（1000000）.join（“abc\n”）；”生成一个，结果成功了！问题似乎与我的原始字符串有关，它是一个3.2mb json文件的文本内容。我将用更多细节更新原始帖子。哦，还有“新数组（1000000）.join（“abc\n”）；”也适用于原始组件。@EmilBogumil这很有趣，那么您的3.2MB字符串是否水平扩展到页面之外？如果是这样的话，似乎是chrome无法处理额外的页面宽度。事实上，经过更多的调查，它变得更加奇怪。似乎只有当以下所有条件都成立时，问题才会出现：a。浏览器是Chrome；B字符串来自我使用的一个JSON文件（另一个，甚至更长，JSON工作正常）；C输出组件嵌入在带有Vuetify网格的模板中。我会在周末进一步调查，一旦找到答案，我会发布一个答案。