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.