Trigger and track for manual reactivity in Vue - Mini Project: Build & Apply

Trigger and Track for Manual Reactivity in Vue

📖 Scenario: You are building a simple Vue app that tracks a counter value. You want to manually control when Vue updates the UI by triggering and tracking reactivity yourself.

🎯 Goal: Create a Vue component that uses trigger and track functions from Vue's reactivity system to manually update the UI when a button is clicked.

📋 What You'll Learn

Create a reactive object with a count property initialized to 0

Create a track function call to track the count property

Create a trigger function call to trigger updates when count changes

Add a button that increments count and triggers the update manually

Display the current count value in the template

💡 Why This Matters

🌍 Real World

Manual reactivity control is useful when you want to optimize performance by controlling exactly when Vue updates the UI, such as in complex animations or large data sets.

💼 Career

Understanding manual reactivity helps frontend developers optimize Vue apps and debug reactivity issues, a valuable skill in professional Vue development.

1

Setup reactive state with count

Create a reactive object called state with a property count set to 0 using Vue's reactive function.

Vue

import { reactive } from 'vue'

export default {
  setup() {
    // Create reactive state object with count = 0
  }
}

Hint

Use reactive from Vue to create an object with count set to 0.

2

Import and setup track and trigger

Import track and trigger from 'vue' and create a trackCount function that calls track(state, 'count').

Vue

import { reactive, track, trigger } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })
    // Create trackCount function to track state.count
  }
}

Hint

Import track and trigger and create a function that calls track(state, 'count').

3

Create increment function to update and trigger

Create an increment function that increases state.count by 1 and calls trigger(state, 'count') to manually update the UI.

Vue

import { reactive, track, trigger } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })
    function trackCount() {
      track(state, 'count')
    }
    // Create increment function to increase count and trigger update
  }
}

Hint

Create a function that increases state.count and calls trigger(state, 'count') to update.

4

Add template to display count and button to increment

Add a template that calls trackCount() to track count, displays state.count, and includes a button that calls increment when clicked.

Vue

  
  
  



import { reactive, track, trigger } from 'vue'

const state = reactive({ count: 0 })
function trackCount() {
  track(state, 'count')
}
function increment() {
  state.count++
  trigger(state, 'count')
}

Hint

Use {{ trackCount(); state.count }} in the template to track and display count, and add a button with @click="increment".