Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Microsoft · Vue Js
Practice Vue Js questions specifically asked in Microsoft interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
41
Tagged for this company + subject
Company
Microsoft
View company-wise questions
Subject
Vue Js
Explore topic-wise practice
Go through each question and its explanation. Use this page for targeted revision just before your Microsoft Vue Js round.
Mustache syntax {{ }} renders reactive values into templates.
<p>{{ message }}</p>For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.
v-bind (or :) binds attributes and props to reactive values.
<img :src="avatarUrl">
Vue 3 renamed it to unmounted; destroyed is Vue 2 terminology.
Props are read-only inputs passed from a parent to a child component. Declare them in the child with name, type, and optional default/validator. Use kebab-case in templates and camelCase in JavaScript. Props enable one-way data flow and component reuse.
// Child.vue
<script>
export default {
props: {
title: { type: String, required: true },
count: { type: Number, default: 0 }
}
}
</script>
<!-- Parent.vue -->
<Child :title="'Hello'" :count="3" />In Vue 3, v-model uses a modelValue prop and update:modelValue event by convention. Bind the input to modelValue and emit the update when it changes. You can support multiple v-models with arguments.
// Child.vue
<script>
export default {
props: { modelValue: String },
emits: ['update:modelValue']
}
</script>
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<!-- Parent.vue -->
<MyInput v-model="name" />Use list virtualization so only visible rows render (e.g., vue-virtual-scroller). Combine with stable keys, lightweight row components, and memoized computed values.
A component is a reusable, self-contained UI unit that bundles template, logic, and styles. Create a Single File Component (SFC) with <template>, <script>, and <style>. Register it locally or globally, then use its custom tag in templates.
<template>
<div>
<h1>Hello, {{ message }}</h1>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() { return { message: 'Vue!' } }
}
</script>
<style scoped>
h1 { color: blue; }
</style>In Vue 2, filters format text in templates (e.g., capitalization, dates). In Vue 3 they were removed from core—use computed properties or methods instead. The idea remains: keep formatting logic declarative and reusable.
Vue Router maps URLs to components for single-page navigation.
Use v-on (or @) to listen to DOM events like click or input.
<button v-on:click="save()">Save</button>
The Virtual DOM is an in-memory tree describing the UI. On state changes, Vue diffs the new tree against the previous one and applies the minimal set of real DOM operations. This reduces layout thrashing and enables batched, predictable updates.
provide/inject lets an ancestor supply values that descendants can read without prop drilling. It’s great for themes, i18n, or form groups. It is not a replacement for a global store; prefer it for localized cross-level sharing.
// Ancestor
provide('theme', ref('dark'))
// Descendant
const theme = inject('theme', ref('light'))Use PascalCase names (e.g., UserCard), prefix base UI primitives (BaseButton), and keep components focused on a single responsibility. Extract presentational parts, accept data via props, emit events for actions, and avoid coupling components to global state to maximize reuse.
Creation: beforeCreate/created (or setup in Vue 3) for initializing data, starting requests. Mounting: beforeMount/mounted for DOM-dependent work. Updating: beforeUpdate/updated for reacting to re-renders. Unmounting: beforeUnmount/unmounted (Vue 3) or beforeDestroy/destroyed (Vue 2) for cleanup like removing listeners or canceling timers.
1) Hand-rolled validation with computed errors and watchers (no dependency). 2) Validation libraries like VeeValidate or vuelidate, which offer schemas, rules, async checks, and error collections for complex forms.
Use @submit.prevent to stop default navigation, validate synchronously/async, then call an API. Handle loading and error states in component state and disable the submit button to prevent duplicate requests.
<form @submit.prevent="onSubmit"> <!-- fields --> <button :disabled="loading">Save</button> </form>
Keep per-field touched/dirty flags, render errors near inputs, and disable submit if there are blocking errors. Use ARIA attributes (aria-invalid, aria-describedby) and ensure clear messaging for accessibility. Summarize top-level errors on submit.
Use a file input and read files from the change event. Build a FormData payload and POST with fetch/axios. Reflect progress and validation (size/type) in component state. Do not bind files with v-model; manage them imperatively.
<input type="file" multiple @change="onFiles">
// JS
function onFiles(e:any){ const files = [...e.target.files] /* validate & upload */ }reactive() makes a deep reactive object (Proxy). You mutate properties directly (state.user.name = 'A'). ref() wraps any value and exposes it as .value. Prefer reactive for objects with multiple fields; prefer ref for single values.
import { reactive } from 'vue'
const state = reactive({ user: { name: 'Aya' }, loggedIn: false })
state.loggedIn = truewatchEffect runs a reactive effect immediately and tracks dependencies automatically based on what it reads, no need to declare a specific source. watch watches explicit sources and gives new/old values. Use watchEffect for quick reactive side effects; use watch when you need precise control and values.
import { watchEffect } from 'vue'
watchEffect(() => {
// any reactive reads here become dependencies
console.log('User:', state.user.name)
})1) Destructuring reactive breaks reactivity—use toRefs() or store refs individually. 2) Non-reactive globals won’t trigger updates—wrap them with ref/reactive or expose via computed/getter so Vue can track.
For native inputs, v-model expands to :value (or :checked for checkbox/radio) plus an @input (or @change) listener that writes back to the bound state. For example, v-model="text" compiles roughly to :value="text" and @input="text = $event.target.value".
<input v-model="text"> <!-- roughly equals --> <input :value="text" @input="text = $event.target.value">
Prevent default, validate synchronously, then run async validations if any. Show a loading state, call the API, handle success (reset/redirect) and failure (map server errors to fields). Always clear the loading state in a finally block.
const submitting = ref(false)
async function onSubmit(e){
e.preventDefault()
if(!canSubmit.value) return
submitting.value = true
try { await api.save(form) }
catch(err){ mapErrors(err) }
finally { submitting.value = false }
}Use ref() for a single primitive or when you need a value wrapper with .value. Use reactive() to make an object or array deeply reactive with proxy semantics. For reassigning an object wholesale, prefer ref with an object to avoid caveats of reactive shallow replacement.
const n = ref(0) // n.value
const state = reactive({ user: { name: 'Evan' } })
// Whole-object replace pattern
const obj = ref({ a: 1 }); obj.value = { a: 2 }Use onMounted, onUpdated, onUnmounted, and other on* functions inside setup(). They register lifecycle callbacks for the current component instance without using the Options API.
import { onMounted, onUnmounted } from 'vue'
onMounted(() => start())
onUnmounted(() => stop())provide() registers a value on an ancestor; inject() reads it from descendants without prop drilling. It’s ideal for theming, i18n, or shared services. Avoid overuse for ordinary parent-child data—props/emit are still clearer for local communication.
provide('theme', themeRef)
// descendant
const theme = inject('theme', ref('light'))It documents components in isolation, accelerates UI development, and enables visual testing (stories as test cases). You can pair with Chromatic or visual diffing for regression detection.
Vue tracks dependencies while rendering: when reactive properties are read, they are recorded; when they change, Vue schedules an update for the components that used them. Vue 3 uses ES2015 Proxies (reactive, ref) to observe reads and writes, enabling more accurate tracking and fewer caveats than Vue 2’s getters/setters.
Use <script setup lang="ts">, type your props with defineProps, emits with defineEmits, and composables with explicit generics. Prefer ref<number>() and reactive<{…}> for strong typing. Return typed objects from composables for IDE help and safety.
A stable key lets Vue diff lists predictably and reuse DOM nodes. Without it (or using index as key for re-orderable lists), Vue may patch the wrong nodes, causing extra re-renders, incorrect state preservation, and animation glitches.
Use shallowRef for large objects you don’t want deeply reactive (e.g., chart instances). Use markRaw to prevent Vue from making objects reactive (3rd-party libs). This avoids unnecessary dependency tracking and reactivity overhead.
const chart = shallowRef() chart.value = markRaw(new EChartsInstance())
Abstract HTTP into a module and mock it with vi.mock/jest.mock. For Axios, mock instance methods (get/post). Resolve with canned data or force rejections to test error paths.
vi.mock('../api', () => ({ fetchUsers: vi.fn(() => Promise.resolve([{id:1}])) }))Put variables in .env, .env.development, .env.production, and prefix with VITE_. Access via import.meta.env. Never expose secrets; keep private keys server-side.
Install deps with cache, run type-check (vue-tsc), lint, unit tests with coverage, build, and optionally E2E on preview URL. Artifacts and coverage should be uploaded for review.
SFCs co-locate template, logic, and styles for a component.
Watchers react to specific data changes to run side effects.
Vitest or Jest provide fast test runners and mocking. @vue/test-utils offers utilities to mount components, trigger events, and assert DOM. Together they enable isolated, deterministic tests for props, emits, and rendering.
For a single checkbox, it binds a boolean. For multiple checkboxes with the same v-model, it pushes/pulls values from an array. For radio buttons, it binds the selected radio’s value to a single scalar.
<input type="checkbox" v-model="isAdmin">\n<input type="checkbox" v-model="skills" value="js">\n<input type="checkbox" v-model="skills" value="vue">\n<input type="radio" v-model="level" value="junior">
A writable computed has get and set. It lets you map a single field to multiple underlying sources or apply transformations on write. Useful for combined forms or formatting that needs reverse mapping.
const first = ref('Ada'), last = ref('Lovelace')
const full = computed({
get: () => `${first.value} ${last.value}`,
set: v => { const [f,l] = v.split(' '); first.value = f; last.value = l || '' }
})Implement a prop named modelValue and emit an update:modelValue event when internal state changes. Consumers can then use v-model on your component. You can also support multiple v-model bindings with the v-model:arg syntax.
// Child
export default {
props: { modelValue: String },
emits: ['update:modelValue']
}
// Template
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />Vuex provides a centralized store with predictable state mutations.