Vue.js Interview Questions and Answers

The Options API organises component logic into fixed options such as data, methods, computed, watch and lifecycle hooks. The Composition API organises the same logic inside setup() using functions imported from vue.

// Options API
export default {
  data: () => ({ count: 0 }),
  methods: { inc() { this.count++; } },
};

// Composition API
const count = ref(0);
const inc = () => count.value++;

Trade-offs: the Composition API makes stateful logic easier to extract as composables, gives simpler TypeScript inference, and keeps related logic together instead of splitting it across option blocks. The Options API remains approachable for small components and has a gentler learning curve.

Both compile to the same runtime and can be mixed via setup(). Most large Vue 3 codebases prefer the Composition API for maintainability, while teams migrating from Vue 2 often keep the Options API for simple views.

v-if conditionally renders: when the expression is falsy the element and its children are not created, and they are destroyed when it flips. It supports v-else and v-else-if and can be applied to a template.

v-show always renders the element and only toggles display: none through inline CSS. Because of that it is cheaper for frequent toggling, with no create, destroy or diffing cost, but it has a higher initial render cost and cannot be used on template or with v-else.

Use v-if when the condition rarely changes or the subtree is expensive to keep mounted. Use v-show when something toggles often, such as a dropdown or a tab panel, because the DOM stays put.

Note that v-if has higher priority than v-for in Vue 3, so placing them on the same element is discouraged; filter the list in a computed instead. Neither directive preserves component state across hiding unless you wrap the subtree in KeepAlive.

Vue.js is an open-source, progressive Javascript framework for building user interfaces that aim to be
incrementally adoptable. The core library of VueJS is focused on the view layer only, and is easy to pick up and
integrate with other libraries or existing projects.

****

Every Vue application works by creating a new Vue instance with the Vue function. Generally the variable vm (short
for ViewModel) is used to refer Vue instance. You can create vue instance as below,

var vm = new Vue({
  // options
})

As mentioned in the above code snippets, you need to pass options object. You can find the full list of options in
the API reference.

****

You can also use integer type(say 'n') for v-for directive which repeats the element many times.

<div>
  <span v-for="n in 20">{{ n }} </span>
</div>

It displays the number 1 to 20.

****

Just similar to v-if directive on template, you can also use a <template> tag with v-for directive to render a
block of multiple elements.

Let's take a todo example,

<ul>
  <template v-for="todo in todos">
    <li>{{ todo.title }}</li>
    <li class="divider"></li>
  </template>
</ul>

****

Vuex is a state management pattern + library (Flux-inspired Application Architecture) for Vue.js applications. It
serves as a centralized store for all the components in an application, with rules ensuring that the state can only
be mutated in a predictable fashion.

****

Vue CLI is a simple command line interface for scaffolding Vue.js projects. It will be helpful for rapid Vue.js
development. You can install the npm package globally as below,

npm install -g @vue/cli
# OR
yarn global add @vue/cli

You can find the install version using vue --version command.
Note: Vue CLI requires Node.js version 8.9 or above (8.11.0+ recommended).

****

Vuetify is a semantic component material framework for Vue. It aims to provide clean, semantic and reusable
components that make building application easier. The installation and configuration is simple as below,

npm install Vuetify

import Vue from 'vue'
import Vuetify from 'vuetify' // Import Vuetify to your project

Vue.use(Vuetify) // Add Vuetify as a plugin

****