Variables reactivas con let
Declare estado reactivo en Svelte mediante declaraciones let normales
Variables reactivas con let es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 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 Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Sin una API especial
En Svelte, las declaraciones ordinarias de let en el bloque script son reactivas. No existe un equivalente de useState.
Declarar y usar
Declare una variable e interpólela en el marcado. Al actualizarla, se vuelve a renderizar la parte que depende de ella.
<script>
let count = 0;
</script>
<p>The count is {count}</p>Actualizar mediante asignación
La asignación es el desencadenante. count = count + 1 indica a Svelte que el valor ha cambiado.
function inc() { count = count + 1; }Forma abreviada de incrementar
Las formas abreviadas estándar de JS también funcionan: count++, count += 5, etc.
function inc() { count++; }Arrays y mutación
Mutar un array mediante push NO activa la reactividad. Debe volver a asignarlo.
items = [...items, newItem]; // ok
items.push(newItem); // does not updateObjetos y mutación
La misma regla se aplica a los objetos: reemplace la referencia, o reasigne una propiedad específica y el objeto contenedor.
user.name = "Bea";
user = user; // tell Svelte it changedPor qué importa la asignación
El compilador de Svelte instrumenta los operadores de asignación. Las llamadas a métodos como push son invisibles para el compilador.
Local frente a compartido
Un let simple crea un estado local para una instancia de componente. Para compartirlo entre componentes, utilice props o stores.
Valores iniciales
El lado derecho de la declaración let se ejecuta una vez cuando se inicializa la instancia del componente.
Tipado
Con lang="ts", asigne tipos explícitos a sus variables.
<script lang="ts">
let count: number = 0;
</script>Varias variables
Puede declarar tantas variables reactivas como desee, en una línea o en varias.
let x = 0, y = 0;
let items = [];Comprobación rápida
¿Qué activa la reactividad?
Resumen
Un let simple es reactivo. Reasigne, no mute, para activar las actualizaciones. Los arrays y objetos necesitan cambios de referencia.
Preguntas frecuentes
¿La lección «Variables reactivas con let» es gratis?
Sí — el texto completo de «Variables reactivas con let» 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 Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Variables reactivas con let»?
Declare estado reactivo en Svelte mediante declaraciones let normales Practicas Sveltejs 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 Sveltejs Academy?
No se requiere experiencia previa. Sveltejs 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 2 de 4.
¿Cuánto tiempo toma la lección «Variables reactivas con let»?
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 Sveltejs Academy?
Sí. Cada lección de Sveltejs 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
- La estructura de script, template y style
- Variables reactivas con let
- Interpolación: {expression}
- Valores calculados: declaraciones reactivas $: