Exploring the reactivity of Vue on object graphs that include cyclic references

Question

Exploring the reactivity of Vue on object graphs that include cyclic references

First and foremost, let me provide some context:

I am currently in the process of developing a minesweeper application using VueJS. The grid is structured as an object tree, where each Box object contains a 'neighbors' property that stores Box objects adjacent to it.

The structure is circular, but everything seems to be functioning correctly.

However, I encountered a problem when attempting to generate a larger grid (50x50) after having successfully tested with a smaller grid (5x5). VueJS threw a 'Maximum call stack size exceeded' error while setting up observers. Here is a link to the log for reference: https://i.stack.imgur.com/kMfyt.png

It appears that the tree is too large for Vue to manage reactivity effectively.

This assumption was validated when I attempted freezing my object which resolved the callstack error:

data() {
    const game = new MinesWheeper(30, 30, 40)
    Object.freeze(game)
    return {
      game
    }
  }

Although reactivity is compromised due to the freeze, it is essential for unveiling boxes upon clicking.

Here are my questions/considerations:

Have you encountered this callstack issue with Vue before or have any insight?
Is there a way to implement reactivity in VueJS with such a complex object structure? Would VueX be a viable solution? I'm unfamiliar with it.
Alternatively, should I explore other frameworks aside from VueJS? Perhaps opt for Vanilla JS instead?

Thanks in advance for your assistance. Apologies if my post appears disorganized - it's my first one in five years and I must admit, I'm feeling a bit nervous!

Edit: Below is a representation of the game object:

game: { // MinesWheeper
  _grid: { // Grid
    "_bombsNumber": 40
    _boxes: [ // Array of Box
      {
        "_hasBomb": true
        "_index": 0
        "_isRevealed": false
        "_neighbors": [Box, Box, Box, Box]
        "hasBomb": true
        "index": 0
        "isRevealed": false
        "nearBombs": 1
      }
    ]
  }
}

Moreover, when clicking on a Box, the following actions need to take place: - End the game if Box.hasBomb is true - Display the content if no bomb is present - Or recursively trigger the reveal() method if Box.nearBombs equals 0

My Box.reveal() method utilizes recursion:

reveal() {
    if (this._isRevealed) return

    this._isRevealed = true

    if (this.hasBomb) {
      console.log('Game over')
    } else if (this.nearBombs === 0) {
      this._neighbors.forEach(neighbor => {
        neighbor.reveal()
      })
    }
  }

Hence, I believe reactivity is crucial for updating the view with each Box.reveal() invocation.

vue.js vuejs2 tree vue-reactivity

Answer 1

Answer №1

Within your one-dimensional array of Box objects, each object is equipped with a `neighbors` array that holds references to its neighboring Boxes in the main array.

To prevent Vue from setting up reactivity on the `neighbors` property, you can utilize Object.defineProperty() and specify `configurable: false`. The remaining properties of the Box object will still remain reactive.

I've prepared a demonstration for you which you can explore. Most of the crucial information can be found within the components/HelloWorld.vue component.

The example might seem complex as using an array would typically enable easy referencing of "prev" and "next" elements through index. However, I opted to introduce cyclic references between objects for this scenario.

In my testing environment, utilizing 10000 items in the array resulted in an error. Alternatively, replacing the call to this.setupRelatioships(boxes); with

this.setupRelatioshipsWithProperties(boxes);

resolved the issue.

setupRelatioships(boxes) {
      for (let i = 0; i < boxes.length; i++) {
        boxes[i].prev = i > 0 ? boxes[i - 1] : null;
        boxes[i].next = i < boxes.length - 1 ? boxes[i + 1] : null;
      }
    },
    setupRelatioshipsWithProperties(boxes) {
      const opts = {
        configurable: false,
        enumerable: true,
        writable: true
      };

      for (let i = 0; i < boxes.length; i++) {
        Object.defineProperty(boxes[i], "prev", {
          ...opts,
          value: i > 0 ? boxes[i - 1] : null
        });
        Object.defineProperty(boxes[i], "next", {
          ...opts,
          value: i < boxes.length - 1 ? boxes[i + 1] : null
        });
      }
    },

You may also refer back to the earlier mentioned Demo (credits to Guillaume Chau)

Answer 2

Within your one-dimensional array of Box objects, each object is equipped with a `neighbors` array that holds references to its neighboring Boxes in the main array.

To prevent Vue from setting up reactivity on the `neighbors` property, you can utilize Object.defineProperty() and specify `configurable: false`. The remaining properties of the Box object will still remain reactive.

I've prepared a demonstration for you which you can explore. Most of the crucial information can be found within the components/HelloWorld.vue component.

The example might seem complex as using an array would typically enable easy referencing of "prev" and "next" elements through index. However, I opted to introduce cyclic references between objects for this scenario.

In my testing environment, utilizing 10000 items in the array resulted in an error. Alternatively, replacing the call to this.setupRelatioships(boxes); with

this.setupRelatioshipsWithProperties(boxes);

resolved the issue.

setupRelatioships(boxes) {
      for (let i = 0; i < boxes.length; i++) {
        boxes[i].prev = i > 0 ? boxes[i - 1] : null;
        boxes[i].next = i < boxes.length - 1 ? boxes[i + 1] : null;
      }
    },
    setupRelatioshipsWithProperties(boxes) {
      const opts = {
        configurable: false,
        enumerable: true,
        writable: true
      };

      for (let i = 0; i < boxes.length; i++) {
        Object.defineProperty(boxes[i], "prev", {
          ...opts,
          value: i > 0 ? boxes[i - 1] : null
        });
        Object.defineProperty(boxes[i], "next", {
          ...opts,
          value: i < boxes.length - 1 ? boxes[i + 1] : null
        });
      }
    },

You may also refer back to the earlier mentioned Demo (credits to Guillaume Chau)

Exploring the reactivity of Vue on object graphs that include cyclic references

Answer №1

Similar questions

What causes elements to transition in from the top-left corner when using TransitionGroup in Vue 3?

The v-app-bar extends down to fit the shorter page content rather than staying at its usual height

Which type of comparator does Vuetify utilize for sorting string columns in a data table?

The custom element is unfamiliar: Have you properly registered the component? Vue.js in Laravel

Is there a way to access a computed property within methods?

Exploring Vue and Nuxt JS: What Causes the Issue of Unable to Create the Property 'display' on the String 'bottom:30px;right:30px;'

Error message: Unable to load image from local source in Vue application

I'm having trouble launching the Vue UI after successfully installing the Vue CLI - any ideas why?

Discover the power of Vuetify's message translation in combination with Nuxt i18n

Error Encountered: unable to perform function on empty array

The Swiper library is incompatible with the "vue" version "^2.6.11" and cannot be used together

Out of Sync Promise Chain

Struggling to integrate font-awesome into my Vue.js project

Utilizing the power of Vue Router with DataTables

The Vuex state is being modified by an action, yet the associated computed property fails to react accordingly

Tips for overcoming indentation issues using ESLint?

Is it possible for VueX's state management store to emit events to components as well?

The Selenium test functions correctly in the production environment, however it encounters issues when run

Tests using Cypress for end-to-end testing are failing to execute in continuous integration mode on gitlab.com

Retrieving information from a Vue component using AJAX