咨询Angular纯Pipe修改数组后UI意外更新的原因

首先明确Angular纯Pipe的核心规则：纯Pipe只会在输入值的引用发生变化时重新执行。对于数组这类引用类型，只要数组的引用没变，哪怕内部元素增删改，纯Pipe都不会再次触发执行。

但你的代码里出现了看似不符合这个规则的现象，本质原因是你在Pipe的transform方法里直接修改了原数组的内容，而非返回一个新数组：

• 你的trialArray是一个数组引用，Pipe执行时接收的就是这个引用，你调用pop()、push()、修改value[1]这些操作，都是直接在原数组上做修改，并没有创建新数组。
• 模板里的两个绑定{{trialArray}}和{{trialArray | arrayPipe}}指向的是同一个数组引用。当Pipe第一次执行时修改了原数组的内部数据，Angular的变更检测会检测到数组的字符串化结果发生了变化（插值绑定会对比前后的字符串输出），因此UI会更新显示修改后的数组。
• 而Pipe本身并没有被重新执行，它只在页面初始化时执行了一次，但这一次执行已经把原数组改了，所以后续UI显示的都是修改后的值。

具体执行流程 #

1. 页面初始化，trialArray = [1,2,3]
2. 触发Pipe执行，直接修改原数组：
   • pop() → 数组变为[1,2]
   • push(4) → 数组变为[1,2,4]
   • value[1]=5 → 数组最终变为[1,5,4]
3. 模板中两个绑定都指向这个被修改后的数组，因此UI显示[1,5,4]
4. 之后因为trialArray的引用没变化，纯Pipe不会再执行，但原数组已经被修改，所以UI不会再变回初始值。

符合纯Pipe特性的修正方案 #

如果想要让纯Pipe按预期工作，应该在Pipe中创建并返回新数组，避免修改原数据：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'arrayPipe',
  // pure:false
})
export class ArrayPipePipe implements PipeTransform {
  transform(value: number[]) {
    // 解构原数组创建新数组，不修改原数据
    const newArray = [...value];
    newArray.pop();
    newArray.push(4);
    newArray[1] = 5;
    console.log(newArray);
    return newArray;
  }
} 

修改后，模板里的第一个div会显示原数组[1,2,3]，第二个div显示Pipe处理后的新数组[1,5,4]，且因为纯Pipe的特性，只有当trialArray的引用变化时（比如重新赋值一个新数组），Pipe才会再次执行。

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