Vue, Angular &amp; Svelte

Svelte's `{@html}` and `{@debug}`: When to Use Them

Svelte's {@html} and {@debug} offer powerful but risky escapes. {@html} renders raw HTML strings, while {@debug} acts like a debugger statement in your markup. Use them for trusted content and dev-time inspection.

Vue Lifecycle Hooks: Running Code at the Right Time

Vue lifecycle hooks are your cues to run code at specific moments in a component's life. Use onMounted to fetch data or onUnmounted to clean up timers. The main footgun is that hooks must be registered synchronously during setup, not in an async callback.

Angular Component Lifecycle Hooks

Angular's lifecycle hooks are callbacks for a component's life events: creation, updates, and destruction. Use ngOnInit for one-time setup after inputs are ready, and ngOnChanges to react to input changes. The footgun: don't use the constructor for setup.

Svelte Lifecycle: Mount, Destroy, and Tick

Svelte 5 simplifies the component lifecycle to just two events: creation (onMount) and destruction (onDestroy). Use onMount for DOM setup and return a cleanup function from it. The cleanup only works if the main callback is synchronous, not async.

Svelte's Reactive Assignments with `$: `

Think of Svelte's $: as a magic label that automatically re-runs code when its inputs change. It's used to create derived values, like $: sum = a + b. The footgun: the compiler only tracks direct dependencies, not those hidden inside function calls.

ref() vs. reactive(): Vue's Two Flavors of Reactivity

ref() is a box for any value (primitive or object) that you must access with .value. reactive() is a proxy for objects only, which you access directly. Use ref() for single values, reactive() for grouping data. The footgun: reactive() fails on primitives.

Vue Computed Properties: Derived Values for Cleaner Templates

A Vue computed property is a reactive 'formula' that derives its value from other data. Use it to move complex logic out of your templates, keeping them clean and readable.

Svelte Stores: State for Async Streams & Legacy Apps

Svelte Stores are objects for sharing reactive state. While Svelte 5's runes ($state) are now preferred for simple state sharing, stores remain ideal for complex async streams or when you need manual control over updates.

ngOnChanges: Reacting to Input Property Changes

The ngOnChanges hook is a property watcher for child components, firing when a parent changes an @Input() value. It's used to trigger logic when specific data changes.

Vue Watchers: Running Code on State Changes

Vue watchers are tripwires for your data. When a specific piece of state changes, a watcher executes code, like fetching data from an API. Use them for side effects, not for deriving new values. The footgun is using a watcher where a computed property would.

Pinia: Vue State Management That Feels Like Components

Pinia makes global Vue state feel like a component's local data. Create small, independent, type-safe stores for sharing data like user sessions or settings, avoiding complex prop drilling.

Svelte Derived Stores: Reactive Values from Other Stores

A Svelte derived store is like a spreadsheet formula for your state. It listens to other stores and automatically computes a new value whenever they change. The footgun is trying to write to it—it's read-only; you must update its sources instead.

Vue Scoped CSS: Keep Your Styles Local

Vue's Scoped CSS prevents styles from leaking out of a component. It adds a unique data attribute to your component's HTML and rewrites CSS to target it, ensuring styles only apply locally.

Svelte Scoped Styles: CSS That Can't Leak

Svelte styles are like house rules; they only apply inside that component and don't affect the neighbors. This is the default for any <style> tag in a .svelte file, preventing CSS conflicts.

Angular Component Styles: Scoped by Default

Angular styles are scoped to their component by default, preventing one component's styles from accidentally breaking another. This lets you build reusable UI pieces without style conflicts. The footgun is using ::ng-deep, which breaks this isolation.

Shadow DOM: Encapsulating Styles and Structure

Shadow DOM walls off a component's HTML and CSS from the rest of the page. Like a browser's <video> player, its internal controls are isolated, preventing your site's CSS from breaking them.

Angular Template-Driven Forms: Logic in the HTML

Angular Template-Driven Forms put form logic directly in your HTML template. Using two-way data binding with [(ngModel)], they're great for simple scenarios like login or contact forms.

Component v-model: Two-Way Binding with defineModel

v-model on a component creates a two-way binding, letting a parent and child share and update data. The defineModel() macro is the modern way to enable this for custom form inputs. The footgun is that a default value can de-sync parent/child state.

Angular's Built-in Form Validators

Angular's built-in validators are pre-made rules for your forms. Use them to easily check for required fields, min/max length, and valid email formats. The footgun is confusing required for text inputs with requiredTrue, which is only for checkboxes.