Vue.js

A .vue file holds at most one <template>, one <script> and one <script setup>, any number of <style> blocks mixing scoped, module and global, and optional custom blocks such as <docs> that build tooling handles.

The SFC compiler stamps a per-component data-v-<hash> attribute on the elements its template renders and appends that attribute selector to each scoped rule. A child component's single root element also carries it, so parent rules still reach it.

Every top-level binding in <script setup>, including variables, functions and imports, is usable in the template with no return object; imported components are used directly as tags. The block compiles into setup(), so it runs once per component instance.

A .vue file becomes a standard ES module default-exporting a component object: the template becomes a render function, script setup becomes setup(), and styles become plain CSS, injected in development or extracted in production.

The define* macros are compiler hints that @vue/compiler-sfc recognises and compiles away, so they need no import. Their arguments are hoisted to module scope, so they cannot reference variables declared in <script setup>, and they only work inside <script setup>.

Vue's <component :is> accepts an imported component object, a registered component name or an HTML tag name. Switching to a different component unmounts the old panel, so its local state is destroyed and returning mounts a fresh instance.

Call defineEmits(['confirm']) at the top level of script setup, keep the returned emit function and call emit('confirm', id). The parent listens with v-on, @confirm="handler", and the handler receives the extra arguments.

Undeclared attributes and v-on listeners are fallthrough attributes: Vue adds them to the component's single root element, merging class and style with the root's own values and running both listeners.

defineProps is a script setup compiler macro that declares props with either a runtime argument (a names array, or options with type, required, default and validator) or a TypeScript type argument compiled into runtime options; one call cannot take both.

Vue's app.component() registers a component app-wide, so any template can use it without importing, but it always ships in the bundle. A local import in script setup is visible only in that file and tree-shakes cleanly, so it is the default.

Vue's :class accepts a string, an object whose keys are added when their values are truthy, or an array of either. It merges with a static class attribute, so a computed can combine variant and size names with conditional flags like is-disabled.

Vue's v-if adds and removes its block, destroying child components and listeners, and renders nothing while false; v-show always renders and only toggles inline display. Use v-show for a frequently toggled dropdown, v-if for a rarely shown admin panel.

Vue's template compiler treats a v-on value that is a name or property path (save, form.save) as a method handler, called with the native event. Anything else (save('draft'), count++) is an inline handler, where the event is available as $event.

Bound to a boolean, a checkbox's v-model stores true or false. Bound to an array or Set, each checked box adds its own value attribute to the collection and unchecking removes it, so every box in the group needs a distinct value.

Put ref="email" on the input, get it with useTemplateRef('email') (Vue 3.5) or a same-named ref(null), and call focus() in onMounted. During setup the element does not exist yet, so the ref is still null.

Destructuring reads state.count once through the proxy and copies the number into a local variable, which Vue cannot track or update. toRefs(state) instead returns an object of refs, one per property, whose .value reads and writes state[key] through the proxy, so the link survives destructuring.

ref() wraps any value in an object whose .value getter tracks and setter triggers; reactive() returns a deep Proxy of an object itself. The docs prefer ref() because reactive() rejects primitives, cannot be replaced wholesale, and loses tracking when destructured.

Vue 3 does not patch the DOM when state changes; the write queues the component's update job, which runs in a microtask flush later. Awaiting nextTick() after the push waits for that flush, so the measurement sees the new item.

Vue can only see reads and writes that pass through a property access it controls. A ref's .value getter calls track() and its setter calls trigger(), so the render effect subscribes and re-runs; a plain variable's reads and writes are invisible to Vue.

Once. Each write triggers the component's render effect, but its update job is already marked as queued after the first, so the later triggers are ignored; the single microtask flush re-renders once with all three new values.

computed() caches its result and re-runs its getter only after a reactive value it read has changed; a method called in the template has no cache and runs again on every re-render of the component.

With the default flush, watchEffect() runs its function immediately, and its dependencies are every reactive value read during that synchronous run. It re-runs when any of them changes, re-collecting dependencies each time, so conditional reads come and go.

props.userId is read once and passes a plain value, not a reactive source, so Vue warns and tracks nothing. Pass a getter, () => props.userId, so the read happens inside the watcher where Vue can track it.

Vue 3's watch() accepts a ref, a reactive object, a getter function, or an array of these. A ref or getter fires when its value changes by Object.is; a reactive object is watched deeply; an array fires when any entry changes.

They return a WatchHandle: call it, or its stop(), to end the watcher for good, and since Vue 3.5 use pause() and resume() to suspend it. Watchers created synchronously in setup stop automatically on unmount, so manual stops are for other cases.

A composable is a function, named useX by convention, that uses Vue's Composition API to encapsulate stateful logic: it creates its own refs, can hook into the calling component's lifecycle, and returns that state.

The layout calls provide('theme', theme) in its setup; any descendant, however deep, calls inject('theme') in its setup to receive it. Components in between pass nothing, and only the provider's subtree can inject it; app.provide() makes a value available app-wide.

