Advanced Reactivity Patterns | CodeSignal Learn

Advanced Reactivity Patterns | CodeSignal Learn

Introduction

Welcome back! You have already learned how to use Vue’s reactivity system to build interactive and dynamic applications. In the last lesson, you explored advanced style bindings, using computed properties and CSS variables to create a greeting card that responds to user preferences, such as theme and font size. Now, you are ready to take your understanding of Vue’s reactivity to the next level. In this lesson, you will learn about advanced reactivity patterns in Vue . We will look at situations where basic reactivity is not enough, and you will discover new tools and techniques to manage more complex state and side effects in your applications. By the end of this lesson, you will know how to use watchers, the watchEffect function, and advanced patterns with the Composition API to create even more powerful and flexible Vue components. We will use your greeting card example as a base, enhancing it with these new concepts so you can see them in action.

Recap Of Vue’s Basic Reactivity

The Need For Advanced Reactivity Patterns

You might be wondering: why do we need more than ref, reactive, and computed ? The answer is that, in real-world applications, you often need to do more than just update the UI when data changes. Sometimes, you need to: Run code in response to a specific change (for example, fetch new data when a user changes a selection). Watch for changes in deeply nested objects or arrays. Perform asynchronous operations or side effects when data updates. Combine multiple sources of reactive data and respond to their changes in a coordinated way. For example, imagine you want your greeting card to log a message every time the recipient changes, or you want to fetch a fun fact about the recipient from an API whenever the name is updated. These are cases where basic reactivity is not enough, and you need more control over how and when your code runs in response to changes.

Deep Dive: Watchers & watchEffect

Advanced Patterns With The Composition API

As your components become more complex, you may need to combine multiple reactive sources or organize your state in a way that keeps your code clean and maintainable. The Composition API makes this much easier. For example, you can group related state and logic together and use computed properties to combine or transform data. You can also use watchers to coordinate updates between different pieces of state. Let’s look at a pattern from your greeting card app. Suppose you want to show a character count for the recipient’s name, but only if a certain option is enabled. You can use a reactive object for your options and a computed property for the character count: import { ref, computed, reactive } from 'vue' const recipient = ref('Vue Learner') const cardOptions = reactive({showCharCount: true}) const recipientLength = computed(() => {return recipient.value.length}) If you want to perform an action whenever the showCharCount option changes, you can set up a watcher: import { watch } from 'vue' watch(() => cardOptions.showCharCount, (newValue) => {if (newValue) {console.log('Character count is now visible.')} else {console.log('Character count is now hidden.')}}) This approach keeps your logic organized and makes it easy to manage complex state and side effects as your app grows.

Practical Example: Enhancing The Greeting Card

Summary And Next Steps

In this lesson, you learned why advanced reactivity patterns are important in Vue applications. You reviewed the basics of ref, reactive, and computed, and saw where their limitations appear in more complex scenarios. You then explored how to use watchers and watchEffect to respond to changes in your data and manage side effects. Finally, you saw how the Composition API helps you organize and combine reactive state in a clean and maintainable way. These advanced patterns give you much more control over your application’s behavior and make it easier to build features that respond to user actions, external data, and complex state changes. As you move on to the practice exercises, you will get hands-on experience using watchers, watchEffect, and advanced Composition API patterns to enhance your greeting card app and beyond. Keep experimenting and exploring — these skills will help you build more powerful and flexible Vue applications as you continue your learning journey!

Previous Lesson

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Before we dive into advanced patterns, let’s quickly review what you already know about Vue’s basic reactivity system. In previous lessons, you learned how to use ref for primitive values like strings and numbers, and reactive for objects. You also used computed properties to create values that automatically update when their dependencies change.

For example, in your greeting card app, you used ref to store the greeting message and recipient, and a computed property to combine them into a personalized message. Here’s a reminder of what that looked like:

JavaScript

