[{"data":1,"prerenderedAt":689},["ShallowReactive",2],{"page-\u002Fvue":3},{"id":4,"title":5,"body":6,"description":681,"extension":682,"meta":683,"navigation":684,"path":685,"seo":686,"stem":687,"__hash__":688},"content\u002Fvue\u002Findex.md","Learn Vue.js — Engineering Reference",{"type":7,"value":8,"toc":667},"minimark",[9,14,18,23,52,56,83,87,92,216,220,337,341,419,423,522,526],[10,11,13],"h1",{"id":12},"learn-vuejs-engineering-reference","💚 Learn Vue.js — Engineering Reference",[15,16,17],"p",{},"A production-grade Vue 3 curriculum built for mid-level developers moving to senior roles. Every chapter is code-first: dense, annotated examples covering complex implementations, anti-patterns, edge cases, and production tips. No tutorial fluff — just the patterns, traps, and internals that real codebases depend on.",[19,20,22],"h2",{"id":21},"how-to-use-this-reference","How to Use This Reference",[24,25,26,34,40,46],"ol",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"Jump to a chapter"," as a reference when you hit a concept in production code.",[27,35,36,39],{},[30,37,38],{},"Read the anti-pattern sections"," before refactoring — see the wrong way, then the right way.",[27,41,42,45],{},[30,43,44],{},"Solve the Spot the Bug challenges"," at the end of each chapter to test your understanding.",[27,47,48,51],{},[30,49,50],{},"Build the capstone projects"," in chapter 24 to apply the patterns in a real app.",[19,53,55],{"id":54},"prerequisites","Prerequisites",[57,58,59,62,65,73,76],"ul",{},[27,60,61],{},"Solid JavaScript (ES2015+): closures, destructuring, modules, promises, Proxy.",[27,63,64],{},"HTML & CSS fundamentals.",[27,66,67,68,72],{},"TypeScript basics (generics, interfaces, union types) — chapters use ",[69,70,71],"code",{},"\u003Cscript setup lang=\"ts\">",".",[27,74,75],{},"Node.js LTS installed.",[27,77,78,79,82],{},"VS Code + the ",[30,80,81],{},"Vue - Official"," (Volar) extension.",[19,84,86],{"id":85},"curriculum","Curriculum",[88,89,91],"h3",{"id":90},"part-i-foundations-reactivity","Part I — Foundations & Reactivity",[93,94,95,111],"table",{},[96,97,98],"thead",{},[99,100,101,105,108],"tr",{},[102,103,104],"th",{},"#",[102,106,107],{},"Topic",[102,109,110],{},"Why It Matters",[112,113,114,134,148,176,190],"tbody",{},[99,115,116,120,127],{},[117,118,119],"td",{},"01",[117,121,122],{},[123,124,126],"a",{"href":125},"\u002Fvue\u002F01-introduction-and-setup","Introduction & Setup",[117,128,129,130,133],{},"Proxy reactivity internals, ",[69,131,132],{},"createApp"," isolation, SFC compilation pipeline, multi-instance mounting.",[99,135,136,139,145],{},[117,137,138],{},"02",[117,140,141],{},[123,142,144],{"href":143},"\u002Fvue\u002F02-template-syntax-and-directives","Template Syntax & Directives",[117,146,147],{},"Compiler patch flags, keyed vnode diffing, modifier chains, v-model expansion, v-if\u002Fv-for precedence.",[99,149,150,153,159],{},[117,151,152],{},"03",[117,154,155],{},[123,156,158],{"href":157},"\u002Fvue\u002F03-reactivity-fundamentals","Reactivity Fundamentals",[117,160,161,162,165,166,169,170,169,173,72],{},"Track\u002Ftrigger dependency graph, ref vs reactive, destructuring trap, ",[69,163,164],{},"toRef","\u002F",[69,167,168],{},"toRefs",", ",[69,171,172],{},"shallowRef",[69,174,175],{},"customRef",[99,177,178,181,187],{},[117,179,180],{},"04",[117,182,183],{},[123,184,186],{"href":185},"\u002Fvue\u002F04-computed-and-watchers","Computed & Watchers",[117,188,189],{},"Computed dirty flag caching, watch vs watchEffect, flush timing, deep watch cost, race condition cleanup.",[99,191,192,195,201],{},[117,193,194],{},"05",[117,196,197],{},[123,198,200],{"href":199},"\u002Fvue\u002F05-components-basics","Components Basics",[117,202,203,165,206,165,209,212,213,72],{},[69,204,205],{},"defineProps",[69,207,208],{},"defineEmits",[69,210,211],{},"defineExpose"," macros, prop validation, attr fallthrough, async components, ",[69,214,215],{},"defineModel",[88,217,219],{"id":218},"part-ii-component-architecture","Part II — Component Architecture",[93,221,222,232],{},[96,223,224],{},[99,225,226,228,230],{},[102,227,104],{},[102,229,107],{},[102,231,110],{},[112,233,234,262,287,313],{},[99,235,236,239,245],{},[117,237,238],{},"06",[117,240,241],{},[123,242,244],{"href":243},"\u002Fvue\u002F06-component-communication","Component Communication",[117,246,247,248,165,251,254,255,169,258,261],{},"Props down\u002Fevents up contract, ",[69,249,250],{},"provide",[69,252,253],{},"inject"," with typed ",[69,256,257],{},"InjectionKey",[69,259,260],{},"$attrs"," forwarding, multi-v-model.",[99,263,264,267,273],{},[117,265,266],{},"07",[117,268,269],{},[123,270,272],{"href":271},"\u002Fvue\u002F07-composition-api-in-depth","Composition API In Depth",[117,274,275,278,279,282,283,286],{},[69,276,277],{},"setup()"," vs ",[69,280,281],{},"\u003Cscript setup>",", composable patterns, module-scoped singletons, ",[69,284,285],{},"effectScope"," cleanup, async setup.",[99,288,289,292,298],{},[117,290,291],{},"08",[117,293,294],{},[123,295,297],{"href":296},"\u002Fvue\u002F08-lifecycle-hooks","Lifecycle Hooks",[117,299,300,301,304,305,308,309,312],{},"Full lifecycle sequence, ",[69,302,303],{},"onMounted"," DOM init, ",[69,306,307],{},"onUnmounted"," cleanup, KeepAlive activation, ",[69,310,311],{},"onErrorCaptured"," boundaries.",[99,314,315,318,324],{},[117,316,317],{},"09",[117,319,320],{},[123,321,323],{"href":322},"\u002Fvue\u002F09-forms-and-v-model","Forms & v-model",[117,325,326,327,165,330,165,333,336],{},"Modifier internals, ",[69,328,329],{},".lazy",[69,331,332],{},".number",[69,334,335],{},".trim"," edge cases, schema validation, custom inputs, debounced search.",[88,338,340],{"id":339},"part-iii-state-data-routing","Part III — State, Data & Routing",[93,342,343,353],{},[96,344,345],{},[99,346,347,349,351],{},[102,348,104],{},[102,350,107],{},[102,352,110],{},[112,354,355,373,391,405],{},[99,356,357,360,366],{},[117,358,359],{},"10",[117,361,362],{},[123,363,365],{"href":364},"\u002Fvue\u002F10-state-management-pinia","State Management with Pinia",[117,367,368,369,372],{},"Setup vs options store, ",[69,370,371],{},"$patch"," batch mutations, cross-store deps, persistence plugin, SSR hydration.",[99,374,375,378,384],{},[117,376,377],{},"11",[117,379,380],{},[123,381,383],{"href":382},"\u002Fvue\u002F11-routing-vue-router","Routing with Vue Router",[117,385,386,387,390],{},"Lazy loading + code splitting, guard composition, scroll restoration, ",[69,388,389],{},"beforeRouteUpdate",", typed routes.",[99,392,393,396,402],{},[117,394,395],{},"12",[117,397,398],{},[123,399,401],{"href":400},"\u002Fvue\u002F12-fetching-data-and-async","Fetching Data & Async",[117,403,404],{},"AbortController race prevention, request deduplication, SWR pattern, pagination, optimistic updates, Suspense.",[99,406,407,410,416],{},[117,408,409],{},"13",[117,411,412],{},[123,413,415],{"href":414},"\u002Fvue\u002F13-slots-and-scoped-slots","Slots & Scoped Slots",[117,417,418],{},"Default\u002Fnamed slots, scoped slot data passing, renderless components, slot compilation, conditional slots.",[88,420,422],{"id":421},"part-iv-advanced-patterns","Part IV — Advanced Patterns",[93,424,425,435],{},[96,426,427],{},[99,428,429,431,433],{},[102,430,104],{},[102,432,107],{},[102,434,110],{},[112,436,437,460,482,500],{},[99,438,439,442,448],{},[117,440,441],{},"14",[117,443,444],{},[123,445,447],{"href":446},"\u002Fvue\u002F14-dynamic-and-async-components","Dynamic & Async Components",[117,449,450,169,453,456,457,459],{},[69,451,452],{},"component :is",[69,454,455],{},"defineAsyncComponent"," states, KeepAlive LRU caching, ",[69,458,172],{}," for component refs, Suspense.",[99,461,462,465,471],{},[117,463,464],{},"15",[117,466,467],{},[123,468,470],{"href":469},"\u002Fvue\u002F15-custom-directives","Custom Directives",[117,472,473,474,477,478,481],{},"Hook lifecycle (created→unmounted), directive binding shape, ",[69,475,476],{},"v-lazy"," with IntersectionObserver, ",[69,479,480],{},"v-copy"," clipboard.",[99,483,484,487,493],{},[117,485,486],{},"16",[117,488,489],{},[123,490,492],{"href":491},"\u002Fvue\u002F16-teleport-and-suspense","Teleport & Suspense",[117,494,495,496,499],{},"Teleport stacking context escape, ",[69,497,498],{},"disabled"," prop, nested Suspense boundaries, async error handling, SSR-safe teleport.",[99,501,502,505,511],{},[117,503,504],{},"17",[117,506,507],{},[123,508,510],{"href":509},"\u002Fvue\u002F17-typescript-with-vue","TypeScript with Vue",[117,512,513,515,516,518,519,521],{},[69,514,205],{}," generics, ",[69,517,208],{}," signatures, ",[69,520,257],{}," typing, generic composables, template type narrowing.",[88,523,525],{"id":524},"part-v-production-engineering","Part V — Production Engineering",[93,527,528,538],{},[96,529,530],{},[99,531,532,534,536],{},[102,533,104],{},[102,535,107],{},[102,537,110],{},[112,539,540,560,585,607,621,639,653],{},[99,541,542,545,551],{},[117,543,544],{},"18",[117,546,547],{},[123,548,550],{"href":549},"\u002Fvue\u002F18-testing","Testing",[117,552,553,554,556,557,72],{},"Vue Test Utils mounting, ",[69,555,285],{}," for composable tests, Pinia store mocking, async test patterns, ",[69,558,559],{},"flushPromises",[99,561,562,565,571],{},[117,563,564],{},"19",[117,566,567],{},[123,568,570],{"href":569},"\u002Fvue\u002F19-performance-optimization","Performance Optimization",[117,572,573,574,577,578,580,581,584],{},"Patch flag compiler hints, ",[69,575,576],{},"v-memo"," for large lists, ",[69,579,172],{}," for big data, ",[69,582,583],{},"v-once",", manual chunk splitting.",[99,586,587,590,596],{},[117,588,589],{},"20",[117,591,592],{},[123,593,595],{"href":594},"\u002Fvue\u002F20-ssr-and-nuxt-basics","SSR & Nuxt Basics",[117,597,598,599,602,603,606],{},"Hydration lifecycle, ",[69,600,601],{},"onServerPrefetch",", state serialization, hydration mismatch causes, Nuxt ",[69,604,605],{},"useFetch",", SSR-safe composables.",[99,608,609,612,618],{},[117,610,611],{},"21",[117,613,614],{},[123,615,617],{"href":616},"\u002Fvue\u002F21-build-tooling-and-vite","Build Tooling & Vite",[117,619,620],{},"HMR internals, plugin pipeline, env variables, CSS scoped\u002Fmodules\u002Fpreprocessors, production build optimization.",[99,622,623,626,632],{},[117,624,625],{},"22",[117,627,628],{},[123,629,631],{"href":630},"\u002Fvue\u002F22-security","Security",[117,633,634,635,638],{},"XSS auto-escaping vs ",[69,636,637],{},"v-html",", DOMPurify sanitization, CSP configuration, credential handling, content security.",[99,640,641,644,650],{},[117,642,643],{},"23",[117,645,646],{},[123,647,649],{"href":648},"\u002Fvue\u002F23-design-patterns","Design Patterns",[117,651,652],{},"Store pattern, renderless components, composable composition, provider\u002Fconsumer DI, observer event bus, feature modules.",[99,654,655,658,664],{},[117,656,657],{},"24",[117,659,660],{},[123,661,663],{"href":662},"\u002Fvue\u002F24-exercises-and-projects","Exercises & Projects",[117,665,666],{},"Capstone projects: Kanban board, real-time WebSocket chat, SSR Nuxt blog, generic TypeScript component library.",{"title":668,"searchDepth":669,"depth":669,"links":670},"",2,[671,672,673],{"id":21,"depth":669,"text":22},{"id":54,"depth":669,"text":55},{"id":85,"depth":669,"text":86,"children":674},[675,677,678,679,680],{"id":90,"depth":676,"text":91},3,{"id":218,"depth":676,"text":219},{"id":339,"depth":676,"text":340},{"id":421,"depth":676,"text":422},{"id":524,"depth":676,"text":525},"A production-grade Vue 3 reference for mid-to-senior developers. 24 chapters covering reactivity internals, component patterns, Pinia, Vue Router, TypeScript, testing, SSR\u002FNuxt, performance, security, and design patterns — taught through real-world code, edge cases, and anti-patterns.","md",{},true,"\u002Fvue",{"title":5,"description":681},"vue\u002Findex","iao1bzoj4s1p4RRbWYDbvM0ERnALEWx6vdbPLBmCFXo",1789924655974]