Angular Signal的Effect执行时机及两个更新函数差异问题

问题1：Angular中Signal的effect函数何时执行？ #

• 首次执行：当effect被创建（比如在构造函数、组件钩子中声明）时，会立即执行一次，以此建立内部读取的Signal依赖关系。
• 触发重执行：当effect内部直接读取的Signal值发生变更时，会自动触发重新执行；若Signal值未变化，则不会触发。
• 特殊情况：若effect配置了{ allowSignalWrites: true }，内部修改Signal可能引发执行，但默认禁止该配置，需注意避免循环触发。

问题2：为何#workingUpdate与#brokenUpdate两个函数表现不同？ #

核心差异在于effect的依赖追踪是否成功建立，结合@ViewChild的初始化时机分析：

1. @ViewChild的初始化规则：组件构造函数执行时，视图尚未渲染，@ViewChild装饰的元素引用（output1/output2）仍为undefined，要等到ngAfterViewInit钩子阶段才会被赋值。
2. 两个函数的具体表现原因：
   • #workingUpdate：先执行const c = this.count();，这一步已让effect成功追踪到count的依赖。首次执行时访问this.output1.nativeElement会报错，但依赖关系已建立。后续点击按钮修改count时，effect会重新执行，此时ngAfterViewInit已完成，output1已赋值，因此能正常更新DOM。
   • #brokenUpdate：先尝试访问this.output2.nativeElement，此时output2仍为undefined，直接抛出错误，导致代码未执行到this.count()，effect的依赖追踪完全未建立。后续修改count时，该effect因无依赖可追踪，不会重新执行，因此表现为“失效”。

优化建议 #

你的临时解决方法只是利用了依赖追踪的时机，并非彻底解决问题。更稳妥的做法是确保元素引用初始化后再执行DOM操作，比如在ngAfterViewInit钩子中创建effect，并增加存在性判断：

import { effect, ElementRef, ViewChild, Component, AfterViewInit } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'test-app',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
  <button (click)="addOne()">count+</button><br/>
  count: {{count()}}<br/>
  output1: <span #output1></span><br/>
  output2: <span #output2></span><br/>
  `,
})
export class App implements AfterViewInit {
  count = signal(0);

  @ViewChild('output1') output1!: ElementRef;
  @ViewChild('output2') output2!: ElementRef;

  ngAfterViewInit() {
    effect(() => {
      if (this.output1) {
        this.output1.nativeElement.innerHTML = this.count();
      }
    }, { signal: takeUntilDestroyed() });

    effect(() => {
      if (this.output2) {
        this.output2.nativeElement.innerHTML = this.count();
      }
    }, { signal: takeUntilDestroyed() });
  }

  addOne() {
    this.count.update((c) => c + 1);
  }
}

内容的提问来源于stack exchange，提问作者Thomas