Pipes puros frente a impuros
Comprenda el comportamiento de los pipes en la detección de cambios.
Pipes puros frente a impuros es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Pipes puros de forma predeterminada
Todos los pipes son puros de forma predeterminada. Un pipe puro solo vuelve a ejecutarse cuando su valor de entrada o sus argumentos cambian por referencia.
Por qué los pipes puros son rápidos
Angular omite la llamada a un pipe puro durante la detección de cambios si la referencia de entrada no ha cambiado. Esto hace que los pipes puros sean eficientes.
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changesCambios de referencia frente a cambios de valor
Los pipes puros detectan cambios de referencia. Modificar un array directamente NO activa un pipe puro, porque la referencia del array sigue siendo la misma.
// this will NOT re-run a pure pipe:
this.items.push("new");
// this WILL, new reference:
this.items = [...this.items, "new"];Declarar un pipe impuro
Establezca pure: false en el decorador @Pipe para hacer que un pipe sea impuro. Un pipe impuro se ejecuta en cada ciclo de detección de cambios.
@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
transform(items: string[], term: string) {
return items.filter(i => i.includes(term));
}
}Cuándo usar pipes impuros
Utilice pipes impuros cuando la transformación dependa de datos mutables, como al filtrar un array que modifica directamente, o de valores que cambian sin crear una referencia nueva.
El coste de los pipes impuros
Los pipes impuros se ejecutan con mucha frecuencia, en cada ciclo de detección de cambios. La lógica pesada en su interior puede perjudicar el rendimiento, así que manténgalos ligeros.
El pipe async es impuro
El pipe integrado async es impuro. Se suscribe a un Observable o Promise y actualiza la vista a medida que llegan nuevos valores.
<p>{{ data$ | async }}</p>
// component
data$ = this.http.get("/api/data");El pipe async cancela la suscripción automáticamente
Una gran ventaja del pipe async es que cancela automáticamente la suscripción cuando se destruye el componente, lo que evita fugas de memoria.
@Component({
template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
count$ = interval(1000);
}Evitar mutaciones con pipes puros
Para que los pipes puros funcionen con colecciones, trate los datos como inmutables: cree nuevos arrays y objetos en lugar de modificar los existentes.
// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };Elegir entre puros e impuros
Prefiera los pipes puros para obtener un comportamiento rápido y predecible. Recurra a los impuros solo cuando realmente necesite reaccionar a mutaciones. A menudo, rediseñar el código con datos inmutables evita por completo los pipes impuros.
Buenas prácticas para pipes impuros
Si debe utilizar un pipe impuro, memorice los resultados para no volver a calcularlos cuando las entradas no hayan cambiado.
@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
private last = "";
private cache: string[] = [];
transform(items: string[], term: string) {
if (term === this.last) return this.cache;
this.last = term;
this.cache = items.filter(i => i.includes(term));
return this.cache;
}
}Comprobación rápida
Compruebe su comprensión de los pipes puros e impuros.
Resumen
Los pipes puros se ejecutan solo cuando cambian las referencias y son rápidos; los pipes impuros (pure: false) se ejecutan en cada ciclo y son adecuados para datos mutables. El pipe async es impuro y cancela la suscripción automáticamente.
Favorezca los datos inmutables para que los pipes puros sigan siendo eficientes.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 38
- Lecciones
- 144
Preguntas frecuentes
¿La lección «Pipes puros frente a impuros» es gratis?
Sí — el texto completo de «Pipes puros frente a impuros» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Pipes puros frente a impuros»?
Comprenda el comportamiento de los pipes en la detección de cambios. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Pipes puros frente a impuros»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Uso de pipes integrados
- Encadenamiento y parametrización de pipes
- Creación de pipes personalizados
- Pipes puros frente a impuros