[{"data":1,"prerenderedAt":1082},["ShallowReactive",2],{"vue-3-2":3,"StaticMarkdown_gaY8YGMcIU":1072},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"author":11,"gravatar":12,"twitter":13,"excerpt":14,"body":24,"_type":1065,"_id":1066,"_source":1067,"_file":1068,"_stem":1069,"_extension":1070,"sitemap":1071},"/blog/vue-3-2","blog",false,"","Vue 3.2 Released!","We are excited to announce the release of Vue.js 3.2 \"Quintessential Quintuplets\"! This release includes many significant new features and performance improvements, and contains no breaking changes.","2021-08-05","Evan You","eca93da2c67aadafe35d477aa8f454b8","@youyuxi",{"type":15,"children":16},"root",[17],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":9},"text",{"type":15,"children":25,"toc":1058},[26,30,37,51,86,91,519,536,565,586,592,614,769,782,788,802,835,840,876,911,931,940,946,975,1003,1009,1022,1036,1040,1053],{"type":18,"tag":19,"props":27,"children":28},{},[29],{"type":23,"value":9},{"type":18,"tag":31,"props":32,"children":34},"h2",{"id":33},"new-sfc-features",[35],{"type":23,"value":36},"New SFC Features",{"type":18,"tag":19,"props":38,"children":39},{},[40,42,49],{"type":23,"value":41},"Two new features for Single File Components (SFCs, aka ",{"type":18,"tag":43,"props":44,"children":46},"code",{"className":45},[],[47],{"type":23,"value":48},".vue",{"type":23,"value":50}," files) have graduated from experimental status and are now considered stable:",{"type":18,"tag":52,"props":53,"children":54},"ul",{},[55,67],{"type":18,"tag":56,"props":57,"children":58},"li",{},[59,65],{"type":18,"tag":43,"props":60,"children":62},{"className":61},[],[63],{"type":23,"value":64},"\u003Cscript setup>",{"type":23,"value":66}," is a compile-time syntactic sugar that greatly improves the ergonomics when using Composition API inside SFCs.",{"type":18,"tag":56,"props":68,"children":69},{},[70,76,78,84],{"type":18,"tag":43,"props":71,"children":73},{"className":72},[],[74],{"type":23,"value":75},"\u003Cstyle> v-bind",{"type":23,"value":77}," enables component state-driven dynamic CSS values in SFC ",{"type":18,"tag":43,"props":79,"children":81},{"className":80},[],[82],{"type":23,"value":83},"\u003Cstyle>",{"type":23,"value":85}," tags.",{"type":18,"tag":19,"props":87,"children":88},{},[89],{"type":23,"value":90},"Here is an example component using these two new features together:",{"type":18,"tag":92,"props":93,"children":97},"pre",{"className":94,"code":95,"language":96,"meta":7,"style":7},"language-vue shiki shiki-themes dracula-soft","\u003Cscript setup>\n  import { ref } from 'vue'\n\n  const color = ref('red')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"color = color === 'red' ? 'green' : 'red'\">\n    Color is: {{ color }}\n  \u003C/button>\n\u003C/template>\n\n\u003Cstyle scoped>\n  button {\n    color: v-bind(color);\n  }\n\u003C/style>\n","vue",[98],{"type":18,"tag":43,"props":99,"children":100},{"__ignoreMap":7},[101,130,165,175,224,241,249,266,369,392,409,425,433,455,469,494,503],{"type":18,"tag":102,"props":103,"children":106},"span",{"class":104,"line":105},"line",1,[107,113,119,125],{"type":18,"tag":102,"props":108,"children":110},{"style":109},"--shiki-default:#F6F6F4",[111],{"type":23,"value":112},"\u003C",{"type":18,"tag":102,"props":114,"children":116},{"style":115},"--shiki-default:#F286C4",[117],{"type":23,"value":118},"script",{"type":18,"tag":102,"props":120,"children":122},{"style":121},"--shiki-default:#62E884;--shiki-default-font-style:italic",[123],{"type":23,"value":124}," setup",{"type":18,"tag":102,"props":126,"children":127},{"style":109},[128],{"type":23,"value":129},">\n",{"type":18,"tag":102,"props":131,"children":133},{"class":104,"line":132},2,[134,139,144,149,155,160],{"type":18,"tag":102,"props":135,"children":136},{"style":115},[137],{"type":23,"value":138},"  import",{"type":18,"tag":102,"props":140,"children":141},{"style":109},[142],{"type":23,"value":143}," { ref } ",{"type":18,"tag":102,"props":145,"children":146},{"style":115},[147],{"type":23,"value":148},"from",{"type":18,"tag":102,"props":150,"children":152},{"style":151},"--shiki-default:#DEE492",[153],{"type":23,"value":154}," '",{"type":18,"tag":102,"props":156,"children":158},{"style":157},"--shiki-default:#E7EE98",[159],{"type":23,"value":96},{"type":18,"tag":102,"props":161,"children":162},{"style":151},[163],{"type":23,"value":164},"'\n",{"type":18,"tag":102,"props":166,"children":168},{"class":104,"line":167},3,[169],{"type":18,"tag":102,"props":170,"children":172},{"emptyLinePlaceholder":171},true,[173],{"type":23,"value":174},"\n",{"type":18,"tag":102,"props":176,"children":178},{"class":104,"line":177},4,[179,184,189,194,200,205,210,215,219],{"type":18,"tag":102,"props":180,"children":181},{"style":115},[182],{"type":23,"value":183},"  const",{"type":18,"tag":102,"props":185,"children":186},{"style":109},[187],{"type":23,"value":188}," color ",{"type":18,"tag":102,"props":190,"children":191},{"style":115},[192],{"type":23,"value":193},"=",{"type":18,"tag":102,"props":195,"children":197},{"style":196},"--shiki-default:#62E884",[198],{"type":23,"value":199}," ref",{"type":18,"tag":102,"props":201,"children":202},{"style":109},[203],{"type":23,"value":204},"(",{"type":18,"tag":102,"props":206,"children":207},{"style":151},[208],{"type":23,"value":209},"'",{"type":18,"tag":102,"props":211,"children":212},{"style":157},[213],{"type":23,"value":214},"red",{"type":18,"tag":102,"props":216,"children":217},{"style":151},[218],{"type":23,"value":209},{"type":18,"tag":102,"props":220,"children":221},{"style":109},[222],{"type":23,"value":223},")\n",{"type":18,"tag":102,"props":225,"children":227},{"class":104,"line":226},5,[228,233,237],{"type":18,"tag":102,"props":229,"children":230},{"style":109},[231],{"type":23,"value":232},"\u003C/",{"type":18,"tag":102,"props":234,"children":235},{"style":115},[236],{"type":23,"value":118},{"type":18,"tag":102,"props":238,"children":239},{"style":109},[240],{"type":23,"value":129},{"type":18,"tag":102,"props":242,"children":244},{"class":104,"line":243},6,[245],{"type":18,"tag":102,"props":246,"children":247},{"emptyLinePlaceholder":171},[248],{"type":23,"value":174},{"type":18,"tag":102,"props":250,"children":252},{"class":104,"line":251},7,[253,257,262],{"type":18,"tag":102,"props":254,"children":255},{"style":109},[256],{"type":23,"value":112},{"type":18,"tag":102,"props":258,"children":259},{"style":115},[260],{"type":23,"value":261},"template",{"type":18,"tag":102,"props":263,"children":264},{"style":109},[265],{"type":23,"value":129},{"type":18,"tag":102,"props":267,"children":269},{"class":104,"line":268},8,[270,275,280,285,290,294,299,304,308,312,317,321,325,329,334,338,343,347,352,356,360,365],{"type":18,"tag":102,"props":271,"children":272},{"style":109},[273],{"type":23,"value":274},"  \u003C",{"type":18,"tag":102,"props":276,"children":277},{"style":115},[278],{"type":23,"value":279},"button",{"type":18,"tag":102,"props":281,"children":282},{"style":109},[283],{"type":23,"value":284}," @",{"type":18,"tag":102,"props":286,"children":287},{"style":121},[288],{"type":23,"value":289},"click",{"type":18,"tag":102,"props":291,"children":292},{"style":115},[293],{"type":23,"value":193},{"type":18,"tag":102,"props":295,"children":296},{"style":151},[297],{"type":23,"value":298},"\"",{"type":18,"tag":102,"props":300,"children":301},{"style":109},[302],{"type":23,"value":303},"color ",{"type":18,"tag":102,"props":305,"children":306},{"style":115},[307],{"type":23,"value":193},{"type":18,"tag":102,"props":309,"children":310},{"style":109},[311],{"type":23,"value":188},{"type":18,"tag":102,"props":313,"children":314},{"style":115},[315],{"type":23,"value":316},"===",{"type":18,"tag":102,"props":318,"children":319},{"style":151},[320],{"type":23,"value":154},{"type":18,"tag":102,"props":322,"children":323},{"style":157},[324],{"type":23,"value":214},{"type":18,"tag":102,"props":326,"children":327},{"style":151},[328],{"type":23,"value":209},{"type":18,"tag":102,"props":330,"children":331},{"style":115},[332],{"type":23,"value":333}," ?",{"type":18,"tag":102,"props":335,"children":336},{"style":151},[337],{"type":23,"value":154},{"type":18,"tag":102,"props":339,"children":340},{"style":157},[341],{"type":23,"value":342},"green",{"type":18,"tag":102,"props":344,"children":345},{"style":151},[346],{"type":23,"value":209},{"type":18,"tag":102,"props":348,"children":349},{"style":115},[350],{"type":23,"value":351}," :",{"type":18,"tag":102,"props":353,"children":354},{"style":151},[355],{"type":23,"value":154},{"type":18,"tag":102,"props":357,"children":358},{"style":157},[359],{"type":23,"value":214},{"type":18,"tag":102,"props":361,"children":362},{"style":151},[363],{"type":23,"value":364},"'\"",{"type":18,"tag":102,"props":366,"children":367},{"style":109},[368],{"type":23,"value":129},{"type":18,"tag":102,"props":370,"children":372},{"class":104,"line":371},9,[373,378,383,387],{"type":18,"tag":102,"props":374,"children":375},{"style":109},[376],{"type":23,"value":377},"    Color is: ",{"type":18,"tag":102,"props":379,"children":380},{"style":115},[381],{"type":23,"value":382},"{{",{"type":18,"tag":102,"props":384,"children":385},{"style":109},[386],{"type":23,"value":188},{"type":18,"tag":102,"props":388,"children":389},{"style":115},[390],{"type":23,"value":391},"}}\n",{"type":18,"tag":102,"props":393,"children":395},{"class":104,"line":394},10,[396,401,405],{"type":18,"tag":102,"props":397,"children":398},{"style":109},[399],{"type":23,"value":400},"  \u003C/",{"type":18,"tag":102,"props":402,"children":403},{"style":115},[404],{"type":23,"value":279},{"type":18,"tag":102,"props":406,"children":407},{"style":109},[408],{"type":23,"value":129},{"type":18,"tag":102,"props":410,"children":412},{"class":104,"line":411},11,[413,417,421],{"type":18,"tag":102,"props":414,"children":415},{"style":109},[416],{"type":23,"value":232},{"type":18,"tag":102,"props":418,"children":419},{"style":115},[420],{"type":23,"value":261},{"type":18,"tag":102,"props":422,"children":423},{"style":109},[424],{"type":23,"value":129},{"type":18,"tag":102,"props":426,"children":428},{"class":104,"line":427},12,[429],{"type":18,"tag":102,"props":430,"children":431},{"emptyLinePlaceholder":171},[432],{"type":23,"value":174},{"type":18,"tag":102,"props":434,"children":436},{"class":104,"line":435},13,[437,441,446,451],{"type":18,"tag":102,"props":438,"children":439},{"style":109},[440],{"type":23,"value":112},{"type":18,"tag":102,"props":442,"children":443},{"style":115},[444],{"type":23,"value":445},"style",{"type":18,"tag":102,"props":447,"children":448},{"style":121},[449],{"type":23,"value":450}," scoped",{"type":18,"tag":102,"props":452,"children":453},{"style":109},[454],{"type":23,"value":129},{"type":18,"tag":102,"props":456,"children":458},{"class":104,"line":457},14,[459,464],{"type":18,"tag":102,"props":460,"children":461},{"style":115},[462],{"type":23,"value":463},"  button",{"type":18,"tag":102,"props":465,"children":466},{"style":109},[467],{"type":23,"value":468}," {\n",{"type":18,"tag":102,"props":470,"children":472},{"class":104,"line":471},15,[473,479,484,489],{"type":18,"tag":102,"props":474,"children":476},{"style":475},"--shiki-default:#97E1F1",[477],{"type":23,"value":478},"    color",{"type":18,"tag":102,"props":480,"children":481},{"style":115},[482],{"type":23,"value":483},":",{"type":18,"tag":102,"props":485,"children":486},{"style":196},[487],{"type":23,"value":488}," v-bind",{"type":18,"tag":102,"props":490,"children":491},{"style":109},[492],{"type":23,"value":493},"(color);\n",{"type":18,"tag":102,"props":495,"children":497},{"class":104,"line":496},16,[498],{"type":18,"tag":102,"props":499,"children":500},{"style":109},[501],{"type":23,"value":502},"  }\n",{"type":18,"tag":102,"props":504,"children":506},{"class":104,"line":505},17,[507,511,515],{"type":18,"tag":102,"props":508,"children":509},{"style":109},[510],{"type":23,"value":232},{"type":18,"tag":102,"props":512,"children":513},{"style":115},[514],{"type":23,"value":445},{"type":18,"tag":102,"props":516,"children":517},{"style":109},[518],{"type":23,"value":129},{"type":18,"tag":19,"props":520,"children":521},{},[522,524,534],{"type":23,"value":523},"Try it out in the ",{"type":18,"tag":525,"props":526,"children":531},"a",{"href":527,"rel":528,"target":530},"https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgY29sb3IgPSByZWYoJ3JlZCcpXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8YnV0dG9uIEBjbGljaz1cImNvbG9yID0gY29sb3IgPT09ICdyZWQnID8gJ2dyZWVuJyA6ICdyZWQnXCI+XG4gICAgQ29sb3IgaXM6IHt7IGNvbG9yIH19XG4gIDwvYnV0dG9uPlxuPC90ZW1wbGF0ZT5cblxuPHN0eWxlIHNjb3BlZD5cbmJ1dHRvbiB7XG4gIGNvbG9yOiB2LWJpbmQoY29sb3IpO1xufVxuPC9zdHlsZT4ifQ==",[529,529],"noopener","_blank",[532],{"type":23,"value":533},"SFC Playground",{"type":23,"value":535},", or read their respective documentations:",{"type":18,"tag":52,"props":537,"children":538},{},[539,552],{"type":18,"tag":56,"props":540,"children":541},{},[542],{"type":18,"tag":525,"props":543,"children":546},{"href":544,"rel":545,"target":530},"https://v3.vuejs.org/api/sfc-script-setup.html",[529,529],[547],{"type":18,"tag":43,"props":548,"children":550},{"className":549},[],[551],{"type":23,"value":64},{"type":18,"tag":56,"props":553,"children":554},{},[555],{"type":18,"tag":525,"props":556,"children":559},{"href":557,"rel":558,"target":530},"https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css",[529,529],[560],{"type":18,"tag":43,"props":561,"children":563},{"className":562},[],[564],{"type":23,"value":75},{"type":18,"tag":19,"props":566,"children":567},{},[568,570,575,577,584],{"type":23,"value":569},"Building on top of ",{"type":18,"tag":43,"props":571,"children":573},{"className":572},[],[574],{"type":23,"value":64},{"type":23,"value":576},", we also have a new RFC for improving the ergonomics of ref usage with compiler-enabled sugar - please share your feedback ",{"type":18,"tag":525,"props":578,"children":581},{"href":579,"rel":580,"target":530},"https://github.com/vuejs/rfcs/discussions/369",[529,529],[582],{"type":23,"value":583},"here",{"type":23,"value":585},".",{"type":18,"tag":31,"props":587,"children":589},{"id":588},"web-components",[590],{"type":23,"value":591},"Web Components",{"type":18,"tag":19,"props":593,"children":594},{},[595,597,603,605,612],{"type":23,"value":596},"Vue 3.2 introduces a new ",{"type":18,"tag":43,"props":598,"children":600},{"className":599},[],[601],{"type":23,"value":602},"defineCustomElement",{"type":23,"value":604}," method for easily creating native ",{"type":18,"tag":525,"props":606,"children":609},{"href":607,"rel":608,"target":530},"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements",[529,529],[610],{"type":23,"value":611},"custom elements",{"type":23,"value":613}," using Vue component APIs:",{"type":18,"tag":92,"props":615,"children":619},{"className":616,"code":617,"language":618,"meta":7,"style":7},"language-js shiki shiki-themes dracula-soft","import { defineCustomElement } from 'vue'\n\nconst MyVueElement = defineCustomElement({\n  // normal Vue component options here\n})\n\n// Register the custom element.\n// After registration, all `\u003Cmy-vue-element>` tags\n// on the page will be upgraded.\ncustomElements.define('my-vue-element', MyVueElement)\n","js",[620],{"type":18,"tag":43,"props":621,"children":622},{"__ignoreMap":7},[623,652,659,686,695,703,710,718,726,734],{"type":18,"tag":102,"props":624,"children":625},{"class":104,"line":105},[626,631,636,640,644,648],{"type":18,"tag":102,"props":627,"children":628},{"style":115},[629],{"type":23,"value":630},"import",{"type":18,"tag":102,"props":632,"children":633},{"style":109},[634],{"type":23,"value":635}," { defineCustomElement } ",{"type":18,"tag":102,"props":637,"children":638},{"style":115},[639],{"type":23,"value":148},{"type":18,"tag":102,"props":641,"children":642},{"style":151},[643],{"type":23,"value":154},{"type":18,"tag":102,"props":645,"children":646},{"style":157},[647],{"type":23,"value":96},{"type":18,"tag":102,"props":649,"children":650},{"style":151},[651],{"type":23,"value":164},{"type":18,"tag":102,"props":653,"children":654},{"class":104,"line":132},[655],{"type":18,"tag":102,"props":656,"children":657},{"emptyLinePlaceholder":171},[658],{"type":23,"value":174},{"type":18,"tag":102,"props":660,"children":661},{"class":104,"line":167},[662,667,672,676,681],{"type":18,"tag":102,"props":663,"children":664},{"style":115},[665],{"type":23,"value":666},"const",{"type":18,"tag":102,"props":668,"children":669},{"style":109},[670],{"type":23,"value":671}," MyVueElement ",{"type":18,"tag":102,"props":673,"children":674},{"style":115},[675],{"type":23,"value":193},{"type":18,"tag":102,"props":677,"children":678},{"style":196},[679],{"type":23,"value":680}," defineCustomElement",{"type":18,"tag":102,"props":682,"children":683},{"style":109},[684],{"type":23,"value":685},"({\n",{"type":18,"tag":102,"props":687,"children":688},{"class":104,"line":177},[689],{"type":18,"tag":102,"props":690,"children":692},{"style":691},"--shiki-default:#7B7F8B",[693],{"type":23,"value":694},"  // normal Vue component options here\n",{"type":18,"tag":102,"props":696,"children":697},{"class":104,"line":226},[698],{"type":18,"tag":102,"props":699,"children":700},{"style":109},[701],{"type":23,"value":702},"})\n",{"type":18,"tag":102,"props":704,"children":705},{"class":104,"line":243},[706],{"type":18,"tag":102,"props":707,"children":708},{"emptyLinePlaceholder":171},[709],{"type":23,"value":174},{"type":18,"tag":102,"props":711,"children":712},{"class":104,"line":251},[713],{"type":18,"tag":102,"props":714,"children":715},{"style":691},[716],{"type":23,"value":717},"// Register the custom element.\n",{"type":18,"tag":102,"props":719,"children":720},{"class":104,"line":268},[721],{"type":18,"tag":102,"props":722,"children":723},{"style":691},[724],{"type":23,"value":725},"// After registration, all `\u003Cmy-vue-element>` tags\n",{"type":18,"tag":102,"props":727,"children":728},{"class":104,"line":371},[729],{"type":18,"tag":102,"props":730,"children":731},{"style":691},[732],{"type":23,"value":733},"// on the page will be upgraded.\n",{"type":18,"tag":102,"props":735,"children":736},{"class":104,"line":394},[737,742,747,751,755,760,764],{"type":18,"tag":102,"props":738,"children":739},{"style":109},[740],{"type":23,"value":741},"customElements.",{"type":18,"tag":102,"props":743,"children":744},{"style":196},[745],{"type":23,"value":746},"define",{"type":18,"tag":102,"props":748,"children":749},{"style":109},[750],{"type":23,"value":204},{"type":18,"tag":102,"props":752,"children":753},{"style":151},[754],{"type":23,"value":209},{"type":18,"tag":102,"props":756,"children":757},{"style":157},[758],{"type":23,"value":759},"my-vue-element",{"type":18,"tag":102,"props":761,"children":762},{"style":151},[763],{"type":23,"value":209},{"type":18,"tag":102,"props":765,"children":766},{"style":109},[767],{"type":23,"value":768},", MyVueElement)\n",{"type":18,"tag":19,"props":770,"children":771},{},[772,774,781],{"type":23,"value":773},"This API allows developers to create Vue-powered UI component libraries that can be used with any framework, or no framework at all. We have also added a new section in our docs on ",{"type":18,"tag":525,"props":775,"children":778},{"href":776,"rel":777,"target":530},"https://v3.vuejs.org/guide/web-components.html",[529,529],[779],{"type":23,"value":780},"consuming and creating Web Components in Vue",{"type":23,"value":585},{"type":18,"tag":31,"props":783,"children":785},{"id":784},"performance-improvements",[786],{"type":23,"value":787},"Performance Improvements",{"type":18,"tag":19,"props":789,"children":790},{},[791,793,800],{"type":23,"value":792},"3.2 includes some significant performance improvements to Vue's reactivity system, thanks to the great work by ",{"type":18,"tag":525,"props":794,"children":797},{"href":795,"rel":796,"target":530},"https://github.com/basvanmeurs",[529,529],[798],{"type":23,"value":799},"@basvanmeurs",{"type":23,"value":801},". Specifically:",{"type":18,"tag":52,"props":803,"children":804},{},[805,815,825],{"type":18,"tag":56,"props":806,"children":807},{},[808],{"type":18,"tag":525,"props":809,"children":812},{"href":810,"rel":811,"target":530},"https://github.com/vuejs/vue-next/pull/3995",[529,529],[813],{"type":23,"value":814},"More efficient ref implementation (~260% faster read / ~50% faster write)",{"type":18,"tag":56,"props":816,"children":817},{},[818],{"type":18,"tag":525,"props":819,"children":822},{"href":820,"rel":821,"target":530},"https://github.com/vuejs/vue-next/pull/4017",[529,529],[823],{"type":23,"value":824},"~40% faster dependency tracking",{"type":18,"tag":56,"props":826,"children":827},{},[828],{"type":18,"tag":525,"props":829,"children":832},{"href":830,"rel":831,"target":530},"https://github.com/vuejs/vue-next/pull/4001",[529,529],[833],{"type":23,"value":834},"~17% less memory usage",{"type":18,"tag":19,"props":836,"children":837},{},[838],{"type":23,"value":839},"The template compiler also received a number of improvements:",{"type":18,"tag":52,"props":841,"children":842},{},[843,853],{"type":18,"tag":56,"props":844,"children":845},{},[846],{"type":18,"tag":525,"props":847,"children":850},{"href":848,"rel":849,"target":530},"https://github.com/vuejs/vue-next/pull/3334",[529,529],[851],{"type":23,"value":852},"~200% faster creation of plain element VNodes",{"type":18,"tag":56,"props":854,"children":855},{},[856,858,865,867,874],{"type":23,"value":857},"More aggressive constant hoisting [",{"type":18,"tag":525,"props":859,"children":862},{"href":860,"rel":861,"target":530},"https://github.com/vuejs/vue-next/commit/b7ea7c148552874e8bce399eec9fbe565efa2f4d",[529,529],[863],{"type":23,"value":864},"1",{"type":23,"value":866},"] [",{"type":18,"tag":525,"props":868,"children":871},{"href":869,"rel":870,"target":530},"https://github.com/vuejs/vue-next/commit/02339b67d8c6fab6ee701a7c4f2773139ed007f5",[529,529],[872],{"type":23,"value":873},"2",{"type":23,"value":875},"]",{"type":18,"tag":19,"props":877,"children":878},{},[879,881,894,896,901,903,909],{"type":23,"value":880},"Finally, there is a new ",{"type":18,"tag":525,"props":882,"children":885},{"href":883,"rel":884,"target":530},"https://v3.vuejs.org/api/directives.html#v-memo",[529,529],[886,892],{"type":18,"tag":43,"props":887,"children":889},{"className":888},[],[890],{"type":23,"value":891},"v-memo",{"type":23,"value":893}," directive",{"type":23,"value":895}," that provides the ability to memoize part of the template tree. A ",{"type":18,"tag":43,"props":897,"children":899},{"className":898},[],[900],{"type":23,"value":891},{"type":23,"value":902}," hit allows Vue to skip not only the Virtual DOM diffing, but the creation of new VNodes altogether. Although rarely needed, it provides an escape hatch to squeeze out maximum performance in certain scenarios, for example large ",{"type":18,"tag":43,"props":904,"children":906},{"className":905},[],[907],{"type":23,"value":908},"v-for",{"type":23,"value":910}," lists.",{"type":18,"tag":19,"props":912,"children":913},{},[914,916,921,923,930],{"type":23,"value":915},"The usage of ",{"type":18,"tag":43,"props":917,"children":919},{"className":918},[],[920],{"type":23,"value":891},{"type":23,"value":922},", which is a one-line addition, places Vue among the fastest mainstream frameworks in ",{"type":18,"tag":525,"props":924,"children":927},{"href":925,"rel":926,"target":530},"https://github.com/krausest/js-framework-benchmark",[529,529],[928],{"type":23,"value":929},"js-framework-benchmark",{"type":23,"value":483},{"type":18,"tag":19,"props":932,"children":933},{},[934],{"type":18,"tag":935,"props":936,"children":939},"img",{"alt":937,"src":938},"benchmark","/bench.png",[],{"type":18,"tag":31,"props":941,"children":943},{"id":942},"server-side-rendering",[944],{"type":23,"value":945},"Server-side Rendering",{"type":18,"tag":19,"props":947,"children":948},{},[949,951,957,959,964,966,973],{"type":23,"value":950},"The ",{"type":18,"tag":43,"props":952,"children":954},{"className":953},[],[955],{"type":23,"value":956},"@vue/server-renderer",{"type":23,"value":958}," package in 3.2 now ships an ES module build which is also decoupled from Node.js built-ins. This makes it possible to bundle and leverage ",{"type":18,"tag":43,"props":960,"children":962},{"className":961},[],[963],{"type":23,"value":956},{"type":23,"value":965}," for use inside non-Node.js runtimes such as ",{"type":18,"tag":525,"props":967,"children":970},{"href":968,"rel":969,"target":530},"https://developers.cloudflare.com/workers/",[529,529],[971],{"type":23,"value":972},"CloudFlare Workers",{"type":23,"value":974}," or Service Workers.",{"type":18,"tag":19,"props":976,"children":977},{},[978,980,987,989,1001],{"type":23,"value":979},"We also improved the streaming render APIs, with new methods for rendering to the ",{"type":18,"tag":525,"props":981,"children":984},{"href":982,"rel":983,"target":530},"https://developer.mozilla.org/en-US/docs/Web/API/Streams_API",[529,529],[985],{"type":23,"value":986},"Web Streams API",{"type":23,"value":988},". Check out the ",{"type":18,"tag":525,"props":990,"children":993},{"href":991,"rel":992,"target":530},"https://github.com/vuejs/vue-next/tree/master/packages/server-renderer#streaming-api",[529,529],[994,996],{"type":23,"value":995},"documentation of ",{"type":18,"tag":43,"props":997,"children":999},{"className":998},[],[1000],{"type":23,"value":956},{"type":23,"value":1002}," for more details.",{"type":18,"tag":31,"props":1004,"children":1006},{"id":1005},"effect-scope-api",[1007],{"type":23,"value":1008},"Effect Scope API",{"type":18,"tag":19,"props":1010,"children":1011},{},[1012,1014,1020],{"type":23,"value":1013},"3.2 introduces a new ",{"type":18,"tag":525,"props":1015,"children":1018},{"href":1016,"rel":1017,"target":530},"https://v3.vuejs.org/api/effect-scope.html",[529,529],[1019],{"type":23,"value":1008},{"type":23,"value":1021}," for directly controlling the disposal timing of reactive effects (computed and watchers). It makes it easier to leverage Vue's reactivity API out of a component context, and also unlocks some advanced use cases inside components.",{"type":18,"tag":19,"props":1023,"children":1024},{},[1025,1027,1034],{"type":23,"value":1026},"This is low-level API largely intended for library authors, so it's recommended to read the feature's ",{"type":18,"tag":525,"props":1028,"children":1031},{"href":1029,"rel":1030,"target":530},"https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md",[529,529],[1032],{"type":23,"value":1033},"RFC",{"type":23,"value":1035}," for the motivation and use cases of this feature.",{"type":18,"tag":1037,"props":1038,"children":1039},"hr",{},[],{"type":18,"tag":19,"props":1041,"children":1042},{},[1043,1045,1052],{"type":23,"value":1044},"For a detailed list of all changes in 3.2, please refer to the ",{"type":18,"tag":525,"props":1046,"children":1049},{"href":1047,"rel":1048,"target":530},"https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md",[529,529],[1050],{"type":23,"value":1051},"full changelog",{"type":23,"value":585},{"type":18,"tag":445,"props":1054,"children":1055},{},[1056],{"type":23,"value":1057},"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":7,"searchDepth":132,"depth":132,"links":1059},[1060,1061,1062,1063,1064],{"id":33,"depth":132,"text":36},{"id":588,"depth":132,"text":591},{"id":784,"depth":132,"text":787},{"id":942,"depth":132,"text":945},{"id":1005,"depth":132,"text":1008},"markdown","content:blog:vue-3-2.md","content","blog/vue-3-2.md","blog/vue-3-2","md",{"loc":4},["Island",1073],{"key":1074,"result":1075},"StaticMarkdown_gaY8YGMcIU",{"head":1076},{"meta":1077,"title":8,"link":1080,"style":1081},[1078],{"name":1079,"content":8},"description",[],[],1788519849210]