const greeting = ref('Hello')
const recipient = ref('Vue Learner')

const personalizedMessage = computed(() => {
  return `${greeting.value}, ${recipient.value}!`
})

This approach works well for most simple cases. However, as your applications grow, you may run into situations where you need to react to changes in your data in more specific ways, or you need to perform side effects (like fetching data or logging) when something changes. This is where the limitations of basic reactivity become clear, and where advanced patterns come in.

Vue provides two powerful tools for handling these scenarios: watchers and the watchEffect function.

A watcher lets you run a function whenever a specific piece of reactive data changes. You can use the watch function from Vue’s Composition API to set this up. For example, if you want to log a message every time the recipient changes, you can write:

JavaScript

import { watch, ref } from 'vue'

const recipient = ref('Vue Learner')

watch(recipient, (newValue, oldValue) => {
  console.log(`Recipient changed from ${oldValue} to ${newValue}`)
})

Now, whenever you update recipient.value, this watcher will run and log the change. This is useful for side effects, such as analytics, API calls, or any logic that should happen outside of the normal UI update cycle.

The watchEffect function is a bit different. It automatically tracks any reactive values used inside its callback and reruns the function whenever any of those values change. This is great for situations where you want to react to multiple sources of data without having to specify them all up front.

For example:

JavaScript

import { ref, watchEffect } from 'vue'

const greeting = ref('Hello')
const recipient = ref('Vue Learner')

watchEffect(() => {
  console.log(`The message is now: ${greeting.value}, ${recipient.value}!`)
})

If either greeting.value or recipient.value changes, the function will run again. This makes watchEffect very handy for simple, automatic side effects.

In summary, use watch when you want to respond to a specific change, and use watchEffect when you want to react to any reactive value used inside a function.

JavaScript

import { ref, computed, reactive } from 'vue'

const recipient = ref('Vue Learner')
const cardOptions = reactive({
  showCharCount: true
})

const recipientLength = computed(() => {
  return recipient.value.length
})

JavaScript

import { watch } from 'vue'

watch(() => cardOptions.showCharCount, (newValue) => {
  if (newValue) {
    console.log('Character count is now visible.')
  } else {
    console.log('Character count is now hidden.')
  }
})

Let’s put these ideas into practice by enhancing your greeting card app with advanced reactivity patterns. Here is a simplified version of your App.vue component, using the Composition API and watchers:

Vue

<script setup>
import { ref, computed, reactive, watch, watchEffect } from 'vue'

const greeting = ref('Hello')
const recipient = ref('Vue Learner')
const theme = ref('light')

const cardOptions = reactive({
  showCharCount: true,
  showTimestamp: false
})

function changeGreeting(newMessage) { 
  greeting.value = newMessage 
}

function toggleTheme() { 
  theme.value = theme.value === 'light' ? 'dark' : 'light' 
}

const personalizedMessage = computed(() => {
  return `${greeting.value}, ${recipient.value}!`
})

const recipientLength = computed(() => {
  return recipient.value.length
})

const cardClasses = computed(() => ({
  'greeting-card': true,
  'dark-theme': theme.value === 'dark'
}))

// Watcher: Log when the recipient changes
watch(recipient, (newValue, oldValue) => {
  console.log(`Recipient changed from ${oldValue} to ${newValue}`)
})

// WatchEffect: Log the full message whenever greeting or recipient changes
watchEffect(() => {
  console.log(`Current message: ${personalizedMessage.value}`)
})
</script>

When you run this code and change the recipient or greeting, you will see output like:

plaintext

Recipient changed from Vue Learner to Sam
Current message: Hello, Sam!

If you click a button to change the greeting, you might see:

plaintext

Current message: Congratulations, Sam!

This example shows how you can use watchers and watchEffect to respond to changes in your data, perform side effects, and keep your app’s logic organized. You can also use these patterns to fetch data from an API, update the UI in response to external events, or coordinate complex state updates.