let count = 0;
$: doubled = count * 2; // doubled will update whenever count changes
let
can be reactive// Good - reactive
let name = "Alice";
name = "Bob"; // This change will trigger updates
// Not reactive - const
const user = "Alice";
// Not reactive - object property
let user = { name: "Alice" };
user.name = "Bob"; // Won't trigger reactivity!
// Won't work
let numbers = [1, 2, 3];
numbers.push(4); // Modifying array in place
// Will work
numbers = [...numbers, 4]; // Creating new array
// For objects
let user = { name: "Alice" };
user = { ...user, name: "Bob" }; // Create new object
let
for state variableslet isLoggedIn = false;
let userName = "";
let todos = [];
let firstName = "John";
let lastName = "Doe";
$: fullName = `${firstName} ${lastName}`;
$: console.log(`Name changed to ${fullName}`);
$: {
console.log(`First name is ${firstName}`);
console.log(`Last name is ${lastName}`);
}
let count = 0;
// This function runs whenever count changes
$: updateTitle(count);
function updateTitle(count) {
document.title = `Count: ${count}`;
}
import { writable } from 'svelte/store';
// Create a store
const count = writable(0);
// Subscribe to changes with $
$count = 1; // Sets value
console.log($count); // Reads value
let
instead of const