Why component patterns matter in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue component using the Composition API.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value [1] 1
}
</script>
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

Drag options to blanks, or click blank then click option'

A*=

B-=

C/=

D+=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' will decrease the count instead of increasing it.

Using '*=' or '/=' will multiply or divide the count, which is not intended.

We use += to add 1 to the current count value when the button is clicked.

2fill in blank

medium

Complete the code to bind a reactive property to the template.

Vue

<script setup>
import { ref } from 'vue'
const message = ref('Hello')
</script>
<template>
  <p>{{ [1] }}</p>
</template>

Drag options to blanks, or click blank then click option'

Amessage.value()

Bmessage.value

Cmessage

Dmessage()

Attempts:

3 left

💡 Hint

Common Mistakes

Using message.value in the template causes errors.

Trying to call message() is incorrect for refs.

In Vue templates, you use the ref variable name directly without .value.

3fill in blank

hard

Fix the error in the component setup by completing the import statement.

Vue

<script setup>
import [1] from 'vue'
const count = ref(0)
</script>

Drag options to blanks, or click blank then click option'

A{ ref }

B{ reactive }

C{ computed }

D{ watch }

Attempts:

3 left

💡 Hint

Common Mistakes

Importing reactive instead of ref causes errors here.

Using computed or watch is not correct for this purpose.

The ref function is needed to create reactive references like count.

4fill in blank

hard

Fill both blanks to create a reactive object and update its property.

Vue

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

Drag options to blanks, or click blank then click option'

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref for objects requires different syntax.

Importing computed or watch is not correct here.

Use reactive to create a reactive object like state.

5fill in blank

hard

Fill all three blanks to create a computed property that doubles a count.

Vue

<script setup>
import { ref, [1] } from 'vue'
const count = ref(1)
const double = [2](() => count.value [3] 2)
</script>

Drag options to blanks, or click blank then click option'

Acomputed

Breactive

C*

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of computed for derived values.

Using addition + instead of multiplication *.

Use computed to create a reactive value based on count. Multiply by 2 with *.

Practice

1. Why is it important to use component patterns in Vue applications?

easy

A. They slow down the app performance

B. They make code easier to read and reuse

C. They increase the file size unnecessarily

D. They prevent the use of props

Solution

1. Step 1: Understand the role of component patterns

   Component patterns organize code into reusable parts, making it easier to manage.

2. Step 2: Identify the benefit of reusability and readability

   Using patterns helps developers read and reuse code efficiently, improving teamwork and maintenance.

3. Final Answer:

   They make code easier to read and reuse -> Option B

4. Quick Check:

   Component patterns = easier code reuse [OK]

Hint: Think about how patterns help reuse code [OK]

Common Mistakes:

• Confusing patterns with performance issues
• Assuming patterns increase file size
• Believing patterns restrict props usage

2. Which of the following is the correct way to define a simple Vue component using the Composition API?

easy

A. export default { setup: () => { count: 0 } }

B. export default function setup() { return { count: 0 } }

C. export default { setup() { return { count: 0 } } }

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

Solution

1. Step 1: Recall Composition API syntax

   The setup() function is defined inside the component object and returns reactive state.

2. Step 2: Check each option's syntax

   export default { setup() { return { count: 0 } } } correctly defines setup() returning an object. export default function setup() { return { count: 0 } } is invalid syntax. export default { data() { return { count: 0 } } } uses Options API, not Composition API. export default { setup: () => { count: 0 } } has incorrect arrow function syntax.

3. Final Answer:

   export default { setup() { return { count: 0 } } } -> Option C

4. Quick Check:

   Correct setup() syntax = export default { setup() { return { count: 0 } } } [OK]

Hint: Remember setup() returns state object in Composition API [OK]

Common Mistakes:

• Confusing Options API with Composition API syntax
• Using arrow functions incorrectly in setup
• Not returning an object from setup

3. Given this Vue component code using a pattern for props and emits:

export default {
  props: { count: Number },
  emits: ['increment'],
  setup(props, { emit }) {
    function add() { emit('increment') }
    return { add }
  }
}

What happens when the add function is called?

medium

A. It emits an 'increment' event to the parent component

B. It changes the value of the count prop directly

C. It throws an error because emit is undefined

D. It updates the local count state automatically

Solution

1. Step 1: Understand the emit function in setup()

   The emit function sends events from child to parent components in Vue.

2. Step 2: Analyze the add() function behavior

   Calling add() triggers emit('increment'), which sends the 'increment' event upward.

3. Final Answer:

   It emits an 'increment' event to the parent component -> Option A

4. Quick Check:

   emit('increment') sends event [OK]

Hint: emit() sends events to parent components [OK]

Common Mistakes:

• Thinking props can be changed directly
• Assuming emit is undefined in setup
• Believing local state updates automatically

4. This Vue component code has an error:

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0)
    function increment() {
      count++
    }
    return { count, increment }
  }
}

What is the error and how to fix it?

medium

A. increment should be an arrow function

B. ref is not imported, so import it from 'vue'

C. setup must return a function, not an object

D. count is a ref, so use count.value++ instead of count++

Solution

1. Step 1: Identify how to update a ref value

   Refs hold values inside .value property, so count++ is invalid.

2. Step 2: Correct the increment function

   Use count.value++ to update the reactive ref correctly.

3. Final Answer:

   count is a ref, so use count.value++ instead of count++ -> Option D

4. Quick Check:

   Update ref with .value [OK]

Hint: Update ref values with .value [OK]

Common Mistakes:

• Trying to increment ref directly
• Forgetting to import ref (though not asked here)
• Thinking setup returns a function

5. You want to create a reusable Vue component pattern that accepts a list of items and emits an event when an item is selected. Which pattern best supports this goal?

hard

A. Use props to pass the list and emits to notify selection

B. Use local data to store the list and watch to detect selection

C. Use global variables to share the list and methods to select

D. Use slots to pass the list and computed properties to emit

Solution

1. Step 1: Identify how to pass data into components

   Props are the standard way to pass data like lists into Vue components.

2. Step 2: Identify how to notify parent components

   Emits are used to send events like item selection back to the parent.

3. Step 3: Evaluate other options

   Local data won't receive external lists. Global variables break encapsulation. Slots are for content, not data lists. Computed properties don't emit events.

4. Final Answer:

   Use props to pass the list and emits to notify selection -> Option A

5. Quick Check:

   Props in, emits out = reusable pattern [OK]

Hint: Props in, emits out for reusable components [OK]

Common Mistakes:

• Using local data instead of props for input
• Relying on global variables for data sharing
• Misusing slots for data passing