Introdução

A rune $derived cria valores que são computados a partir de outros valores reativos. Quando esses valores de origem mudam, o valor derivado é recalculado automaticamente. Este é um dos conceitos mais poderosos do sistema de reatividade do Svelte 5 — ele permite que você expresse relacionamentos complexos de dados de forma declarativa, enquanto o framework cuida de toda a lógica de atualização.

Analogia: Pense em um valor derivado como um placar ao vivo em uma partida esportiva. O placar não tem opinião própria sobre o resultado — ele simplesmente reflete o estado atual do jogo. Quando um time marca, o placar é atualizado automaticamente.

O Svelte 5 fornece duas formas da rune derived:

$derived(expression) — Para computações simples de expressão única
$derived.by(() => { ... }) — Para lógica complexa que requer múltiplas instruções

Este tutorial cobre cada forma em profundidade, explica quando usar cada uma e fornece extensos exemplos do mundo real para ajudá-lo a dominar as computações reativas no Svelte 5.

Parte 1: A Rune `$derived`

O Que É `$derived`?

$derived cria um valor reativo a partir de uma expressão única. Quando qualquer valor reativo nessa expressão muda, o valor derivado é recalculado automaticamente.

Valores derivados são memoizados automaticamente — eles só são recalculados quando as dependências mudam, tornando-os perfeitos para computações custosas.

<script>
	let count = $state(5)
	let doubled = $derived(count * 2) // Always count * 2
</script>

<p>{count} × 2 = {doubled}</p>

A restrição principal: $derived() recebe exatamente uma expressão — sem ponto e vírgula, sem múltiplas instruções, sem fluxo de controle. Pense nisso como uma fórmula em uma célula de planilha.

Sintaxe Básica

let derivedValue = $derived(expression)

Onde expression pode ser:

Aritmética: count * 2, price + tax
Chamadas de método: items.filter(...), name.toUpperCase()
Operadores ternários: isActive ? 'Yes' : 'No'
Template literals: `Hello, ${name}!`
Acesso a propriedades: user.profile.name
Métodos encadeados: items.filter(...).map(...).join(', ')

Quando Usar `$derived`

Use $derived quando sua computação couber em uma expressão única sem etapas intermediárias.

Bons casos de uso para $derived:

<script>
	let price = $state(100)
	let quantity = $state(2)
	let taxRate = $state(0.08)
	let items = $state(['banana', 'apple', 'cherry'])
	let user = $state({ firstName: 'Alice', lastName: 'Smith' })

	// Simple arithmetic
	let subtotal = $derived(price * quantity)
	let tax = $derived(subtotal * taxRate)
	let total = $derived(subtotal + tax)

	// Array operations
	let sorted = $derived([...items].sort())
	let count = $derived(items.length)
	let first = $derived(items[0])
	let hasItems = $derived(items.length > 0)

	// String operations
	let fullName = $derived(`${user.firstName} ${user.lastName}`)
	let initials = $derived(`${user.firstName[0]}${user.lastName[0]}`)

	// Ternary expressions
	let status = $derived(total > 500 ? 'Premium Order' : 'Standard Order')
	let discount = $derived(quantity >= 10 ? 0.1 : 0)

	// Chained methods (still one expression)
	let processed = $derived(
		items
			.filter((i) => i.length > 4)
			.map((i) => i.toUpperCase())
			.join(', ')
	)

	// Nullish coalescing and optional chaining
	let displayName = $derived(user?.nickname ?? user.firstName)
</script>

Regra geral: Se você pode escrever sem ponto e vírgula ou chaves { }, use $derived().

Exemplos do Mundo Real com `$derived`

1. Totais do Carrinho de Compras

<script>
	let cart = $state([
		{ name: 'T-Shirt', price: 25.99, quantity: 2 },
		{ name: 'Jeans', price: 59.99, quantity: 1 },
		{ name: 'Socks', price: 8.99, quantity: 3 }
	])

	let itemCount = $derived(cart.reduce((sum, item) => sum + item.quantity, 0))
	let subtotal = $derived(cart.reduce((sum, item) => sum + item.price * item.quantity, 0))
	let shipping = $derived(subtotal > 100 ? 0 : 9.99)
	let total = $derived(subtotal + shipping)
	let freeShippingRemaining = $derived(Math.max(0, 100 - subtotal))
</script>

<h2>Your Cart ({itemCount} items)</h2>

