1

I have noticed that while in Vue2 you can bind an element to the property of a class, and the element will update when this class property is changed from somewhere outside of the Vue world, this seems not possible in Vue3.

I have created two simple examples here to show what I mean:

Vue2: https://codesandbox.io/s/vue2-6hztv

Vue3: https://codesandbox.io/s/vue3-o2rfn

There is a class that has an internal timer which will increment the class field. In Vue2 the element bound to myClass.field is properly updated but in Vue3 nothing happens.

My questions are

1. Why is there a difference between Vue2 and Vue3 here?

2. How can I achieve something like the working Vue2 example but in Vue3 ?

Please note that I cannot run the timer in a Vue lifecycle method. The class field needs to be updated by itself.

Here is the Vue3 code which does not work:

HTML:

<div id="app">{{ myClass.field }}</div>

Javascript:

class MyClass {
  field = 0;

  constructor() {
    setInterval(() => {
      this.field++;
    }, 1000);
  }
}

export default {
  data() {
    return {
      myClass: new MyClass(),
    };
  },
};
rawpower
  • 13
  • 4

1 Answers1

0

As explained in this answer, proxy object is created in Vue 3 to enable the reactivity. this in constructor refers to original class instance and not a proxy, so it cannot cannot be reactive.

The solution is to separate class constructor and the setup of side effects that expect this to be reactive. A setup method can implement fluent interface pattern to make it simpler to use:

class MyClass {
  field = 0;

  init() {
    setInterval(() => {
      this.field++;
    }, 1000);

    return this;
  }
}

In options API it is:

  data() {
    return {
      myClass: new MyClass(),
    };
  },
  created() {
    this.myClass.init();
  }

In composition API it is::

  const myClass = reactive(new MyClass()).init();
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Thanks a lot for your answer! I now understand the reason why it's not possible to do it the same way as in vue2. However I'm still looking for a way to watch for changes in the class that are initiated by itself, not by any vue lifecycle method. perhaps the answer to the last question is just that it's not possible. – rawpower Dec 01 '21 at 13:04
  • @rawpower It's possible but not for side effects that run in a constructor like in your case. Doing this in a constructor requires a class to be aware that it's used in Vue component and make properties use composition API explicitly (something that is shown in another answer in linked question). Vue is geared towards FP and you won't benefit a lot from using OOP with it. – Estus Flask Dec 01 '21 at 14:15
  • Thanks @Estus Flask. Time for me to figure out a new code structure or change to vue2. – rawpower Dec 01 '21 at 15:02