Vue: Chrome tab crashes when trying to display a long string

2020-02-14 google-chrome vue.js

I have a vue component whose purpose is to display a string.

The string can be very long - the one I tested had about 3 megabytes.

When trying to display string of such size the chrome tab crashes with its CPU usage going up to 100%. The console is clear.

Here's the simplified code of the component:

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

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

The problem does not occur on Firefox. It also disappears once the {{ output }} is commented out - which leads me to believe it has nothing to do with the logic of parent component. Last but not least, when directly inserting the string into the innerHTML of the div, it is shown correctly even on Chrome.

I would really appreciate an explanation of this behavior and suggestions on how to display the string in a way that won't lead to it. Thanks in advance!

Answers

Since the only purpose of your component is to display a value passed as a prop, you should use a functional component. It basically is a component that gets rid of the overhead that vue needs to have a state (data, methods, etc.). Instead, it will deal only with props passed to it.

You can set it up like this:

ChildComponent.vue

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

ParentComponent.vue

<ChildComponent outputVal="stringToDisplay">

It probably won't make the page respond instantly still, as that's a lot of data to display, but it should increase the performance by a lot and at least allow the string to display.

Here is an example of it which displays a huge string: https://codesandbox.io/s/vue-functional-components-xbpci

After looking into the problem more I managed to narrow down the possible cause to specific string messing up Vuetify's behavior in Chrome.

Created a separate question, as adding the details here would make the initial one hard to read.

It is available here: &shy; inserted into string in Vuetify crashing Chrome tab

Related