Vue composition API and reactive class

Question

In setup i create something like this:

const abc = reactive(new AnotherClass())
    return {abc}

Further in the component, I can call a method of this class through abc.Func (), or access some field, everything seems to be fine. And here we will imagine the situation: in class constructor we create eventListener, which listens to something, and then sets true or false for one of the class fields. And then a problem arises: if you display this field in the component that the handler should change, you can see that the class fields are not reactive, that is when the handler unambiguously changed the value of the field, this is not visible in the component. Fields are reactive only when you also write reactive for fields inside the class. Why? I made the whole class reactive in setup. Why i also need to write ref and reactive inside the class?

code in component:

<template>
<div style="width: 200px; height: 200px">{{player.audioPlayer.isPlaying}}</div>
</template>

  setup(props) {
    const player = reactive(new AnotherClass())
    return {player}
  },

class:

private _onPlaying = this.onPlaying.bind(this)
constructor() {
    this.audioPlayer = {
        active: false,
        initialized: false,
        element: new Audio(''),
        isPlaying: false,
        currentPlaying: {
                playlist: [],
                index: 0
            }
        }
    this.audioPlayer = reactive(this.audioPlayer) // if comment this, we don't see any changes in component after onPlaying set this to true
    this.init()
}
    
private init(){
    this.audioPlayer.element.addEventListener('playing', this._onPlaying)
    this.audioPlayer.initialized = true
}
    
private onPlaying() {
    this.audioPlayer.isPlaying = true
}

Please, post the code instead of describing it, this makes the question less ambiguous and prone to guesswork. I recognize the description only because this is a very specific thing about classes. reactive creates a proxy to original instance, so methods receive reactive object as this. When listeners are set up in a constructor, they are hard-coded to use original non-reactive this. — Estus Flask
– Estus Flask, Commented Sep 3, 2021 at 21:14

Estus Flask · Accepted Answer · 2021-09-04 06:17:48Z

4

reactive creates a proxy to original instance, so when methods are called on reactive proxy object, they receive it as this.

When listeners are set up in a constructor, they are hard-coded to use original non-reactive this.

In order for a class to be unaware of Vue reactive helpers, it should be designed in a way that allows to use this in a constructor for setting initial data only, not side effects. Callbacks shouldn't be bound to this in constructor, this includes class fields because they are syntactic sugar for constructor body.

It needs to be:

constructor() {
    this.audioPlayer = {...};
    // this.init()
}
    
init(){
    this.audioPlayer.element.addEventListener('playing', () => this.onPlaying())
    this.audioPlayer.initialized = true
}

And used like:

const player = reactive(new AnotherClass())
player.init();

edited Sep 4, 2021 at 6:17

answered Sep 3, 2021 at 21:59

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue composition API and reactive class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related