Vue.js Interview Questions

Vue.js is a progressive JavaScript framework for building user interfaces. Key features include: reactive data binding, component-based architecture, virtual DOM, directives, computed properties, and easy integration with existing projects.

Vue.js lifecycle hooks: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed. Example: mounted() { console.log("Component mounted"); }

Data binding connects data to DOM elements. One-way: {{ message }}, Two-way: v-model="message". Example: <input v-model="name"> <p>{{ name }}</p>

Directives are special attributes with v- prefix. Common ones: v-if, v-for, v-show, v-model, v-bind, v-on, v-html, v-text. Example: <div v-if="isVisible">Content</div>

v-if conditionally renders elements (adds/removes from DOM), v-show toggles CSS display property. v-if has higher toggle cost, v-show has higher initial render cost. Use v-show for frequent toggles.

Computed properties are cached based on dependencies. Example: computed: { fullName() { return this.firstName + " " + this.lastName; } }. They update only when dependencies change.

Computed properties are cached and only re-evaluate when dependencies change. Methods run every time they are called. Use computed for expensive operations that depend on reactive data.

Use v-on directive or @ shorthand. Example: <button @click="handleClick">Click</button>. Methods: { handleClick() { console.log("Clicked"); } }

Components are reusable Vue instances. Create with: Vue.component("my-component", { template: "<div>Hello</div>" }) or as single file components (.vue files).

Props pass data from parent to child components. Example: props: ["message"] or props: { message: { type: String, required: true } }. Use in template: {{ message }}

v-model creates two-way data binding on form inputs. It's syntactic sugar for :value and @input. Example: <input v-model="message"> equals <input :value="message" @input="message = $event.target.value">

Use v-for directive. Examples: <li v-for="item in items" :key="item.id">{{ item.name }}</li> or <li v-for="(item, index) in items" :key="index">{{ item }}</li>

Use v-model for two-way binding. Handle validation with computed properties or libraries like VeeValidate. Example: <input v-model="form.email" :class="{ error: !isValidEmail }">

Dynamic components switch between components using <component :is="currentComponent"></component>. Useful for tabs, modals, or conditional rendering of different components.

Use <transition> wrapper for enter/leave animations. CSS classes: v-enter, v-enter-active, v-leave, v-leave-active. Example: <transition name="fade"><div v-if="show"></div></transition>

Watchers observe data changes and perform actions. Use for async operations or expensive operations. Example: watch: { question(newVal) { this.getAnswer(); } }

Slots distribute content. Types: default slots, named slots, scoped slots. Example: <slot name="header"></slot>. Scoped: <slot :user="user"></slot>

Vuex is state management pattern for Vue.js. Centralized store for all components. Contains state, mutations, actions, getters. Used for complex applications with shared state.

Vue Router is official router for Vue.js. Features: nested routes, route guards, lazy loading, programmatic navigation. Example: { path: "/user/:id", component: User }

Mixins distribute reusable functionalities across components. Example: const myMixin = { created() { console.log("Mixin hook called"); } }. Use: mixins: [myMixin]

Parent to child: props. Child to parent: $emit events. Example: this.$emit("update", data). Parent: <child @update="handleUpdate"></child>

Custom directives for low-level DOM access. Example: Vue.directive("focus", { inserted(el) { el.focus(); } }). Use: <input v-focus>

Filters transform text formatting. Example: filters: { capitalize(value) { return value.charAt(0).toUpperCase() + value.slice(1); } }. Use: {{ message | capitalize }}

Virtual DOM is JavaScript representation of real DOM. Vue creates virtual DOM tree, compares with previous version, and updates only changed parts for better performance.

Composition API provides better logic reuse and TypeScript support. Uses setup() function with reactive(), ref(), computed(). Better code organization for complex components.

Vue uses Object.defineProperty (Vue 2) or Proxy (Vue 3) to track dependencies. When data changes, it triggers re-renders of dependent components through a reactive system.

Render functions create virtual DOM programmatically. Example: render(h) { return h("div", { class: "container" }, "Hello"); }. More flexible than templates for complex logic.

Use lazy loading, code splitting, v-show vs v-if, computed properties, virtual scrolling, bundle analysis, tree shaking, and proper key usage in v-for loops.

Plugins add global functionality. Example: const MyPlugin = { install(Vue, options) { Vue.prototype.$myMethod = function() {} } }. Use: Vue.use(MyPlugin)

SSR renders Vue components on server for better SEO and initial load time. Use Nuxt.js or Vue SSR. Challenges: hydration, state management, browser-specific code.

Provide/inject allows ancestor components to serve as dependency injector for descendants. Example: provide: { theme: "dark" }, inject: ["theme"]. Alternative to prop drilling.

Use errorCaptured lifecycle hook to catch errors in child components. Example: errorCaptured(err, instance, info) { console.error(err); return false; }

Teleport renders component content in different DOM location. Example: <teleport to="body"><modal></modal></teleport>. Useful for modals, tooltips, notifications.

Custom events: this.$emit("custom-event", data). Event modifiers: @click.stop, @submit.prevent, @keyup.enter. Chain modifiers: @click.stop.prevent

Use Vue Test Utils with Jest or Mocha. Test props, events, computed properties, methods. Example: wrapper = mount(Component, { propsData: { msg: "Hello" } })