What is Vue.js and how does it differ from React and Angular?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Include Vue

   Add Vue via a script tag for a single page or install it with npm and a build tool like Vite for a full app.

2. Step 2

   Create an app instance

   Call createApp with a root component and mount it to a DOM element with app.mount('#app').

3. Step 3

   Define reactive state

   Declare data with ref or reactive in the Composition API, or a data() function in the Options API.

4. Step 4

   Write a template

   Use HTML-based templates with directives like v-if, v-for, and v-bind instead of JSX.

5. Step 5

   Add companion libraries

   Bring in Vue Router for navigation and Pinia for shared state as the app grows.

Code Example

import { createApp } from 'vue'

const app = createApp({
  data() {
    return { message: 'Hello Vue!' }
  }
})

app.mount('#app')

Follow-up Questions

• What is the difference between the Options API and Composition API?
• How does Vue's reactivity system detect changes?
• When would you choose Vue over React for a project?
• What are single-file components and why are they useful?
• How does Vue Router differ from React Router?