[Vuejs]-Is using array.inclues in templare a performance issue in angular

by

-2👍

Yes it is an performance issue. Everytime the template must be rerendered, this array iteration must be run, also. It’s a good choice to run with changeDetectionStragy.OnPush, which minimizes the amount of template rerendering.

Good practice:
You should seperate html templates which are responsible for viewing and the code of your component which are responsible to react of events and bring the model to the view.
The core concept of that is Model-View-Controller. (MVC)

I recommend to calculate your "active" property in the controller or a service.

This property is calculated only one time and can easily bound to your template.

Do it like this:


public class MyComponent {

   public isActive: boolean;
   private myIds: string[];

   constructor() {
      this.isActive = false;
      this.myIds = [];

   }

   public ngOnInit(): void {
      // load myIds
     // this.myIds = this._myIdsService.getIds();
    this.isActive = this._myids.includes(step.id);

   }

}

And then bind this property to your view…

 <div [class.active]="isActive"></div>

Leave a comment