Vue 3's setup(props, context) receives reactive, read-only props and a context with attrs, slots, emit and expose; it runs once per instance with no this, and returns an object of template bindings or a render function.

Composables make every reused name explicit at the call site, resolve collisions by renaming and pass data between units as arguments, fixing mixins' three flaws, and unlike renderless components they add no extra component instance.

provide('locale', locale.value) provides a plain string captured once, so later changes never reach injectors. Provide the ref itself, ideally wrapped in readonly(), plus a setLocale function, so injectors stay reactive and all changes happen in the provider.

The Options API groups code by option type (data, methods, computed, lifecycle hooks) on a this-based instance; the Composition API groups it by logical concern in one function scope. Both run on the same reactivity system.

Vue 3 binds every method and hook to the component instance, but an arrow function's this is fixed where it was written, so this is not the instance. Auto-binding means a method passed as a callback keeps its this.

Vue 3 calls data() once per component instance, so each instance gets its own state object. The result is wrapped with reactive() and its top-level keys are proxied on this; keys added later, or starting with _ or $, are not.

The Vue 3 docs name three mixin drawbacks: no way to tell which mixin added a property, silent collisions on shared keys, and coupling through shared keys. Composables return explicit values you name, rename and pass on.

Yes, through the setup() option: it runs before every options hook, and what it returns is available on this to options; setup() cannot read options, and <script setup> bindings never reach the Options API.

Add the listener in onMounted and remove it in onUnmounted (or onBeforeUnmount), passing the same function reference. Vue does not clean up listeners you attach to window yourself, so skipping the removal leaks the handler and everything it closes over.

Mounting goes parent setup, parent onBeforeMount, child setup, child onBeforeMount, child onMounted, then parent onMounted. Unmounting goes parent onBeforeUnmount, child onBeforeUnmount, child onUnmounted, then parent onUnmounted.

Vue 3 attaches each hook to the current component instance, which exists only while setup runs synchronously. After an await in async setup() none is current, so the hook is dropped with a dev warning; script setup restores top-level awaits.

A DOM measurement must wait for onMounted, because template refs are null until the component has rendered. A fetch needs no DOM, so it can start directly in setup, earlier than onMounted, as long as the component renders a loading state meanwhile.

Vue 3 keeps a list per hook on the component instance, so both onMounted callbacks run, in the order they were registered during setup. A composable's hook attaches to whichever component called the composable.

Without KeepAlive, Vue unmounts the form's component when the tab switches away and builds a fresh one on return, losing every typed value. KeepAlive deactivates and caches the instance instead, so the same instance, state and DOM come back.

Vue's <Teleport> renders its slot content into another DOM node, typically body, so ancestor overflow, transforms and stacking contexts stop constraining the modal. Its to prop takes a CSS selector string or an actual DOM element.

Vue 3's Transition adds v-enter-from, v-enter-active and v-enter-to on insert, and v-leave-from, v-leave-active and v-leave-to on removal. The from class is swapped for the to class a frame later; the active class lasts the whole phase.

In Vue 3, onActivated runs on the cached component's first mount and every time it is reinserted; onDeactivated runs each time it is moved into the cache and on final unmount. Use them for show/hide work: refresh, pause, resume.

Vue relationships follow the component tree: props, emitted events, injections, Devtools nesting and reactivity work as without Teleport. Anything the browser computes from DOM position follows the target: native event bubbling, ancestor-based CSS selectors and contains() checks.

Assign it to app.config.globalProperties.$formatCurrency before mounting. It replaces Vue 2's Vue.prototype: templates and Options API this can read it, but a component's own property of the same name wins and script setup code cannot use this.

app.mount() renders the root component into the container and returns the root component instance, not the app. That instance has no use() method, so chaining .use() after mount throws; configure and register everything first, then call mount last.

A Vue 3 plugin is an object with an install(app, options) method, or a bare function used as install. app.use calls it synchronously with the app and any extra arguments, installs it once per app, and returns the app.

Vue 3's app.config.errorHandler receives (err, instance, info) for errors in renders, setup, hooks, watchers, event handlers and directive or transition hooks that no onErrorCaptured stopped. Without it, Vue rethrows in development and only logs in production.

Vue 3's compiler treats any non-native tag as a component and warns when none is registered. compilerOptions.isCustomElement, a tag-name predicate, makes it emit a plain element instead; with a build step it is set in the SFC build plugin.

The parent re-renders because its render read the changed state. The child whose prop changed re-renders. The two siblings are reached by the patch but skipped, because their props compare equal, so their render functions and descendants do not run.

The full build includes Vue's template compiler, so it can compile template strings in the browser; the runtime-only build does not. Apps with a build step precompile templates into render functions, so shipping the compiler would be wasted bytes and work.

A compiled template adds patch flags, cached static vnodes and blocks with a flat list of dynamic descendants, so updates touch only what can change. h() output has none of these, so Vue fully diffs its props and children on each update.

h(type, props?, children?) creates a vnode from a tag string or component, flat props with onXxx listeners, and children. setup() returns a function, not a vnode; that function re-runs on every render while setup runs once.

