Trigger and track for manual reactivity in Vue

Introduction

We use manual reactivity to control when Vue updates the screen. It helps us update only when we want, saving work and making apps faster.

When you want to update the screen only after several changes happen.

When you need to track changes in a value but update the UI manually.

When you want to optimize performance by avoiding automatic updates.

When you want to control exactly when a reactive value triggers updates.

Syntax

Vue

import { reactive, effect } from 'vue'

const state = reactive({ count: 0 })

// effect automatically tracks dependencies
effect(() => {
  console.log(state.count)
})

// Change state
state.count++

track and trigger are internal Vue APIs and not exposed for public use.

Manual tracking and triggering are not part of the public Vue 3 API; effects automatically track dependencies.

Examples

This example shows how Vue automatically tracks and triggers updates when reactive properties change.

Vue

import { reactive, effect } from 'vue'

const state = reactive({ value: 10 })

effect(() => {
  console.log('Value changed:', state.value)
})

// Change value
state.value = 20

Here, the console logs automatically when data.score changes.

Vue

import { reactive, effect } from 'vue'

const data = reactive({ score: 5 })

effect(() => {
  console.log('Score is:', data.score)
})

// Update score
data.score += 1

Sample Program

This program shows that effects automatically run when reactive properties change.

Vue

import { reactive, effect } from 'vue'

const state = reactive({ clicks: 0 })

effect(() => {
  console.log(`Clicks count: ${state.clicks}`)
})

// Simulate clicks
state.clicks = 1
state.clicks = 2

Important Notes

Manual tracking and triggering are internal and not recommended for typical use.

Use Vue's automatic reactivity system for most cases.

Summary

Vue automatically tracks dependencies and triggers updates.

Manual tracking and triggering are internal and not part of the public API.

Use Vue's reactive and effect APIs for reactive programming.