Pulse
ae39e45460
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
58 lines
2.2 KiB
Markdown
58 lines
2.2 KiB
Markdown
# Reactivity Patterns
|
|
|
|
## ref vs reactive Decision
|
|
|
|
- `ref` for primitives (string, number, boolean)—`.value` access
|
|
- `ref` also works for objects—sometimes clearer than reactive
|
|
- `reactive` for objects when you want direct property access
|
|
- Consistency wins: pick one style for your team
|
|
|
|
## ref Patterns
|
|
|
|
- Forgot `.value` in script—logs Ref object instead of value
|
|
- `.value` in template—unnecessary, auto-unwrapped
|
|
- `ref` with object value—still reactive, but `.value` for whole object
|
|
- `unref()` helper—returns value if ref, value itself if not
|
|
|
|
## reactive Patterns
|
|
|
|
- Reassigning whole object breaks reactivity—`state = newObj` doesn't work
|
|
- Destructuring loses reactivity—`const {count} = state` is not reactive
|
|
- `toRefs(state)` converts each property to ref—preserves reactivity
|
|
- `toRef(state, 'prop')` for single property to ref
|
|
|
|
## Shallow Reactivity
|
|
|
|
- `shallowRef` only tracks `.value` changes—nested changes not reactive
|
|
- `shallowReactive` only tracks root-level properties
|
|
- Use for performance with large objects—when deep reactivity not needed
|
|
- `triggerRef(ref)` manually triggers update for shallowRef
|
|
|
|
## readonly Protection
|
|
|
|
- `readonly(state)` creates read-only proxy—mutations silently fail
|
|
- Props are already readonly—no need to wrap
|
|
- Good for exposing state from composables—prevent external mutation
|
|
- `isReadonly()` to check if value is readonly
|
|
|
|
## Raw Values
|
|
|
|
- `toRaw(proxy)` gets original object from reactive proxy
|
|
- Useful for third-party libraries that don't handle Proxy
|
|
- Mutations on raw object won't trigger updates
|
|
- `markRaw(obj)` prevents object from ever becoming reactive
|
|
|
|
## Computed Patterns
|
|
|
|
- Computed with setter: `computed({ get, set })`—for two-way derived state
|
|
- Computed is cached—expensive calculations only run when dependencies change
|
|
- Avoid side effects in computed—use `watch` or `watchEffect` instead
|
|
- Computed ref unwraps in template—same as regular ref
|
|
|
|
## Effect Cleanup
|
|
|
|
- `watchEffect` receives cleanup function: `watchEffect((onCleanup) => {})`
|
|
- Clean up timers, subscriptions, event listeners
|
|
- Cleanup runs before effect re-runs AND on unmount
|
|
- Same pattern in `watch` callback—third argument
|