Why Vue for progressive web development - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is Vue's Composition API beneficial for progressive web apps?

Vue's Composition API helps organize code in progressive web apps by:

A Forcing all components to be class-based

B Automatically caching all data without developer input

C Allowing better code reuse and logical grouping of features

D Replacing the need for service workers entirely

💡 Hint

Think about how code organization helps maintainability in apps.

The Composition API lets developers group related code together, making it easier to manage complex progressive web apps.

❓ component_behavior

intermediate

What happens when a Vue PWA component uses ref for state?

In Vue 3, using ref inside a PWA component means:

A The ref disables service worker caching for that component

B The state is static and never changes after initialization

C The component will not render until the ref is manually unwrapped

D The state is reactive and updates the UI automatically

💡 Hint

Remember what reactivity means in Vue.

Using ref creates reactive state that Vue tracks to update the UI when the value changes.

❓ lifecycle

advanced

Which Vue lifecycle hook is best for registering a service worker in a PWA?

To register a service worker in a Vue PWA, you should use the lifecycle hook:

A onMounted, because it runs after the component is added to the DOM

B onBeforeMount, because it runs before the component is created

C onUnmounted, because it runs when the component is removed

D onUpdated, because it runs after every update

💡 Hint

Think about when the DOM is ready for service worker registration.

Service workers should be registered after the component is mounted to the DOM, so onMounted is ideal.

📝 Syntax

advanced

What is the correct way to define a reactive object in Vue 3 for PWA state?

Choose the correct syntax to create a reactive object named user with a name property:

A const user = reactive({ name: 'Alice' })

B const user = ref({ name: 'Alice' })

C const user = reactive('name', 'Alice')

D const user = ref('name', 'Alice')

💡 Hint

Reactive objects use reactive(), refs wrap single values.

reactive() creates a reactive object. ref() is for single values, not objects.

🔧 Debug

expert

Why does this Vue PWA component fail to update UI when state changes?

Given this code snippet, why does the UI not update when count.value changes?

import { ref } from 'vue';

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

A Because ref cannot be used inside setup()

B Because count is a ref, you must update count.value, not count directly

C Because increment function is not returned from setup()

D Because count should be declared with reactive() instead of ref()

💡 Hint

Think about how to update a ref's value properly.

Refs hold their value in .value. Assigning to count replaces the ref, breaking reactivity.