I've encountered an issue where Vue's observer and reactive components are using up a significant amount of memory during runtime. You can see an example of this in the Memory allocation on DevTools.
Is there a way to detach observables and prevent objects from being reactive?
Alternatively, is there another approach that could greatly reduce memory usage?
export class Entity {
public Id: number;
public Array: EntityArray[] | undefined;
public CreatedBy: string;
public CreatedOn: Date;
public ModifiedBy: string;
public ModifiedOn: Date;
constructor(p?: IEntity) {
this.Id = p ? p.Id : 0;
this.Array = p && p.Array ? p.Array.map((m: IEntityArray) => new EntityArray(m)) : [];
this.CreatedBy = p ? p.CreatedBy : '';
this.CreatedOn = p ? p.CreatedOn : new Date();
this.ModifiedBy = p ? p.ModifiedBy : '';
this.ModifiedOn = p ? p.ModifiedOn : new Date();
}
In this code snippet, I'm initializing the Array, which is then extended by another entity that's initialized within the beforeMount() method of a Vue component. My suspicion is that the large number of items in this Array object is the primary cause of the excessive memory consumption.
I might be mistaken in my assessment of the memory issue. I welcome any insights or solutions from others. Thank you.