Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.0 KiB

Raw Permalink Blame History

title, impact, impactDescription, type, tags

title

impact

impactDescription

type

Use Getter Function When Watching Reactive Object Properties

Impact: HIGH - Directly watching a property of a reactive object passes a primitive value to watch(), not a reactive reference. The watcher will never trigger because primitives are not reactive.

When you need to watch a specific property of a reactive object, always wrap it in a getter function () => obj.property.

Task Checklist

Always use getter functions when watching properties of reactive objects
Remember that watch(obj.count, ...) passes the current value, not a reactive reference
For refs, you can watch directly: watch(myRef, ...)
For entire reactive objects, you can watch directly (creates implicit deep watcher)

Incorrect:

import { reactive, watch } from 'vue';

const state = reactive({ count: 0, name: 'Vue' });

// WRONG: Passes the number 0 to watch(), not a reactive reference
// This watcher will NEVER fire!
watch(state.count, (newCount) => {
  console.log(`Count changed to: ${newCount}`);
});

// WRONG: Same problem with string property
watch(state.name, (newName) => {
  console.log(`Name changed to: ${newName}`);
});

Correct:

import { reactive, watch } from 'vue';

const state = reactive({ count: 0, name: 'Vue' });

// CORRECT: Use a getter function
watch(
  () => state.count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
);

// CORRECT: Multiple properties with getter
watch(
  () => state.name,
  (newName) => {
    console.log(`Name changed to: ${newName}`);
  },
);

// CORRECT: Watching derived values
watch(
  () => state.count * 2,
  (doubledCount) => {
    console.log(`Doubled count: ${doubledCount}`);
  },
);

Watching Multiple Properties

import { reactive, watch } from 'vue';

const state = reactive({ firstName: 'John', lastName: 'Doe' });

// Watch multiple properties with array of getters
watch([() => state.firstName, () => state.lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`Name changed from ${oldFirst} ${oldLast} to ${newFirst} ${newLast}`);
});

When Direct Watching Works

import { ref, reactive, watch } from 'vue';

const count = ref(0);
const state = reactive({ nested: { value: 1 } });

// CORRECT: Refs can be watched directly
watch(count, (newVal) => {
  console.log(`Count: ${newVal}`);
});

// CORRECT: Entire reactive objects create implicit deep watcher
watch(state, (newState) => {
  // Fires on any nested change
  // Note: newState === oldState (same object reference)
});

Reference

Vue.js Watchers - Watch Source Types

3.0 KiB Raw Permalink Blame History