时间戳

首页 > 解决方案 > .includes() 如果与之关联的变量没有变化，是否会在变化检测循环期间运行？/ 替代 .includes()

html - .includes() 如果与之关联的变量没有变化，是否会在变化检测循环期间运行？/ 替代 .includes()

问题描述

我的组件文件中有一个变量 user_roles，它由 API 初始化，ngInit()之后不会更改。

this.service.getUserRoles().subscribe(
      data => {
        this.user_roles = data;
      }
    )

user_roles 是一个数组，其中包含该用户的权限：user_roles = ['admin', 'mediator', ...]

在我的模板中，我有基于 user_role 显示组件的代码：

<div *ngIf="user_roles.includes('admins') || user_roles.includes('mediator')">

    <div ....
    .
    . 
    .

.includes() 是否在每次其他变量更改并且更改检测循环运行时运行？如果是这样，那么我可以使用什么替代方法来提高性能？

标签： htmlangulartypescriptangular-ng-iffront-end-optimization

解决方案

是的，它会的。

angular更改检测并不意味着如果属性更改，则更新其依赖项。其实就是vue这样。实际上，angular变更检测意味着每次异步操作（Promise event setTimout）发生时，重新评估每个模板绑定。所以是的，includes将再次被调用。

最简单的验证方法如下

const orig = Array.prototype.includes
Array.prototype.includes = function<T> (arg: T) {
    console.log(this, arg)
    orig.call(this, arg)
}

推荐阅读