Vue.js 2.0 experiences delays when making changes to irrelevant data

Question

Vue.js 2.0 experiences delays when making changes to irrelevant data

Imagine you have an input field in Vue.JS with a v-model that binds to a String data property, and a long list of random numbers that are completely unrelated to the first String.

data: {
  input: "",
  randoms: []
}

<input type="text" v-model="input">
<p v-for="random in randoms" v-text="random"></p>

Combining both in the same Vue instance results in a significant slowdown when typing in the input field. It seems like Vue is reevaluating the DOM for each list entry after every input event, although they are not related at all.

https://jsfiddle.net/5jf3fmb8/2/

However, moving the v-for to a child component where randoms is bound to a prop eliminates this slowdown.

https://jsfiddle.net/j601cja8/1/

Is there a way to achieve the performance of the second example without using a child component?

javascript vue.js

Answer 1

Answer №1

Is there a method to achieve the performance of the second violin without utilizing a child-component?

Succinct response

No, there isn't.

Detailed response

Each time any dependency of the template changes in Vue, the render function for the entire component must be re-executed and the new virtualDOM compared against the previous one. It is not possible to selectively update specific parts of the template while skipping others. Hence, every time the input value changes, the entire virtualDOM undergoes a re-render process.

Given that your v-for loop generates a significant number of elements, this can lead to delays of several hundred milliseconds, noticeable especially when typing.

The recommended approach to optimize this is to extract the resource-intensive part of the template into its own component.

Although using v-model.lazy as Alex mentioned may offer some slight improvement, it does not address the core issue at hand.

Answer 2

Is there a method to achieve the performance of the second violin without utilizing a child-component?

Succinct response

No, there isn't.

Detailed response

Each time any dependency of the template changes in Vue, the render function for the entire component must be re-executed and the new virtualDOM compared against the previous one. It is not possible to selectively update specific parts of the template while skipping others. Hence, every time the input value changes, the entire virtualDOM undergoes a re-render process.

Given that your v-for loop generates a significant number of elements, this can lead to delays of several hundred milliseconds, noticeable especially when typing.

The recommended approach to optimize this is to extract the resource-intensive part of the template into its own component.

Although using v-model.lazy as Alex mentioned may offer some slight improvement, it does not address the core issue at hand.

Answer 3

Answer №2

To simplify and reduce the lag, simply switch from using v-model to v-model.lazy.

Upon combining both in Vue, there is a noticeable slowdown when typing in the input field. It seems like Vue is re-evaluating the DOM for each list entry after every input event, even though they are unrelated.

Interestingly, the OnceFor example still experiences performance issues despite no longer being reactive. Whether this behavior is intentional or not within Vue remains unclear to me.

const Example = {
  data() { return { input: "", randoms: [] } },
  created() { this.newRandoms() },
  methods: {
    newRandoms() { this.randoms = Array(50000).fill().map(() => Math.random()) }
  }
}

new Vue({
  el: "#vue-root",
  data(){ return {example: 'lazy-model'}},
  components: {
    LazyModel: {...Example, template: "#lazy-model"
    },
    OnceFor: {...Example, template: "#once-for"
    },
    InlineTemplate: {...Example, template: "#inline-template",
        components: {
          Welp: {
            props: ['randoms']
          }
        }
    }
  }
})

button,
input,
div {
  margin: 2px;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="vue-root">
  <span><button v-for="(component, name) in $options.components" @click="$set($data, 'example', name)">{{name}}</button></span>
  <component :is="example"></component>
</div>

<template id="lazy-model">
<div>
  <input type="text" v-model.lazy="input"><br>
  <input type="submit" value="Regenerate" @click="newRandoms">
  <p v-for="random of randoms" v-text="random"></p>
</div>
</template>

<template id="once-for">
<div>
  <input type="text" v-model="input"><br>
  <input type="submit" value="Regenerate" @click="newRandoms">
  <p v-for="random of randoms" v-text="random" v-once></p>
</div>
</template>

<template id="inline-template">
<div>
  <input type="text" v-model="input"><br>
  <input type="submit" value="Regenerate" @click="newRandoms">
  <welp :randoms="randoms" inline-template>
    <div>
      <p v-for="(random, index) of randoms" :key="index"> {{index}}: {{random}} </p>
    </div>
  </welp>
</div>
</template>

Answer 4

To simplify and reduce the lag, simply switch from using v-model to v-model.lazy.

Upon combining both in Vue, there is a noticeable slowdown when typing in the input field. It seems like Vue is re-evaluating the DOM for each list entry after every input event, even though they are unrelated.

Interestingly, the OnceFor example still experiences performance issues despite no longer being reactive. Whether this behavior is intentional or not within Vue remains unclear to me.

const Example = {
  data() { return { input: "", randoms: [] } },
  created() { this.newRandoms() },
  methods: {
    newRandoms() { this.randoms = Array(50000).fill().map(() => Math.random()) }
  }
}

new Vue({
  el: "#vue-root",
  data(){ return {example: 'lazy-model'}},
  components: {
    LazyModel: {...Example, template: "#lazy-model"
    },
    OnceFor: {...Example, template: "#once-for"
    },
    InlineTemplate: {...Example, template: "#inline-template",
        components: {
          Welp: {
            props: ['randoms']
          }
        }
    }
  }
})

button,
input,
div {
  margin: 2px;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="vue-root">
  <span><button v-for="(component, name) in $options.components" @click="$set($data, 'example', name)">{{name}}</button></span>
  <component :is="example"></component>
</div>

<template id="lazy-model">
<div>
  <input type="text" v-model.lazy="input"><br>
  <input type="submit" value="Regenerate" @click="newRandoms">
  <p v-for="random of randoms" v-text="random"></p>
</div>
</template>

<template id="once-for">
<div>
  <input type="text" v-model="input"><br>
  <input type="submit" value="Regenerate" @click="newRandoms">
  <p v-for="random of randoms" v-text="random" v-once></p>
</div>
</template>

<template id="inline-template">
<div>
  <input type="text" v-model="input"><br>
  <input type="submit" value="Regenerate" @click="newRandoms">
  <welp :randoms="randoms" inline-template>
    <div>
      <p v-for="(random, index) of randoms" :key="index"> {{index}}: {{random}} </p>
    </div>
  </welp>
</div>
</template>

Vue.js 2.0 experiences delays when making changes to irrelevant data

Answer №1

Succinct response

Detailed response

Answer №2

Similar questions

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

An effective method for creating responsive layouts for custom-shaped HTML elements in a board game

Turn off keycloak in vuejs exclusively in the test environment for development purposes

The event.submit/return true in JS/jQuery is not functioning as expected

Step-by-step guide on filtering an array of objects using Vuejs and TypeScript

Confirm that the Time sequence is accurate using JavaScript Selenium

Is it possible to optimize the Dojo build system to only compile Dojo when necessary?

Updating parent data after filtering props in a child component: A comprehensive guide

Cover the <img ...> tag in HTML using JavaScript

Unable to retrieve information from the JSON object

In JavaScript, merging objects will exclusively result in an identifier being returned

Having difficulty in closing Sticky Notes with JavaScript

Express always correlates the HTTP path with the most recently configured route

Is there a way to dynamically adjust the height of a DIV block?

problem with creating a django template script

ReactJS - Travel Booking Platform with Advanced Date and Price Filtering

How can I create a slot component with a prop defined in the child component?

Discovering the Vue app container div attribute

Is MongoDB-Stitch's Populate Method the best choice or are there comparable options available?

What is the process for encrypting a string in JavaScript?