Vue
99 flashcards by MentisLibrary
Vue 3 with the Composition API: single file components, refs and computed values, watchers, template syntax and directives, props, events and slots, composables, Vue Router and Pinia.
- What is Vue?
- A JavaScript framework for building user interfaces from components. It pairs a declarative template syntax with a reactivity system that tracks which values a render used and re-renders only what depended on them.
- What are the three blocks of a single file component?
- <template> for the markup, <script setup> for the component's logic, and <style> for its CSS. All three are optional and all three describe one component.
- What does <script setup> do?
- Compiles the block as the component's setup function, and exposes every top-level binding, including imported components, directly to the template.
- Composition API vs Options API
- The Options API organises a component by option type: data, methods, computed, watch. The Composition API organises it by feature, using imported functions inside one setup block.
- What is reactivity in Vue?
- The system that records which reactive values were read while rendering, and re-runs that render when any of them changes. You mutate state and the view follows.
- What does ref() do?
- Wraps any value, including a primitive, in a reactive object with a single .value property. Reading and writing .value is what the reactivity system tracks.
- ref() vs reactive()
- ref wraps any value behind .value. reactive returns a deep reactive proxy of an object and is used without .value, but it only works on objects and cannot be reassigned.
- Why does destructuring a reactive object break reactivity?
- Because the reactivity lives in the proxy's property access. Destructuring copies the current values out, and the copies are plain, untracked values.
- What does computed() return?
- A read-only ref whose value is derived from other reactive sources. It caches, so it recomputes only when one of those sources changes.
- How do you make a computed writable?
- Pass an object with a get and a set function instead of a single getter.
- watch vs watchEffect
- watch takes an explicit source and a callback, does not run until the source changes, and gives you the old and new values. watchEffect runs immediately, tracks whatever it reads, and gives you no old value.
- What do the watch options do?
- immediate runs the callback once at setup, deep traverses nested objects so any inner change fires it, and flush chooses whether the callback runs before or after the DOM updates.
- How do you watch one property of a reactive object?
- Pass a getter function as the source, not the property itself.
- What are shallowRef and shallowReactive for?
- They make only the top level reactive, so replacing the value triggers updates but mutating deep inside it does not.
- What do markRaw and toRaw do?
- markRaw flags an object so Vue never makes it reactive. toRaw returns the original object behind an existing proxy.
- What do toRef and toRefs do?
- toRef creates a ref linked to one property of a reactive source. toRefs does it for every property, returning an object of refs.
- What does unref() do?
- Returns the inner value if given a ref, and the argument unchanged otherwise, so a function can accept either.
- What is readonly() for?
- Returns a reactive proxy that cannot be written to. Attempts to mutate it warn in development and have no effect.
- How do you interpolate a value in a template?
- With double curly braces. The content is any JavaScript expression, and it is inserted as text, never as markup.
- What do v-bind and its shorthand do?
- Bind an attribute, a DOM property or a component prop to an expression. The shorthand is a leading colon.
- What does v-bind with no argument do?
- Spreads every property of an object onto the element as separate attributes or props.
- What do v-on and its shorthand do?
- Attach an event listener. The shorthand is @, and the handler may be a method name or an inline expression.
- Name the common event modifiers
- .prevent calls preventDefault, .stop calls stopPropagation, .once removes the listener after one call, .self only fires when the target is the element itself, and .passive marks the listener passive.
- v-if vs v-show
- v-if adds and removes the element from the DOM, destroying and recreating the component. v-show always renders it and toggles the CSS display property.
- How do you write an if-else chain in a template?
- With v-if, v-else-if and v-else on consecutive sibling elements.
- How does v-for work?
- Iterates an array, an object, a number or any iterable, rendering the element once per item. Each iteration gets the item and optionally the index.
- Why does v-for need a :key?
- The key tells Vue which rendered node corresponds to which item, so it can move nodes instead of patching them in place when the list changes.
- Can you put v-if and v-for on the same element?
- No. In Vue 3 v-if is evaluated first, so it cannot read the v-for variable. Move the condition to a wrapper <template v-for> or filter in a computed.
- What is <template> used for in a template?
- As an invisible wrapper. It groups elements for v-if, v-for or a slot without adding a node to the DOM.
- How do you bind classes conditionally?
- With object syntax, where each key is a class name and its value decides whether it applies, or with array syntax to combine several sources.