[{"data":1,"prerenderedAt":74},["ShallowReactive",2],{"term-v\u002Fvue-vapor-mode":3,"related-v\u002Fvue-vapor-mode":59},{"id":4,"title":5,"acronym":6,"body":7,"category":40,"description":41,"difficulty":42,"extension":43,"letter":44,"meta":45,"navigation":46,"path":47,"related":48,"seo":53,"sitemap":54,"stem":57,"subcategory":6,"__hash__":58},"terms\u002Fterms\u002Fv\u002Fvue-vapor-mode.md","Vue Vapor Mode",null,{"type":8,"value":9,"toc":33},"minimark",[10,15,19,23,26,30],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"Vue's Vapor Mode is what happens when the Vue team looked at Solid.js and Svelte quietly outperforming them and said hold on. Instead of compiling your components down to virtual DOM render functions, Vapor Mode compiles straight to real DOM operations, skipping the diffing step entirely. Same Vue syntax you already know, dramatically less overhead under the hood.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Vapor Mode is an opt in compilation strategy in Vue 3.6+ that compiles components directly to fine grained DOM update instructions instead of virtual DOM render functions, similar to the approach used by Solid.js and Svelte. It reduces memory usage and improves runtime performance while keeping the standard Vue Single File Component syntax and Composition API.",[11,27,29],{"id":28},"when-youll-hear-this","When You'll Hear This",[16,31,32],{},"\"We flagged our component tree as Vapor and cut memory usage almost in half.\" \u002F \"Vapor Mode still can't use every Options API feature yet, so we're migrating incrementally.\"",{"title":34,"searchDepth":35,"depth":35,"links":36},"",2,[37,38,39],{"id":13,"depth":35,"text":14},{"id":21,"depth":35,"text":22},{"id":28,"depth":35,"text":29},"frontend","Vue's Vapor Mode is what happens when the Vue team looked at Solid.js and Svelte quietly outperforming them and said hold on.","advanced","md","v",{},true,"\u002Fterms\u002Fv\u002Fvue-vapor-mode",[49,50,51,52],"Vue","Signals","Solid.js","Virtual DOM",{"title":5,"description":41},{"changefreq":55,"priority":56},"weekly",0.7,"terms\u002Fv\u002Fvue-vapor-mode","-TIK9ApEYsSbjNfgtSy3PyDoUwUWazQVrbyQe8WuFrA",[60,64,67,70],{"title":50,"path":61,"acronym":6,"category":40,"difficulty":62,"description":63},"\u002Fterms\u002Fs\u002Fsignals","intermediate","Signals are reactive primitives that hold a value and automatically notify the UI when that value changes — with surgical precision.",{"title":51,"path":65,"acronym":6,"category":40,"difficulty":62,"description":66},"\u002Fterms\u002Fs\u002Fsolid-js","Imagine React went to the gym, got ripped, and dropped the Virtual DOM weight. Solid.",{"title":52,"path":68,"acronym":6,"category":40,"difficulty":62,"description":69},"\u002Fterms\u002Fv\u002Fvirtual-dom","The Virtual DOM is a lightweight copy of the real DOM that lives in memory.",{"title":49,"path":71,"acronym":6,"category":40,"difficulty":72,"description":73},"\u002Fterms\u002Fv\u002Fvue","beginner","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.",1792528136476]