Non-reactive arrays in Vue.js

Question

Non-reactive arrays in Vue.js

I am facing an issue. Here is the problem:

data: {
        tracks: []
    }

The tracks array will contain a complex object. I want to achieve reactivity when assigning a new value to tracks nested object, but I do not need deep reactivity for the object. Is there a way to accomplish this without creating a function or using JSON.parse?

The reason behind this is because tracks are used with the Cesium framework and Vue getter. This is causing the frames per second (FPS) to drop to 10-15. Without Vue, the FPS is much higher at 50-60.

javascript vue.js vuejs2

Answer 1

Answer №1

To prevent Vue from picking up reactivity on large datasets, consider using either Object.freeze or Object.defineProperty with configurable set to false.

Check out this thread for more information.

Answer 2

To prevent Vue from picking up reactivity on large datasets, consider using either Object.freeze or Object.defineProperty with configurable set to false.

Check out this thread for more information.

Answer 3

Answer №2

If you wish to set up a comprehensive observer on tracks:

watch: {
  tracks: {
    handler (newVal, oldVal) {
      // Specify your desired actions here
      // To trigger a re-render, simply use:
      this.$updateForce()
    }
    deep: true,
}

Answer 4

If you wish to set up a comprehensive observer on tracks:

watch: {
  tracks: {
    handler (newVal, oldVal) {
      // Specify your desired actions here
      // To trigger a re-render, simply use:
      this.$updateForce()
    }
    deep: true,
}

Non-reactive arrays in Vue.js

Answer №1

Answer №2

Similar questions

What is the best way to upload an image, pass it to my controller for validation, and finally store it in my database?

What is the most effective method for sorting through vast amounts of data with Javascript, React, and Redux?

The tooltips in the WordPress-Gulp-Starter-Kit running on Bootstrap 5 do not seem to be functioning properly

Bringing in the node-spotify or spotify-web modules to the browser for seamless integration

Trouble Arising from Making a POST Request to Spotify's API

Exploring SQL Components with JavaScript

Watch the Newest Vimeo Showcase Reel

A guide to querying JSON data in a backend database with JavaScript

What is the best way to incorporate "thread.sleep" in an Angular 7 app within a non-async method like ngOnInit()?

Utilize Ajax to automatically populate a textbox with suggestions

An error occurred when attempting to access data within a variable that is undefined, resulting in a TypeError at the errorHandler function

Which is better: using multiple makeStyles or just one in Material UI?

The React-loadable alert indicated a discrepancy in the text content

Relocate the bxslider carousel to the specific div clicked on

I encountered an issue with displaying API data in V-data-table using axios in Vue.js - unfortunately, the data was not showing up as expected

Sending a parameter value when onClick function is called

Instructions on creating a non-editable text area where only copying and pasting is allowed

Discover the simple steps to generating dynamic variables with jQuery!

Loading data table rows dynamically using Vuetify

Can anyone explain to me how to render attributes of a tag in Vue? I'm curious about how v-for interacts with HTML