[{"data":1,"prerenderedAt":1467},["ShallowReactive",2],{"navigation":3,"blog-rest-and-spread-operators-i-javascript":35,"blog-related-rest-and-spread-operators-i-javascript":128},[4,11,17,23,29],{"fields":5,"sys":9},{"navigationTitle":6,"slug":7,"external":8},"Om Nicky","nicky-christensen",false,{"id":10},"nav-1",{"fields":12,"sys":15},{"navigationTitle":13,"slug":14,"external":8},"Udvalgte projekter","referencer",{"id":16},"nav-2",{"fields":18,"sys":21},{"navigationTitle":19,"slug":20,"external":8},"Blog","blog",{"id":22},"nav-blog",{"fields":24,"sys":27},{"navigationTitle":25,"slug":26,"external":8},"Hvad koster det?","projekt-estimator",{"id":28},"nav-estimator",{"fields":30,"sys":33},{"navigationTitle":31,"slug":32,"external":8},"Kontakt","kontakt",{"id":34},"nav-3",{"id":36,"title":37,"body":38,"date":114,"description":115,"extension":116,"meta":117,"navigation":118,"noindex":8,"path":119,"seo":120,"seoDescription":115,"seoTitle":37,"slug":121,"stem":122,"tags":123,"thumbnail":126,"updated":114,"__hash__":127},"blog\u002Fblog\u002Frest-and-spread-operators-i-javascript.md","Sma tricks med Rest & Spread operators I Javascript",{"type":39,"value":40,"toc":106},"minimark",[41,45,50,53,64,68,71,77,81,84,90,94,97,103],[42,43,44],"p",{},"Hvis du kender til ES6, sa har nu formentlig hort lidt om rest\u002Fspread operators, ogsa kendt som de tre \"...\". De tre prikker sa at sige kan bruge pa 2 mader, som en spread operator eller som \"rest parameter\".\nI denne artikel vil jeg komme ind pa lidt sma tips og tricks til hvad du kan gore med dem.",[46,47,49],"h3",{"id":48},"klon-objekt-og-tilføj-properties-samtidig","Klon objekt og tilføj properties samtidig.",[42,51,52],{},"Du kan nemt klone et objekt, og samtidig tilføje nye properties til objektet. I nednestaende eksempel kan du se hvordan jeg kloner \"nicky\", samt hvordan \"lastName\" er tilføjet til objektet.",[54,55,60],"pre",{"className":56,"code":58,"language":59},[57],"language-text","const nicky = { id: 1, firstName: 'Nicky'}\nconst nickyExtended = { ...user, lastName: 'christensen' }\n\nnicky \u002F\u002F=> { id: 1, firstName: 'Nicky' }\nnickyExtended \u002F\u002F=> { id: 1, firstName: 'Nicky', lastName: 'Christensen' }\n","text",[61,62,58],"code",{"__ignoreMap":63},"",[46,65,67],{"id":66},"sammenlaeg-2-objekter","Sammenlaeg 2 objekter",[42,69,70],{},"Har du 2 objekter du gerne vil sammenlaegge til 1 objekt kan det gores utrolig nemt.\nI nednestaende eksempel sammenlaegger vi \"nicky\" + \"job\" til 1 objekt ved bare 3 liniers kode.",[54,72,75],{"className":73,"code":74,"language":59},[57],"const nicky = { id: 1, firstName: 'Nicky' }\nconst job = { jobTitle: 'Frontend Dev!' }\n\nconst nickyExtended = { ...nicky, ...job }\n\u002F\u002F=> { id: 1, firstName: 'Nicky', jobTitle: 'Frontend Dev!' }\n",[61,76,74],{"__ignoreMap":63},[46,78,80],{"id":79},"ekskluder-properties-fra-et-objekt","Ekskluder properties fra et objekt.",[42,82,83],{},"Properties kan til tider indeholde vaerdier du ikke har behov for, hvorfor det kan vaere en god ide at fjerne det fra det objekt du skal arbejde med. Dette kan gores med destructuring kombineret med rest parameters. I eksemplet nedenfor fjerner jeg alderen fra objektet, og resten af vores properties er returneret som \"rest\"",[54,85,88],{"className":86,"code":87,"language":59},[57],"const noAge = ({ age, ...rest }) => rest\nconst user = {\n  id: 1,\n  firstName: 'Nicky',\n  lastName: 'Christensen',\n  age: 34\n}\n\nnoAge(user) \u002F\u002F=> { id: 1, firstName: 'Nicky', lastName: 'Christensen' }\n",[61,89,87],{"__ignoreMap":63},[46,91,93],{"id":92},"specifik-data-fra-2-objekter","Specifik data fra 2 objekter",[42,95,96],{},"I visse tilfaelde har man kun brug for noget specifikt data fra flere objekter. Her kan vi benytte destructuring sammen med spread operators for at opna det. I nednestaende eksempel kan du se hvordan vi nemt hiver \"name\" og \"city\" ud fra 2 forskellige objekter.",[54,98,101],{"className":99,"code":100,"language":59},[57],"const obj = {\n  firstName: \"Nicky\",\n  lastName: \"Christensen\",\n  age: 34,\n  jobTitle: \"Frontend Dev!\"\n}\n\nconst objTwo = {\n  city: \"Aarhus\",\n  country: \"Denmark\"\n}\n\nlet {firstName, city} = {...obj, ...objTwo};\nconsole.log(firstName, city);  \u002F\u002F=> Nicky Aarhus\n",[61,102,100],{"__ignoreMap":63},[42,104,105],{},"Det var lige hvad det kunne blive til sadan en lordag morgen. Jeg haber du kan bruge det til lidt, og smid gerne andre tips og tricks min vej hvis du kommer pa nogle",{"title":63,"searchDepth":107,"depth":107,"links":108},2,[109,111,112,113],{"id":48,"depth":110,"text":49},3,{"id":66,"depth":110,"text":67},{"id":79,"depth":110,"text":80},{"id":92,"depth":110,"text":93},"2019-03-23","Hvis du kender til ES6, sa har nu formentlig hort lidt om rest\u002Fspread operators, ogsa kendt som de tre \"...\". De tre prikker sa at sige kan bruge pa 2 mader, som en spread operator eller som \"rest par","md",{},true,"\u002Fblog\u002Frest-and-spread-operators-i-javascript",{"title":37,"description":115},"rest-and-spread-operators-i-javascript","blog\u002Frest-and-spread-operators-i-javascript",[124,125],"javascript","es6","\u002Fimages\u002Fcontentful\u002Frest-spread-operators.png","vRfLzNoV-VMuziXugjIEfqCGw6k-qpgDshGSMdnnDLU",[129,533,881],{"id":130,"title":131,"body":132,"date":517,"description":518,"extension":116,"meta":519,"navigation":118,"noindex":8,"path":520,"seo":521,"seoDescription":522,"seoTitle":523,"slug":524,"stem":525,"tags":526,"thumbnail":531,"updated":517,"__hash__":532},"blog\u002Fblog\u002Freact-vs-vue-i-2026.md","React vs Vue i 2026 — En erfaren udviklers perspektiv",{"type":39,"value":133,"toc":492},[134,139,142,145,148,152,279,283,287,290,293,297,300,304,307,311,314,318,322,325,328,332,335,339,342,346,366,370,404,408,440,444,448,451,455,458,462,465,469,476,479,483,486,489],[135,136,138],"h2",{"id":137},"jeg-har-brugt-begge-i-mange-år","Jeg har brugt begge — i mange år",[42,140,141],{},"Dette er ikke en af de artikler der er skrevet af nogen der har læst dokumentationen og sammenlignet bullet points. Jeg har brugt både React og Vue professionelt i adskillige år — Vue hos Playable og i mine egne projekter, React hos Grundfos, Vestas og Harness.",[42,143,144],{},"Jeg har bygget SaaS-platforme, enterprise-løsninger og websites med begge frameworks. Og mit svar på \"hvad er bedst?\" er det samme som altid: det kommer an på.",[42,146,147],{},"Men lad mig være mere specifik end det.",[135,149,151],{"id":150},"hurtigt-overblik","Hurtigt overblik",[153,154,155,170],"table",{},[156,157,158],"thead",{},[159,160,161,164,167],"tr",{},[162,163],"th",{},[162,165,166],{},"React",[162,168,169],{},"Vue",[171,172,173,188,201,214,227,240,253,266],"tbody",{},[159,174,175,182,185],{},[176,177,178],"td",{},[179,180,181],"strong",{},"Skabt af",[176,183,184],{},"Meta (Facebook)",[176,186,187],{},"Evan You \u002F community",[159,189,190,195,198],{},[176,191,192],{},[179,193,194],{},"Første release",[176,196,197],{},"2013",[176,199,200],{},"2014",[159,202,203,208,211],{},[176,204,205],{},[179,206,207],{},"Popularitet",[176,209,210],{},"Størst community og jobmarked",[176,212,213],{},"Større i Asien, voksende i Europa",[159,215,216,221,224],{},[176,217,218],{},[179,219,220],{},"Læringskurve",[176,222,223],{},"Stejlere",[176,225,226],{},"Blødere",[159,228,229,234,237],{},[176,230,231],{},[179,232,233],{},"Rendering",[176,235,236],{},"JSX (JavaScript + HTML)",[176,238,239],{},"Templates (HTML + directives)",[159,241,242,247,250],{},[176,243,244],{},[179,245,246],{},"State management",[176,248,249],{},"Mange valg (Redux, Zustand, Jotai)",[176,251,252],{},"Pinia (officiel)",[159,254,255,260,263],{},[176,256,257],{},[179,258,259],{},"Meta-framework",[176,261,262],{},"Next.js",[176,264,265],{},"Nuxt",[159,267,268,273,276],{},[176,269,270],{},[179,271,272],{},"TypeScript",[176,274,275],{},"Førsteklasses support",[176,277,278],{},"Førsteklasses support (fra Vue 3)",[135,280,282],{"id":281},"hvor-react-udmærker-sig","Hvor React udmærker sig",[46,284,286],{"id":285},"større-økosystem-og-jobmarked","Større økosystem og jobmarked",[42,288,289],{},"React har det største økosystem i frontend-verdenen. Der er flere biblioteker, flere tutorials, flere svar på Stack Overflow, og langt flere jobopslag. Hvis du optimerer for karrieremuligheder, er React det sikre valg.",[42,291,292],{},"I Danmark er React stadig det mest efterspurgte frontend-framework på jobmarkedet — særligt i enterprise-segmentet.",[46,294,296],{"id":295},"fleksibilitet","Fleksibilitet",[42,298,299],{},"React er et bibliotek, ikke et framework. Det giver dig frihed til at vælge din egen state management, routing, og arkitektur. For erfarne teams der ved hvad de vil, er den fleksibilitet en styrke.",[46,301,303],{"id":302},"react-server-components-og-server-actions","React Server Components og Server Actions",[42,305,306],{},"React har med Server Components taget et stort skridt mod server-side rendering der føles naturligt. Det er en arkitektonisk innovation der giver mulighed for at blande server- og klient-kode på en måde der er unik for React.",[46,308,310],{"id":309},"react-native","React Native",[42,312,313],{},"Hvis du har brug for at bygge mobile apps, er React Native det største cross-platform framework. At dele kode mellem web og mobil med samme team er en reel fordel.",[135,315,317],{"id":316},"hvor-vue-udmærker-sig","Hvor Vue udmærker sig",[46,319,321],{"id":320},"læringskurven-er-kortere","Læringskurven er kortere",[42,323,324],{},"Vue er lettere at lære for både nye og erfarne udviklere. Template-syntaksen er mere intuitiv end JSX, og Vue's Composition API giver den samme kraft som React Hooks, men med en blødere læringskurve.",[42,326,327],{},"Jeg har onboardet mange udviklere til begge frameworks, og Vue-teams er konsekvent produktive hurtigere.",[46,329,331],{"id":330},"bedre-batteries-included","Bedre \"batteries included\"",[42,333,334],{},"Vue har officielle løsninger for de fleste behov: Pinia til state management, Vue Router til routing, og Nuxt som meta-framework. Du slipper for at evaluere og vælge mellem 10 forskellige state management-biblioteker.",[46,336,338],{"id":337},"composition-api-er-elegant","Composition API er elegant",[42,340,341],{},"Vue 3's Composition API er efter min mening den reneste måde at skrive reaktiv logik på. Composables (Vue's svar på custom hooks) er nemmere at læse, teste og genbruge end React hooks, primært fordi du slipper for at tænke på dependency arrays og re-renders.",[46,343,345],{"id":344},"reaktivitetssystem","Reaktivitetssystem",[42,347,348,349,353,354,357,358,361,362,365],{},"Vue's fine-grained reaktivitet er smartere end React's re-rendering model. Vue ved præcis ",[350,351,352],"em",{},"hvad"," der har ændret sig og opdaterer kun det nødvendige. React re-renderer hele komponenten og dens børn, hvilket kræver at du tænker over ",[61,355,356],{},"useMemo",", ",[61,359,360],{},"useCallback"," og ",[61,363,364],{},"React.memo"," for at undgå performance-problemer.",[135,367,369],{"id":368},"hvornår-skal-du-vælge-react","Hvornår skal du vælge React?",[371,372,373,380,386,392,398],"ul",{},[374,375,376,379],"li",{},[179,377,378],{},"Dit team kender allerede React"," — Det vigtigste argument. Skift ikke framework for sjov",[374,381,382,385],{},[179,383,384],{},"Du har brug for React Native"," — Hvis mobil er en del af planen",[374,387,388,391],{},[179,389,390],{},"Du ansætter i et stort marked"," — Der er flere React-udviklere at vælge imellem",[374,393,394,397],{},[179,395,396],{},"Du bygger på et eksisterende React-økosystem"," — Mange virksomheder har interne React-biblioteker og tooling",[374,399,400,403],{},[179,401,402],{},"Enterprise med mange teams"," — React's fleksibilitet giver teams mulighed for at vælge deres egne patterns",[135,405,407],{"id":406},"hvornår-skal-du-vælge-vue","Hvornår skal du vælge Vue?",[371,409,410,416,422,428,434],{},[374,411,412,415],{},[179,413,414],{},"Du starter et nyt projekt"," — Vue's opinionated tilgang giver hurtigere time-to-market",[374,417,418,421],{},[179,419,420],{},"Dit team har blandet erfaring"," — Vue er lettere at lære for juniors og backendudviklere",[374,423,424,427],{},[179,425,426],{},"Du bygger et content-site eller marketing-site"," — Nuxt's statiske generering og SEO-support er fremragende",[374,429,430,433],{},[179,431,432],{},"Performance er kritisk"," — Vue's reaktivitetssystem giver bedre out-of-the-box performance",[374,435,436,439],{},[179,437,438],{},"Du vil have en sammenhængende stack"," — Vue + Pinia + Nuxt er en tight integration uden compatibility-sorger",[135,441,443],{"id":442},"hvad-med-andre-frameworks","Hvad med andre frameworks?",[46,445,447],{"id":446},"sveltesveltekit","Svelte\u002FSvelteKit",[42,449,450],{},"Svelte er et fantastisk framework der kompilerer væk sit eget runtime. Det giver ekstremt let output og en behagelig udvikleroplevelse. Men økosystemet er stadig lille sammenlignet med React og Vue, og jobmarkedet er begrænset.",[46,452,454],{"id":453},"angular","Angular",[42,456,457],{},"Angular er stadig stort i enterprise-verdenen, særligt i backend-tunge organisationer. Men i den bredere frontend-verden er det blevet mindre relevant.",[46,459,461],{"id":460},"solid-qwik-og-andre","Solid, Qwik og andre",[42,463,464],{},"Spændende teknologier der løser reelle problemer, men for de fleste projekter i 2026 er React eller Vue stadig det pragmatiske valg.",[135,466,468],{"id":467},"min-personlige-præference","Min personlige præference",[42,470,471,472,475],{},"Hvis jeg starter et nyt projekt i dag og har frit valg, vælger jeg ",[179,473,474],{},"Vue 3 med Nuxt",". Det er det jeg kender bedst, og Composition API + Nuxt's DX er efter min mening den bedste udvikleroplevelse i frontend-verdenen.",[42,477,478],{},"Men hvis et team allerede bruger React, eller hvis projektet kræver React Native, ville jeg aldrig foreslå at skifte til Vue. Det vigtigste er ikke hvilket framework du vælger — det er at du bruger det godt.",[135,480,482],{"id":481},"konklusion","Konklusion",[42,484,485],{},"Både React og Vue er modne, velunderstøttede frameworks der kan bygge hvad som helst. I 2026 er forskellen mellem dem mindre end nogensinde — begge har TypeScript-support, server-side rendering, og store økosystemer.",[42,487,488],{},"Vælg det der passer til dit team, dit projekt og dine krav. Ikke det der er mest hypet på Twitter.",[42,490,491],{},"Har du spørgsmål om valg af framework til dit næste projekt? Skriv til mig — jeg rådgiver gerne baseret på dine specifikke behov.",{"title":63,"searchDepth":107,"depth":107,"links":493},[494,495,496,502,508,509,510,515,516],{"id":137,"depth":107,"text":138},{"id":150,"depth":107,"text":151},{"id":281,"depth":107,"text":282,"children":497},[498,499,500,501],{"id":285,"depth":110,"text":286},{"id":295,"depth":110,"text":296},{"id":302,"depth":110,"text":303},{"id":309,"depth":110,"text":310},{"id":316,"depth":107,"text":317,"children":503},[504,505,506,507],{"id":320,"depth":110,"text":321},{"id":330,"depth":110,"text":331},{"id":337,"depth":110,"text":338},{"id":344,"depth":110,"text":345},{"id":368,"depth":107,"text":369},{"id":406,"depth":107,"text":407},{"id":442,"depth":107,"text":443,"children":511},[512,513,514],{"id":446,"depth":110,"text":447},{"id":453,"depth":110,"text":454},{"id":460,"depth":110,"text":461},{"id":467,"depth":107,"text":468},{"id":481,"depth":107,"text":482},"2026-04-03","Jeg har brugt både React og Vue professionelt i mange år. Her er min ærlige sammenligning i 2026 — uden fanboy-bias.",{},"\u002Fblog\u002Freact-vs-vue-i-2026",{"title":131,"description":518},"React vs Vue sammenligning fra en udvikler med 19+ års erfaring i begge. Lær forskelle, fordele og ulemper, og hvornår du skal vælge hvad i 2026.","React vs Vue i 2026 — Hvilket framework skal du vælge?","react-vs-vue-i-2026","blog\u002Freact-vs-vue-i-2026",[527,528,124,529,530],"react","vue","frontend","framework","\u002Fimages\u002Fcontentful\u002Fblog-typescript.png","H2b6Ass22LWn2bRwdep2gTqn61AIsH5pFcDxpAYYhvQ",{"id":534,"title":535,"body":536,"date":871,"description":872,"extension":116,"meta":873,"navigation":118,"noindex":8,"path":874,"seo":875,"seoDescription":872,"seoTitle":535,"slug":876,"stem":877,"tags":878,"thumbnail":879,"updated":871,"__hash__":880},"blog\u002Fblog\u002Fdestrukturer-props-i-vue-3.md","Sådan destrukturerer du props i Vue 3 uden at miste reaktivitet",{"type":39,"value":537,"toc":866},[538,541,544,548,551,554,558,568,571,774,796,805,819,825,829,835,841,850,856,862],[42,539,540],{},"Hvis du har arbejdet med Vue 3, ved du, at hvis du destrukturerer props, mister du reaktivitet, hvilket kan være et problem og føre til uventede problemer i din applikation. For ikke så længe siden skrev jeg en artikel om dette, som du kan læse her.",[42,542,543],{},"I Vue 3 sker overførsel af data mellem komponenter via props. Når en komponent modtager props, kan du destrukturere dem for at få adgang til de enkelte stykker data. Men hvis du ikke er forsigtig, kan destrukturering af props få reaktivitetssystemet i Vue til at bryde sammen, som nævnt. I denne artikel udforsker vi, hvorfor dette sker, og hvordan du destrukturerer props på en måde, der bevarer reaktiviteten.",[135,545,547],{"id":546},"hvorfor-destrukturering-af-props-kan-bryde-reaktiviteten","Hvorfor destrukturering af props kan bryde reaktiviteten",[42,549,550],{},"Vues reaktivitetssystem er baseret på proxies og er afhængigt af, at det kan spore, hvilke egenskaber på et objekt der tilgås, og når de ændres. Når en komponent modtager et objekt som prop, opretter Vue en reaktiv getter og setter for hver egenskab på det objekt. Det giver Vue mulighed for at detektere, når en egenskab ændres, og opdatere komponenten i overensstemmelse hermed.",[42,552,553],{},"Når du destrukturerer en objekt-prop, opretter du i bund og grund et nyt objekt, der ikke længere er reaktivt. Det skyldes, at de reaktive getters og setters, som Vue oprettede for det originale objekt, ikke overføres til det nye objekt. Som resultat vil ændringer foretaget på det destrukturerede objekt ikke udløse reaktivitetsopdateringer. Hvis du ikke er bevidst om dette som udvikler, vil du højst sandsynligt opleve utilsigtede fejl og sideeffekter i din applikation.",[135,555,557],{"id":556},"sådan-destrukturerer-du-props-uden-at-bryde-reaktiviteten","Sådan destrukturerer du props uden at bryde reaktiviteten",[42,559,560,561,564,565,567],{},"For at destrukturere props i Vue 3 uden at miste reaktivitet kan du bruge ",[61,562,563],{},"toRefs","-funktionen. ",[61,566,563],{}," tager et objekt og returnerer et nyt objekt, hvor hver egenskab er en ref. En ref er et reaktivt objekt, der indeholder en enkelt værdi.",[42,569,570],{},"Lad os se på et eksempel på, hvordan dette gøres!",[54,572,575],{"className":573,"code":574,"language":124,"meta":63,"style":63},"language-javascript shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>{{ firstName }}\u003C\u002Fp>\n    \u003Cp>{{ lastName }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { toRefs } from 'vue';\n\nexport default {\n  props: {\n    person: {\n      type: Object,\n      required: true,\n    },\n  },\n  setup(props) {\n    const { firstName, lastName } = toRefs(props.person);\n    return { firstName, lastName };\n  },\n};\n\u003C\u002Fscript>\n",[61,576,577,593,603,617,631,641,651,657,667,673,678,684,690,696,702,715,721,727,737,748,754,759,765],{"__ignoreMap":63},[578,579,582,586,590],"span",{"class":580,"line":581},"line",1,[578,583,585],{"class":584},"s95oV","\u003C",[578,587,589],{"class":588},"s4JwU","template",[578,591,592],{"class":584},">\n",[578,594,595,598,601],{"class":580,"line":107},[578,596,597],{"class":584},"  \u003C",[578,599,600],{"class":588},"div",[578,602,592],{"class":584},[578,604,605,608,610,613,615],{"class":580,"line":110},[578,606,607],{"class":584},"    \u003C",[578,609,42],{"class":588},[578,611,612],{"class":584},">{{ firstName }}\u003C\u002F",[578,614,42],{"class":588},[578,616,592],{"class":584},[578,618,620,622,624,627,629],{"class":580,"line":619},4,[578,621,607],{"class":584},[578,623,42],{"class":588},[578,625,626],{"class":584},">{{ lastName }}\u003C\u002F",[578,628,42],{"class":588},[578,630,592],{"class":584},[578,632,634,637,639],{"class":580,"line":633},5,[578,635,636],{"class":584},"  \u003C\u002F",[578,638,600],{"class":588},[578,640,592],{"class":584},[578,642,644,647,649],{"class":580,"line":643},6,[578,645,646],{"class":584},"\u003C\u002F",[578,648,589],{"class":588},[578,650,592],{"class":584},[578,652,654],{"class":580,"line":653},7,[578,655,656],{"emptyLinePlaceholder":118},"\n",[578,658,660,662,665],{"class":580,"line":659},8,[578,661,585],{"class":584},[578,663,664],{"class":588},"script",[578,666,592],{"class":584},[578,668,670],{"class":580,"line":669},9,[578,671,672],{"class":584},"import { toRefs } from 'vue';\n",[578,674,676],{"class":580,"line":675},10,[578,677,656],{"emptyLinePlaceholder":118},[578,679,681],{"class":580,"line":680},11,[578,682,683],{"class":584},"export default {\n",[578,685,687],{"class":580,"line":686},12,[578,688,689],{"class":584},"  props: {\n",[578,691,693],{"class":580,"line":692},13,[578,694,695],{"class":584},"    person: {\n",[578,697,699],{"class":580,"line":698},14,[578,700,701],{"class":584},"      type: Object,\n",[578,703,705,708,712],{"class":580,"line":704},15,[578,706,707],{"class":584},"      required: ",[578,709,711],{"class":710},"sDLfK","true",[578,713,714],{"class":584},",\n",[578,716,718],{"class":580,"line":717},16,[578,719,720],{"class":584},"    },\n",[578,722,724],{"class":580,"line":723},17,[578,725,726],{"class":584},"  },\n",[578,728,730,734],{"class":580,"line":729},18,[578,731,733],{"class":732},"svObZ","  setup",[578,735,736],{"class":584},"(props) {\n",[578,738,740,743,745],{"class":580,"line":739},19,[578,741,742],{"class":584},"    const { firstName, lastName } = ",[578,744,563],{"class":732},[578,746,747],{"class":584},"(props.person);\n",[578,749,751],{"class":580,"line":750},20,[578,752,753],{"class":584},"    return { firstName, lastName };\n",[578,755,757],{"class":580,"line":756},21,[578,758,726],{"class":584},[578,760,762],{"class":580,"line":761},22,[578,763,764],{"class":584},"};\n",[578,766,768,770,772],{"class":580,"line":767},23,[578,769,646],{"class":584},[578,771,664],{"class":588},[578,773,592],{"class":584},[42,775,776,777,779,780,783,784,787,788,791,792,795],{},"I ovenstående eksempel bruger vi ",[61,778,563],{},"-funktionen til at destrukturere ",[61,781,782],{},"person","-proppen til ",[61,785,786],{},"firstName","- og ",[61,789,790],{},"lastName","-refs. Ved at returnere disse refs fra ",[61,793,794],{},"setup","-funktionen kan vi bruge dem i vores template uden at miste reaktivitet.",[42,797,798,799,801,802,804],{},"Det betyder, at hvis ",[61,800,782],{},"-proppen ændres udefra på denne komponent, vil det propagere korrekt ind i denne komponent og rendere ændringerne til ",[61,803,782],{},".",[42,806,807,808,810,811,361,813,815,816,818],{},"Hvis for eksempel ",[61,809,782],{},"-proppen opdateres i parent-komponenten, vil de nye værdier for ",[61,812,786],{},[61,814,790],{}," automatisk blive opdateret i child-komponenten uden yderligere opsætning eller konfiguration. Det skyldes, at ",[61,817,563],{}," opretter reaktive refs, der stadig er forbundet til det originale objekt-prop, så eventuelle ændringer foretaget på det originale objekt vil blive afspejlet i de reaktive refs.",[42,820,821,822,824],{},"Overordnet set er brugen af ",[61,823,563],{}," til at destrukturere props i Vue 3 en fremragende måde at bevare reaktivitet og sikre, at dine komponenter forbliver synkroniserede med ændringer foretaget på deres props udefra.",[135,826,828],{"id":827},"hvad-med-ydeevnen","Hvad med ydeevnen?",[42,830,831,832,834],{},"At bruge ",[61,833,563],{}," til at destrukturere props i Vue 3 har en lille ydeevneomkostning, men den er generelt acceptabel i de fleste tilfælde.",[42,836,837,838,840],{},"Når du destrukturerer en objekt-prop med ",[61,839,563],{},", skal Vue oprette en ny ref for hver egenskab på objektet. Det betyder, at der skal oprettes flere reaktive objekter, hvilket kan øge hukommelsesforbruget og en smule forsinke reaktivitetssystemet.",[42,842,843,844,846,847,849],{},"Dog er ydeevnepåvirkningen ved at bruge ",[61,845,563],{}," normalt minimal, især sammenlignet med fordelene ved at bevare reaktivitet, når man destrukturerer props. Faktisk er ",[61,848,563],{},"-funktionen indbygget i Vue 3 specifikt for at hjælpe med at løse de reaktivitetsproblemer, der kan opstå ved destrukturering af props, så det er en anbefalet tilgang i mange brugsscenarier.",[42,851,852,853,855],{},"Når det er sagt, er det altid en god idé at holde øje med ydeevnen af dine Vue-komponenter, især hvis de renderer store mængder data eller håndterer kompleks logik. Hvis du bemærker væsentlige forsinkelser eller hukommelsesproblemer, kan du overveje alternative tilgange eller optimeringer. Men i de fleste tilfælde bør brugen af ",[61,854,563],{}," til at destrukturere props ikke forårsage nogen væsentlige ydeevneproblemer.",[42,857,858,859,861],{},"Destrukturering af props i Vue 3 kan være en bekvem måde at få adgang til individuelle stykker data. Men hvis du ikke er forsigtig, kan det få reaktivitetssystemet til at bryde sammen. Ved at bruge ",[61,860,563],{},"-funktionen kan du destrukturere props uden at miste reaktivitet. Det giver dig mulighed for at skrive mere koncis og læsbar kode uden at gå på kompromis med ydeevne eller funktionalitet.",[863,864,865],"style",{},"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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}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":63,"searchDepth":107,"depth":107,"links":867},[868,869,870],{"id":546,"depth":107,"text":547},{"id":556,"depth":107,"text":557},{"id":827,"depth":107,"text":828},"2023-02-20","Hvis du har arbejdet med Vue 3, ved du, at destrukturering af props kan få dig til at miste reaktivitet. Lær hvordan du undgår det.",{},"\u002Fblog\u002Fdestrukturer-props-i-vue-3",{"title":535,"description":872},"destrukturer-props-i-vue-3","blog\u002Fdestrukturer-props-i-vue-3",[528,124,529],"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*PHUQQPHoU-Q6_kXEGual0g.png","rRV6g_z-tGhfucjqfU8Ix4kr2esf_QRMy0na3_ZDLmM",{"id":882,"title":883,"body":884,"date":1455,"description":1456,"extension":116,"meta":1457,"navigation":118,"noindex":8,"path":1458,"seo":1459,"seoDescription":1460,"seoTitle":883,"slug":1461,"stem":1462,"tags":1463,"thumbnail":1465,"updated":1455,"__hash__":1466},"blog\u002Fblog\u002Fvue3-computed-funktioner.md","Vue 3 — derfor kan computed funktioner gøre din kode renere",{"type":39,"value":885,"toc":1453},[886,889,892,895,1037,1405,1423,1438,1441,1444,1447,1450],[42,887,888],{},"Vue 3 er den nyeste version af det populære JavaScript-framework til at bygge webapplikationer. En af de funktioner, der får Vue 3 til at skille sig ud, er understøttelsen af computed funktioner (Vue 2 har også dette), som kan hjælpe med at gøre din kode meget renere og mere effektiv.",[42,890,891],{},"For at forklare det kort, er computed funktioner i Vue 3 funktioner, der automatisk genberegnes, når en af deres afhængigheder ændres. Det giver dig mulighed for deklarativt at specificere kompleks logik i dine templates, i stedet for manuelt at skulle opdatere værdier eller udføre beregninger i din kode.",[42,893,894],{},"Overvej for eksempel en simpel Vue 3-komponent, der viser en liste af elementer og det samlede antal:",[54,896,899],{"className":897,"code":898,"language":528,"meta":63,"style":63},"language-vue shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv v-if=\"loading\">Loading...\u003C\u002Fdiv>\n    \u003Cdiv v-else>\n      \u003Cul>\n        \u003Cli v-for=\"item in items\" :key=\"item.id\">{{ item.name }}\u003C\u002Fli>\n      \u003C\u002Ful>\n      \u003Cp>Total count: {{ totalCount }}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[61,900,901,909,917,940,951,960,990,999,1012,1021,1029],{"__ignoreMap":63},[578,902,903,905,907],{"class":580,"line":581},[578,904,585],{"class":584},[578,906,589],{"class":588},[578,908,592],{"class":584},[578,910,911,913,915],{"class":580,"line":107},[578,912,597],{"class":584},[578,914,600],{"class":588},[578,916,592],{"class":584},[578,918,919,921,923,926,929,933,936,938],{"class":580,"line":110},[578,920,607],{"class":584},[578,922,600],{"class":588},[578,924,925],{"class":732}," v-if",[578,927,928],{"class":584},"=",[578,930,932],{"class":931},"sU2Wk","\"loading\"",[578,934,935],{"class":584},">Loading...\u003C\u002F",[578,937,600],{"class":588},[578,939,592],{"class":584},[578,941,942,944,946,949],{"class":580,"line":619},[578,943,607],{"class":584},[578,945,600],{"class":588},[578,947,948],{"class":732}," v-else",[578,950,592],{"class":584},[578,952,953,956,958],{"class":580,"line":633},[578,954,955],{"class":584},"      \u003C",[578,957,371],{"class":588},[578,959,592],{"class":584},[578,961,962,965,967,970,972,975,978,980,983,986,988],{"class":580,"line":643},[578,963,964],{"class":584},"        \u003C",[578,966,374],{"class":588},[578,968,969],{"class":732}," v-for",[578,971,928],{"class":584},[578,973,974],{"class":931},"\"item in items\"",[578,976,977],{"class":732}," :key",[578,979,928],{"class":584},[578,981,982],{"class":931},"\"item.id\"",[578,984,985],{"class":584},">{{ item.name }}\u003C\u002F",[578,987,374],{"class":588},[578,989,592],{"class":584},[578,991,992,995,997],{"class":580,"line":653},[578,993,994],{"class":584},"      \u003C\u002F",[578,996,371],{"class":588},[578,998,592],{"class":584},[578,1000,1001,1003,1005,1008,1010],{"class":580,"line":659},[578,1002,955],{"class":584},[578,1004,42],{"class":588},[578,1006,1007],{"class":584},">Total count: {{ totalCount }}\u003C\u002F",[578,1009,42],{"class":588},[578,1011,592],{"class":584},[578,1013,1014,1017,1019],{"class":580,"line":669},[578,1015,1016],{"class":584},"    \u003C\u002F",[578,1018,600],{"class":588},[578,1020,592],{"class":584},[578,1022,1023,1025,1027],{"class":580,"line":675},[578,1024,636],{"class":584},[578,1026,600],{"class":588},[578,1028,592],{"class":584},[578,1030,1031,1033,1035],{"class":580,"line":680},[578,1032,646],{"class":584},[578,1034,589],{"class":588},[578,1036,592],{"class":584},[54,1038,1040],{"className":573,"code":1039,"language":124,"meta":63,"style":63},"\u003Cscript lang=\"ts\">\nimport { computed, defineComponent } from 'vue';\n\ninterface Item {\n  name: string;\n  description: string;\n}\n\nexport default defineComponent({\n  name: 'SomeComponentName',\n  setup() {\n    const items = ref\u003CItem>([]);\n\n    const isLoading = computed(() => {\n      return items.value.length === 0;\n    });\n\n    const totalCount = computed(() => {\n      return items.value.length;\n    });\n\n    const fetchItems = async () => {\n      try {\n        const res = await axios.get('\u002Fapi\u002Fitems');\n        items.value = res.data as Item[];\n      } catch (e) {\n        throw new Error('an error happened' + e);\n      }\n    };\n\n    fetchItems();\n    \n    return {\n      isLoading,\n      totalCount\n    };\n  }\n});\n\u003C\u002Fscript>\n",[61,1041,1042,1059,1064,1068,1073,1078,1083,1088,1092,1097,1107,1114,1132,1136,1155,1175,1180,1184,1199,1209,1213,1217,1238,1245,1274,1294,1306,1329,1335,1341,1346,1355,1361,1367,1373,1379,1384,1390,1396],{"__ignoreMap":63},[578,1043,1044,1046,1048,1051,1054,1057],{"class":580,"line":581},[578,1045,585],{"class":584},[578,1047,664],{"class":588},[578,1049,1050],{"class":732}," lang",[578,1052,928],{"class":1053},"snl16",[578,1055,1056],{"class":931},"\"ts\"",[578,1058,592],{"class":584},[578,1060,1061],{"class":580,"line":107},[578,1062,1063],{"class":584},"import { computed, defineComponent } from 'vue';\n",[578,1065,1066],{"class":580,"line":110},[578,1067,656],{"emptyLinePlaceholder":118},[578,1069,1070],{"class":580,"line":619},[578,1071,1072],{"class":584},"interface Item {\n",[578,1074,1075],{"class":580,"line":633},[578,1076,1077],{"class":584},"  name: string;\n",[578,1079,1080],{"class":580,"line":643},[578,1081,1082],{"class":584},"  description: string;\n",[578,1084,1085],{"class":580,"line":653},[578,1086,1087],{"class":584},"}\n",[578,1089,1090],{"class":580,"line":659},[578,1091,656],{"emptyLinePlaceholder":118},[578,1093,1094],{"class":580,"line":669},[578,1095,1096],{"class":584},"export default defineComponent({\n",[578,1098,1099,1102,1105],{"class":580,"line":675},[578,1100,1101],{"class":584},"  name: ",[578,1103,1104],{"class":931},"'SomeComponentName'",[578,1106,714],{"class":584},[578,1108,1109,1111],{"class":580,"line":680},[578,1110,733],{"class":732},[578,1112,1113],{"class":584},"() {\n",[578,1115,1116,1119,1121,1124,1126,1129],{"class":580,"line":686},[578,1117,1118],{"class":584},"    const items ",[578,1120,928],{"class":1053},[578,1122,1123],{"class":732}," ref",[578,1125,585],{"class":584},[578,1127,1128],{"class":732},"Item",[578,1130,1131],{"class":584},">([]);\n",[578,1133,1134],{"class":580,"line":692},[578,1135,656],{"emptyLinePlaceholder":118},[578,1137,1138,1141,1143,1146,1149,1152],{"class":580,"line":698},[578,1139,1140],{"class":584},"    const isLoading ",[578,1142,928],{"class":1053},[578,1144,1145],{"class":732}," computed",[578,1147,1148],{"class":584},"(() ",[578,1150,1151],{"class":1053},"=>",[578,1153,1154],{"class":584}," {\n",[578,1156,1157,1160,1163,1166,1169,1172],{"class":580,"line":704},[578,1158,1159],{"class":1053},"      return",[578,1161,1162],{"class":584}," items.value.",[578,1164,1165],{"class":710},"length",[578,1167,1168],{"class":1053}," ===",[578,1170,1171],{"class":710}," 0",[578,1173,1174],{"class":584},";\n",[578,1176,1177],{"class":580,"line":717},[578,1178,1179],{"class":584},"    });\n",[578,1181,1182],{"class":580,"line":723},[578,1183,656],{"emptyLinePlaceholder":118},[578,1185,1186,1189,1191,1193,1195,1197],{"class":580,"line":729},[578,1187,1188],{"class":584},"    const totalCount ",[578,1190,928],{"class":1053},[578,1192,1145],{"class":732},[578,1194,1148],{"class":584},[578,1196,1151],{"class":1053},[578,1198,1154],{"class":584},[578,1200,1201,1203,1205,1207],{"class":580,"line":739},[578,1202,1159],{"class":1053},[578,1204,1162],{"class":584},[578,1206,1165],{"class":710},[578,1208,1174],{"class":584},[578,1210,1211],{"class":580,"line":750},[578,1212,1179],{"class":584},[578,1214,1215],{"class":580,"line":756},[578,1216,656],{"emptyLinePlaceholder":118},[578,1218,1219,1222,1225,1228,1231,1234,1236],{"class":580,"line":761},[578,1220,1221],{"class":584},"    const ",[578,1223,1224],{"class":732},"fetchItems",[578,1226,1227],{"class":1053}," =",[578,1229,1230],{"class":1053}," async",[578,1232,1233],{"class":584}," () ",[578,1235,1151],{"class":1053},[578,1237,1154],{"class":584},[578,1239,1240,1243],{"class":580,"line":767},[578,1241,1242],{"class":1053},"      try",[578,1244,1154],{"class":584},[578,1246,1248,1251,1254,1256,1259,1262,1265,1268,1271],{"class":580,"line":1247},24,[578,1249,1250],{"class":1053},"        const",[578,1252,1253],{"class":710}," res",[578,1255,1227],{"class":1053},[578,1257,1258],{"class":1053}," await",[578,1260,1261],{"class":584}," axios.",[578,1263,1264],{"class":732},"get",[578,1266,1267],{"class":584},"(",[578,1269,1270],{"class":931},"'\u002Fapi\u002Fitems'",[578,1272,1273],{"class":584},");\n",[578,1275,1277,1280,1282,1285,1288,1291],{"class":580,"line":1276},25,[578,1278,1279],{"class":584},"        items.value ",[578,1281,928],{"class":1053},[578,1283,1284],{"class":584}," res.data ",[578,1286,1287],{"class":1053},"as",[578,1289,1290],{"class":732}," Item",[578,1292,1293],{"class":584},"[];\n",[578,1295,1297,1300,1303],{"class":580,"line":1296},26,[578,1298,1299],{"class":584},"      } ",[578,1301,1302],{"class":1053},"catch",[578,1304,1305],{"class":584}," (e) {\n",[578,1307,1309,1312,1315,1318,1320,1323,1326],{"class":580,"line":1308},27,[578,1310,1311],{"class":1053},"        throw",[578,1313,1314],{"class":1053}," new",[578,1316,1317],{"class":732}," Error",[578,1319,1267],{"class":584},[578,1321,1322],{"class":931},"'an error happened'",[578,1324,1325],{"class":1053}," +",[578,1327,1328],{"class":584}," e);\n",[578,1330,1332],{"class":580,"line":1331},28,[578,1333,1334],{"class":584},"      }\n",[578,1336,1338],{"class":580,"line":1337},29,[578,1339,1340],{"class":584},"    };\n",[578,1342,1344],{"class":580,"line":1343},30,[578,1345,656],{"emptyLinePlaceholder":118},[578,1347,1349,1352],{"class":580,"line":1348},31,[578,1350,1351],{"class":732},"    fetchItems",[578,1353,1354],{"class":584},"();\n",[578,1356,1358],{"class":580,"line":1357},32,[578,1359,1360],{"class":584},"    \n",[578,1362,1364],{"class":580,"line":1363},33,[578,1365,1366],{"class":584},"    return {\n",[578,1368,1370],{"class":580,"line":1369},34,[578,1371,1372],{"class":584},"      isLoading,\n",[578,1374,1376],{"class":580,"line":1375},35,[578,1377,1378],{"class":584},"      totalCount\n",[578,1380,1382],{"class":580,"line":1381},36,[578,1383,1340],{"class":584},[578,1385,1387],{"class":580,"line":1386},37,[578,1388,1389],{"class":584},"  }\n",[578,1391,1393],{"class":580,"line":1392},38,[578,1394,1395],{"class":584},"});\n",[578,1397,1399,1401,1403],{"class":580,"line":1398},39,[578,1400,646],{"class":584},[578,1402,664],{"class":588},[578,1404,592],{"class":584},[42,1406,1407,1408,1411,1412,1415,1416,1419,1420,1422],{},"I dette eksempel er ",[61,1409,1410],{},"totalCount"," computed funktionen ansvarlig for at beregne det samlede antal elementer i ",[61,1413,1414],{},"items","-arrayet. ",[61,1417,1418],{},"isLoading"," computed funktionen returnerer en boolean-værdi, der angiver, om komponenten er i en loading-tilstand eller ej, baseret på længden af ",[61,1421,1414],{},"-arrayet.",[42,1424,1425,1426,1428,1429,1431,1432,1434,1435,1437],{},"Læg mærke til, hvordan vi bruger den computed ",[61,1427,1418],{}," til at definere, om applikationen loader. Normalt ser jeg mange udviklere definere en ",[61,1430,1418],{},"-variabel og sætte variablen ",[61,1433,1418],{}," til true, når de kalder ",[61,1436,1224],{},", og derefter sætte den til false igen, når API-kaldet er færdigt. At lave en computed funktion til dette gør din kode meget renere.",[42,1439,1440],{},"Ikke kun med ovenstående eksempel, men i mange andre tilfælde kan brugen af computed funktioner hjælpe med at gøre din kode renere på flere måder. For det første giver det dig mulighed for deklarativt at specificere kompleks logik i dine templates, i stedet for manuelt at skulle opdatere værdier eller udføre beregninger i din kode. Det kan gøre dine templates nemmere at læse og forstå, da logikken bag dem er tydeligt adskilt fra præsentationen.",[42,1442,1443],{},"For det andet er computed funktioner mere effektive end manuelt at opdatere værdier eller udføre beregninger i din kode. Vue 3 cacher automatisk computed funktioner, så de kun genberegnes, når deres afhængigheder ændres. Det kan hjælpe med at forbedre din applikations ydeevne, især hvis du har komplekse eller tunge beregninger, der skal udføres ofte.",[42,1445,1446],{},"Endelig kan computed funktioner gøre din kode mere vedligeholdelsesvenlig ved at give en klar adskillelse af ansvar. Ved at indkapsle kompleks logik i computed funktioner kan du gøre det nemmere at ændre eller opdatere den logik uden at påvirke resten af din kode.",[42,1448,1449],{},"Kort sagt er computed funktioner en kraftfuld funktion i Vue 3, der kan hjælpe med at gøre din kode renere, mere effektiv og mere vedligeholdelsesvenlig. Ved at bruge computed funktioner kan du deklarativt specificere kompleks logik i dine templates og drage fordel af Vue 3's automatiske caching for at forbedre din applikations ydeevne.",[863,1451,1452],{},"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}",{"title":63,"searchDepth":107,"depth":107,"links":1454},[],"2022-12-23","Lær hvordan du får mest ud af Vue og computed funktioner. Gør din kode renere og mere vedligeholdelsesvenlig.",{},"\u002Fblog\u002Fvue3-computed-funktioner",{"title":883,"description":1456},"Lær hvordan du får mest ud af computed funktioner i Vue 3. Gør din kode renere, mere læsbar og vedligeholdelsesvenlig med praktiske eksempler.","vue3-computed-funktioner","blog\u002Fvue3-computed-funktioner",[528,1464,124],"best-practices","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F800\u002F1*Ht8T-vqbqy5iG7FzNQGjFA.png","fZNo7ASBoKuvBwCHBUDJgv6CHkobeWC_kaRTBiJLMqw",1775291277789]