Question

通常在Angualr中看到这些代码：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app',
    template: '<div *ngFor="let item of data"></div>'
})
export class App {
    // we define variable here
    data = [1, 2];
    tempData = [3, 4]; //temporary data, not involved in view rendering
}

正如我们所看到的，视图渲染中不会涉及一个临时变量，但是对于我们的应用程序来说，临时变量对于临时存储数据也是必需的。

这样写是什么：

import { Component, OnInit } from '@angular/core';
const tempData = [3, 4]; //temporary data, not involved in view rendering
    @Component({
        selector: 'app',
        template: '<div *ngFor="let item of data"></div>'
    })
    export class App {
        // we define variable here
        data = [1, 2];
    }

由于临时变量不会在视图渲染中使用，因此我可以在类外部定义它。在我看来，它将优化性能（因为它会减少角度的检测变量，所以我不知道它是否正确）。

那么哪种代码风格更好，它们之间的性能差异呢？

Answer 1

在第一个示例中，班级的每个实例都有一个tempData（不是变量，而是属性）。在第二个示例中，一个 tempData被类的所有实例重用（在这种情况下，它不是属性，而是常量）。

使用哪种方式取决于您是需要按实例tempData还是共享实例。

在模块的顶层声明它是否为私人信息，并且您不需要按实例将其声明是绝对可以的。该模块将是私有的。

那么哪种代码风格更好，它们之间的性能差异呢？

两者都不是更好；它们是不同的，并且做不同的事情，因此您可以根据需要使用一个或另一个。它们之间的任何性能差异都将完全可以忽略不计，无需考虑。

Answer 2

这完全取决于您。

但是，不会，它不会减少Angular变量的检测并提高性能：如果不在视图渲染中使用它，Angular就不会在乎（当然，据我所知）。

我要走的路是这样的：

如果变量与功能相关，我将其声明为static
如果变量与功能无关，而是功能的元数据（例如注入令牌），则将其声明为导出的常量

Answer 3

老实说，从来没有真正考虑过。

正如您自己说的那样，第一个示例将在初始化的组件类中包含变量及其数据，但只要它位于那里，就不会有或多或少的显着性能变化。除非它是一个巨大的表数据持有者，否则您可能会异步执行。

但是通常在类外使用变量以获得更简洁的代码。 Fx。我通常在路由器模块外部声明我的路由对象。然后像export const routes:Routes = []这样导出对象，然后将其重新导入到位，我们只需要保持它的整洁即可。

Answer 4

示例1：

每当在类中创建变量时，该变量即成为该类实例的属性。那是为该类创建的对象的成员。

示例2：

如果您不希望该类的每个实例使用该变量，则可以将其声明为静态变量或const变量。

注意： 角度应用的性能与所使用的变量没有太大的依赖关系。您可以通过减少循环执行和函数调用来优化性能，而不用将注意力集中在变量上，前提是您不必创建无限多个变量

最后，您无法比较和判断这两个示例或声明变量的方式

好的做法是在角度范围之外定义变量吗？

4 个答案: