Google News
logo
Vue.JS Interview Questions
Vue.js is a JavaScript framework. Vue.js it builds dynamic user interfaces and single-page applications, on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

Here is a minimal example :
import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')
<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>​

Result : 
Count is: 0
 
The above example demonstrates the two core features of Vue :
 
Declarative Rendering : Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.
 
Reactivity : Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.
Vue is an independent, community-driven project. It was created by "Evan You" in 2014 as a personal side project. Today, Vue is actively maintained by a team of both full-time and volunteer members from all around the world, where Evan serves as the project lead.
The latest version of Vue (3.x) only supports browsers with native ES2015 support. This excludes IE11. Vue 3.x uses ES2015 features that cannot be polyfilled in legacy browsers, so if you need to support legacy browsers, you will need to use Vue 2.x instead.
Vue is a mature and battle-tested framework. It is one of the most widely used JavaScript frameworks in production today, with over 1.5 million users worldwide, and is downloaded close to 10 million times a month on npm.
 
Vue is used in production by renowned organizations in varying capacities all around the world, including Wikimedia Foundation, NASA, Apple, Google, Microsoft, GitLab, Zoom, Tencent, Weibo, Bilibili, Kuaishou, and many more.
Vue 3 is the current, latest major version of Vue. It contains new features that are not present in Vue 2 (most notably Composition API), and also contains breaking changes that makes it incompatible with Vue 2. Despite the differences, the majority of Vue APIs are shared between the two major versions, so most of your Vue 2 knowledge will continue to work in Vue 3.
 
In general, Vue 3 provides smaller bundle sizes, better performance, better scalability, and better TypeScript / IDE support. If you are starting a new project today, Vue 3 is the recommended choice. There are only a few reasons for you to consider Vue 2 as of now:
 
* You need to support IE11. Vue 3 leverages modern JavaScript features and does not support IE11.
 
* You are still waiting for major ecosystem projects like Nuxt or Vuetify to release stable versions for Vue 3. This is reasonable if you do not wish to use beta-stage software. However, do note there are other already stable Vue 3 component libraries such as Quasar, Naive UI and Element Plus.
 
If you intend to migrate an existing Vue 2 app to Vue 3, consult the dedicated Vue 3 Migration Guide.
 
Vue 2 has shipped a final minor release (2.7) in July 2022, which backports a selected subset of new features from Vue 3. Vue 2 has now entered maintenance mode: it will no longer ship new features, but will continue to receive critical bug fixes and security updates until the end of 2023.
Vue was created before Web Components were natively available, and some aspects of Vue's design (e.g. slots) were inspired by the Web Components model.
 
The Web Components specs are relatively low-level, as they are centered around defining custom elements. As a framework, Vue addresses additional higher-level concerns such as efficient DOM rendering, reactive state management, tooling, client-side routing, and server-side rendering.
Some of major features available with Vue.js :
 
Virtual DOM : It uses virtual DOM similar to other existing frameworks such as ReactJS, Ember etc. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the original DOM.

Components : Used to create reusable custom elements in VueJS applications.

Templates : VueJS provides HTML based templates that bind the DOM with the Vue instance data

Routing : Navigation between pages is achieved through vue-router

Light weight : VueJS is light weight library compared to other frameworks.
Explain the all life cycle events or hooks in Vue instance in Vue.js. / Explain the Life cycle of Vue Instance with diagram.
When a Vue instance is created in Vue.js, it goes through a series of steps after creation. First, they are created then mounted and after that destroyed at the end. In this process, it also runs functions known as life cycle hooks. These life cycle hooks allow the developers to add their own code at a specific stage.
 
Following is the list of all events or hooks a Vue instance goes through :
 
beforeCreate event: This is the first event or hook that occurs in the creation process. It facilitates developers to perform actions even before the component has been added to the DOM. We cannot access the DOM inside of this event.
 
created event : This event is used to run the code after creating the instance. It facilitates you to access the reactive data, but the mounting or rendering of templates and Virtual DOM is not completed yet.
 
beforeMount event : The beforeMount event is used to execute just before the initial render happens and after the template or render functions have been compiled. This is the rarely used event, and in most cases, you don't need to use this event.
 
mounted event : This is the most frequently used event or hook. In this event, you have full access to the reactive component, templates, and rendered DOM.
 
beforeUpdate event : This event is executed just before the data changes on the component and the update cycle's start. It runs right before the DOM is patched and re-rendered.
 
updated : This event is used to execute after the data changes on the component and the DOM re-renders. If you want to access the DOM after a property change, it is the best place to complete this action.
 
beforeDestroy : This event is used to execute just before tearing down the instance. This is the second last step of the Vue Instance life process and is the right place to clean up events or reactive subscriptions if you have to do this.
 
destroyed : This is the last step of the Vue Instance life process and used to do any last minute clean up.
 
Lifecycle Diagram of the Vue Instance :
Lifecycle
The official router of Vue.js is called Vue Router. It is by default integrated with Vue.js core and used to build Single Page Applications with Vue.js.
 
Following is the list of important features of Vue Router :
 
* Vue Router follows a modular, component-based router configuration.
* Very easy to implement.
* You can customize the Scroll Behavior.
* Provides Nested route/view mapping.
* Provides fine-grained navigation control.
* Route params, query, wildcards
* js' transition system provides View transition effects.
* Links with automatic active CSS classes.
* HTML5 history mode or hash mode, with auto-fallback in IE9.
In Vue.js, a slot is a placeholder in a child component filled with content passed from the parent component.
 
In the slot, the component is compiled in the parent's scope and then passed to the child component. So, it is not possible to use child component properties in a slot's content.
 
In Scoped slot, you can pass child component data to the parent scope and then use it in slot content.