Need a mechanism to prevent some class properties being transformed to Vue data

[ericlogic]

Sometimes we don't need all of the class properties to be transformed to Vue data. Actually, I'm in trouble with three.js. When I define a Scene as a class property(It's a very common practice), It is transformed to Vue data and wrapped by Vue so it can't be rendered by three.js any more.

You might suggest that define it as a global variable. But it is not a "class style" way.

So. I suggest to provide a mechanism(maybe a @Nondata decorator) to prevent some class properties being transformed to Vue data.

[ruojianll]

You could use vanilla accessors and WeakMap to map vue instance and JS native data.

const insMap = new WeakMap

class Foo .... {
@vanilla
get rawData(){
  if(!insMap.has(this)){
    insMap.set(this,{})
  }
  return insMap.get(this)
}
}

[ericlogic]

Thanks for your suggestion.

It works, but I don't think it's a elegant way. It's not "class style" and make the code a bit obscure. Is it possible to make @vanilla work on properties, just like this:

class Foo ... {
  @vanilla
  private nondata: number = 0;
}

[ruojianll]

It is possible. It may be implemented in next version, but I can't give you a certian time.

[ruojianll]

Keep this open until we implement the feature.

[ruojianll]

@ericlogic Did you try markRaw?
https://vuejs.org/api/reactivity-advanced.html#markraw

[ericlogic]

I'm not using Vue Composition API at all. could you give me an example of how to use it in a class-style component.
Thanks!

[ruojianll]

Just wrap your object with markRaw imported from vue wherever you use it.

import {markRaw} from 'vue'
import {...} from 'vur-facing-decorator'
@Component
class C extends Vue{
    field = markRaw(yourObject)
    onMounted(){
         //or
         this.field = markRaw(yourObject)
    }
}