---
stable_id: skills/skills-sh-hyf0-vue-skills-vue-best-practices
type: skills
title: skills-sh-hyf0-vue-skills-vue-best-practices
summary: >-
  ---

  title: Reactivity Core Patterns (ref, reactive, shallowRef, computed, watch)

  impact: MEDIUM

  impactDescription: Clear reactivity choices keep state predictable and reduce
  unnecessary updates in Vue 3 apps

  type: efficiency

  tags: [vue3, reactivity, ref, reactive, shallowRef, computed, watch,
  watchEffect, external-state, best-practice]

  ---

  # Reactivity Core Patterns (ref, reactive, shallowRef, computed, watch)

  **Impact: MEDIUM** - Choose the right reactive primitive first, derive with
  `computed`, and use watchers only for side effects.

  This reference covers the core reactivity decisions for local state, external
  data, derived values, and effects.
tags:
  - skills-sh
  - skills-sh-all-time
source_url: https://raw.githubusercontent.com/hyf0/vue-skills/HEAD/skills/vue-best-practices/references/reactivity.md
license: ""
upstream_ref: https://skills.sh/hyf0/vue-skills/vue-best-practices
github_stars: 1988
github_forks: 104
github_is_organization: true
retrieved_at: 2026-06-11T08:33:21.274Z
content_sha256: 48c97831e72f0b82bfae0344cf02a181c7723e1ee4a29a58a85009aab7d60a4b
---
