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
Meta · Vue Js
Practice Vue Js questions specifically asked in Meta interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
36
Tagged for this company + subject
Company
Meta
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 Meta Vue Js round.
created runs before the component is mounted; no DOM access yet—good for initializing state or starting async data fetches. mounted runs after the component is inserted into the DOM—use it for measuring elements, integrating third-party widgets, or DOM event listeners tied to the component’s root.
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-if adds or removes elements from the DOM based on a condition.
created runs after instance setup, so data fetches can start early.
Use @vue/eslint-config-typescript, eslint-plugin-vue, and Prettier integration. Enforce script setup order, component naming, and no-unused-vars. Run via Husky pre-commit to keep code consistent.
data() returns a fresh object that Vue makes reactive for each component instance. Returning a factory function avoids shared state across instances. Properties returned from data() are tracked; updates automatically re-render the template.
export default {
name: 'ExampleComponent',
data(){
return { message: 'Hello', count: 0 }
}
}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>One-way binding (v-bind or :) updates the view from data. Two-way binding (v-model) keeps input elements and component state in sync. Use v-bind for attributes and v-model for form fields that users edit.
<p :title="message">{{ message }}</p>
<input v-model="userInput">SSR is supported via Nuxt or Vue SSR tooling, not core runtime.
Vue CLI bootstraps projects with modern tooling and presets.
Vue.js is a progressive front-end framework for building UIs and SPAs.
Use a props object with type, required, default, and validator. Validation catches incorrect usage early; defaults make components resilient and self-documenting. For object/array defaults, return a factory function to avoid shared references.
props: {
options: {
type: Array,
default: () => []
},
mode: {
type: String,
validator: v => ['light','dark'].includes(v)
}
}Use the object syntax with options: { deep: true } to traverse nested properties (be mindful of performance), and { immediate: true } to run the callback right after the watcher is registered.
watch: {
settings: {
deep: true,
immediate: true,
handler(val){ console.log('settings changed', val) }
}
}Use custom events for direct parent–child communication. Event buses (Vue 2 pattern) can create hidden coupling and are discouraged in larger apps—prefer Vuex/Pinia for many-to-many communication or deeply nested siblings. Stores keep flows predictable and testable.
Start with HTML5 validation (required, min, pattern) and custom messages, then layer reactive rules via computed/watches. For complex forms or async rules (e.g., username availability), adopt libraries like VeeValidate or vuelidate for schema-based validation and error aggregation.
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 = trueUse watch for side effects that happen when data changes (fetching, debouncing, saving to localStorage, logging). Use computed for deriving new values for the view. watch doesn’t return a value to render; it performs effects.
watchEffect 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">
For single selects, v-model binds to one value. For multiple selects (multiple attribute), v-model binds to an array of selected values. The option’s value can be a string or an object via :value binding.
<select v-model="country">
<option :value="{ code: 'IN', name: 'India' }">India</option>
</select>
<select v-model="tags" multiple>
<option value="vue">Vue</option>
<option value="spa">SPA</option>
</select>Use <label for> with matching input ids, associate errors with inputs via aria-describedby, ensure clear focus styles, group related inputs with fieldset/legend, and announce async errors using aria-live regions so screen readers are notified.
<script setup> is a compile-time syntax that simplifies Composition API code. It removes boilerplate (no need to return), enables direct imports/usage, better tree-shaking, and faster execution. Top-level bindings in <script setup> are available in the template automatically.
<script setup>
import { ref } from 'vue'
const msg = ref('Hello')
function flip(){ msg.value = msg.value.split('').reverse().join('') }
</script>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())Define a modelValue prop and emit update:modelValue when internal state changes. Wrap modelValue with a computed getter/setter to keep template bindings simple.
const props = defineProps<{ modelValue: string }>()
const emit = defineEmits(['update:modelValue'])
const model = computed({
get: () => props.modelValue,
set: v => emit('update:modelValue', v)
})v-show toggles CSS display and keeps the element in the DOM—best for frequent toggling (e.g., tabs, dropdowns). v-if adds/removes nodes, which is more expensive when toggled often. Use v-if for rarely shown content to avoid initial render cost.
<keep-alive> caches inactive component instances instead of destroying them. It’s ideal for expensive views like tab content or route views where state and scroll position should be preserved. Avoid caching memory-heavy components indiscriminately.
<keep-alive include="UserList,UserDetail"> <router-view /> </keep-alive>
Create a Pinia instance in tests with createTestingPinia or real Pinia, set initial state, and assert getters/actions. For components, provide the test Pinia via global.plugins when mounting.
Caching avoids re-running expensive logic on every render.
Scoped slots pass data from a child to the slot content defined in the parent. Use them for render flexibility (e.g., list/grid rendering with custom item templates). The child exposes slot props; the parent consumes them via v-slot.
<!-- Child.vue -->
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot name="item" :item="item">{{ item.label }}</slot>
</li>
</ul>
</template>
<!-- Parent.vue -->
<List :items="rows">
<template #item="{ item }">
<strong>{{ item.label }}</strong>
</template>
</List>.lazy updates on change/blur instead of on each input, useful for text areas or costly validations. .number casts the value to a number (or NaN if invalid). .trim removes leading/trailing whitespace before assignment.
<input v-model.lazy="title" /> <input v-model.number="age" type="number" /> <input v-model.trim="email" />
Globally, configure app.config.errorHandler (Vue 3) or Vue.config.errorHandler (Vue 2) to capture uncaught component errors. Per-component, use the errorCaptured hook to intercept errors from child components and optionally prevent propagation by returning false. For async code, handle Promise rejections with try/catch or .catch.
// Vue 3 global
const app = createApp(App)
app.config.errorHandler = (err, instance, info) => { /* log/report */ }
// Per-component
export default { errorCaptured(err, vm, info){ /* cleanup */ return false } }Wrap the native input in a component and emit update:modelValue on a debounced timer. This decouples UI typing from model updates and avoids heavy computations on every keypress.
<script setup>
import { ref } from 'vue'
const props = defineProps({ modelValue: String, delay: { type: Number, default: 300 } })
const emit = defineEmits(['update:modelValue'])
let t: any
function onInput(e:any){ clearTimeout(t); t = setTimeout(() => emit('update:modelValue', e.target.value), props.delay) }
</script>
<template><input :value="modelValue" @input="onInput" /></template>Keep raw form state in refs/reactive, then compute an errors map by deriving rules (required, length, regex). Disable submit if errors exist and show messages next to inputs.
const form = reactive({ email: '', pwd: '' })
const errors = computed(() => ({
email: /.+@.+\..+/.test(form.email) ? '' : 'Enter a valid email',
pwd: form.pwd.length >= 8 ? '' : 'Min 8 chars'
}))
const canSubmit = computed(() => !errors.value.email && !errors.value.pwd)Mount the component, find the button, trigger a click, and assert the updated DOM or exposed state. Await Vue’s next tick or use flushPromises when async.
// Vitest + VTU example
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Counter from './Counter.vue'
describe('Counter', () => {
it('increments', async () => {
const w = mount(Counter)
await w.get('button').trigger('click')
expect(w.text()).toContain('1')
})
})Vuex provides a centralized store with predictable state mutations.