Vue knowledge reference Essential Vue Concepts Explore all 43 knowledge cards from one complete menu. Each concept includes a quick tip, concise explanation, memory formula, example, and real-world uses for everyday reference, technical discussions, and interview preparation.
Question 01 1. What is Vue.js, and why is it important? Quick recall Concept Glance Card 30 sec
01 Easy tipVue.js is a progressive JavaScript framework used for building user interfaces. 02 Concise explanation“Vue.js is a progressive JavaScript framework used for building user interfaces. Unlike monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. Its core library focuses solely on the view layer, making it easy to integrate with other libraries or existing projects.”
03 Memory formulaVue = declarative rendering + component reactivity + approachable API04 Real-world usessingle-page applications interactive widgets reusable component libraries full-stack frameworks (Nuxt) Question 02 2. Explain Vue's reactivity system (Vue 3 ref vs reactive). Quick recall Concept Glance Card 30 sec
01 Easy tipref works for primitives and objects via a reactive wrapper; reactive works only for objects and uses direct proxy intercepting. import { ref, reactive } from 'vue';
// ref usage
const count = ref(0);
count.value++; // Increment value
// reactive usage
const state = reactive({ name: 'Niyazi', role: 'Developer' });
state.role = 'Elite Developer'; // Directly update 02 Concise explanation“Vue 3 uses a Proxy-based reactivity system to intercept object property access. ref wraps any value (including primitives) in an object with a .value getter/setter, while reactive returns a reactive proxy of the object directly without nesting.”
03 Memory formularef = wrappers & value property; reactive = proxy direct-target objects04 Real-world usesreactive form state simple counters nested data objects composable variables Question 03 3. What is the difference between the Composition API and the Options API? Quick recall Concept Glance Card 30 sec
01 Easy tipThe Options API organizes component code by options: data, methods, computed, watch, and lifecycle hooks. <script setup>
import { ref, onMounted } from 'vue';
const items = ref([]);
onMounted(async () => {
items.value = await fetch('/api/items').then(r => r.json());
});
</script> 02 Concise explanation“The Options API organizes component code by options: data, methods, computed, watch, and lifecycle hooks. The Composition API organizes code by logical concerns using functions inside a unified setup() hook (or <script setup>).”
03 Memory formulaOptions API = organized by config options; Composition API = organized by logical concerns04 Real-world usescomposable hooks organizing large components TypeScript autocomplete reusing stateful logic Question 19 19. Explain mixins and why Composition API composables are preferred. Quick recall Concept Glance Card 30 sec
01 Easy tipMixins are an Options API feature used to distribute reusable component options. // useMouse.ts (Composable)
import { ref, onMounted, onBeforeUnmount } from 'vue';
export function useMouse() {
const x = ref(0);
const y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
onMounted(() => window.addEventListener('mousemove', update));
onBeforeUnmount(() => window.removeEventListener('mousemove', update));
return { x, y };
} 02 Concise explanation“Mixins are an Options API feature used to distribute reusable component options. When a component uses a mixin, all options in the mixin are merged into the component.”
03 Memory formulamixins = implicit config merge; composables = explicit function reuse04 Real-world usesmigrating legacy Vue 2 reusing scroll tracking logic refactoring shared states Question 20 20. What is a Vue plugin, and how do you write and install one? Quick recall Concept Glance Card 30 sec
01 Easy tipA Vue plugin adds global-level functionality to a Vue application. // loggerPlugin.js
export const loggerPlugin = {
install(app, options) {
app.config.globalProperties.$log = (msg) => console.log('[App]:', msg);
}
};
// main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).use(loggerPlugin).mount('#app'); 02 Concise explanation“A Vue plugin adds global-level functionality to a Vue application. It is defined as an object with an install() method (or as a simple function) that receives the app instance and any custom options.”
03 Memory formulaplugin = install(app) + app.use(plugin)04 Real-world usesregistering internationalization (i18n) global toast notifications wrapping Stripe libraries Question 21 21. What is a Vue application instance, and how is it created in Vue 3? Quick recall Concept Glance Card 30 sec
01 Easy tipIn Vue 3, a Vue application instance is created using the createApp function. import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app'); 02 Concise explanation“In Vue 3, a Vue application instance is created using the createApp function. This instance represents the application context and provides methods to configure global options, plugins, directives, and components before mounting to a real DOM element.”
03 Memory formulaapp = createApp(Root) → config & plugins → app.mount(el)04 Real-world usesmultitenant apps on single page microfrontends setups bootstrapping SPA Question 26 26. How does Vue differ from React and Angular? Quick recall Concept Glance Card 30 sec
01 Easy tipVue balances React-like flexibility with Angular-like conventions. 02 Concise explanation“Vue is a progressive framework with declarative templates and built-in reactivity. React is a flexible UI library, while Angular is a more comprehensive and opinionated framework. Team and product needs should decide between them.”
03 Memory formulaVue = progressive balance; React = library flexibility; Angular = full structure04 Real-world usesframework selection migration planning architecture discussions Question 43 43. How did reactivity change from Vue 2 to Vue 3? Quick recall Concept Glance Card 30 sec
01 Easy tipVue 2 observed known properties; Vue 3 proxies whole objects. 02 Concise explanation“Vue 2 relied mainly on Object.defineProperty and could not naturally observe several object and array operations. Vue 3 uses Proxy, enabling additions, deletions, collections, and more complete interception.”
03 Memory formulaVue 2 = property descriptors; Vue 3 = object proxies04 Real-world usesVue 2 migration reactivity debugging collection state Question 04 4. How do computed properties differ from watchers? Quick recall Concept Glance Card 30 sec
01 Easy tipComputed properties (computed) are derived reactive values. import { ref, computed, watch } from 'vue';
const price = ref(100);
const quantity = ref(2);
// Computed property
const total = computed(() => price.value * quantity.value);
// Watcher
watch(total, (newTotal) => {
console.log('Total changed to:', newTotal);
}); 02 Concise explanation“Computed properties (computed) are derived reactive values. They are cached based on their reactive dependencies, meaning they only re-evaluate when one of their source dependencies changes. Computed properties must be pure functions with no side effects.”
03 Memory formulacomputed = cached value derivation; watch = action trigger on reactive updates04 Real-world usesfiltering list results formatting string labels fetching APIs on ID changes persisting data to storage Question 32 32. How do watch() and watchEffect() differ? Quick recall Concept Glance Card 30 sec
01 Easy tipwatch names sources; watchEffect discovers them. watch(searchTerm, async (term, _oldTerm, onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
results.value = await search(term, controller.signal);
}); 02 Concise explanation“watch tracks explicit sources and can provide old values. watchEffect runs immediately and tracks reactive reads automatically, which is convenient for effects with several dependencies but less explicit.”
03 Memory formulawatch = explicit and lazy; watchEffect = automatic and immediate04 Real-world usessearch requests storage syncing multi-dependency effects Question 33 33. What does toRefs() solve? Quick recall Concept Glance Card 30 sec
01 Easy tipConvert properties to refs before destructuring reactive state. 02 Concise explanation“toRefs() turns each reactive object property into a linked ref. This preserves reactivity when properties are destructured or returned individually from a composable.”
03 Memory formulareactive object + toRefs = destructurable linked refs04 Real-world usescomposable return values state destructuring Options-to-Composition migration Question 39 39. When should shallowRef() be used? Quick recall Concept Glance Card 30 sec
01 Easy tipTrack replacement, not every nested property. 02 Concise explanation“shallowRef() makes only its .value boundary reactive. Use it for large or external objects whose nested properties Vue should not deeply proxy.”
03 Memory formulashallowRef = reactive container, non-reactive internals04 Real-world usescomponent definitions chart instances immutable data snapshots Question 40 40. How do const and readonly() affect reactive state? Quick recall Concept Glance Card 30 sec
01 Easy tipconst locks the variable; readonly locks consumer writes. 02 Concise explanation“A const reactive object can still change its properties because const only prevents reassignment. readonly() creates a consumer-facing proxy that warns on attempted mutation.”
03 Memory formulaconst = no reassignment; readonly = no consumer mutation04 Real-world usescomposable APIs provided state controlled stores Question 05 5. Explain v-if vs v-show. Quick recall Concept Glance Card 30 sec
01 Easy tipv-if is conditional rendering. <!-- v-if template rendering -->
<div v-if="isLoaded">Rich data panel</div>
<div v-else>Loading...</div>
<!-- v-show style toggling -->
<div v-show="isVisible">Popup tooltip</div> 02 Concise explanation“v-if is conditional rendering. It ensures that the element and its children are completely destroyed and recreated when the condition changes. If the condition is false on initial render, the element is not rendered at all.”
03 Memory formulav-if = DOM addition & destruction; v-show = display style block & none toggle04 Real-world usesauthenticated blocks lazy components tab transitions frequently toggled dropdowns Question 06 6. How does v-model work under the hood? Quick recall Concept Glance Card 30 sec
01 Easy tipv-model is syntax sugar that combines a dynamic prop value binding and an input event listener. <!-- Short syntax -->
<CustomInput v-model="username" />
<!-- Long equivalent -->
<CustomInput
:modelValue="username"
@update:modelValue="username = $event"
/> 02 Concise explanation“v-model implements two-way binding by binding the component value prop dynamically and listening to the update event. In forms, it sugarizes v-bind:value and v-on:input.”
03 Memory formulav-model = :value (prop binding) + @input (event emitter listener)04 Real-world usestext inputs checkbox matrices custom wrapper elements form components Question 07 7. What is the significance of the key attribute in v-for? Quick recall Concept Glance Card 30 sec
01 Easy tipThe key attribute provides a unique identifier for elements in a rendered list. <!-- Correct key assignment -->
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul> 02 Concise explanation“The key attribute provides a unique identifier for elements in a rendered list. When Vue updates a list rendered with v-for, it uses a virtual DOM patching algorithm. By default, it applies an "in-place patch" strategy, but when elements reorder, this can lead to incorrect state tracking.”
03 Memory formulaunique stable key = correct list sorting & persistent component state04 Real-world usesrendering loop items sorting databases re-rendering dynamic animations preventing form entry loss Question 16 16. What is a Single-File Component (SFC)? Quick recall Concept Glance Card 30 sec
01 Easy tipA Single-File Component (SFC) is a Vue file with a .vue extension that encapsulates the template, JavaScript logic, and CSS styles of a component in a single file. <template>
<button class="btn">{{ label }}</button>
</template>
<script setup>
defineProps({ label: String });
</script>
<style scoped>
.btn { border-radius: 4px; }
</style> 02 Concise explanation“A Single-File Component (SFC) is a Vue file with a .vue extension that encapsulates the template, JavaScript logic, and CSS styles of a component in a single file.”
03 Memory formulaSFC = template (markup) + script (logic) + style scoped (appearance)04 Real-world usescomponent modularity scoped CSS encapsulation Vite SFC compiler integration Question 24 24. How do you handle form validation in a Vue.js application? Quick recall Concept Glance Card 30 sec
01 Easy tipForm validation in Vue can be handled manually using reactive variables and computed properties to validate input binds on the fly, or by using dedicated validation libraries like VeeValidate or Vuelidate. import { ref, computed } from 'vue';
const email = ref('');
const emailError = computed(() => {
if (!email.value) return 'Required';
if (!email.value.includes('@')) return 'Invalid format';
return '';
}); 02 Concise explanation“Form validation in Vue can be handled manually using reactive variables and computed properties to validate input binds on the fly, or by using dedicated validation libraries like VeeValidate or Vuelidate.”
03 Memory formulav-model input + computed checks = simple form validation04 Real-world usesregistration forms checkout inputs field-level error messaging Question 29 29. What are Vue directives and event modifiers? Quick recall Concept Glance Card 30 sec
01 Easy tipDirectives add reactive template behaviour; modifiers refine events. <form @submit.prevent="save">
<button :disabled="saving">Save</button>
</form> 02 Concise explanation“Vue directives are special v- attributes for binding, events, conditions, lists, models, and rendering controls. Event modifiers express preventDefault, propagation, and listener options directly in templates.”
03 Memory formulav-bind = : ; v-on = @ ; modifier = event rule04 Real-world usestemplate binding form submission conditional rendering Question 41 41. How are custom directives created? Quick recall Concept Glance Card 30 sec
01 Easy tipCustom directives are reusable DOM hooks. const vFocus = {
mounted(element) {
element.focus();
},
}; 02 Concise explanation“Custom directives attach low-level DOM lifecycle behaviour to elements. mounted() runs after insertion, and unmounted() should clean up listeners or resources.”
03 Memory formulaDirective hook + element lifecycle = reusable DOM behaviour04 Real-world usesfocus management intersection observers third-party DOM plugins Question 08 8. What are scoped slots and how do they work? Quick recall Concept Glance Card 30 sec
01 Easy tipScoped slots let a child component pass reactive data back to the parent template dynamically. <!-- Child: List.vue -->
<slot name="item" :item="currentRecord"></slot>
<!-- Parent component -->
<List>
<template #item="{ item }">
<span class="highlight">{{ item.title }}</span>
</template>
</List> 02 Concise explanation“Slots act as content outlets. Scoped slots allow the child component to pass arguments or properties to the slot, allowing the parent template to define UI using data scoped within the child.”
03 Memory formulaslot-scope = child variables → exposed to parent layout markup04 Real-world usescustom table lists flexible card elements renderless UI components dropdown components Question 09 9. Explain Provide and Inject in Vue. Quick recall Concept Glance Card 30 sec
01 Easy tipprovide and inject allow an ancestor component to serve as a dependency provider for all its descendants, regardless of how deep the component tree is. // Ancestor Component
import { provide, ref, readonly } from 'vue';
const theme = ref('dark');
provide('theme', readonly(theme));
provide('toggleTheme', () => theme.value = theme.value === 'dark' ? 'light' : 'dark');
// Descendant Component
import { inject } from 'vue';
const theme = inject('theme');
const toggleTheme = inject('toggleTheme'); 02 Concise explanation“provide and inject allow an ancestor component to serve as a dependency provider for all its descendants, regardless of how deep the component tree is. This avoids the problem of "prop drilling" where intermediary components have to pass down props they do not use.”
03 Memory formulaprovide = ancestor state exposure; inject = descendant state consumption04 Real-world usestheming contexts user profile propagation deep navigation hierarchies plugin setups Question 17 17. Why must component data be a function in Options API? Quick recall Concept Glance Card 30 sec
01 Easy tipIn the Options API, the data property must be a function that returns a fresh data object instance, rather than a plain object directly. export default {
data() {
return {
localCount: 0 // Fresh reference per instance
};
}
}; 02 Concise explanation“In the Options API, the data property must be a function that returns a fresh data object instance, rather than a plain object directly.”
03 Memory formuladata function = new state reference per instance04 Real-world usesOptions API component state isolated reusable components Question 22 22. What is the difference between local and global components? Quick recall Concept Glance Card 30 sec
01 Easy tipLocal components are imported directly into the component file where they are used and must be declared in Options API or simply used directly in Composition API <script setup>. // Global registration
app.component('BaseButton', BaseButton);
// Local registration (script setup compiles automatically)
import CustomCard from './CustomCard.vue'; 02 Concise explanation“Local components are imported directly into the component file where they are used and must be declared in Options API or simply used directly in Composition API <script setup>.”
03 Memory formulalocal = file import (tree-shakeable); global = app.component (everywhere)04 Real-world usesdesign system base inputs (global) feature-specific page containers (local) Question 25 25. What is $parent, and why is its direct usage discouraged? Quick recall Concept Glance Card 30 sec
01 Easy tip$parent is an instance property that references the parent component instance of the current component. // Discouraged:
this.$parent.someMethod();
// Encouraged:
const emit = defineEmits(['trigger-action']);
emit('trigger-action'); 02 Concise explanation“$parent is an instance property that references the parent component instance of the current component. While it provides direct access to parent state and methods, using it creates tight coupling between child and parent.”
03 Memory formula$parent = tight coupling danger; use props & events instead04 Real-world usesrefactoring legacy components understanding scope chains Question 27 27. How do props pass and validate parent data? Quick recall Concept Glance Card 30 sec
01 Easy tipProps down, and never mutate them in the child. <script setup lang="ts">
const props = defineProps<{ title: string; count?: number }>();
</script> 02 Concise explanation“Props are read-only inputs passed from parent to child. Vue can validate runtime type, requirement, default, and custom rules, while TypeScript can describe the compile-time prop contract.”
03 Memory formulaParent state -> read-only props -> child rendering04 Real-world usescomponent APIs reusable cards typed design systems Question 28 28. How does a child communicate with its parent? Quick recall Concept Glance Card 30 sec
01 Easy tipA child asks; the parent decides. const emit = defineEmits<{ save: [item: Item] }>();
emit('save', item); 02 Concise explanation“Children communicate upward by emitting custom events. Parents listen to those events and update owned state, keeping components loosely coupled and reusable.”
03 Memory formulaProps down -> events up04 Real-world usesform controls dialog actions list-item commands Question 30 30. How do default, named, and scoped slots differ? Quick recall Concept Glance Card 30 sec
01 Easy tipSlots pass markup; scoped slots also pass data. 02 Concise explanation“Default and named slots let parents supply content to child layouts. Scoped slots additionally expose child-owned data, separating data behaviour from parent-controlled presentation.”
03 Memory formulaSlot = content outlet; scoped slot = content outlet + child data04 Real-world usesmodals tables renderless components design systems Question 10 10. What is Vue's Virtual DOM and how does reconciliation work? Quick recall Concept Glance Card 30 sec
01 Easy tipVue creates a tree of Virtual Nodes (VNodes) in memory. 02 Concise explanation“Vue creates a tree of Virtual Nodes (VNodes) in memory. When state updates, it generates a new VNode tree and diffs it against the old one, batching minimal updates to the real DOM.”
03 Memory formulaVirtual DOM + dynamic patch flags + static hoisting = fast diffing04 Real-world usescustom renderers optimizing DOM paints dynamic canvas widgets Question 11 11. Explain the lifecycle hooks in Vue 3 (Composition API). Quick recall Concept Glance Card 30 sec
01 Easy tipsetup runs first; onMounted handles DOM access; onBeforeUnmount cleans up timers and event listeners. <script setup>
import { onMounted, onBeforeUnmount } from 'vue';
const handleResize = () => console.log('Resized');
onMounted(() => {
window.addEventListener('resize', handleResize);
});
onBeforeUnmount(() => {
window.removeEventListener('resize', handleResize);
});
</script> 02 Concise explanation“Vue 3 Composition API components setup reactivity first, then trigger onMounted after element attachment, onUpdated when state changes DOM, and onBeforeUnmount before tearing down local listeners.”
03 Memory formulasetup (init) → onMounted (DOM ready) → onBeforeUnmount (clean up)04 Real-world usesfetching backend endpoints adding event window listeners stopping interval timers observing element bounds Question 12 12. How does Vue Router handle navigation guards? Quick recall Concept Glance Card 30 sec
01 Easy tipVue Router handles page navigation in Single Page Applications. router.beforeEach((to, from) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
return { name: 'Login' };
}
}); 02 Concise explanation“Vue Router handles page navigation in Single Page Applications. Navigation guards are callbacks that intercept transitions, allowing you to cancel, redirect, or modify page flows.”
03 Memory formularouter.beforeEach = intercept transitions & verify routing metadata04 Real-world usesauthenticating routes showing top-loading progress bars logging analytics saving unsaved form state prompts Question 13 13. What is Pinia, and how does it compare to Vuex? Quick recall Concept Glance Card 30 sec
01 Easy tipPinia is the modern, lightweight state management library for Vue. import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
getters: {
itemCount: (state) => state.items.length,
},
actions: {
addItem(item) {
this.items.push(item);
},
},
}); 02 Concise explanation“Pinia is the modern, lightweight state management library for Vue. It has replaced Vuex as the recommended tool. It simplifies state management by removing mutations: actions directly modify state, removing boilerplate code.”
03 Memory formulaPinia = modular stores + no mutations + TypeScript autocomplete04 Real-world usesshopping cart state user credentials storage app settings panels cached layout variables Question 31 31. Where should initial component data be fetched? Quick recall Concept Glance Card 30 sec
01 Easy tipFetch early unless the request needs mounted DOM. 02 Concise explanation“Independent data loading can start during setup. Use onMounted when browser DOM is required, and use Nuxt data-fetching APIs for server-rendered routes. Never place initial fetching in onUpdated.”
03 Memory formulaIndependent request = setup; DOM dependency = onMounted; SSR = framework API04 Real-world usespage data browser integrations Nuxt rendering Question 34 34. How should legacy Vuex stores be understood and tested? Quick recall Concept Glance Card 30 sec
01 Easy tipKnow Vuex for legacy work; choose Pinia for new work. 02 Concise explanation“Vuex uses state, getters, synchronous mutations, actions, and modules. mapState reduces component boilerplate, mutation constants are optional, and mutations can be unit-tested as plain state-transforming functions.”
03 Memory formulaVuex = state + getters + mutations + actions + modules04 Real-world useslegacy Vue applications store migrations mutation unit tests Question 35 35. How is Vue Router configured and how do dynamic routes work? Quick recall Concept Glance Card 30 sec
01 Easy tipRoutes map URLs to components; :name marks a parameter. const router = createRouter({
history: createWebHistory(),
routes: [{ path: '/users/:id', component: () => import('./UserPage.vue'), props: true }],
}); 02 Concise explanation“Vue Router maps route records to components, renders matches through RouterView, and navigates with RouterLink. Dynamic segments begin with a colon and can be exposed as component props.”
03 Memory formulaPath + route record -> RouterView; :id = dynamic param04 Real-world usessingle-page navigation detail pages lazy-loaded routes Question 42 42. How can a Pinia getter accept an argument? Quick recall Concept Glance Card 30 sec
01 Easy tipGetter needs an argument? Return a function. getters: {
getUserById: (state) => (id) => state.users.find((user) => user.id === id),
} 02 Concise explanation“Define a Pinia getter that returns a function accepting the argument. For frequent lookups, normalised state can be more efficient because function-returning getters are not cached per argument.”
03 Memory formulaGetter -> lookup function -> argument04 Real-world usesentity lookup filtered store views parameterised selectors Question 14 14. How do you optimize Vue application performance (e.g. v-once, v-memo)? Quick recall Concept Glance Card 30 sec
01 Easy tipVue apps are optimized by minimizing rendering and bundle size. import { defineAsyncComponent } from 'vue';
// Lazy load component
const HeavyDashboard = defineAsyncComponent(() =>
import('./components/HeavyDashboard.vue')
); 02 Concise explanation“Vue apps are optimized by minimizing rendering and bundle size.”
03 Memory formulav-once (static cache) + v-memo (patch skip conditional) + defineAsyncComponent (lazy load)04 Real-world usesrendering massive data grid panels reducing initial JS footprint caching heavy UI panels Question 15 15. How do you test Vue components (Vitest & Vue Test Utils)? Quick recall Concept Glance Card 30 sec
01 Easy tipVue Test Utils is the official library for unit testing Vue components. import { mount } from '@vue/test-utils';
import Counter from './Counter.vue';
test('increments count on click', async () => {
const wrapper = mount(Counter);
expect(wrapper.text()).toContain('0');
await wrapper.find('button').trigger('click');
expect(wrapper.text()).toContain('1');
}); 02 Concise explanation“Vue Test Utils is the official library for unit testing Vue components. It mounts components in a virtual jsdom environment, allowing you to feed in props, stub dependencies (like Vue Router or Pinia), trigger interactions, and assert the output.”
03 Memory formulaProps & stubs in → Trigger user event interactions → Assert HTML elements out04 Real-world usesunit testing component logic testing custom button emits verifying state management stores preventing regression bugs Question 18 18. What is nextTick(), and when should you use it? Quick recall Concept Glance Card 30 sec
01 Easy tipnextTick() is a utility that returns a Promise that resolves after Vue has updated the DOM in response to reactive state changes. import { ref, nextTick } from 'vue';
const showInput = ref(false);
const inputRef = ref(null);
async function focusInput() {
showInput.value = true;
await nextTick(); // Wait for input to be created in DOM
inputRef.value.focus();
} 02 Concise explanation“nextTick() is a utility that returns a Promise that resolves after Vue has updated the DOM in response to reactive state changes. Vue batches reactive updates and processes them asynchronously to improve performance.”
03 Memory formulanextTick = wait for queued DOM updates to complete04 Real-world usesfocusing dynamic inputs scrolling to bottom of chat list DOM bounding measurements in tests Question 23 23. What is the difference between synchronous and asynchronous components? Quick recall Concept Glance Card 30 sec
01 Easy tipSynchronous components are imported directly and included in the main JavaScript bundle, meaning they load and block initial execution until resolved. import { defineAsyncComponent } from 'vue';
const HeavyChart = defineAsyncComponent(() =>
import('./components/HeavyChart.vue')
); 02 Concise explanation“Synchronous components are imported directly and included in the main JavaScript bundle, meaning they load and block initial execution until resolved. Asynchronous components are loaded dynamically on demand using defineAsyncComponent.”
03 Memory formuladefineAsyncComponent(() => import('./HeavyComponent.vue'))04 Real-world usesheavy modal boxes tab views reducing initial load metrics Question 36 36. What do Vite, Vue CLI, and vue-loader do? Quick recall Concept Glance Card 30 sec
01 Easy tipVite is current; Vue CLI and vue-loader explain older Webpack projects. 02 Concise explanation“Vite is the recommended tool for new Vue projects and offers fast on-demand development transforms. Vue CLI is the older maintenance-mode toolchain, while vue-loader teaches Webpack how to compile .vue files.”
03 Memory formulaNew Vue = create-vue + Vite; legacy Webpack = Vue CLI + vue-loader04 Real-world usesproject setup legacy maintenance build performance Question 37 37. How do dynamic components and KeepAlive work? Quick recall Concept Glance Card 30 sec
01 Easy tip:is chooses the component; KeepAlive preserves its instance. <KeepAlive>
<component :is="activeTab" />
</KeepAlive> 02 Concise explanation“Dynamic components switch implementations through <component :is>. Wrapping them in KeepAlive caches inactive instances so state can survive tab or view changes.”
03 Memory formula:is = choose; KeepAlive = preserve04 Real-world usestabs multi-step forms configurable dashboards Question 38 38. What does Teleport solve? Quick recall Concept Glance Card 30 sec
01 Easy tipLogical child, different DOM location. <Teleport to="body">
<Modal v-if="open" />
</Teleport> 02 Concise explanation“Teleport moves rendered content to another DOM target without changing its place in the Vue component tree. It helps modals and overlays escape clipping and stacking contexts.”
03 Memory formulaComponent ownership stays; DOM destination moves04 Real-world usesmodals tooltips notifications overlays