Reactivity in Vue 3 doesn't seem to be activated when called from within a class instance

Question

Reactivity in Vue 3 doesn't seem to be activated when called from within a class instance

Link to Codepen: https://codepen.io/codingkiwi_/pen/XWMBRpW

Let's consider a scenario where you have a class:

class MyClass {
  constructor(){
    this.entries = ["a"];

    //=== example change triggered from INSIDE the class ===
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

Now, in a component, you instantiate and get an instance of that class:

const { reactive } = Vue;

const App = {
  setup() {
    const myobject = reactive(new MyClass());

    //=== example change triggered from OUTSIDE the class ===
    setTimeout(() => {
      myobject.entries.push("b");
    }, 500);
    
    return {
      myobject
    };
  }
}

The displayed entries in the DOM for the myobject.entries array will be "a" and "b", but not including "c"

javascript vue.js vuejs3 vue-composition-api vue-reactivity

Answer 1

Answer №1

Explained in another response, the use of reactive involves creating a proxy object to facilitate reactivity. When referencing this within a constructor, it points to the original instance of MyClass, not the proxy, rendering it non-reactive.

This points out an issue in the code where reactive considers only synchronous operations within the MyClass constructor. Engaging in asynchronous side effects within a constructor is considered bad practice due to potential complexities with consuming such constructors.

A solution could involve:

class MyClass {
  constructor(){
    // Synchronous operations only
    this.entries = ["a"];
  }

  init() {
    // Asynchronous operations, likely returning a promise
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

Additionally,

const myobject = reactive(new MyClass());
myobject.init() // `this` is now a proxy within `init`

Answer 2

Explained in another response, the use of reactive involves creating a proxy object to facilitate reactivity. When referencing this within a constructor, it points to the original instance of MyClass, not the proxy, rendering it non-reactive.

This points out an issue in the code where reactive considers only synchronous operations within the MyClass constructor. Engaging in asynchronous side effects within a constructor is considered bad practice due to potential complexities with consuming such constructors.

A solution could involve:

class MyClass {
  constructor(){
    // Synchronous operations only
    this.entries = ["a"];
  }

  init() {
    // Asynchronous operations, likely returning a promise
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

Additionally,

const myobject = reactive(new MyClass());
myobject.init() // `this` is now a proxy within `init`

Answer 3

Answer №2

When accessing the myobject.entries array in the DOM, it will only display the entries "a" and "b", excluding "c"

This occurs because "a" was already present in the array when we made the instance reactive, and the addition of "b" occurred from outside the object through the Proxy.

To clarify: the variable const myobject does not directly hold the MyClass instance; rather, it holds a Proxy of the instance that encapsulates the original instance! This proxy is what gets passed to the DOM / Template.

The inclusion of "c" into the array happened internally within the object, not through the proxy. As a result, although "c" gets pushed to the array, it doesn't trigger any reactivity changes.

Solution:

To address this issue, explicitly mark the array that undergoes internal changes within the class as reactive, like so:

class MyClass {
  constructor(){
    this.entries = reactive(["a"]);

    //=== Example change triggered from INSIDE the class ===
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

Alternatively, consider following the recommended approach of solely interacting with the proxied object as outlined in the documentation:

It's advisable to refrain from holding a reference to the original raw object and exclusively work with the reactive version:

Documentation: https://v3.vuejs.org/guide/reactivity.html#proxy-vs-original-identity

Answer 4

When accessing the myobject.entries array in the DOM, it will only display the entries "a" and "b", excluding "c"

This occurs because "a" was already present in the array when we made the instance reactive, and the addition of "b" occurred from outside the object through the Proxy.

To clarify: the variable const myobject does not directly hold the MyClass instance; rather, it holds a Proxy of the instance that encapsulates the original instance! This proxy is what gets passed to the DOM / Template.

The inclusion of "c" into the array happened internally within the object, not through the proxy. As a result, although "c" gets pushed to the array, it doesn't trigger any reactivity changes.

Solution:

To address this issue, explicitly mark the array that undergoes internal changes within the class as reactive, like so:

class MyClass {
  constructor(){
    this.entries = reactive(["a"]);

    //=== Example change triggered from INSIDE the class ===
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

Alternatively, consider following the recommended approach of solely interacting with the proxied object as outlined in the documentation:

It's advisable to refrain from holding a reference to the original raw object and exclusively work with the reactive version:

Documentation: https://v3.vuejs.org/guide/reactivity.html#proxy-vs-original-identity

Reactivity in Vue 3 doesn't seem to be activated when called from within a class instance

Answer №1

Answer №2

Solution:

Similar questions

Can you explain the distinction between JSON syntax and object assignment in programming?

Having trouble removing a cookie in express?

Using AJAX to remove data from a database

Using Selenium to determine the quantity of elements that have a similar class present

The Truffle test encounters an issue: "Error: Trying to execute a transaction that calls a contract function, but the recipient address ___ is not a contract address."

Guide to creating a ReactJS higher-order component using modern ES6 syntax

Encountering an issue while trying to utilize Vuex in Vue with TypeScript

Ensure Vue line chart stays current with data passed in as props

What is the reason border property does not transition effectively?

Programming with a combination of Javascript, Angular, and Prototype to efficiently manage and

Generate an array containing all N-digit numbers with a sum of digits equal to S

When attempting to add or store data in MongoDB, it triggers a 500 server error

Switch out the specific content within the p tag

Tips for showcasing HTML code retrieved from a fetch request in a Vue component

What are the differences between a Chrome app and extension? Is there any other way to access the tabs currently open in your

Using Jquery UI dialog to ensure validation

Is it possible to implement AngularJS Routing for displaying HTML pages within a slideshow?

After placing two divs within another div and applying justify content, an unexpected blank space has appeared

Utilize Angular 8 to dynamically populate Input values with data pulled from an API

ASP.Net does not support the compilation of AngularJS