{#each cart as item}
	<div class="cart-item">
		<span>{item.name}</span>
		<input type="number" bind:value={item.quantity} min="1" />
		<span>${(item.price * item.quantity).toFixed(2)}</span>
	</div>
{/each}

<hr />
<p>Subtotal: ${subtotal.toFixed(2)}</p>
<p>Shipping: {shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</p>

{#if freeShippingRemaining > 0}
	<p class="promo">Add ${freeShippingRemaining.toFixed(2)} more for free shipping!</p>
{/if}

<p class="total">Total: ${total.toFixed(2)}</p>

2. Pesquisa e Filtro

<script>
	let products = $state([
		{ name: 'MacBook Pro', category: 'Electronics', price: 1999 },
		{ name: 'iPhone', category: 'Electronics', price: 999 },
		{ name: 'Coffee Maker', category: 'Kitchen', price: 79 },
		{ name: 'Standing Desk', category: 'Furniture', price: 599 },
		{ name: 'Headphones', category: 'Electronics', price: 299 }
	])

	let searchQuery = $state('')
	let selectedCategory = $state('all')
	let maxPrice = $state(2000)

	// Each filter step is a simple expression
	let searchFiltered = $derived(
		products.filter((p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
	)

	let categoryFiltered = $derived(
		selectedCategory === 'all'
			? searchFiltered
			: searchFiltered.filter((p) => p.category === selectedCategory)
	)

	let priceFiltered = $derived(categoryFiltered.filter((p) => p.price <= maxPrice))

	let resultCount = $derived(priceFiltered.length)
	let categories = $derived([...new Set(products.map((p) => p.category))])
</script>

<input type="search" bind:value={searchQuery} placeholder="Search products..." />

<select bind:value={selectedCategory}>
	<option value="all">All Categories</option>
	{#each categories as cat}
		<option value={cat}>{cat}</option>
	{/each}
</select>

<label>
	Max Price: ${maxPrice}
	<input type="range" bind:value={maxPrice} min="0" max="2000" />
</label>

<p>Showing {resultCount} products</p>

{#each priceFiltered as product}
	<div class="product">
		<h3>{product.name}</h3>
		<p>{product.category} • ${product.price}</p>
	</div>
{/each}

3. Contador de Caracteres em Tempo Real

<script>
	let text = $state('')
	let maxLength = $state(280)

	let charCount = $derived(text.length)
	let remaining = $derived(maxLength - charCount)
	let percentage = $derived((charCount / maxLength) * 100)
	let isOverLimit = $derived(charCount > maxLength)
	let isNearLimit = $derived(remaining <= 20 && remaining > 0)
	let wordCount = $derived(text.trim() ? text.trim().split(/\s+/).length : 0)
</script>

<textarea bind:value={text} placeholder="What's happening?"></textarea>

<div class="counter" class:warning={isNearLimit} class:error={isOverLimit}>
	{remaining} characters remaining • {wordCount} words
</div>

<div class="progress-bar">
	<div
		class="progress"
		style="width: {Math.min(percentage, 100)}%"
		class:warning={isNearLimit}
		class:error={isOverLimit}
	></div>
</div>

<button disabled={isOverLimit || charCount === 0}> Post </button>

<style>
	.warning {
		color: #f39c12;
	}
	.error {
		color: #e74c3c;
	}
	.progress-bar {
		height: 4px;
		background: #eee;
		border-radius: 2px;
	}
	.progress {
		height: 100%;
		background: #3498db;
		transition: width 0.2s;
	}
	.progress.warning {
		background: #f39c12;
	}
	.progress.error {
		background: #e74c3c;
	}
</style>

4. Conversor de Moeda

<script>
	let amount = $state(100)
	let fromCurrency = $state('USD')
	let toCurrency = $state('EUR')

	// In real app, these would come from an API
	let rates = $state({
		USD: 1,
		EUR: 0.92,
		GBP: 0.79,
		JPY: 149.5,
		CAD: 1.36
	})

	let converted = $derived((amount / rates[fromCurrency]) * rates[toCurrency])
	let formattedResult = $derived(
		new Intl.NumberFormat('en-US', {
			style: 'currency',
			currency: toCurrency
		}).format(converted)
	)
	let exchangeRate = $derived((rates[toCurrency] / rates[fromCurrency]).toFixed(4))
</script>

<input type="number" bind:value={amount} />
<select bind:value={fromCurrency}>
	{#each Object.keys(rates) as currency}
		<option value={currency}>{currency}</option>
	{/each}
</select>

<span>→</span>

<select bind:value={toCurrency}>
	{#each Object.keys(rates) as currency}
		<option value={currency}>{currency}</option>
	{/each}
</select>

<p class="result">{formattedResult}</p>
<p class="rate">1 {fromCurrency} = {exchangeRate} {toCurrency}</p>

5. Formatação de Data e Hora

<script>
	let selectedDate = $state(new Date())

	let formattedDate = $derived(selectedDate.toLocaleDateString('en-US', { dateStyle: 'full' }))
	let formattedTime = $derived(selectedDate.toLocaleTimeString('en-US', { timeStyle: 'short' }))
	let relativeTime = $derived(getRelativeTime(selectedDate))
	let dayOfYear = $derived(
		Math.floor((selectedDate - new Date(selectedDate.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
	)
	let weekNumber = $derived(Math.ceil(dayOfYear / 7))
	let isWeekend = $derived([0, 6].includes(selectedDate.getDay()))
	let quarter = $derived(Math.ceil((selectedDate.getMonth() + 1) / 3))

	function getRelativeTime(date) {
		const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
		const diff = date - new Date()
		const days = Math.round(diff / (1000 * 60 * 60 * 24))
		if (Math.abs(days) < 1) return 'today'
		return rtf.format(days, 'day')
	}
</script>

<input type="datetime-local" bind:value={selectedDate} />

<dl>
	<dt>Full Date</dt>
	<dd>{formattedDate}</dd>

	<dt>Time</dt>
	<dd>{formattedTime}</dd>

	<dt>Relative</dt>
	<dd>{relativeTime}</dd>

	<dt>Day of Year</dt>
	<dd>{dayOfYear}</dd>

	<dt>Week Number</dt>
	<dd>{weekNumber}</dd>

	<dt>Quarter</dt>
	<dd>Q{quarter}</dd>

	<dt>Weekend?</dt>
	<dd>{isWeekend ? 'Yes 🎉' : 'No'}</dd>
</dl>

Valores Derivados vs. Cálculos Diretos no Template

Por que usar $derived em vez de calcular diretamente no template?

<script>
	let items = $state([
		{ name: 'Apple', price: 1.5, quantity: 3 },
		{ name: 'Banana', price: 0.75, quantity: 5 }
	])

	// With $derived - calculated once, reused everywhere
	let total = $derived(items.reduce((sum, item) => sum + item.price * item.quantity, 0))
</script>

<!-- Option 1: Using $derived (better) -->
<p>Total: ${total.toFixed(2)}</p>
<p>With tax: ${(total * 1.08).toFixed(2)}</p>
<p>Per item average: ${(total / items.length).toFixed(2)}</p>

<!-- Option 2: Calculating in template (worse) -->
<p>Total: ${items.reduce((s, i) => s + i.price * i.quantity, 0).toFixed(2)}</p>
<p>With tax: ${(items.reduce((s, i) => s + i.price * i.quantity, 0) * 1.08).toFixed(2)}</p>
<!-- The reduce runs THREE times! -->

Benefícios do $derived:

Calcula uma vez por mudança e armazena o resultado em cache
Torna o código mais legível
Pode ser reutilizado em todo o template
Mais fácil de depurar e testar

Parte 2: A Rune `$derived.by`

O Que É `$derived.by`?

$derived.by cria um valor reativo a partir de um corpo de função. Ao contrário de $derived, ele pode conter múltiplas instruções, variáveis intermediárias, fluxo de controle, loops, blocos try/catch e retornos antecipados.

<script>
	let numbers = $state([1, 5, 3, 9, 2, 7])

	let stats = $derived.by(() => {
		// Multiple statements and variables
		const sorted = [...numbers].sort((a, b) => a - b)
		const sum = numbers.reduce((a, b) => a + b, 0)
		const avg = sum / numbers.length

		// Multi-step calculation
		const mid = Math.floor(sorted.length / 2)
		const median = sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid]

		// Return the computed result
		return { min: sorted[0], max: sorted.at(-1), sum, avg, median }
	})
</script>

Sintaxe Básica

let derivedValue = $derived.by(() => {
	// Multiple statements
	// Local variables
	// Control flow
	return result
})

A função passada para $derived.by deve:

Ser síncrona (sem async/await)
Retornar um valor
Ser uma computação pura (sem efeitos colaterais)

Quando Usar `$derived.by`

Use $derived.by quando precisar de:

Múltiplas instruções — Mais de uma linha de lógica
Variáveis intermediárias — Variáveis para armazenar resultados parciais
Fluxo de controle — if/else, switch, for, while
Retornos antecipados — Retorno de diferentes caminhos de código
Try/catch — Tratamento de erros
Transformações complexas — Processamento de dados em múltiplas etapas

Exemplos do Mundo Real com `$derived.by`

1. Sistema de Permissões de Usuário

<script>
	let user = $state({
		id: 1,
		name: 'Alice',
		role: 'editor',
		subscription: 'premium',
		verified: true,
		loginCount: 42,
		createdAt: new Date('2023-01-15')
	})

	let permissions = $derived.by(() => {
		// Admin gets everything - early return
		if (user.role === 'admin') {
			return {
				canRead: true,
				canWrite: true,
				canDelete: true,
				canPublish: true,
				canManageUsers: true,
				canAccessAnalytics: true,
				canExport: true
			}
		}

		// Start with base permissions
		const perms = {
			canRead: true,
			canWrite: false,
			canDelete: false,
			canPublish: false,
			canManageUsers: false,
			canAccessAnalytics: false,
			canExport: false
		}

		// Role-based permissions
		if (user.role === 'editor') {
			perms.canWrite = true
			perms.canPublish = true
		} else if (user.role === 'author') {
			perms.canWrite = true
		}

		// Subscription-based upgrades
		if (user.subscription === 'premium') {
			perms.canAccessAnalytics = true
			perms.canExport = true
		} else if (user.subscription === 'pro') {
			perms.canExport = true
		}

		// Verified users can delete their own content
		if (user.verified) {
			perms.canDelete = true
		}

		// Veteran users (1+ year) get analytics
		const accountAge = Date.now() - user.createdAt.getTime()
		const oneYear = 365 * 24 * 60 * 60 * 1000
		if (accountAge > oneYear) {
			perms.canAccessAnalytics = true
		}

		return perms
	})
</script>

<h2>Permissions for {user.name}</h2>
<ul>
	{#each Object.entries(permissions) as [perm, allowed]}
		<li class:granted={allowed} class:denied={!allowed}>
			{perm}: {allowed ? 'yes' : 'no'}
		</li>
	{/each}
</ul>

2. Validação de Formulário com Erros Detalhados

<script>
	let form = $state({
		email: '',
		password: '',
		confirmPassword: '',
		age: '',
		website: ''
	})

	let validation = $derived.by(() => {
		const errors = {}
		const warnings = {}

		// Email validation
		if (!form.email) {
			errors.email = 'Email is required'
		} else if (!form.email.includes('@')) {
			errors.email = 'Please enter a valid email address'
		} else if (form.email.endsWith('.con')) {
			warnings.email = 'Did you mean .com?'
		}

		// Password validation
		if (!form.password) {
			errors.password = 'Password is required'
		} else {
			const pwd = form.password
			const issues = []

			if (pwd.length < 8) issues.push('at least 8 characters')
			if (!/[A-Z]/.test(pwd)) issues.push('one uppercase letter')
			if (!/[a-z]/.test(pwd)) issues.push('one lowercase letter')
			if (!/[0-9]/.test(pwd)) issues.push('one number')
			if (!/[^A-Za-z0-9]/.test(pwd)) issues.push('one special character')

			if (issues.length > 0) {
				errors.password = `Password needs: ${issues.join(', ')}`
			}
		}

		// Confirm password
		if (form.password && form.confirmPassword !== form.password) {
			errors.confirmPassword = 'Passwords do not match'
		}

		// Age validation
		if (form.age) {
			const age = parseInt(form.age)
			if (isNaN(age)) {
				errors.age = 'Please enter a valid number'
			} else if (age < 13) {
				errors.age = 'You must be at least 13 years old'
			} else if (age > 120) {
				errors.age = 'Please enter a realistic age'
			} else if (age < 18) {
				warnings.age = 'Parental consent may be required'
			}
		}

		// Website validation (optional field)
		if (form.website) {
			try {
				new URL(form.website)
			} catch {
				// Try adding https://
				try {
					new URL(`https://${form.website}`)
					warnings.website = 'Consider adding https://'
				} catch {
					errors.website = 'Please enter a valid URL'
				}
			}
		}

		const errorCount = Object.keys(errors).length
		const warningCount = Object.keys(warnings).length
		const isValid = errorCount === 0

		return { errors, warnings, errorCount, warningCount, isValid }
	})
</script>

<form>
	<div class="field">
		<label>Email</label>
		<input type="email" bind:value={form.email} />
		{#if validation.errors.email}
			<span class="error">{validation.errors.email}</span>
		{:else if validation.warnings.email}
			<span class="warning">{validation.warnings.email}</span>
		{/if}
	</div>

	<div class="field">
		<label>Password</label>
		<input type="password" bind:value={form.password} />
		{#if validation.errors.password}
			<span class="error">{validation.errors.password}</span>
		{/if}
	</div>

	<div class="field">
		<label>Confirm Password</label>
		<input type="password" bind:value={form.confirmPassword} />
		{#if validation.errors.confirmPassword}
			<span class="error">{validation.errors.confirmPassword}</span>
		{/if}
	</div>

	<div class="field">
		<label>Age</label>
		<input type="number" bind:value={form.age} />
		{#if validation.errors.age}
			<span class="error">{validation.errors.age}</span>
		{:else if validation.warnings.age}
			<span class="warning">{validation.warnings.age}</span>
		{/if}
	</div>

	<div class="field">
		<label>Website (optional)</label>
		<input type="text" bind:value={form.website} />
		{#if validation.errors.website}
			<span class="error">{validation.errors.website}</span>
		{:else if validation.warnings.website}
			<span class="warning">{validation.warnings.website}</span>
		{/if}
	</div>

	<button type="submit" disabled={!validation.isValid}>
		Submit ({validation.errorCount} errors, {validation.warningCount} warnings)
	</button>
</form>

3. Gerador de Relatório Financeiro

<script>
	let transactions = $state([
		{ date: '2024-01-05', type: 'income', amount: 5000, category: 'salary' },
		{ date: '2024-01-10', type: 'expense', amount: 1200, category: 'rent' },
		{ date: '2024-01-12', type: 'expense', amount: 85, category: 'utilities' },
		{ date: '2024-01-15', type: 'income', amount: 500, category: 'freelance' },
		{ date: '2024-01-18', type: 'expense', amount: 150, category: 'groceries' },
		{ date: '2024-01-22', type: 'expense', amount: 60, category: 'entertainment' },
		{ date: '2024-01-25', type: 'expense', amount: 200, category: 'groceries' },
		{ date: '2024-01-28', type: 'income', amount: 250, category: 'dividends' }
	])

	let report = $derived.by(() => {
		// Initialize accumulators
		let totalIncome = 0
		let totalExpenses = 0
		const incomeByCategory = {}
		const expensesByCategory = {}
		const dailyBalance = []

		// Track running balance for chart data
		let runningBalance = 0

		// Sort transactions by date for running balance
		const sortedTransactions = [...transactions].sort((a, b) => new Date(a.date) - new Date(b.date))

		// Single pass through data
		for (const t of sortedTransactions) {
			if (t.type === 'income') {
				totalIncome += t.amount
				incomeByCategory[t.category] = (incomeByCategory[t.category] || 0) + t.amount
				runningBalance += t.amount
			} else {
				totalExpenses += t.amount
				expensesByCategory[t.category] = (expensesByCategory[t.category] || 0) + t.amount
				runningBalance -= t.amount
			}

			dailyBalance.push({
				date: t.date,
				balance: runningBalance,
				transaction: t
			})
		}

		// Calculate derived metrics
		const netIncome = totalIncome - totalExpenses
		const savingsRate = totalIncome > 0 ? ((netIncome / totalIncome) * 100).toFixed(1) : 0

		// Find largest expense category
		const largestExpenseCategory = Object.entries(expensesByCategory).sort(
			([, a], [, b]) => b - a
		)[0]

		// Monthly comparison (if we had previous month data)
		const expenseBreakdown = Object.entries(expensesByCategory)
			.map(([category, amount]) => ({
				category,
				amount,
				percentage: ((amount / totalExpenses) * 100).toFixed(1)
			}))
			.sort((a, b) => b.amount - a.amount)

		// Budget warnings
		const warnings = []
		if (savingsRate < 10) {
			warnings.push('Savings rate below recommended 10%')
		}
		if (expensesByCategory.entertainment > totalIncome * 0.1) {
			warnings.push('Entertainment exceeds 10% of income')
		}

		return {
			totalIncome,
			totalExpenses,
			netIncome,
			savingsRate,
			incomeByCategory,
			expensesByCategory,
			expenseBreakdown,
			largestExpenseCategory: largestExpenseCategory
				? { name: largestExpenseCategory[0], amount: largestExpenseCategory[1] }
				: null,
			dailyBalance,
			currentBalance: runningBalance,
			transactionCount: transactions.length,
			warnings
		}
	})
</script>

<h2>Financial Report</h2>

<div class="summary-cards">
	<div class="card income">
		<h3>Income</h3>
		<p class="amount">${report.totalIncome.toLocaleString()}</p>
	</div>
	<div class="card expenses">
		<h3>Expenses</h3>
		<p class="amount">${report.totalExpenses.toLocaleString()}</p>
	</div>
	<div
		class="card balance"
		class:positive={report.netIncome >= 0}
		class:negative={report.netIncome < 0}
	>
		<h3>Net</h3>
		<p class="amount">${report.netIncome.toLocaleString()}</p>
	</div>
</div>

<p>Savings Rate: {report.savingsRate}%</p>

{#if report.largestExpenseCategory}
	<p>
		Largest expense: {report.largestExpenseCategory.name} (${report.largestExpenseCategory.amount})
	</p>
{/if}

<h3>Expense Breakdown</h3>
{#each report.expenseBreakdown as item}
	<div class="expense-bar">
		<span>{item.category}</span>
		<div class="bar" style="width: {item.percentage}%"></div>
		<span>${item.amount} ({item.percentage}%)</span>
	</div>
{/each}

{#if report.warnings.length > 0}
	<div class="warnings">
		<h3>Warnings</h3>
		<ul>
			{#each report.warnings as warning}
				<li>{warning}</li>
			{/each}
		</ul>
	</div>
{/if}

4. Parser de Markdown com Tratamento de Erros

<script>
	let markdownInput = $state(`# Hello World

This is a **bold** statement and this is *italic*.

- Item 1
- Item 2
- Item 3

> A blockquote

\`\`\`javascript
const x = 42;
\`\`\`
`)

	let parsed = $derived.by(() => {
		try {
			let html = markdownInput

			// Track what we've processed for stats
			const stats = {
				headings: 0,
				bold: 0,
				italic: 0,
				lists: 0,
				codeBlocks: 0,
				blockquotes: 0
			}

			// Process code blocks first (to avoid processing their contents)
			const codeBlocks = []
			html = html.replace(/```

(\w*)\n([\s\S]*?)

```/g, (match, lang, code) => {
				stats.codeBlocks++
				const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`
				codeBlocks.push({ lang, code: code.trim() })
				return placeholder
			})

			// Headings
			html = html.replace(/^### (.+)$/gm, (_, text) => {
				stats.headings++
				return `<h3>${text}</h3>`
			})
			html = html.replace(/^## (.+)$/gm, (_, text) => {
				stats.headings++
				return `<h2>${text}</h2>`
			})
			html = html.replace(/^# (.+)$/gm, (_, text) => {
				stats.headings++
				return `<h1>${text}</h1>`
			})

			// Bold and italic
			html = html.replace(/\*\*(.+?)\*\*/g, (_, text) => {
				stats.bold++
				return `<strong>${text}</strong>`
			})
			html = html.replace(/\*(.+?)\*/g, (_, text) => {
				stats.italic++
				return `<em>${text}</em>`
			})

			// Lists
			html = html.replace(/^- (.+)$/gm, (_, text) => {
				stats.lists++
				return `<li>${text}</li>`
			})
			html = html.replace(/(<li>.*<\/li>\n?)+/g, (match) => {
				return `<ul>${match}</ul>`
			})

			// Blockquotes
			html = html.replace(/^> (.+)$/gm, (_, text) => {
				stats.blockquotes++
				return `<blockquote>${text}</blockquote>`
			})

			// Restore code blocks
			codeBlocks.forEach((block, i) => {
				const highlighted = `<pre><code class="language-${block.lang}">${escapeHtml(block.code)}</code></pre>`
				html = html.replace(`__CODE_BLOCK_${i}__`, highlighted)
			})

			// Paragraphs (lines that aren't already wrapped)
			html = html
				.split('\n\n')
				.map((block) => {
					if (block.match(/^<[^>]+>/)) return block
					if (block.trim()) return `<p>${block}</p>`
					return ''
				})
				.join('\n')

			return {
				success: true,
				html,
				stats,
				error: null
			}
		} catch (error) {
			return {
				success: false,
				html: '',
				stats: null,
				error: error.message
			}
		}
	})

	function escapeHtml(text) {
		return text
			.replace(/&/g, '&amp;')
			.replace(/</g, '&lt;')
			.replace(/>/g, '&gt;')
			.replace(/"/g, '"')
	}
</script>

<div class="editor">
	<textarea bind:value={markdownInput}></textarea>

	<div class="preview">
		{#if parsed.success}
			{@html parsed.html}

			<div class="stats">
				<small>
					{parsed.stats.headings} headings •
					{parsed.stats.bold} bold •
					{parsed.stats.italic} italic •
					{parsed.stats.codeBlocks} code blocks
				</small>
			</div>
		{:else}
			<div class="error">
				Parse error: {parsed.error}
			</div>
		{/if}
	</div>
</div>

5. Agrupamento e Agregação Inteligente de Dados

<script>
	let employees = $state([
		{ id: 1, name: 'Alice', department: 'Engineering', salary: 95000, startDate: '2020-03-15' },
		{ id: 2, name: 'Bob', department: 'Marketing', salary: 72000, startDate: '2021-06-01' },
		{ id: 3, name: 'Carol', department: 'Engineering', salary: 88000, startDate: '2019-11-20' },
		{ id: 4, name: 'David', department: 'Sales', salary: 68000, startDate: '2022-01-10' },
		{ id: 5, name: 'Eve', department: 'Engineering', salary: 102000, startDate: '2018-07-22' },
		{ id: 6, name: 'Frank', department: 'Marketing', salary: 78000, startDate: '2020-09-05' },
		{ id: 7, name: 'Grace', department: 'Sales', salary: 71000, startDate: '2021-03-18' }
	])

	let groupBy = $state('department')

	let analysis = $derived.by(() => {
		const groups = {}
		const companyStats = {
			totalEmployees: employees.length,
			totalSalary: 0,
			avgSalary: 0,
			seniorityDistribution: { '<1yr': 0, '1-2yr': 0, '2-3yr': 0, '3+yr': 0 }
		}

		const now = new Date()

		// First pass: group employees and gather company-wide stats
		for (const emp of employees) {
			// Group by selected field
			const groupKey = emp[groupBy]
			if (!groups[groupKey]) {
				groups[groupKey] = {
					employees: [],
					totalSalary: 0,
					count: 0
				}
			}
			groups[groupKey].employees.push(emp)
			groups[groupKey].totalSalary += emp.salary
			groups[groupKey].count++

			// Company-wide stats
			companyStats.totalSalary += emp.salary

			// Seniority calculation
			const startDate = new Date(emp.startDate)
			const yearsEmployed = (now - startDate) / (365.25 * 24 * 60 * 60 * 1000)

			if (yearsEmployed < 1) companyStats.seniorityDistribution['<1yr']++
			else if (yearsEmployed < 2) companyStats.seniorityDistribution['1-2yr']++
			else if (yearsEmployed < 3) companyStats.seniorityDistribution['2-3yr']++
			else companyStats.seniorityDistribution['3+yr']++
		}

		companyStats.avgSalary = companyStats.totalSalary / companyStats.totalEmployees

		// Second pass: calculate per-group statistics
		const groupStats = []
		for (const [name, data] of Object.entries(groups)) {
			const salaries = data.employees.map((e) => e.salary).sort((a, b) => a - b)
			const avgSalary = data.totalSalary / data.count

			// Find newest and most senior employee
			const sorted = [...data.employees].sort(
				(a, b) => new Date(a.startDate) - new Date(b.startDate)
			)

			groupStats.push({
				name,
				count: data.count,
				totalSalary: data.totalSalary,
				avgSalary,
				minSalary: salaries[0],
				maxSalary: salaries[salaries.length - 1],
				salaryRange: salaries[salaries.length - 1] - salaries[0],
				topEarner: data.employees.reduce((top, emp) => (emp.salary > top.salary ? emp : top)),
				mostSenior: sorted[0],
				newest: sorted[sorted.length - 1],
				percentOfCompany: ((data.count / companyStats.totalEmployees) * 100).toFixed(1)
			})
		}

		// Sort groups by count (largest first)
		groupStats.sort((a, b) => b.count - a.count)

		return {
			groups: groupStats,
			company: companyStats,
			groupCount: groupStats.length
		}
	})
</script>

<h2>Employee Analysis</h2>

<label>
	Group by:
	<select bind:value={groupBy}>
		<option value="department">Department</option>
	</select>
</label>

<div class="company-overview">
	<h3>Company Overview</h3>
	<p>Total Employees: {analysis.company.totalEmployees}</p>
	<p>Total Payroll: ${analysis.company.totalSalary.toLocaleString()}</p>
	<p>Average Salary: ${analysis.company.avgSalary.toLocaleString()}</p>
</div>

<div class="seniority">
	<h4>Seniority Distribution</h4>
	{#each Object.entries(analysis.company.seniorityDistribution) as [range, count]}
		<span>{range}: {count}</span>
	{/each}
</div>

<h3>By {groupBy} ({analysis.groupCount} groups)</h3>

{#each analysis.groups as group}
	<details open>
		<summary>
			{group.name} - {group.count} employees ({group.percentOfCompany}% of company)
		</summary>

		<div class="group-stats">
			<p>Salary range: ${group.minSalary.toLocaleString()} - ${group.maxSalary.toLocaleString()}</p>
			<p>Average: ${Math.round(group.avgSalary).toLocaleString()}</p>
			<p>Top earner: {group.topEarner.name} (${group.topEarner.salary.toLocaleString()})</p>
			<p>Most senior: {group.mostSenior.name} (since {group.mostSenior.startDate})</p>
			<p>Newest: {group.newest.name} (since {group.newest.startDate})</p>
		</div>
	</details>
{/each}

6. Exibição de Status com Switch

<script>
	let orderStatus = $state('processing')

	let statusDisplay = $derived.by(() => {
		switch (orderStatus) {
			case 'pending':
				return {
					icon: '⏳',
					label: 'Pending',
					color: '#f39c12',
					description: 'Your order is waiting to be processed',
					actions: ['Cancel Order']
				}
			case 'processing':
				return {
					icon: '⚙️',
					label: 'Processing',
					color: '#3498db',
					description: 'We are preparing your order',
					actions: ['Contact Support']
				}
			case 'shipped':
				return {
					icon: '📦',
					label: 'Shipped',
					color: '#9b59b6',
					description: 'Your order is on its way',
					actions: ['Track Package', 'Contact Support']
				}
			case 'delivered':
				return {
					icon: '✅',
					label: 'Delivered',
					color: '#27ae60',
					description: 'Your order has been delivered',
					actions: ['Leave Review', 'Return Item', 'Buy Again']
				}
			case 'cancelled':
				return {
					icon: '❌',
					label: 'Cancelled',
					color: '#e74c3c',
					description: 'This order was cancelled',
					actions: ['View Refund Status', 'Reorder']
				}
			default:
				return {
					icon: '❓',
					label: 'Unknown',
					color: '#95a5a6',
					description: 'Status unknown',
					actions: ['Contact Support']
				}
		}
	})
</script>

<div class="status-card" style="border-color: {statusDisplay.color}">
	<div class="status-header" style="background: {statusDisplay.color}">
		<span class="icon">{statusDisplay.icon}</span>
		<span class="label">{statusDisplay.label}</span>
	</div>
	<p>{statusDisplay.description}</p>
	<div class="actions">
		{#each statusDisplay.actions as action}
			<button>{action}</button>
		{/each}
	</div>
</div>

<label>
	Test different statuses:
	<select bind:value={orderStatus}>
		<option value="pending">Pending</option>
		<option value="processing">Processing</option>
		<option value="shipped">Shipped</option>
		<option value="delivered">Delivered</option>
		<option value="cancelled">Cancelled</option>
	</select>
</label>

Erros Comuns com `$derived.by`

1. Usar `$derived.by` Quando `$derived` Seria Suficiente

<script>
	let count = $state(0)

	// AVOID: Overly verbose - don't do this
	let doubled = $derived.by(() => {
		return count * 2
	})

	// PREFERRED: Simple and clean
	let doubled = $derived(count * 2)
</script>

2. Efeitos Colaterais em `$derived.by`

Nunca coloque efeitos colaterais dentro de $derived ou $derived.by — sem fetch, sem console.log, sem mutações em estados que você não controla. Valores derivados são recomputados sempre que o Svelte decidir, então efeitos colaterais serão disparados de forma imprevisível. Mova-os para $effect.

Valores derivados devem ser computações puras. Não coloque efeitos colaterais dentro deles:

<script>
	let count = $state(0)

	// AVOID: Side effects in derived
	let doubled = $derived.by(() => {
		console.log('Calculating doubled...') // Side effect!
		fetch('/api/log', { method: 'POST' }) // Side effect!
		someGlobalVariable = count // Side effect!
		return count * 2
	})

	// PREFERRED: Pure computation only
	let doubled = $derived(count * 2)

	// Put side effects in $effect instead
	$effect(() => {
		console.log('Count changed to:', count)
	})
</script>

3. Operações Assíncronas em `$derived.by`

$derived.by deve retornar um valor de forma síncrona. Você não pode usar await dentro dele. Para dados assíncronos, use $state + $effect com um AbortController para lidar com respostas obsoletas.

$derived.by deve ser síncrono. Não pode ser assíncrono:

<script>
	let userId = $state(1)

	// AVOID: This won't work - can't use async/await
	let user = $derived.by(async () => {
		const response = await fetch(`/api/users/${userId}`)
		return response.json()
	})

	// PREFERRED: For async data, use $effect and $state together
	let user = $state(null)
	let loading = $state(false)

	$effect(() => {
		loading = true
		fetch(`/api/users/${userId}`)
			.then((r) => r.json())
			.then((data) => {
				user = data
				loading = false
			})
	})
</script>

4. Esquecer o Comando Return

<script>
	let items = $state([1, 2, 3])

	// AVOID: Missing return - result is undefined!
	let sum = $derived.by(() => {
		let total = 0
		for (const item of items) {
			total += item
		}
		// Oops! Forgot to return
	})

	// PREFERRED: Always return your computed value
	let sum = $derived.by(() => {
		let total = 0
		for (const item of items) {
			total += item
		}
		return total
	})
</script>

Parte 3: `$derived` vs `$derived.by` — As Diferenças Explicadas

Agora que você viu as duas formas em ação, vamos esclarecer exatamente quando usar cada uma.

O Relacionamento Técnico

Por baixo dos panos, $derived(expression) é açúcar sintático para $derived.by(() => expression). O compilador transforma:

let doubled = $derived(count * 2)

Em algo conceitualmente assim:

let doubled = $derived.by(() => count * 2)

Eles são idênticos em tempo de execução — a diferença é puramente na sintaxe permitida.

Comparação Lado a Lado

Recurso	`$derived(expression)`	`$derived.by(() => { ... })`
Entrada	Expressão única	Corpo de função
Instruções	Apenas uma	Múltiplas permitidas
Variáveis locais	❌ Não é possível	✅ Permitidas
Fluxo de controle	Apenas ternário `? :`	`if`/`else`, `switch`, loops
Retornos antecipados	❌ Não é possível	✅ Permitidos
Try/catch	❌ Não é possível	✅ Permitido
Legibilidade	Conciso, óbvio	Mais verboso
Caso de uso	Fórmulas simples	Lógica complexa
Sinal de intenção	"Isso é direto"	"Isso tem complexidade"

Fluxograma de Decisão

Start
  │
  ▼
Can you write it as a single expression
(no semicolons, no { } curly braces)?
  │
  ├── YES → Use $derived(expression)
  │
  └── NO → Continue...
         │
         ▼
      Do you need any of these?
      • Multiple statements
      • Intermediate variables
      • if/else or switch
      • for/while loops
      • try/catch
      • Early returns
         │
         ├── YES → Use $derived.by(() => { ... })
         │
         └── NO → You probably can use $derived()
                  Just write it as one expression

Exemplos: Mesmo Resultado, Abordagens Diferentes

Às vezes você pode obter o mesmo resultado com qualquer uma das formas. Escolha com base na legibilidade:

<script>
	let numbers = $state([1, 2, 3, 4, 5])

	// Both work - choose the clearer one

	// Simple enough for $derived
	let sum = $derived(numbers.reduce((a, b) => a + b, 0))
	let avg = $derived(sum / numbers.length)

	// Or use $derived.by for more clarity
	let stats = $derived.by(() => {
		const sum = numbers.reduce((a, b) => a + b, 0)
		const avg = sum / numbers.length
		return { sum, avg }
	})
</script>

<script>
	let user = $state({ role: 'admin' })

	// Ternary works for simple conditions
	let isAdmin = $derived(user.role === 'admin' ? true : false)
	// Even simpler:
	let isAdmin = $derived(user.role === 'admin')

	// But complex conditions need $derived.by
	let accessLevel = $derived.by(() => {
		if (user.role === 'admin') return 'full'
		if (user.role === 'editor') return 'write'
		if (user.role === 'viewer') return 'read'
		return 'none'
	})
</script>

Quando `$derived` Fica Inconveniente

Se você se encontrar escrevendo expressões complexas como esta, mude para $derived.by:

<script>
	let cart = $state([])

	// AVOID: This works but is hard to read
	let summary = $derived(
		cart.length === 0
			? { empty: true, total: 0, message: 'Cart is empty' }
			: {
					empty: false,
					total: cart.reduce((sum, item) => sum + item.price * item.quantity, 0),
					message: `${cart.length} items in cart`
				}
	)

	// PREFERRED: Much clearer with $derived.by
	let summary = $derived.by(() => {
		if (cart.length === 0) {
			return { empty: true, total: 0, message: 'Cart is empty' }
		}

		const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0)

		return {
			empty: false,
			total,
			message: `${cart.length} items in cart`
		}
	})
</script>

Considerações de Desempenho

Ambas as formas têm desempenho idêntico. A escolha é puramente sobre clareza do código e manutenibilidade. O compilador do Svelte trata ambas da mesma forma.

No entanto, mantenha a própria computação eficiente:

<script>
	let hugeArray = $state([...Array(100000).keys()])

	// AVOID: This runs every time hugeArray changes
	let sorted = $derived([...hugeArray].sort())

	// Consider if you really need this to be reactive,
	// or if you can compute it once or less frequently
</script>

Tópicos Avançados

Como o Rastreamento de Dependências Funciona

O Svelte rastreia dependências em tempo de execução, não analisando seu código. Ele observa quais valores reativos são realmente lidos durante a execução.

<script>
	let showDetails = $state(false)
	let user = $state({
		name: 'Alice',
		email: 'alice@example.com',
		bio: 'Software developer'
	})

	let display = $derived(showDetails ? `${user.name} - ${user.email}: ${user.bio}` : user.name)
</script>

Quando showDetails é false:

O ramo false é executado: user.name
Dependências: showDetails, user.name
Alterar user.email ou user.bio NÃO recalcula display!

Quando showDetails é true:

O ramo true é executado: ${user.name} - ${user.email}: ${user.bio}
Dependências: showDetails, user.name, user.email, user.bio
Agora alterar qualquer um desses recalcula display

Por que isso importa: O Svelte é inteligente para evitar trabalho desnecessário. Ele só recalcula quando valores que foram realmente utilizados foram alterados.

Excluindo Dependências com `untrack`

Às vezes você quer ler um valor reativo sem criar uma dependência. A função untrack de 'svelte' permite fazer isso:

<script>
	import { untrack } from 'svelte'

	let count = $state(0)
	let multiplier = $state(2)

	// This derived value depends ONLY on count, not multiplier
	let result = $derived.by(() => {
		const mult = untrack(() => multiplier) // Read without tracking
		return count * mult
	})

	// Changing count → recalculates result
	// Changing multiplier → does NOT recalculate result
</script>

Casos de uso para untrack:

Valores de configuração que raramente mudam
Logging ou depuração sem criar dependências
Leituras únicas de estado reativo
Quebrar dependências circulares

Memoização Automática

Valores derivados só recalculam quando suas dependências mudam:

<script>
	let items = $state([
		/* ... */
	])
	let filter = $state('all')

	let filtered = $derived.by(() => {
		console.log('Recalculating...') // Only logs when items or filter changes

		if (filter === 'all') return items
		return items.filter((item) => item.category === filter)
	})
</script>

Se você ler filtered várias vezes no seu template, o cálculo só é executado uma vez por mudança.

Valores Derivados NÃO São Proxied

Ao contrário de $state, $derived não envolve objetos em Proxies. O valor retornado é tal como está:

<script>
	let items = $state([
		{ name: 'A', selected: false },
		{ name: 'B', selected: true },
		{ name: 'C', selected: false }
	])

	// This finds the selected item
	let selected = $derived(items.find((item) => item.selected))
</script>

<!-- 
  selected points to the actual item in items array.
  Because items IS proxied, changing selected.name 
  actually changes items[1].name!
-->
{#if selected}
	<input bind:value={selected.name} />
{/if}

Sobrescrevendo Valores Derivados (UI Otimista)

Atribuir diretamente a uma variável derivada a sobrescreve até a próxima vez que suas dependências de origem mudam, momento em que o Svelte a rederiva. Isso é intencional e útil para UI otimista — mas significa que a sobrescrita é temporária, não permanente.

Valores derivados podem ser temporariamente sobrescritos — perfeito para atualizações otimistas:

<script>
	let { post } = $props()

	// Normally derived from the server data
	let likes = $derived(post.likes)

	async function handleLike() {
		// Immediately show the like (optimistic)
		likes++

		try {
			// Tell the server
			await fetch(`/api/posts/${post.id}/like`, { method: 'POST' })
			// Server will eventually update post.likes
		} catch (error) {
			// Failed! Roll back the optimistic update
			likes--
		}
	}
</script>

<button onclick={handleLike}>
	{likes}
</button>

A sobrescrita é temporária — assim que post.likes mudar a partir do servidor, likes voltará a sincronizar com o valor derivado.

Desestruturação com `$derived`

O Svelte 5 trata a desestruturação em declarações $derived de forma especial — cada variável desestruturada se torna seu próprio valor derivado reativo:

<script>
	let data = $state({ width: 10, height: 20 })

	// This WORKS in Svelte 5!
	// Each variable becomes its own derived value
	let { area, perimeter } = $derived({
		area: data.width * data.height,
		perimeter: 2 * (data.width + data.height)
	})
</script>

<p>Area: {area}</p><p>Perimeter: {perimeter}</p>

Isso é aproximadamente equivalente a:

<script>
	let _computed = $derived({
		area: data.width * data.height,
		perimeter: 2 * (data.width + data.height)
	})
	let area = $derived(_computed.area)
	let perimeter = $derived(_computed.perimeter)
</script>

No entanto, se você desestruturar o resultado de um valor $derived após sua criação (não na declaração), você perde a reatividade:

<script>
	let data = $state({ width: 10, height: 20 })

	// AVOID: This takes a snapshot, not a reactive reference
	// area and perimeter are static values from the moment of destructuring
	let { area, perimeter } = dimensions

	// PREFERRED: Access through the derived object
	// Use dimensions.area and dimensions.perimeter in your template
	let dimensions = $derived({
		area: data.width * data.height,
		perimeter: 2 * (data.width + data.height)
	})
</script>

A distinção principal:

let { a, b } = $derived(...) → ✅ Reativo (tratamento especial do compilador)
let x = $derived(...); let { a, b } = x → ❌ Não reativo (desestruturação em tempo de execução)

Se você precisar de valores derivados individuais e não puder usar o padrão de desestruturação na declaração, defina-os separadamente:

<script>
	// PREFERRED: Separate derived values
	let area = $derived(data.width * data.height)
	let perimeter = $derived(2 * (data.width + data.height))
</script>

Referência Rápida

`$derived` — Expressões Simples

// Arithmetic
let doubled = $derived(count * 2)
let total = $derived(price + tax + shipping)

// Array methods
let filtered = $derived(items.filter((x) => x > 0))
let sorted = $derived([...items].sort())
let first = $derived(items[0])
let count = $derived(items.length)

// String operations
let upper = $derived(name.toUpperCase())
let message = $derived(`Hello, ${name}!`)

// Ternary conditions
let status = $derived(isActive ? 'Active' : 'Inactive')
let display = $derived(loading ? 'Loading...' : data)

// Chained methods
let result = $derived(
	items
		.filter((x) => x.active)
		.map((x) => x.name)
		.join(', ')
)

// Nullish coalescing
let value = $derived(user?.name ?? 'Anonymous')

`$derived.by` — Lógica Complexa

// Multiple statements and local variables
let stats = $derived.by(() => {
	const sum = items.reduce((a, b) => a + b, 0)
	const avg = sum / items.length
	return { sum, avg }
})

// If/else control flow
let tier = $derived.by(() => {
	if (points >= 1000) return 'gold'
	if (points >= 500) return 'silver'
	return 'bronze'
})

// Switch statements
let icon = $derived.by(() => {
	switch (status) {
		case 'success':
			return '✅'
		case 'error':
			return '❌'
		default:
			return '⏳'
	}
})

// Loops
let grouped = $derived.by(() => {
	const groups = {}
	for (const item of items) {
		const key = item.category
		if (!groups[key]) groups[key] = []
		groups[key].push(item)
	}
	return groups
})

// Try/catch
let parsed = $derived.by(() => {
	try {
		return { data: JSON.parse(input), error: null }
	} catch (e) {
		return { data: null, error: e.message }
	}
})

// Early returns
let result = $derived.by(() => {
	if (!user) return null
	if (!user.verified) return { error: 'Not verified' }
	return { data: user.profile }
})

Excluindo Dependências

import { untrack } from 'svelte'

let result = $derived.by(() => {
	const config = untrack(() => configValue) // Read without tracking
	return count * config
})

Padrão de Desestruturação

// Reactive - special compiler handling
let { area, perimeter } = $derived({
	area: width * height,
	perimeter: 2 * (width + height)
})

// NOT reactive - runtime destructuring
let dimensions = $derived({ area: width * height })
let { area } = dimensions // loses reactivity

Principais Conclusões

A rune $derived é essencial para construir aplicações Svelte 5 reativas. Aqui está o que você precisa lembrar:

Use `$derived` Quando:

Sua computação é uma expressão única
Nenhuma variável intermediária é necessária
A lógica cabe em uma linha (ou encadeia bem)
Você quer sinalizar "isso é direto ao ponto"

Use `$derived.by` Quando:

Você precisa de múltiplas instruções
Você precisa de variáveis locais para valores intermediários
Você precisa de fluxo de controle (if/else, switch, loops)
Você precisa de tratamento de erros com try/catch
Você precisa de retornos antecipados
A lógica é complexa o suficiente para se beneficiar de uma estrutura explícita

Princípios-Chave:

Escolha com base na complexidade — Use $derived para fórmulas simples, $derived.by para lógica complexa
As dependências são rastreadas em tempo de execução — O Svelte só recalcula quando os valores efetivamente usados mudam
Mantenha as computações puras — Sem efeitos colaterais. Use $effect para efeitos colaterais
Valores derivados são memoizados — Eles só recalculam quando as dependências mudam
Use untrack para excluir dependências — Quando você precisa ler sem criar uma dependência

Com esses padrões dominados, você escreverá código reativo mais limpo e eficiente que permanece automaticamente sincronizado com seus dados.

Introdução

Parte 1: A Rune $derived

O Que É $derived?

Sintaxe Básica

Quando Usar $derived

Exemplos do Mundo Real com $derived

1. Totais do Carrinho de Compras

2. Pesquisa e Filtro

3. Contador de Caracteres em Tempo Real

4. Conversor de Moeda

5. Formatação de Data e Hora

Valores Derivados vs. Cálculos Diretos no Template

Parte 2: A Rune $derived.by

O Que É $derived.by?

Sintaxe Básica

Quando Usar $derived.by

Exemplos do Mundo Real com $derived.by

1. Sistema de Permissões de Usuário

2. Validação de Formulário com Erros Detalhados

3. Gerador de Relatório Financeiro

4. Parser de Markdown com Tratamento de Erros

5. Agrupamento e Agregação Inteligente de Dados

6. Exibição de Status com Switch

Erros Comuns com $derived.by

1. Usar $derived.by Quando $derived Seria Suficiente

2. Efeitos Colaterais em $derived.by

3. Operações Assíncronas em $derived.by

4. Esquecer o Comando Return

Parte 3: $derived vs $derived.by — As Diferenças Explicadas

O Relacionamento Técnico

Comparação Lado a Lado

Fluxograma de Decisão

Exemplos: Mesmo Resultado, Abordagens Diferentes

Quando $derived Fica Inconveniente

Considerações de Desempenho

Tópicos Avançados

Como o Rastreamento de Dependências Funciona

Excluindo Dependências com untrack

Memoização Automática

Valores Derivados NÃO São Proxied

Sobrescrevendo Valores Derivados (UI Otimista)

Desestruturação com $derived

Referência Rápida

$derived — Expressões Simples

$derived.by — Lógica Complexa

Excluindo Dependências

Padrão de Desestruturação

Principais Conclusões

Use $derived Quando:

Use $derived.by Quando:

Princípios-Chave:

Veja Também

Documentação Oficial

Recursos Externos

Parte 1: A Rune `$derived`

O Que É `$derived`?

Quando Usar `$derived`

Exemplos do Mundo Real com `$derived`

Parte 2: A Rune `$derived.by`

O Que É `$derived.by`?

Quando Usar `$derived.by`

Exemplos do Mundo Real com `$derived.by`

Erros Comuns com `$derived.by`

1. Usar `$derived.by` Quando `$derived` Seria Suficiente

2. Efeitos Colaterais em `$derived.by`

3. Operações Assíncronas em `$derived.by`

Parte 3: `$derived` vs `$derived.by` — As Diferenças Explicadas

Quando `$derived` Fica Inconveniente

Excluindo Dependências com `untrack`

Desestruturação com `$derived`

`$derived` — Expressões Simples

`$derived.by` — Lógica Complexa

Use `$derived` Quando:

Use `$derived.by` Quando: