How Vue differs from React and Angular - Practice Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

Vue's approach to component structure

Which statement best describes how Vue's component structure differs from React and Angular?

A Vue components must be written in TypeScript, unlike React and Angular which allow JavaScript.

B Vue requires class-based components like Angular, while React uses only functional components.

C Vue uses a single-file component format combining template, script, and style, unlike React's JSX and Angular's separate files.

D Vue does not support reactive data binding, unlike React and Angular.

💡 Hint

Think about how Vue files group code compared to React and Angular.

Vue uses single-file components (.vue files) that combine template, script, and style in one file. React uses JSX inside JavaScript files, and Angular separates HTML templates, TypeScript code, and CSS into different files.

❓ component_behavior

intermediate

Reactivity system differences

What is a key difference in how Vue's reactivity system works compared to React and Angular?

A Vue requires manual DOM updates, unlike React and Angular which update automatically.

B Vue uses proxies to track changes reactively, while React relies on state hooks and Angular uses zones for change detection.

C Vue does not support reactive data, unlike React and Angular.

D Vue uses a virtual DOM like Angular but not like React.

💡 Hint

Consider how Vue tracks data changes internally.

Vue 3 uses JavaScript proxies to detect changes in data reactively. React uses hooks like useState to manage state changes, and Angular uses zones to detect async changes and update the DOM.

📝 Syntax

advanced

Vue Composition API syntax

Which Vue 3 Composition API code snippet correctly creates a reactive counter and increments it on button click?

Vue

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  }
}

A

const count = ref(0);
function increment() {
  count.value++;
}
return { count, increment };

B

const count = ref(0);
function increment() {
  count++;
}
return { count, increment };

C

const count = reactive(0);
function increment() {
  count++;
}
return { count, increment };

D

const count = ref(0);
function increment() {
  count += 1;
}
return { count, increment };

💡 Hint

Remember how to update a ref's value in Vue 3.

In Vue 3 Composition API, refs are reactive objects with a .value property. To update the count, you must increment count.value, not count directly.

❓ lifecycle

advanced

Vue lifecycle hooks vs React and Angular

Which statement correctly compares Vue's lifecycle hooks with React's and Angular's?

A Vue's lifecycle hooks run only once per app, unlike React and Angular which run per component.

B Vue does not have lifecycle hooks, unlike React and Angular.

C Vue's created hook runs after the component is destroyed, unlike React's componentDidMount.

D Vue's mounted hook runs after the component is added to the DOM, similar to React's useEffect with empty dependencies and Angular's ngAfterViewInit.

💡 Hint

Think about when the component is fully ready in each framework.

Vue's mounted hook runs after the component is inserted into the DOM. React's useEffect with an empty dependency array runs after the first render. Angular's ngAfterViewInit runs after the component's view is initialized.

🔧 Debug

expert

Identifying Vue reactivity bug

Given this Vue 3 Composition API code, what error or issue will occur when clicking the button to increment the count?

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    function increment() {
      state.count++;
    }
    return { state, increment };
  }
}

Options:

A No error; count increments and updates the UI correctly.

B TypeError because reactive objects cannot be mutated directly.

C The UI does not update because reactive does not track nested properties.

D SyntaxError due to missing ref usage.

💡 Hint

Consider how Vue 3 reactive works with objects and nested properties.

Vue 3's reactive function creates a reactive proxy for the entire object, including nested properties. Incrementing state.count updates the reactive state and triggers UI updates without error.

Practice

1. Which of the following best describes how Vue differs from React and Angular?

easy

A. Vue uses HTML-like templates and simple reactive data, making it easier to learn.

B. Vue requires JSX for all components, unlike React and Angular.

C. Vue is a full framework with strict rules like Angular.

D. Vue does not support component-based architecture.

Solution

1. Step 1: Understand Vue's template style

   Vue uses HTML-like templates which are easy for beginners to understand, unlike React's JSX or Angular's complex templates.

2. Step 2: Compare Vue's learning curve

   Vue's simple reactive data system makes it easier to learn compared to Angular's full framework approach and React's JSX syntax.

3. Final Answer:

   Vue uses HTML-like templates and simple reactive data, making it easier to learn. -> Option A

4. Quick Check:

   Vue = Easy templates + reactive data [OK]

Hint: Vue uses HTML templates, React uses JSX, Angular is full framework [OK]

Common Mistakes:

• Confusing Vue's template syntax with React's JSX
• Thinking Vue is as complex as Angular
• Believing Vue does not use components

2. Which syntax correctly defines a Vue 3 component using the Composition API?

easy

A. export default { setup() { const count = ref(0); return { count } } }

B. @Component class MyComponent extends Vue { count = 0 }

C. function Component() { return <div>Hello</div>; }

D. export default { data() { return { count: 0 } } }

Solution

1. Step 1: Identify Vue 3 Composition API syntax

   Vue 3 uses the setup() function with ref() to create reactive state.

2. Step 2: Check options for correct usage

   export default { setup() { const count = ref(0); return { count } } } correctly uses setup() and ref(0). export default { data() { return { count: 0 } } } is Options API, function Component() { return <div>Hello</div>; } is React JSX, @Component class MyComponent extends Vue { count = 0 } is Angular/TypeScript style.

3. Final Answer:

   export default { setup() { const count = ref(0); return { count } } } -> Option A

4. Quick Check:

   Vue 3 Composition API = setup() + ref() [OK]

Hint: Vue 3 uses setup() with ref() for reactive state [OK]

Common Mistakes:

• Choosing Options API syntax for Vue 3 Composition API question
• Confusing React JSX with Vue syntax
• Using Angular decorators in Vue code

3. What will be the rendered output of this Vue template?

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue')
setTimeout(() => { message.value = 'Updated Vue' }, 1000)
</script>

medium

A. Error because ref() cannot be used in template

B. Updated Vue immediately

C. Hello Vue always, no change

D. Hello Vue initially, then changes to Updated Vue after 1 second

Solution

1. Step 1: Understand reactive ref and template binding

   The message is a reactive ref initialized to 'Hello Vue'. The template shows its value with {{ message }} which Vue unwraps automatically.

2. Step 2: Analyze setTimeout effect

   After 1 second, message.value changes to 'Updated Vue', so the displayed text updates reactively.

3. Final Answer:

   <div>Hello Vue</div> initially, then changes to <div>Updated Vue</div> after 1 second -> Option D

4. Quick Check:

   Reactive ref updates template text after delay [OK]

Hint: Vue ref updates template reactively after value changes [OK]

Common Mistakes:

• Thinking template shows 'message.value' literally
• Expecting no update after setTimeout
• Believing ref() cannot be used in templates

4. Identify the error in this Vue 3 component code and how to fix it:

<script setup>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
function increment() {
  state.count++
}
</script>

<template>
  <button @click="increment">Count: {{ state.count }}</button>
</template>

medium

A. The increment function is not exposed to the template; add defineExpose({ increment }).

B. No error; code works correctly as is.

C. Reactive state should use ref() instead of reactive().

D. The @click event should be @click="increment()" with parentheses.

Solution

1. Step 1: Check function exposure in <script setup>

   In Vue 3's <script setup>, all top-level functions and variables are automatically exposed to the template.

2. Step 2: Verify reactive usage and event binding

   Using reactive() for state is correct. The event binding @click="increment" works without parentheses.

3. Final Answer:

   No error; code works correctly as is. -> Option B

4. Quick Check:

   script setup auto exposes functions [OK]

Hint: In script setup, functions auto-expose to template [OK]

Common Mistakes:

• Thinking functions need defineExpose in script setup
• Adding parentheses in @click unnecessarily
• Confusing reactive() with ref() for simple objects

5. You want to build a small interactive widget that updates a message when a button is clicked. Which Vue feature makes this simpler compared to Angular and React?

hard

A. Vue forces you to write JSX for all components like React.

B. Vue requires writing class components with decorators like Angular.

C. Vue's use of HTML-like templates with automatic reactive updates without JSX or decorators.

D. Vue does not support reactive data binding, unlike React and Angular.

Solution

1. Step 1: Understand Vue's template and reactivity advantages

   Vue uses simple HTML-like templates and reactive data that update the UI automatically without extra syntax like JSX or decorators.

2. Step 2: Compare with Angular and React

   Angular requires decorators and more setup; React uses JSX which mixes HTML and JavaScript syntax. Vue's approach is simpler for small widgets.

3. Final Answer:

   Vue's use of HTML-like templates with automatic reactive updates without JSX or decorators. -> Option C

4. Quick Check:

   Vue = simple templates + reactive updates [OK]

Hint: Vue uses simple templates and reactive data, no JSX or decorators [OK]

Common Mistakes:

• Thinking Vue requires JSX like React
• Believing Vue uses decorators like Angular
• Assuming Vue lacks reactive data binding