A vnode is a plain JavaScript object describing a piece of UI: its type, props, children and key. Mounting creates real DOM from a new vnode tree; patching compares the new tree with the previous one and changes only what differs.

Every rendered row costs DOM nodes, vnodes and often a component instance, so 10,000 rows are slow to mount and patch in any framework. Virtualization renders only rows near the viewport, keeping that cost roughly constant.

Wrap a dynamic import in defineAsyncComponent, e.g. defineAsyncComponent(() => import('./Chart.vue')), and render it only when needed. A static import of the same file elsewhere, or rendering it on first paint, undoes the gain.

A Vue child re-renders only if its own tracked state changed or the parent hands it changed props or dynamic slots. Props are compared per key by identity, so primitives stay stable while fresh objects, arrays or functions count as changed.

The Vue devtools extension shows the component tree, each component's props and state, a timeline of events, and per-component render and patch timings in development builds. Production builds compile devtools support out unless VUE_PROD_DEVTOOLS is true.

v-once renders an element, component or subtree once with the current data, then treats it as static content that every later re-render skips. Use it for content that reads data but never needs to update.

createSSRApp creates an app whose mount() hydrates the server-rendered DOM in the container; createApp's mount() clears the container and renders from scratch. The browser entry of an SSR app must use createSSRApp, usually through the shared app factory.

Setup code, including the whole root scope of script setup, runs on the server, where there is no visitor's localStorage. Start from a server-safe default and read localStorage inside onMounted, which Vue never calls during SSR.

The component renders once on the server and again in the browser, at a different instant and often in a different time zone and locale, so the text differs. Render a stable placeholder and set the time in onMounted, or make the value deterministic.

A universal module exports a factory that calls createSSRApp. The server entry calls it per request, renders with renderToString and wraps the HTML in a page shell with state and the client script. The client entry calls it once, restores state and mounts.

On the server a module is evaluated once per process, so a module-level reactive() object is shared by every request. Vue's fix: create a new app per request, create the store inside that factory, and share it with app.provide.

defineComponent is a type helper: it returns the options object unchanged at runtime but lets TypeScript infer props, data and computed types on this and in setup(props). Its 3.3+ function form also supports generic render-function components.

Pass a type argument to defineProps, for example defineProps<{ options: Option[]; selected?: string }>(). The SFC compiler reads that type and generates the runtime props declaration: non-optional props become required, and constructors such as Array and String are inferred.

Pass a type argument, ref<string | number>('2020'), or annotate the variable as Ref<string | number>. Without either, the type is inferred from the initial value only. ref<number>() with no argument is typed Ref<number | undefined>.

Vue's Vite-based setup is transpilation-only: the dev server and bundler strip types from each file without type-checking, to stay fast. Type errors are caught by the editor's Vue language tools and by running vue-tsc --noEmit in a script or CI.

withDefaults(defineProps<Props>(), { options: () => [] }) needs factory functions for mutable defaults. Since 3.5, destructuring, const { options = [] } = defineProps<Props>(), lets the compiler add the factory. Both compile to runtime defaults.

Both return a promise from Vue's nextTick. Dispatching the event updates state synchronously, but Vue applies the resulting DOM patch asynchronously, so a test that does not await reads the old DOM.

A composable that only uses reactivity APIs such as ref, computed and watch can be called directly in a test. One that registers lifecycle hooks like onMounted, or calls inject, needs a component instance, so it must run inside a host component's setup.

Pass both under mount's global option: global.provide with a theme key fills the app-level provides that inject('theme') reads, and global.mocks with a fake $t puts that property on the component instance so the template's $t call resolves.

Pass an options object as mount()'s second argument: props for declared props, slots keyed by slot name (a string, an h() vnode or a component) and attrs for undeclared attributes. Change props later with await wrapper.setProps({...}) on the root wrapper.

Awaiting trigger only waits for Vue's pending DOM update, not for the request promise the submit handler awaits. flushPromises() resolves on the next macrotask, so already-settled mock promises, their continuations and Vue's re-render all run first.

Vue 3 moves the APIs that globally mutated Vue onto the app returned by createApp: app.use, app.component, app.directive, app.mixin, and app.config.globalProperties for Vue.prototype. Vue 2's shared global config leaked plugins and settings across apps and tests.

Vue 3's component v-model uses the modelValue prop and update:modelValue event instead of value and input. The model option and .sync are removed: parents write v-model:title, which binds title and listens for update:title.

Vue 2 turned each property that existed at creation into an Object.defineProperty getter/setter. A key added later is a plain property with no setter, so the write goes unseen; Vue.set(obj, key, value), or this.$set, adds it reactively and notifies watchers.

Vue 3 dropped filters, so a local filter becomes a method call or computed property and a global Vue.filter becomes a function you import, or one exposed as app.config.globalProperties.$filters. The pipe in a template is now JavaScript's bitwise OR.

Vue 2 saw array changes only through its wrapped mutation methods: push, pop, shift, unshift, splice, sort and reverse. Index assignment and length writes bypass them. Use splice(2, 1, 'x') or this.$set(items, 2, 'x'), and splice(0) or a new array to empty it.