Intermediate everything in Vue, Angular & Svelte, page 8
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.
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 Template Refs: Reaching Past the Virtual DOM
Vue template refs give you a direct handle to a DOM element, bypassing the declarative model. This is for tasks like programmatically focusing an input or initializing a 3rd-party library. The main footgun: the ref is null until the component has mounted.
*ngFor trackBy: Smarter DOM Updates in Angular
*ngFor's trackBy tells Angular how to uniquely identify items in a list. This prevents it from destroying and recreating the entire list in the DOM on every data update, instead allowing it to reuse existing elements.
Vue List Rendering: Why `key` is Not Optional
Think of key as a license plate for each item in a list. Without it, Vue just repaints items in order. With key, Vue tracks and preserves each item's state across re-renders. This is vital for dynamic lists with stateful components, like form inputs.
Angular Two-Way Binding: [(ngModel)]
Think of [(ngModel)] as a walkie-talkie for data, syncing a component property with a template view. It's used in forms where user input immediately updates a variable, and vice-versa. The footgun is overusing it, which creates tangled data flows.
Svelte Context API: Avoid Prop-Drilling
Svelte's Context API lets a parent component provide data to any descendant, avoiding 'prop-drilling'. It's ideal for sharing app-wide state like user info or themes. The key footgun: calling getContext without a parent setContext will throw an error.
Vue Provide/Inject: Skip Prop Drilling
Vue's provide/inject lets an ancestor component share data directly with any descendant, avoiding the tedious 'prop drilling' chain. Use it for app-wide data like user info or theme settings. The footgun: providing a simple value is not reactive by default.
Angular Content Projection with ng-content
ng-content creates a "slot" in a component's template, letting you project parent content into it. Use this for reusable wrappers like cards or dialogs. The key footgun: never use @if on ng-content, as the content is always rendered, even if hidden.
Vue Slots: Projecting Content into Components
Think of a Vue slot as a picture frame: the child component defines the frame, and the parent provides the picture. This is used for reusable layouts or buttons where the structure is fixed but the content is dynamic.
Handling Basic DOM Events in Svelte
Svelte handles DOM events with on:eventname syntax in your markup, linking elements to functions in your script. This is for user interactions within a component, not for parent-child communication. The footgun is confusing this with custom component events.
Vite's Plugin System: Extending Dev and Build
Vite's plugin system extends its dev server and build process, leveraging Rollup's mature ecosystem. Use it to add framework support or handle custom assets. The footgun is forgetting to control execution order with enforce, causing compatibility issues.
SvelteKit Adapters: Bridge Your App to Production
A SvelteKit adapter is a power plug for your app, making your universal build fit a specific deployment target like Vercel or a Node server. You configure it based on your host, like adapter-static for static sites. The footgun is forgetting one entirely.
Vite Config: The Control Panel for Your Build
Think of vite.config.js as a dynamic script, not a static file. It lets you programmatically change your build based on context, like serving for development versus building for production.
Vue: Options API vs. Composition API
Options API organizes Vue components by property type (data, methods). Composition API organizes them by logical feature. Use Composition API for complex components with tangled logic or for creating reusable 'composable' functions.
Why Svelte Skips the Virtual DOM
Svelte skips the Virtual DOM, treating it as runtime overhead. It acts as a compiler, generating precise JavaScript to update the DOM directly. This avoids the 'diffing' step of frameworks like React, leading to smaller bundles and faster updates.
Angular's Hierarchical Dependency Injection
Angular's DI is a tree of injectors mirroring your components. When a component needs a service, Angular walks up the tree to find the first provider. Use it to scope services to UI branches, but beware: providing at a component level creates a new instance.
Vue Single-File Components (SFCs)
Vue Single-File Components (.vue files) colocate a component's template, logic, and styling into one modular unit. This is the standard for building Vue SPAs and static sites, enabling scoped CSS and pre-compiled templates. Remember, SFCs require a build step.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles