class get cache issue

[John0King]

copied from kaorun343/vue-property-decorator#320.

I do not know which repo should handle this issue, but

the get/set should not be cached to align with the class's behavior

@Component
export default class MyComponent extends Vue{
    @Prop({type:Object, default:()=({})})
     value!:any;

    obj:any = {};
    get obj2(){
        console.log("get ")// this will only log once,
        return {...obj, a: new Date()}
    }

    @Watch('value',{ deep:true})
    watchValue(v:any){
        this.obj = {... this.value}
    }

    mounted(){
         this.watchValue(this.value);
    }
}

[ktsn]

Getters / setters are converted to computed properties as docs saids.
https://class-component.vuejs.org/guide/class-component.html#computed-properties

Vue caches the return value of computed properties, so it's expected behavior.

[John0King]

@ktsn if Getters / setters are converted to computed properties then it should use the cache:false instead of the default cache mode. without cache ,the behavior is match to the class behavior .
this is what the class do when you call this.<property> ,
and for vue object style, they called computed properties not geter/seter.

I suggest:

1. the default get/set convert to computed properties with option cache:false
2. add @Computed(options: { cache?:boolean }) and allow configurate with the get or set method (configurate only need once eg. only add on getter or setter , like angular does)

[John0King]

@ktsn reopen this ?

[ktsn]

Several reasons I think it doesn't justify the change.

1. This is breaking change
2. Vue doesn't have an option of no cache for computed properties (in public api).
3. Vue Class Component is for making Vue component before being aligning class behavior. If you want to make it behaving everything like standard class behavior, we would also disable making class properties become reactive which is too redundant to define Vue component (computed also can be told).
4. We don't aggressively introduce decorators as its spec is still unstable and we don't see much progress on it.
5. You can use methods if you don't want caching which is known pattern in Vue.js

[John0King]

@ktsn

Vue doesn't have an option of no cache for computed properties (in public api)

maybe I missing some thing , but from the code I think it indeed have a api for control the cache behavior

@Component<SearchPanel>({
  computed: {
    txtValue: {
      cache: false, //////  this is the api ?
      get: function() {
        let x = {
          ...this.copyValue,
          timeStart: this.getDateStr(this.copyValue.timeStart),
          timeEnd: this.getDateStr(this.copyValue.timeEnd)
        };
        console.log(x);
        return x;
      }
    }
  }
})
export default class SearchPanel extends Vue{
copyValue: any= {};
txtValue!: any; 
}

[ktsn]

It's undocumented / private api and we recommend against using it.