[{"data":1,"prerenderedAt":238},["ShallowReactive",2],{"term-m\u002Fmvvm":3,"related-m\u002Fmvvm":226},{"id":4,"title":5,"acronym":5,"body":6,"category":206,"description":207,"difficulty":208,"extension":209,"letter":210,"meta":211,"navigation":212,"path":213,"related":214,"seo":219,"sitemap":220,"stem":223,"subcategory":224,"__hash__":225},"terms\u002Fterms\u002Fm\u002Fmvvm.md","MVVM",{"type":7,"value":8,"toc":200},"minimark",[9,14,18,22,25,29,189,193,196],[10,11,13],"h2",{"id":12},"eli5-the-vibe-check","ELI5 — The Vibe Check",[15,16,17],"p",{},"MVVM is MVC's cooler cousin for UI-heavy apps. The ViewModel is a translator that sits between your data and your screen — it transforms raw data into something the UI can show, and pushes UI events back to the data. Vue and Angular love this pattern.",[10,19,21],{"id":20},"real-talk","Real Talk",[15,23,24],{},"Model-View-ViewModel separates UI logic from business logic using data binding. The ViewModel exposes data streams and commands that the View binds to declaratively, eliminating the need for the View to know about the Model directly. Common in Angular, Vue, and WPF applications.",[10,26,28],{"id":27},"show-me-the-code","Show Me The Code",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Vue MVVM - ViewModel\nconst useUserViewModel = () => {\n  const user = ref(null);\n  const displayName = computed(() => `${user.value?.firstName} ${user.value?.lastName}`);\n  return { user, displayName };\n};\n","javascript","",[37,38,39,48,72,101,163,183],"code",{"__ignoreMap":35},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sHwdD","\u002F\u002F Vue MVVM - ViewModel\n",[40,49,51,55,59,63,66,69],{"class":42,"line":50},2,[40,52,54],{"class":53},"spNyl","const",[40,56,58],{"class":57},"sTEyZ"," useUserViewModel ",[40,60,62],{"class":61},"sMK4o","=",[40,64,65],{"class":61}," ()",[40,67,68],{"class":53}," =>",[40,70,71],{"class":61}," {\n",[40,73,75,78,81,84,88,92,95,98],{"class":42,"line":74},3,[40,76,77],{"class":53},"  const",[40,79,80],{"class":57}," user",[40,82,83],{"class":61}," =",[40,85,87],{"class":86},"s2Zo4"," ref",[40,89,91],{"class":90},"swJcz","(",[40,93,94],{"class":61},"null",[40,96,97],{"class":90},")",[40,99,100],{"class":61},";\n",[40,102,104,106,109,111,114,116,119,121,124,127,130,133,136,139,142,145,147,149,151,153,156,159,161],{"class":42,"line":103},4,[40,105,77],{"class":53},[40,107,108],{"class":57}," displayName",[40,110,83],{"class":61},[40,112,113],{"class":86}," computed",[40,115,91],{"class":90},[40,117,118],{"class":61},"()",[40,120,68],{"class":53},[40,122,123],{"class":61}," `${",[40,125,126],{"class":57},"user",[40,128,129],{"class":61},".",[40,131,132],{"class":57},"value",[40,134,135],{"class":61},"?.",[40,137,138],{"class":57},"firstName",[40,140,141],{"class":61},"}",[40,143,144],{"class":61}," ${",[40,146,126],{"class":57},[40,148,129],{"class":61},[40,150,132],{"class":57},[40,152,135],{"class":61},[40,154,155],{"class":57},"lastName",[40,157,158],{"class":61},"}`",[40,160,97],{"class":90},[40,162,100],{"class":61},[40,164,166,170,173,175,178,180],{"class":42,"line":165},5,[40,167,169],{"class":168},"s7zQu","  return",[40,171,172],{"class":61}," {",[40,174,80],{"class":57},[40,176,177],{"class":61},",",[40,179,108],{"class":57},[40,181,182],{"class":61}," };\n",[40,184,186],{"class":42,"line":185},6,[40,187,188],{"class":61},"};\n",[10,190,192],{"id":191},"when-youll-hear-this","When You'll Hear This",[15,194,195],{},"\"Vue naturally follows MVVM.\" \u002F \"The ViewModel handles all the UI state transformations.\"",[197,198,199],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":35,"searchDepth":50,"depth":50,"links":201},[202,203,204,205],{"id":12,"depth":50,"text":13},{"id":20,"depth":50,"text":21},{"id":27,"depth":50,"text":28},{"id":191,"depth":50,"text":192},"architecture","MVVM is MVC's cooler cousin for UI-heavy apps.","intermediate","md","m",{},true,"\u002Fterms\u002Fm\u002Fmvvm",[215,216,217,218],"MVC","MVP","Architecture","Data Binding",{"title":5,"description":207},{"changefreq":221,"priority":222},"weekly",0.7,"terms\u002Fm\u002Fmvvm",null,"IwQBY47SFzGWhldMWO7o0VpVW2OuVkM3wZ7lR-0IOIA",[227,230,234],{"title":217,"path":228,"acronym":224,"category":206,"difficulty":208,"description":229},"\u002Fterms\u002Fa\u002Farchitecture","Architecture is the master blueprint for your app — like deciding whether to build a house, apartment block, or skyscraper before laying a single brick.",{"title":215,"path":231,"acronym":215,"category":206,"difficulty":232,"description":233},"\u002Fterms\u002Fm\u002Fmvc","beginner","MVC is like a restaurant: the Model is the kitchen (data and logic), the View is the plate of food (what the user sees), and the Controller is the waiter (...",{"title":216,"path":235,"acronym":216,"category":236,"difficulty":232,"description":237},"\u002Fterms\u002Fm\u002Fmvp","general","An MVP is the simplest version of your product that actually works well enough for real users to use and for you to learn from.",1776518294051]