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
Adobe · Vue Js
Practice Vue Js questions specifically asked in Adobe interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
42
Tagged for this company + subject
Company
Adobe
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 Adobe Vue Js round.
v-bind (or :) binds attributes and props to reactive values.
<img :src="avatarUrl">
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.
created runs after instance setup, so data fetches can start early.
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" />Vue batches DOM updates. nextTick schedules a callback after the DOM has been updated for the current tick. Use it when you need to access the updated DOM (e.g., measuring elements) right after changing reactive state.
import { nextTick } from 'vue'
this.expanded = true
await nextTick()
const h = this.$el.getBoundingClientRect().heightVue batches DOM updates. nextTick runs a callback after the DOM has been updated. Use it when you need to read layout or interact with updated elements right after reactive data changes.
import { nextTick } from 'vue'
count.value++
await nextTick()
// DOM reflecting count is now updatedVue Router maps URLs to components for single-page navigation.
Vue.js is a progressive front-end framework for building UIs and SPAs.
Global components are registered once (e.g., app.component in Vue 3 or Vue.component in Vue 2) and can be used anywhere. Local components are registered in the components option of a specific parent and are only available within that component’s template subtree. Prefer local registration for better tree-shaking and to avoid name collisions; use global registration for UI primitives used across many views.
// Global (Vue 3)
import { createApp } from 'vue'
import Button from './Button.vue'
const app = createApp(App)
app.component('BaseButton', Button).mount('#app')
// Local
export default { components: { BaseButton } }Use :class with an object or array and :style with an object or array of objects. Vue merges them with static classes/styles. Prefer computed properties to keep templates clean when logic grows.
<div :class="{ active: isActive, 'text-danger': hasError }" :style="{ color: color, fontSize: size + 'px' }"></div>key gives Vue a stable identity for each node so it can efficiently reuse and reorder DOM elements. Use a unique, stable key like an id; avoid array indexes when items can be reordered/removed to prevent incorrect state reuse.
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>v-model creates two-way binding between a form control and component state. In Vue 2 it syncs with a value prop and input/change events. In Vue 3 on native inputs it still binds directly, but on custom components it maps to modelValue and the update:modelValue event by default.
<input v-model="name" placeholder="Your name" />
A Vue instance is the root of a Vue application. In Vue 2 you create it with new Vue({...}); in Vue 3 you create an app via createApp(App).mount('#app'). The instance controls reactivity, template rendering, lifecycle hooks, and component registration.
// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
// Vue 2
new Vue({ el: '#app', render: h => h(App) })Props are custom attributes a parent passes to a child component. They enable one-way data flow and reusability. Declare them in the child to validate and use them within the template/logic.
// Child.vue
<script>
export default { props: { title: { type: String, required: true } } }
</script>
<!-- Parent.vue -->
<Child :title="'Welcome'" />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.
Vue 3 allows multiple v-models by naming them, e.g., v-model:title and v-model:content. Use this to keep separate pieces of state in sync (like title and body) without packing into a single object.
<PostEditor v-model:title="title" v-model:content="content" />
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.
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 */ }Reactivity is Vue’s ability to track state and automatically update the DOM when that state changes. You write simple state updates, and Vue figures out what parts of the UI must re-render, reducing manual DOM code and keeping UI and data in sync.
v-tooltip is a typical example name for a custom directive.
computed() derives a value from reactive sources and caches the result until dependencies change. Methods re-run every call. Use computed for derived data (filters, totals, formatting) and methods for actions.
import { ref, computed } from 'vue'
const first = ref('Ada'), last = ref('Lovelace')
const full = computed(() => `${first.value} ${last.value}`)immediate: true runs the watcher once on setup with the current value. deep: true traverses nested objects/arrays so changes to inner properties trigger the watcher. Deep should be used carefully due to performance cost.
watch(state, (nv, ov) => save(nv), { deep: true, immediate: true })Pass an array of sources to watch. The callback receives arrays of new and old values in the same order. Sources can be refs, computed, or getter functions.
watch([() => route.params.id, filters], ([id, fNew], [prevId, fOld]) => {
fetchList(id, fNew)
})In templates Vue auto-unwraps refs, so you don’t need .value. In script, you must access ref.value. This improves ergonomics while keeping explicitness in code.
v-model creates two-way binding between form inputs and component state. It updates the view when the data changes and updates the data when the user types or selects. It’s commonly used with <input>, <textarea>, and <select> elements, as well as with custom components that define a model prop and update event.
Use native attributes like required, minlength, type="email" and call reportValidity() or checkValidity() on forms/inputs for instant validation UI. Combine with Vue state to disable submit or show custom messages when needed.
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.
The Composition API helps organize logic by feature instead of by option buckets (data, methods, computed). It scales better for large components, enables easy extraction of reusable logic (composables), improves TypeScript inference, and makes co-location of related code simpler. Use it when components grow large, logic is shared across components, or when strong typing and reusability matter.
<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>v-once renders an element/component once and skips future updates—great for static content. v-memo caches subtrees based on reactive dependencies array; it re-renders only when specified values change.
<h1 v-once>Static Title</h1>
<div v-memo="[user.id]">{{ user.name }}</div>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.
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.
<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>
Enable production mode, tree-shaking, code-splitting via dynamic imports, vendor chunking, image compression, and preloading critical assets. Analyze bundles (e.g., visualizer) to spot large dependencies and switch to lighter alternatives.
Pass different prop values to verify rendering/validation branches. Trigger user interactions and assert wrapper.emitted('eventName') payloads. Use shallowMount when child rendering is irrelevant.
Add a bundle visualizer (rollup-plugin-visualizer), inspect chunks, replace heavy libs with lighter ones, tree-shake, and lazy-load rarely used features. Verify improvements with before/after reports.
Computed values are reactive and memoized for performance.
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.
On a single checkbox, v-model binds to a boolean. On a checkbox group, it binds to an array of selected values. On radio inputs, v-model binds the selected radio’s value to the state.
<!-- single --> <input type="checkbox" v-model="isOn"> <!-- group --> <input type="checkbox" value="a" v-model="picked"> <input type="checkbox" value="b" v-model="picked"> <!-- radio --> <input type="radio" value="light" v-model="theme">
Use watch(source, callback) for precise control: compare new/old values, watch specific sources, and set options like immediate/deep. Use watchEffect() for auto-tracked side effects that rerun whenever any reactive read inside changes. It’s great for quick, dependency-free reactions.
watch(() => props.id, (n, o) => fetchUser(n)) watchEffect(() => console.log(form.email))
A composable is a plain function (usually prefixed with use*) that encapsulates reusable reactive state, watchers, and methods. It returns refs/reactive objects for consumers. Keep external effects optional and accept parameters to make it generic.
export function useCounter(initial = 0){
const n = ref(initial)
const inc = (d=1)=> n.value += d
const dec = (d=1)=> n.value -= d
return { n, inc, dec }
}