VUE
115 bites tagged VUE — interview questions with model answers, and 60-second explainers.
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.
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.
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.
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 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.
Vue Dynamic Components: Swap Components on the Fly
Use Vue's `<component :is="...">` element to render different components based on a state variable, like swapping views in a tabbed interface. The footgun: components are destroyed on switch; use `<KeepAlive>` to preserve their state and avoid losing user…
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.
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.
Vue's v-model: Two-Way Binding Made Simple
v-model creates a two-way binding that synchronizes form inputs with your JavaScript data. Use it on any form element like an input or textarea. The footgun: it ignores initial HTML attributes; your JavaScript state is always the single source of truth.
Vue's v-if vs. v-show: When to Use Which
v-if adds or removes elements from the DOM; v-show just hides them with CSS. Use v-if for conditions that rarely change (like admin access) and v-show for frequent toggles (like a dropdown menu), as it has a lower toggle cost.
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.
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.
Vue Custom Events: Child-to-Parent Communication
Think of `$emit` as a child component sending a flare up to its parent. It's how children report actions upwards, reversing the top-down flow of props. Use it to trigger parent state changes, like closing a modal. The footgun: events don't bubble.
Vue Component Props: Passing Data Downstream
Think of props as a component's 'arguments.' They let a parent pass data down to a child, making it reusable. Use them to pass dynamic data like a user's name to a profile card. The footgun: never mutate a prop directly inside the child component.
Vue's Reactivity: JavaScript That Acts Like a Spreadsheet
Vue's reactivity system makes your data act like a spreadsheet: change a value, and dependent parts of your app update automatically. It works by wrapping your data in special objects. The footgun: reactivity is lost if you replace a whole object.
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.
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.
Vue: The Progressive Framework Philosophy
Vue's progressive philosophy means you can use as little or as much of it as you need. Use it for a single interactive widget, or scale it up to a full SPA with official libraries.
Get VUE bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.