[{"data":1,"prerenderedAt":3089},["ShallowReactive",2],{"vue-3-3":3,"StaticMarkdown_nMv27YLzgJ":3079},{"_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":50,"_type":3072,"_id":3073,"_source":3074,"_file":3075,"_stem":3076,"_extension":3077,"sitemap":3078},"/blog/vue-3-3","blog",false,"","Announcing Vue 3.3","Today we're excited to announce the release of Vue 3.3 \"Rurouni Kenshin\"!","2023-05-11","Evan You","eca93da2c67aadafe35d477aa8f454b8","@youyuxi",{"type":15,"children":16},"root",[17,24],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":9},"text",{"type":18,"tag":19,"props":25,"children":26},{},[27,29,36,38,48],{"type":23,"value":28},"This release is focused on developer experience improvements - in particular, SFC ",{"type":18,"tag":30,"props":31,"children":33},"code",{"className":32},[],[34],{"type":23,"value":35},"\u003Cscript setup>",{"type":23,"value":37}," usage with TypeScript. Together with the 1.6 release of ",{"type":18,"tag":39,"props":40,"children":45},"a",{"href":41,"rel":42,"target":44},"https://github.com/vuejs/language-tools/",[43,43],"noopener","_blank",[46],{"type":23,"value":47},"Vue Language Tools",{"type":23,"value":49}," (previously known as Volar), we have resolved many long-standing pain points when using Vue with TypeScript.",{"type":15,"children":51,"toc":3050},[52,56,72,86,90,95,120,125,137,144,165,170,357,362,377,383,403,546,574,782,787,822,833,845,1038,1051,1168,1182,1187,1199,1211,1394,1419,1424,1444,1472,1486,1492,1498,1503,1508,1808,1813,1827,1837,1858,2183,2195,2359,2363,2377,2383,2393,2419,2488,2507,2517,2602,2622,2633,2728,2746,2861,2892,2906,2912,2917,2931,2959,2965,2970,3039,3044],{"type":18,"tag":19,"props":53,"children":54},{},[55],{"type":23,"value":9},{"type":18,"tag":19,"props":57,"children":58},{},[59,60,65,66,71],{"type":23,"value":28},{"type":18,"tag":30,"props":61,"children":63},{"className":62},[],[64],{"type":23,"value":35},{"type":23,"value":37},{"type":18,"tag":39,"props":67,"children":69},{"href":41,"rel":68,"target":44},[43,43],[70],{"type":23,"value":47},{"type":23,"value":49},{"type":18,"tag":19,"props":73,"children":74},{},[75,77,84],{"type":23,"value":76},"This post provides an overview of the highlighted features in 3.3. For the full list of changes, please consult\n",{"type":18,"tag":39,"props":78,"children":81},{"href":79,"rel":80,"target":44},"https://github.com/vuejs/core/blob/main/CHANGELOG.md#330-2023-05-08",[43,43],[82],{"type":23,"value":83},"the full changelog on GitHub",{"type":23,"value":85},".",{"type":18,"tag":87,"props":88,"children":89},"hr",{},[],{"type":18,"tag":19,"props":91,"children":92},{},[93],{"type":23,"value":94},":::tip Dependency Updates\nWhen upgrading to 3.3, it is recommended to also update the following dependencies:",{"type":18,"tag":96,"props":97,"children":98},"ul",{},[99,105,110,115],{"type":18,"tag":100,"props":101,"children":102},"li",{},[103],{"type":23,"value":104},"volar / vue-tsc@^1.6.4",{"type":18,"tag":100,"props":106,"children":107},{},[108],{"type":23,"value":109},"vite@^4.3.5",{"type":18,"tag":100,"props":111,"children":112},{},[113],{"type":23,"value":114},"@vitejs/plugin-vue@^4.2.0",{"type":18,"tag":100,"props":116,"children":117},{},[118],{"type":23,"value":119},"vue-loader@^17.1.0 (if using webpack or vue-cli)\n:::",{"type":18,"tag":19,"props":121,"children":122},{},[123],{"type":23,"value":124},"[[TOC]]",{"type":18,"tag":126,"props":127,"children":129},"h2",{"id":128},"script-setup-typescript-dx-improvements",[130,135],{"type":18,"tag":30,"props":131,"children":133},{"className":132},[],[134],{"type":23,"value":35},{"type":23,"value":136}," + TypeScript DX Improvements",{"type":18,"tag":138,"props":139,"children":141},"h3",{"id":140},"imported-and-complex-types-support-in-macros",[142],{"type":23,"value":143},"Imported and Complex Types Support in Macros",{"type":18,"tag":19,"props":145,"children":146},{},[147,149,155,157,163],{"type":23,"value":148},"Previously, types used in the type parameter position of ",{"type":18,"tag":30,"props":150,"children":152},{"className":151},[],[153],{"type":23,"value":154},"defineProps",{"type":23,"value":156}," and ",{"type":18,"tag":30,"props":158,"children":160},{"className":159},[],[161],{"type":23,"value":162},"defineEmits",{"type":23,"value":164}," were limited to local types, and only supported type literals and interfaces. This is because Vue needs to be able to analyze the properties on the props interface in order to generate corresponding runtime options.",{"type":18,"tag":19,"props":166,"children":167},{},[168],{"type":23,"value":169},"This limitation is now resolved in 3.3. The compiler can now resolve imported types, and supports a limited set of complex types:",{"type":18,"tag":171,"props":172,"children":176},"pre",{"className":173,"code":174,"language":175,"meta":7,"style":7},"language-vue shiki shiki-themes dracula-soft","\u003Cscript setup lang=\"ts\">\n  import type { Props } from './foo'\n\n  // imported + intersection type\n  defineProps\u003CProps & { extraProp?: string }>()\n\u003C/script>\n","vue",[177],{"type":18,"tag":30,"props":178,"children":179},{"__ignoreMap":7},[180,235,274,284,294,340],{"type":18,"tag":181,"props":182,"children":185},"span",{"class":183,"line":184},"line",1,[186,192,198,204,209,214,220,226,230],{"type":18,"tag":181,"props":187,"children":189},{"style":188},"--shiki-default:#F6F6F4",[190],{"type":23,"value":191},"\u003C",{"type":18,"tag":181,"props":193,"children":195},{"style":194},"--shiki-default:#F286C4",[196],{"type":23,"value":197},"script",{"type":18,"tag":181,"props":199,"children":201},{"style":200},"--shiki-default:#62E884;--shiki-default-font-style:italic",[202],{"type":23,"value":203}," setup",{"type":18,"tag":181,"props":205,"children":206},{"style":200},[207],{"type":23,"value":208}," lang",{"type":18,"tag":181,"props":210,"children":211},{"style":194},[212],{"type":23,"value":213},"=",{"type":18,"tag":181,"props":215,"children":217},{"style":216},"--shiki-default:#DEE492",[218],{"type":23,"value":219},"\"",{"type":18,"tag":181,"props":221,"children":223},{"style":222},"--shiki-default:#E7EE98",[224],{"type":23,"value":225},"ts",{"type":18,"tag":181,"props":227,"children":228},{"style":216},[229],{"type":23,"value":219},{"type":18,"tag":181,"props":231,"children":232},{"style":188},[233],{"type":23,"value":234},">\n",{"type":18,"tag":181,"props":236,"children":238},{"class":183,"line":237},2,[239,244,249,254,259,264,269],{"type":18,"tag":181,"props":240,"children":241},{"style":194},[242],{"type":23,"value":243},"  import",{"type":18,"tag":181,"props":245,"children":246},{"style":194},[247],{"type":23,"value":248}," type",{"type":18,"tag":181,"props":250,"children":251},{"style":188},[252],{"type":23,"value":253}," { Props } ",{"type":18,"tag":181,"props":255,"children":256},{"style":194},[257],{"type":23,"value":258},"from",{"type":18,"tag":181,"props":260,"children":261},{"style":216},[262],{"type":23,"value":263}," '",{"type":18,"tag":181,"props":265,"children":266},{"style":222},[267],{"type":23,"value":268},"./foo",{"type":18,"tag":181,"props":270,"children":271},{"style":216},[272],{"type":23,"value":273},"'\n",{"type":18,"tag":181,"props":275,"children":277},{"class":183,"line":276},3,[278],{"type":18,"tag":181,"props":279,"children":281},{"emptyLinePlaceholder":280},true,[282],{"type":23,"value":283},"\n",{"type":18,"tag":181,"props":285,"children":287},{"class":183,"line":286},4,[288],{"type":18,"tag":181,"props":289,"children":291},{"style":290},"--shiki-default:#7B7F8B",[292],{"type":23,"value":293},"  // imported + intersection type\n",{"type":18,"tag":181,"props":295,"children":297},{"class":183,"line":296},5,[298,304,308,314,319,324,329,335],{"type":18,"tag":181,"props":299,"children":301},{"style":300},"--shiki-default:#62E884",[302],{"type":23,"value":303},"  defineProps",{"type":18,"tag":181,"props":305,"children":306},{"style":188},[307],{"type":23,"value":191},{"type":18,"tag":181,"props":309,"children":311},{"style":310},"--shiki-default:#FFB86C;--shiki-default-font-style:italic",[312],{"type":23,"value":313},"Props",{"type":18,"tag":181,"props":315,"children":316},{"style":194},[317],{"type":23,"value":318}," &",{"type":18,"tag":181,"props":320,"children":321},{"style":188},[322],{"type":23,"value":323}," { extraProp",{"type":18,"tag":181,"props":325,"children":326},{"style":194},[327],{"type":23,"value":328},"?:",{"type":18,"tag":181,"props":330,"children":332},{"style":331},"--shiki-default:#97E1F1;--shiki-default-font-style:italic",[333],{"type":23,"value":334}," string",{"type":18,"tag":181,"props":336,"children":337},{"style":188},[338],{"type":23,"value":339}," }>()\n",{"type":18,"tag":181,"props":341,"children":343},{"class":183,"line":342},6,[344,349,353],{"type":18,"tag":181,"props":345,"children":346},{"style":188},[347],{"type":23,"value":348},"\u003C/",{"type":18,"tag":181,"props":350,"children":351},{"style":194},[352],{"type":23,"value":197},{"type":18,"tag":181,"props":354,"children":355},{"style":188},[356],{"type":23,"value":234},{"type":18,"tag":19,"props":358,"children":359},{},[360],{"type":23,"value":361},"Do note that complex types support is AST-based and therefore not 100% comprehensive. Some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.",{"type":18,"tag":96,"props":363,"children":364},{},[365],{"type":18,"tag":100,"props":366,"children":367},{},[368,370],{"type":23,"value":369},"Details: ",{"type":18,"tag":39,"props":371,"children":374},{"href":372,"rel":373,"target":44},"https://github.com/vuejs/core/pull/8083",[43,43],[375],{"type":23,"value":376},"PR#8083",{"type":18,"tag":138,"props":378,"children":380},{"id":379},"generic-components",[381],{"type":23,"value":382},"Generic Components",{"type":18,"tag":19,"props":384,"children":385},{},[386,388,393,395,401],{"type":23,"value":387},"Components using ",{"type":18,"tag":30,"props":389,"children":391},{"className":390},[],[392],{"type":23,"value":35},{"type":23,"value":394}," can now accept generic type parameters via the ",{"type":18,"tag":30,"props":396,"children":398},{"className":397},[],[399],{"type":23,"value":400},"generic",{"type":23,"value":402}," attribute:",{"type":18,"tag":171,"props":404,"children":406},{"className":173,"code":405,"language":175,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\" generic=\"T\">\n  defineProps\u003C{\n    items: T[]\n    selected: T\n  }>()\n\u003C/script>\n",[407],{"type":18,"tag":30,"props":408,"children":409},{"__ignoreMap":7},[410,471,483,506,523,531],{"type":18,"tag":181,"props":411,"children":412},{"class":183,"line":184},[413,417,421,425,429,433,437,441,445,450,454,458,463,467],{"type":18,"tag":181,"props":414,"children":415},{"style":188},[416],{"type":23,"value":191},{"type":18,"tag":181,"props":418,"children":419},{"style":194},[420],{"type":23,"value":197},{"type":18,"tag":181,"props":422,"children":423},{"style":200},[424],{"type":23,"value":203},{"type":18,"tag":181,"props":426,"children":427},{"style":200},[428],{"type":23,"value":208},{"type":18,"tag":181,"props":430,"children":431},{"style":194},[432],{"type":23,"value":213},{"type":18,"tag":181,"props":434,"children":435},{"style":216},[436],{"type":23,"value":219},{"type":18,"tag":181,"props":438,"children":439},{"style":222},[440],{"type":23,"value":225},{"type":18,"tag":181,"props":442,"children":443},{"style":216},[444],{"type":23,"value":219},{"type":18,"tag":181,"props":446,"children":447},{"style":200},[448],{"type":23,"value":449}," generic",{"type":18,"tag":181,"props":451,"children":452},{"style":194},[453],{"type":23,"value":213},{"type":18,"tag":181,"props":455,"children":456},{"style":216},[457],{"type":23,"value":219},{"type":18,"tag":181,"props":459,"children":460},{"style":310},[461],{"type":23,"value":462},"T",{"type":18,"tag":181,"props":464,"children":465},{"style":216},[466],{"type":23,"value":219},{"type":18,"tag":181,"props":468,"children":469},{"style":188},[470],{"type":23,"value":234},{"type":18,"tag":181,"props":472,"children":473},{"class":183,"line":237},[474,478],{"type":18,"tag":181,"props":475,"children":476},{"style":300},[477],{"type":23,"value":303},{"type":18,"tag":181,"props":479,"children":480},{"style":188},[481],{"type":23,"value":482},"\u003C{\n",{"type":18,"tag":181,"props":484,"children":485},{"class":183,"line":276},[486,491,496,501],{"type":18,"tag":181,"props":487,"children":488},{"style":188},[489],{"type":23,"value":490},"    items",{"type":18,"tag":181,"props":492,"children":493},{"style":194},[494],{"type":23,"value":495},":",{"type":18,"tag":181,"props":497,"children":498},{"style":310},[499],{"type":23,"value":500}," T",{"type":18,"tag":181,"props":502,"children":503},{"style":188},[504],{"type":23,"value":505},"[]\n",{"type":18,"tag":181,"props":507,"children":508},{"class":183,"line":286},[509,514,518],{"type":18,"tag":181,"props":510,"children":511},{"style":188},[512],{"type":23,"value":513},"    selected",{"type":18,"tag":181,"props":515,"children":516},{"style":194},[517],{"type":23,"value":495},{"type":18,"tag":181,"props":519,"children":520},{"style":310},[521],{"type":23,"value":522}," T\n",{"type":18,"tag":181,"props":524,"children":525},{"class":183,"line":296},[526],{"type":18,"tag":181,"props":527,"children":528},{"style":188},[529],{"type":23,"value":530},"  }>()\n",{"type":18,"tag":181,"props":532,"children":533},{"class":183,"line":342},[534,538,542],{"type":18,"tag":181,"props":535,"children":536},{"style":188},[537],{"type":23,"value":348},{"type":18,"tag":181,"props":539,"children":540},{"style":194},[541],{"type":23,"value":197},{"type":18,"tag":181,"props":543,"children":544},{"style":188},[545],{"type":23,"value":234},{"type":18,"tag":19,"props":547,"children":548},{},[549,551,556,558,564,566,572],{"type":23,"value":550},"The value of ",{"type":18,"tag":30,"props":552,"children":554},{"className":553},[],[555],{"type":23,"value":400},{"type":23,"value":557}," works exactly the same as the parameter list between ",{"type":18,"tag":30,"props":559,"children":561},{"className":560},[],[562],{"type":23,"value":563},"\u003C...>",{"type":23,"value":565}," in TypeScript. For example, you can use multiple parameters, ",{"type":18,"tag":30,"props":567,"children":569},{"className":568},[],[570],{"type":23,"value":571},"extends",{"type":23,"value":573}," constraints, default types, and reference imported types:",{"type":18,"tag":171,"props":575,"children":577},{"className":173,"code":576,"language":175,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\" generic=\"T extends string | number, U extends Item\">\n  import type { Item } from './types'\n  defineProps\u003C{\n    id: T\n    list: U[]\n  }>()\n\u003C/script>\n",[578],{"type":18,"tag":30,"props":579,"children":580},{"__ignoreMap":7},[581,678,711,722,738,759,766],{"type":18,"tag":181,"props":582,"children":583},{"class":183,"line":184},[584,588,592,596,600,604,608,612,616,620,624,628,632,637,641,646,651,656,661,665,670,674],{"type":18,"tag":181,"props":585,"children":586},{"style":188},[587],{"type":23,"value":191},{"type":18,"tag":181,"props":589,"children":590},{"style":194},[591],{"type":23,"value":197},{"type":18,"tag":181,"props":593,"children":594},{"style":200},[595],{"type":23,"value":203},{"type":18,"tag":181,"props":597,"children":598},{"style":200},[599],{"type":23,"value":208},{"type":18,"tag":181,"props":601,"children":602},{"style":194},[603],{"type":23,"value":213},{"type":18,"tag":181,"props":605,"children":606},{"style":216},[607],{"type":23,"value":219},{"type":18,"tag":181,"props":609,"children":610},{"style":222},[611],{"type":23,"value":225},{"type":18,"tag":181,"props":613,"children":614},{"style":216},[615],{"type":23,"value":219},{"type":18,"tag":181,"props":617,"children":618},{"style":200},[619],{"type":23,"value":449},{"type":18,"tag":181,"props":621,"children":622},{"style":194},[623],{"type":23,"value":213},{"type":18,"tag":181,"props":625,"children":626},{"style":216},[627],{"type":23,"value":219},{"type":18,"tag":181,"props":629,"children":630},{"style":310},[631],{"type":23,"value":462},{"type":18,"tag":181,"props":633,"children":634},{"style":194},[635],{"type":23,"value":636}," extends",{"type":18,"tag":181,"props":638,"children":639},{"style":331},[640],{"type":23,"value":334},{"type":18,"tag":181,"props":642,"children":643},{"style":194},[644],{"type":23,"value":645}," |",{"type":18,"tag":181,"props":647,"children":648},{"style":331},[649],{"type":23,"value":650}," number",{"type":18,"tag":181,"props":652,"children":653},{"style":188},[654],{"type":23,"value":655},", ",{"type":18,"tag":181,"props":657,"children":658},{"style":310},[659],{"type":23,"value":660},"U",{"type":18,"tag":181,"props":662,"children":663},{"style":194},[664],{"type":23,"value":636},{"type":18,"tag":181,"props":666,"children":667},{"style":310},[668],{"type":23,"value":669}," Item",{"type":18,"tag":181,"props":671,"children":672},{"style":216},[673],{"type":23,"value":219},{"type":18,"tag":181,"props":675,"children":676},{"style":188},[677],{"type":23,"value":234},{"type":18,"tag":181,"props":679,"children":680},{"class":183,"line":237},[681,685,689,694,698,702,707],{"type":18,"tag":181,"props":682,"children":683},{"style":194},[684],{"type":23,"value":243},{"type":18,"tag":181,"props":686,"children":687},{"style":194},[688],{"type":23,"value":248},{"type":18,"tag":181,"props":690,"children":691},{"style":188},[692],{"type":23,"value":693}," { Item } ",{"type":18,"tag":181,"props":695,"children":696},{"style":194},[697],{"type":23,"value":258},{"type":18,"tag":181,"props":699,"children":700},{"style":216},[701],{"type":23,"value":263},{"type":18,"tag":181,"props":703,"children":704},{"style":222},[705],{"type":23,"value":706},"./types",{"type":18,"tag":181,"props":708,"children":709},{"style":216},[710],{"type":23,"value":273},{"type":18,"tag":181,"props":712,"children":713},{"class":183,"line":276},[714,718],{"type":18,"tag":181,"props":715,"children":716},{"style":300},[717],{"type":23,"value":303},{"type":18,"tag":181,"props":719,"children":720},{"style":188},[721],{"type":23,"value":482},{"type":18,"tag":181,"props":723,"children":724},{"class":183,"line":286},[725,730,734],{"type":18,"tag":181,"props":726,"children":727},{"style":188},[728],{"type":23,"value":729},"    id",{"type":18,"tag":181,"props":731,"children":732},{"style":194},[733],{"type":23,"value":495},{"type":18,"tag":181,"props":735,"children":736},{"style":310},[737],{"type":23,"value":522},{"type":18,"tag":181,"props":739,"children":740},{"class":183,"line":296},[741,746,750,755],{"type":18,"tag":181,"props":742,"children":743},{"style":188},[744],{"type":23,"value":745},"    list",{"type":18,"tag":181,"props":747,"children":748},{"style":194},[749],{"type":23,"value":495},{"type":18,"tag":181,"props":751,"children":752},{"style":310},[753],{"type":23,"value":754}," U",{"type":18,"tag":181,"props":756,"children":757},{"style":188},[758],{"type":23,"value":505},{"type":18,"tag":181,"props":760,"children":761},{"class":183,"line":342},[762],{"type":18,"tag":181,"props":763,"children":764},{"style":188},[765],{"type":23,"value":530},{"type":18,"tag":181,"props":767,"children":769},{"class":183,"line":768},7,[770,774,778],{"type":18,"tag":181,"props":771,"children":772},{"style":188},[773],{"type":23,"value":348},{"type":18,"tag":181,"props":775,"children":776},{"style":194},[777],{"type":23,"value":197},{"type":18,"tag":181,"props":779,"children":780},{"style":188},[781],{"type":23,"value":234},{"type":18,"tag":19,"props":783,"children":784},{},[785],{"type":23,"value":786},"This feature previously required explicit opt-in, but is now enabled by default in the latest version of volar / vue-tsc.",{"type":18,"tag":96,"props":788,"children":789},{},[790,802],{"type":18,"tag":100,"props":791,"children":792},{},[793,795],{"type":23,"value":794},"Discussion: ",{"type":18,"tag":39,"props":796,"children":799},{"href":797,"rel":798,"target":44},"https://github.com/vuejs/rfcs/discussions/436",[43,43],[800],{"type":23,"value":801},"RFC#436",{"type":18,"tag":100,"props":803,"children":804},{},[805,807],{"type":23,"value":806},"Related: ",{"type":18,"tag":39,"props":808,"children":811},{"href":809,"rel":810,"target":44},"https://github.com/vuejs/core/pull/7963",[43,43],[812,814,820],{"type":23,"value":813},"generic ",{"type":18,"tag":30,"props":815,"children":817},{"className":816},[],[818],{"type":23,"value":819},"defineComponent()",{"type":23,"value":821}," - PR#7963",{"type":18,"tag":138,"props":823,"children":825},{"id":824},"more-ergonomic-defineemits",[826,828],{"type":23,"value":827},"More Ergonomic ",{"type":18,"tag":30,"props":829,"children":831},{"className":830},[],[832],{"type":23,"value":162},{"type":18,"tag":19,"props":834,"children":835},{},[836,838,843],{"type":23,"value":837},"Previously, the type parameter for ",{"type":18,"tag":30,"props":839,"children":841},{"className":840},[],[842],{"type":23,"value":162},{"type":23,"value":844}," only supports the call signature syntax:",{"type":18,"tag":171,"props":846,"children":849},{"className":847,"code":848,"language":225,"meta":7,"style":7},"language-ts shiki shiki-themes dracula-soft","// BEFORE\nconst emit = defineEmits\u003C{\n  (e: 'foo', id: number): void\n  (e: 'bar', name: string, ...rest: any[]): void\n}>()\n",[850],{"type":18,"tag":30,"props":851,"children":852},{"__ignoreMap":7},[853,861,887,949,1030],{"type":18,"tag":181,"props":854,"children":855},{"class":183,"line":184},[856],{"type":18,"tag":181,"props":857,"children":858},{"style":290},[859],{"type":23,"value":860},"// BEFORE\n",{"type":18,"tag":181,"props":862,"children":863},{"class":183,"line":237},[864,869,874,878,883],{"type":18,"tag":181,"props":865,"children":866},{"style":194},[867],{"type":23,"value":868},"const",{"type":18,"tag":181,"props":870,"children":871},{"style":188},[872],{"type":23,"value":873}," emit ",{"type":18,"tag":181,"props":875,"children":876},{"style":194},[877],{"type":23,"value":213},{"type":18,"tag":181,"props":879,"children":880},{"style":300},[881],{"type":23,"value":882}," defineEmits",{"type":18,"tag":181,"props":884,"children":885},{"style":188},[886],{"type":23,"value":482},{"type":18,"tag":181,"props":888,"children":889},{"class":183,"line":276},[890,895,900,904,908,913,918,922,927,931,935,940,944],{"type":18,"tag":181,"props":891,"children":892},{"style":188},[893],{"type":23,"value":894},"  (",{"type":18,"tag":181,"props":896,"children":897},{"style":310},[898],{"type":23,"value":899},"e",{"type":18,"tag":181,"props":901,"children":902},{"style":194},[903],{"type":23,"value":495},{"type":18,"tag":181,"props":905,"children":906},{"style":216},[907],{"type":23,"value":263},{"type":18,"tag":181,"props":909,"children":910},{"style":222},[911],{"type":23,"value":912},"foo",{"type":18,"tag":181,"props":914,"children":915},{"style":216},[916],{"type":23,"value":917},"'",{"type":18,"tag":181,"props":919,"children":920},{"style":188},[921],{"type":23,"value":655},{"type":18,"tag":181,"props":923,"children":924},{"style":310},[925],{"type":23,"value":926},"id",{"type":18,"tag":181,"props":928,"children":929},{"style":194},[930],{"type":23,"value":495},{"type":18,"tag":181,"props":932,"children":933},{"style":331},[934],{"type":23,"value":650},{"type":18,"tag":181,"props":936,"children":937},{"style":188},[938],{"type":23,"value":939},")",{"type":18,"tag":181,"props":941,"children":942},{"style":194},[943],{"type":23,"value":495},{"type":18,"tag":181,"props":945,"children":946},{"style":331},[947],{"type":23,"value":948}," void\n",{"type":18,"tag":181,"props":950,"children":951},{"class":183,"line":286},[952,956,960,964,968,973,977,981,986,990,994,998,1003,1008,1012,1017,1022,1026],{"type":18,"tag":181,"props":953,"children":954},{"style":188},[955],{"type":23,"value":894},{"type":18,"tag":181,"props":957,"children":958},{"style":310},[959],{"type":23,"value":899},{"type":18,"tag":181,"props":961,"children":962},{"style":194},[963],{"type":23,"value":495},{"type":18,"tag":181,"props":965,"children":966},{"style":216},[967],{"type":23,"value":263},{"type":18,"tag":181,"props":969,"children":970},{"style":222},[971],{"type":23,"value":972},"bar",{"type":18,"tag":181,"props":974,"children":975},{"style":216},[976],{"type":23,"value":917},{"type":18,"tag":181,"props":978,"children":979},{"style":188},[980],{"type":23,"value":655},{"type":18,"tag":181,"props":982,"children":983},{"style":310},[984],{"type":23,"value":985},"name",{"type":18,"tag":181,"props":987,"children":988},{"style":194},[989],{"type":23,"value":495},{"type":18,"tag":181,"props":991,"children":992},{"style":331},[993],{"type":23,"value":334},{"type":18,"tag":181,"props":995,"children":996},{"style":188},[997],{"type":23,"value":655},{"type":18,"tag":181,"props":999,"children":1000},{"style":194},[1001],{"type":23,"value":1002},"...",{"type":18,"tag":181,"props":1004,"children":1005},{"style":310},[1006],{"type":23,"value":1007},"rest",{"type":18,"tag":181,"props":1009,"children":1010},{"style":194},[1011],{"type":23,"value":495},{"type":18,"tag":181,"props":1013,"children":1014},{"style":331},[1015],{"type":23,"value":1016}," any",{"type":18,"tag":181,"props":1018,"children":1019},{"style":188},[1020],{"type":23,"value":1021},"[])",{"type":18,"tag":181,"props":1023,"children":1024},{"style":194},[1025],{"type":23,"value":495},{"type":18,"tag":181,"props":1027,"children":1028},{"style":331},[1029],{"type":23,"value":948},{"type":18,"tag":181,"props":1031,"children":1032},{"class":183,"line":296},[1033],{"type":18,"tag":181,"props":1034,"children":1035},{"style":188},[1036],{"type":23,"value":1037},"}>()\n",{"type":18,"tag":19,"props":1039,"children":1040},{},[1041,1043,1049],{"type":23,"value":1042},"The type matches the return type for ",{"type":18,"tag":30,"props":1044,"children":1046},{"className":1045},[],[1047],{"type":23,"value":1048},"emit",{"type":23,"value":1050},", but is a bit verbose and awkward to write. 3.3 introduces a more ergonomic way of declaring emits with types:",{"type":18,"tag":171,"props":1052,"children":1054},{"className":847,"code":1053,"language":225,"meta":7,"style":7},"// AFTER\nconst emit = defineEmits\u003C{\n  foo: [id: number]\n  bar: [name: string, ...rest: any[]]\n}>()\n",[1055],{"type":18,"tag":30,"props":1056,"children":1057},{"__ignoreMap":7},[1058,1066,1089,1116,1161],{"type":18,"tag":181,"props":1059,"children":1060},{"class":183,"line":184},[1061],{"type":18,"tag":181,"props":1062,"children":1063},{"style":290},[1064],{"type":23,"value":1065},"// AFTER\n",{"type":18,"tag":181,"props":1067,"children":1068},{"class":183,"line":237},[1069,1073,1077,1081,1085],{"type":18,"tag":181,"props":1070,"children":1071},{"style":194},[1072],{"type":23,"value":868},{"type":18,"tag":181,"props":1074,"children":1075},{"style":188},[1076],{"type":23,"value":873},{"type":18,"tag":181,"props":1078,"children":1079},{"style":194},[1080],{"type":23,"value":213},{"type":18,"tag":181,"props":1082,"children":1083},{"style":300},[1084],{"type":23,"value":882},{"type":18,"tag":181,"props":1086,"children":1087},{"style":188},[1088],{"type":23,"value":482},{"type":18,"tag":181,"props":1090,"children":1091},{"class":183,"line":276},[1092,1097,1101,1106,1111],{"type":18,"tag":181,"props":1093,"children":1094},{"style":188},[1095],{"type":23,"value":1096},"  foo",{"type":18,"tag":181,"props":1098,"children":1099},{"style":194},[1100],{"type":23,"value":495},{"type":18,"tag":181,"props":1102,"children":1103},{"style":188},[1104],{"type":23,"value":1105}," [id: ",{"type":18,"tag":181,"props":1107,"children":1108},{"style":331},[1109],{"type":23,"value":1110},"number",{"type":18,"tag":181,"props":1112,"children":1113},{"style":188},[1114],{"type":23,"value":1115},"]\n",{"type":18,"tag":181,"props":1117,"children":1118},{"class":183,"line":286},[1119,1124,1128,1133,1138,1142,1146,1151,1156],{"type":18,"tag":181,"props":1120,"children":1121},{"style":188},[1122],{"type":23,"value":1123},"  bar",{"type":18,"tag":181,"props":1125,"children":1126},{"style":194},[1127],{"type":23,"value":495},{"type":18,"tag":181,"props":1129,"children":1130},{"style":188},[1131],{"type":23,"value":1132}," [name: ",{"type":18,"tag":181,"props":1134,"children":1135},{"style":331},[1136],{"type":23,"value":1137},"string",{"type":18,"tag":181,"props":1139,"children":1140},{"style":188},[1141],{"type":23,"value":655},{"type":18,"tag":181,"props":1143,"children":1144},{"style":194},[1145],{"type":23,"value":1002},{"type":18,"tag":181,"props":1147,"children":1148},{"style":188},[1149],{"type":23,"value":1150},"rest: ",{"type":18,"tag":181,"props":1152,"children":1153},{"style":331},[1154],{"type":23,"value":1155},"any",{"type":18,"tag":181,"props":1157,"children":1158},{"style":188},[1159],{"type":23,"value":1160},"[]]\n",{"type":18,"tag":181,"props":1162,"children":1163},{"class":183,"line":296},[1164],{"type":18,"tag":181,"props":1165,"children":1166},{"style":188},[1167],{"type":23,"value":1037},{"type":18,"tag":19,"props":1169,"children":1170},{},[1171,1173,1180],{"type":23,"value":1172},"In the type literal, the key is the event name and the value is an array type specifying the additional arguments. Although not required, you can use the ",{"type":18,"tag":39,"props":1174,"children":1177},{"href":1175,"rel":1176,"target":44},"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#labeled-tuple-elements",[43,43],[1178],{"type":23,"value":1179},"labeled tuple elements",{"type":23,"value":1181}," for explicitness, like in the example above.",{"type":18,"tag":19,"props":1183,"children":1184},{},[1185],{"type":23,"value":1186},"The call signature syntax is still supported.",{"type":18,"tag":138,"props":1188,"children":1190},{"id":1189},"typed-slots-with-defineslots",[1191,1193],{"type":23,"value":1192},"Typed Slots with ",{"type":18,"tag":30,"props":1194,"children":1196},{"className":1195},[],[1197],{"type":23,"value":1198},"defineSlots",{"type":18,"tag":19,"props":1200,"children":1201},{},[1202,1204,1209],{"type":23,"value":1203},"The new ",{"type":18,"tag":30,"props":1205,"children":1207},{"className":1206},[],[1208],{"type":23,"value":1198},{"type":23,"value":1210}," macro can be used to declare expected slots and their respective expected slot props:",{"type":18,"tag":171,"props":1212,"children":1214},{"className":173,"code":1213,"language":175,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\">\n  defineSlots\u003C{\n    default?: (props: { msg: string }) => any\n    item?: (props: { id: number }) => any\n  }>()\n\u003C/script>\n",[1215],{"type":18,"tag":30,"props":1216,"children":1217},{"__ignoreMap":7},[1218,1257,1269,1323,1372,1379],{"type":18,"tag":181,"props":1219,"children":1220},{"class":183,"line":184},[1221,1225,1229,1233,1237,1241,1245,1249,1253],{"type":18,"tag":181,"props":1222,"children":1223},{"style":188},[1224],{"type":23,"value":191},{"type":18,"tag":181,"props":1226,"children":1227},{"style":194},[1228],{"type":23,"value":197},{"type":18,"tag":181,"props":1230,"children":1231},{"style":200},[1232],{"type":23,"value":203},{"type":18,"tag":181,"props":1234,"children":1235},{"style":200},[1236],{"type":23,"value":208},{"type":18,"tag":181,"props":1238,"children":1239},{"style":194},[1240],{"type":23,"value":213},{"type":18,"tag":181,"props":1242,"children":1243},{"style":216},[1244],{"type":23,"value":219},{"type":18,"tag":181,"props":1246,"children":1247},{"style":222},[1248],{"type":23,"value":225},{"type":18,"tag":181,"props":1250,"children":1251},{"style":216},[1252],{"type":23,"value":219},{"type":18,"tag":181,"props":1254,"children":1255},{"style":188},[1256],{"type":23,"value":234},{"type":18,"tag":181,"props":1258,"children":1259},{"class":183,"line":237},[1260,1265],{"type":18,"tag":181,"props":1261,"children":1262},{"style":300},[1263],{"type":23,"value":1264},"  defineSlots",{"type":18,"tag":181,"props":1266,"children":1267},{"style":188},[1268],{"type":23,"value":482},{"type":18,"tag":181,"props":1270,"children":1271},{"class":183,"line":276},[1272,1277,1281,1286,1291,1295,1300,1304,1308,1313,1318],{"type":18,"tag":181,"props":1273,"children":1274},{"style":300},[1275],{"type":23,"value":1276},"    default",{"type":18,"tag":181,"props":1278,"children":1279},{"style":194},[1280],{"type":23,"value":328},{"type":18,"tag":181,"props":1282,"children":1283},{"style":188},[1284],{"type":23,"value":1285}," (",{"type":18,"tag":181,"props":1287,"children":1288},{"style":310},[1289],{"type":23,"value":1290},"props",{"type":18,"tag":181,"props":1292,"children":1293},{"style":194},[1294],{"type":23,"value":495},{"type":18,"tag":181,"props":1296,"children":1297},{"style":188},[1298],{"type":23,"value":1299}," { msg",{"type":18,"tag":181,"props":1301,"children":1302},{"style":194},[1303],{"type":23,"value":495},{"type":18,"tag":181,"props":1305,"children":1306},{"style":331},[1307],{"type":23,"value":334},{"type":18,"tag":181,"props":1309,"children":1310},{"style":188},[1311],{"type":23,"value":1312}," }) ",{"type":18,"tag":181,"props":1314,"children":1315},{"style":194},[1316],{"type":23,"value":1317},"=>",{"type":18,"tag":181,"props":1319,"children":1320},{"style":331},[1321],{"type":23,"value":1322}," any\n",{"type":18,"tag":181,"props":1324,"children":1325},{"class":183,"line":286},[1326,1331,1335,1339,1343,1347,1352,1356,1360,1364,1368],{"type":18,"tag":181,"props":1327,"children":1328},{"style":300},[1329],{"type":23,"value":1330},"    item",{"type":18,"tag":181,"props":1332,"children":1333},{"style":194},[1334],{"type":23,"value":328},{"type":18,"tag":181,"props":1336,"children":1337},{"style":188},[1338],{"type":23,"value":1285},{"type":18,"tag":181,"props":1340,"children":1341},{"style":310},[1342],{"type":23,"value":1290},{"type":18,"tag":181,"props":1344,"children":1345},{"style":194},[1346],{"type":23,"value":495},{"type":18,"tag":181,"props":1348,"children":1349},{"style":188},[1350],{"type":23,"value":1351}," { id",{"type":18,"tag":181,"props":1353,"children":1354},{"style":194},[1355],{"type":23,"value":495},{"type":18,"tag":181,"props":1357,"children":1358},{"style":331},[1359],{"type":23,"value":650},{"type":18,"tag":181,"props":1361,"children":1362},{"style":188},[1363],{"type":23,"value":1312},{"type":18,"tag":181,"props":1365,"children":1366},{"style":194},[1367],{"type":23,"value":1317},{"type":18,"tag":181,"props":1369,"children":1370},{"style":331},[1371],{"type":23,"value":1322},{"type":18,"tag":181,"props":1373,"children":1374},{"class":183,"line":296},[1375],{"type":18,"tag":181,"props":1376,"children":1377},{"style":188},[1378],{"type":23,"value":530},{"type":18,"tag":181,"props":1380,"children":1381},{"class":183,"line":342},[1382,1386,1390],{"type":18,"tag":181,"props":1383,"children":1384},{"style":188},[1385],{"type":23,"value":348},{"type":18,"tag":181,"props":1387,"children":1388},{"style":194},[1389],{"type":23,"value":197},{"type":18,"tag":181,"props":1391,"children":1392},{"style":188},[1393],{"type":23,"value":234},{"type":18,"tag":19,"props":1395,"children":1396},{},[1397,1403,1405,1410,1412,1418],{"type":18,"tag":30,"props":1398,"children":1400},{"className":1399},[],[1401],{"type":23,"value":1402},"defineSlots()",{"type":23,"value":1404}," only accepts a type parameter and no runtime arguments. The type parameter should be a type literal where the property key is the slot name, and the value is a slot function. The first argument of the function is the props the slot expects to receive, and its type will be used for slot props in the template. The returning value of ",{"type":18,"tag":30,"props":1406,"children":1408},{"className":1407},[],[1409],{"type":23,"value":1198},{"type":23,"value":1411}," is the same slots object returned from ",{"type":18,"tag":30,"props":1413,"children":1415},{"className":1414},[],[1416],{"type":23,"value":1417},"useSlots",{"type":23,"value":85},{"type":18,"tag":19,"props":1420,"children":1421},{},[1422],{"type":23,"value":1423},"Some current limitations:",{"type":18,"tag":96,"props":1425,"children":1426},{},[1427,1432],{"type":18,"tag":100,"props":1428,"children":1429},{},[1430],{"type":23,"value":1431},"Required slots checking is not yet implemented in volar / vue-tsc.",{"type":18,"tag":100,"props":1433,"children":1434},{},[1435,1437,1442],{"type":23,"value":1436},"Slot function return type is currently ignored and can be ",{"type":18,"tag":30,"props":1438,"children":1440},{"className":1439},[],[1441],{"type":23,"value":1155},{"type":23,"value":1443},", but we may leverage it for slot content checking in the future.",{"type":18,"tag":19,"props":1445,"children":1446},{},[1447,1449,1455,1457,1463,1465,1471],{"type":23,"value":1448},"There is also a corresponding ",{"type":18,"tag":30,"props":1450,"children":1452},{"className":1451},[],[1453],{"type":23,"value":1454},"slots",{"type":23,"value":1456}," option for ",{"type":18,"tag":30,"props":1458,"children":1460},{"className":1459},[],[1461],{"type":23,"value":1462},"defineComponent",{"type":23,"value":1464}," usage. Both APIs have no runtime implications and serve purely as type hints for IDEs and ",{"type":18,"tag":30,"props":1466,"children":1468},{"className":1467},[],[1469],{"type":23,"value":1470},"vue-tsc",{"type":23,"value":85},{"type":18,"tag":96,"props":1473,"children":1474},{},[1475],{"type":18,"tag":100,"props":1476,"children":1477},{},[1478,1479],{"type":23,"value":369},{"type":18,"tag":39,"props":1480,"children":1483},{"href":1481,"rel":1482,"target":44},"https://github.com/vuejs/core/issues/7982",[43,43],[1484],{"type":23,"value":1485},"PR#7982",{"type":18,"tag":126,"props":1487,"children":1489},{"id":1488},"experimental-features",[1490],{"type":23,"value":1491},"Experimental Features",{"type":18,"tag":138,"props":1493,"children":1495},{"id":1494},"reactive-props-destructure",[1496],{"type":23,"value":1497},"Reactive Props Destructure",{"type":18,"tag":19,"props":1499,"children":1500},{},[1501],{"type":23,"value":1502},"Previously part of the now-dropped Reactivity Transform, reactive props destructure has been split into a separate feature.",{"type":18,"tag":19,"props":1504,"children":1505},{},[1506],{"type":23,"value":1507},"The feature allows destructured props to retain reactivity, and provides a more ergonomic way to declare props default values:",{"type":18,"tag":171,"props":1509,"children":1511},{"className":173,"code":1510,"language":175,"meta":7,"style":7},"\u003Cscript setup>\n  import { watchEffect } from 'vue'\n\n  const { msg = 'hello' } = defineProps(['msg'])\n\n  watchEffect(() => {\n    // accessing `msg` in watchers and computed getters\n    // tracks it as a dependency, just like accessing `props.msg`\n    console.log(`msg is: ${msg}`)\n  })\n\u003C/script>\n\n\u003Ctemplate>{{ msg }}\u003C/template>\n",[1512],{"type":18,"tag":30,"props":1513,"children":1514},{"__ignoreMap":7},[1515,1534,1562,1569,1636,1643,1665,1673,1682,1730,1739,1755,1763],{"type":18,"tag":181,"props":1516,"children":1517},{"class":183,"line":184},[1518,1522,1526,1530],{"type":18,"tag":181,"props":1519,"children":1520},{"style":188},[1521],{"type":23,"value":191},{"type":18,"tag":181,"props":1523,"children":1524},{"style":194},[1525],{"type":23,"value":197},{"type":18,"tag":181,"props":1527,"children":1528},{"style":200},[1529],{"type":23,"value":203},{"type":18,"tag":181,"props":1531,"children":1532},{"style":188},[1533],{"type":23,"value":234},{"type":18,"tag":181,"props":1535,"children":1536},{"class":183,"line":237},[1537,1541,1546,1550,1554,1558],{"type":18,"tag":181,"props":1538,"children":1539},{"style":194},[1540],{"type":23,"value":243},{"type":18,"tag":181,"props":1542,"children":1543},{"style":188},[1544],{"type":23,"value":1545}," { watchEffect } ",{"type":18,"tag":181,"props":1547,"children":1548},{"style":194},[1549],{"type":23,"value":258},{"type":18,"tag":181,"props":1551,"children":1552},{"style":216},[1553],{"type":23,"value":263},{"type":18,"tag":181,"props":1555,"children":1556},{"style":222},[1557],{"type":23,"value":175},{"type":18,"tag":181,"props":1559,"children":1560},{"style":216},[1561],{"type":23,"value":273},{"type":18,"tag":181,"props":1563,"children":1564},{"class":183,"line":276},[1565],{"type":18,"tag":181,"props":1566,"children":1567},{"emptyLinePlaceholder":280},[1568],{"type":23,"value":283},{"type":18,"tag":181,"props":1570,"children":1571},{"class":183,"line":286},[1572,1577,1582,1586,1590,1595,1599,1604,1608,1613,1618,1622,1627,1631],{"type":18,"tag":181,"props":1573,"children":1574},{"style":194},[1575],{"type":23,"value":1576},"  const",{"type":18,"tag":181,"props":1578,"children":1579},{"style":188},[1580],{"type":23,"value":1581}," { msg ",{"type":18,"tag":181,"props":1583,"children":1584},{"style":194},[1585],{"type":23,"value":213},{"type":18,"tag":181,"props":1587,"children":1588},{"style":216},[1589],{"type":23,"value":263},{"type":18,"tag":181,"props":1591,"children":1592},{"style":222},[1593],{"type":23,"value":1594},"hello",{"type":18,"tag":181,"props":1596,"children":1597},{"style":216},[1598],{"type":23,"value":917},{"type":18,"tag":181,"props":1600,"children":1601},{"style":188},[1602],{"type":23,"value":1603}," } ",{"type":18,"tag":181,"props":1605,"children":1606},{"style":194},[1607],{"type":23,"value":213},{"type":18,"tag":181,"props":1609,"children":1610},{"style":300},[1611],{"type":23,"value":1612}," defineProps",{"type":18,"tag":181,"props":1614,"children":1615},{"style":188},[1616],{"type":23,"value":1617},"([",{"type":18,"tag":181,"props":1619,"children":1620},{"style":216},[1621],{"type":23,"value":917},{"type":18,"tag":181,"props":1623,"children":1624},{"style":222},[1625],{"type":23,"value":1626},"msg",{"type":18,"tag":181,"props":1628,"children":1629},{"style":216},[1630],{"type":23,"value":917},{"type":18,"tag":181,"props":1632,"children":1633},{"style":188},[1634],{"type":23,"value":1635},"])\n",{"type":18,"tag":181,"props":1637,"children":1638},{"class":183,"line":296},[1639],{"type":18,"tag":181,"props":1640,"children":1641},{"emptyLinePlaceholder":280},[1642],{"type":23,"value":283},{"type":18,"tag":181,"props":1644,"children":1645},{"class":183,"line":342},[1646,1651,1656,1660],{"type":18,"tag":181,"props":1647,"children":1648},{"style":300},[1649],{"type":23,"value":1650},"  watchEffect",{"type":18,"tag":181,"props":1652,"children":1653},{"style":188},[1654],{"type":23,"value":1655},"(() ",{"type":18,"tag":181,"props":1657,"children":1658},{"style":194},[1659],{"type":23,"value":1317},{"type":18,"tag":181,"props":1661,"children":1662},{"style":188},[1663],{"type":23,"value":1664}," {\n",{"type":18,"tag":181,"props":1666,"children":1667},{"class":183,"line":768},[1668],{"type":18,"tag":181,"props":1669,"children":1670},{"style":290},[1671],{"type":23,"value":1672},"    // accessing `msg` in watchers and computed getters\n",{"type":18,"tag":181,"props":1674,"children":1676},{"class":183,"line":1675},8,[1677],{"type":18,"tag":181,"props":1678,"children":1679},{"style":290},[1680],{"type":23,"value":1681},"    // tracks it as a dependency, just like accessing `props.msg`\n",{"type":18,"tag":181,"props":1683,"children":1685},{"class":183,"line":1684},9,[1686,1691,1696,1701,1706,1711,1715,1720,1725],{"type":18,"tag":181,"props":1687,"children":1688},{"style":188},[1689],{"type":23,"value":1690},"    console.",{"type":18,"tag":181,"props":1692,"children":1693},{"style":300},[1694],{"type":23,"value":1695},"log",{"type":18,"tag":181,"props":1697,"children":1698},{"style":188},[1699],{"type":23,"value":1700},"(",{"type":18,"tag":181,"props":1702,"children":1703},{"style":222},[1704],{"type":23,"value":1705},"`msg is: ",{"type":18,"tag":181,"props":1707,"children":1708},{"style":194},[1709],{"type":23,"value":1710},"${",{"type":18,"tag":181,"props":1712,"children":1713},{"style":188},[1714],{"type":23,"value":1626},{"type":18,"tag":181,"props":1716,"children":1717},{"style":194},[1718],{"type":23,"value":1719},"}",{"type":18,"tag":181,"props":1721,"children":1722},{"style":222},[1723],{"type":23,"value":1724},"`",{"type":18,"tag":181,"props":1726,"children":1727},{"style":188},[1728],{"type":23,"value":1729},")\n",{"type":18,"tag":181,"props":1731,"children":1733},{"class":183,"line":1732},10,[1734],{"type":18,"tag":181,"props":1735,"children":1736},{"style":188},[1737],{"type":23,"value":1738},"  })\n",{"type":18,"tag":181,"props":1740,"children":1742},{"class":183,"line":1741},11,[1743,1747,1751],{"type":18,"tag":181,"props":1744,"children":1745},{"style":188},[1746],{"type":23,"value":348},{"type":18,"tag":181,"props":1748,"children":1749},{"style":194},[1750],{"type":23,"value":197},{"type":18,"tag":181,"props":1752,"children":1753},{"style":188},[1754],{"type":23,"value":234},{"type":18,"tag":181,"props":1756,"children":1758},{"class":183,"line":1757},12,[1759],{"type":18,"tag":181,"props":1760,"children":1761},{"emptyLinePlaceholder":280},[1762],{"type":23,"value":283},{"type":18,"tag":181,"props":1764,"children":1766},{"class":183,"line":1765},13,[1767,1771,1776,1781,1786,1791,1796,1800,1804],{"type":18,"tag":181,"props":1768,"children":1769},{"style":188},[1770],{"type":23,"value":191},{"type":18,"tag":181,"props":1772,"children":1773},{"style":194},[1774],{"type":23,"value":1775},"template",{"type":18,"tag":181,"props":1777,"children":1778},{"style":188},[1779],{"type":23,"value":1780},">",{"type":18,"tag":181,"props":1782,"children":1783},{"style":194},[1784],{"type":23,"value":1785},"{{",{"type":18,"tag":181,"props":1787,"children":1788},{"style":188},[1789],{"type":23,"value":1790}," msg ",{"type":18,"tag":181,"props":1792,"children":1793},{"style":194},[1794],{"type":23,"value":1795},"}}",{"type":18,"tag":181,"props":1797,"children":1798},{"style":188},[1799],{"type":23,"value":348},{"type":18,"tag":181,"props":1801,"children":1802},{"style":194},[1803],{"type":23,"value":1775},{"type":18,"tag":181,"props":1805,"children":1806},{"style":188},[1807],{"type":23,"value":234},{"type":18,"tag":19,"props":1809,"children":1810},{},[1811],{"type":23,"value":1812},"This feature is experimental and requires explicit opt-in.",{"type":18,"tag":96,"props":1814,"children":1815},{},[1816],{"type":18,"tag":100,"props":1817,"children":1818},{},[1819,1820],{"type":23,"value":369},{"type":18,"tag":39,"props":1821,"children":1824},{"href":1822,"rel":1823,"target":44},"https://github.com/vuejs/rfcs/discussions/502",[43,43],[1825],{"type":23,"value":1826},"RFC#502",{"type":18,"tag":138,"props":1828,"children":1830},{"id":1829},"definemodel",[1831],{"type":18,"tag":30,"props":1832,"children":1834},{"className":1833},[],[1835],{"type":23,"value":1836},"defineModel",{"type":18,"tag":19,"props":1838,"children":1839},{},[1840,1842,1848,1850,1856],{"type":23,"value":1841},"Previously, for a component to support two-way binding with ",{"type":18,"tag":30,"props":1843,"children":1845},{"className":1844},[],[1846],{"type":23,"value":1847},"v-model",{"type":23,"value":1849},", it needs to (1) declare a prop and (2) emit a corresponding ",{"type":18,"tag":30,"props":1851,"children":1853},{"className":1852},[],[1854],{"type":23,"value":1855},"update:propName",{"type":23,"value":1857}," event when it intends to update the prop:",{"type":18,"tag":171,"props":1859,"children":1861},{"className":173,"code":1860,"language":175,"meta":7,"style":7},"\u003C!-- BEFORE -->\n\u003Cscript setup>\n  const props = defineProps(['modelValue'])\n  const emit = defineEmits(['update:modelValue'])\n  console.log(props.modelValue)\n\n  function onInput(e) {\n    emit('update:modelValue', e.target.value)\n  }\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cinput :value=\"modelValue\" @input=\"onInput\" />\n\u003C/template>\n",[1862],{"type":18,"tag":30,"props":1863,"children":1864},{"__ignoreMap":7},[1865,1873,1892,1933,1973,1990,1997,2023,2052,2060,2075,2082,2097,2167],{"type":18,"tag":181,"props":1866,"children":1867},{"class":183,"line":184},[1868],{"type":18,"tag":181,"props":1869,"children":1870},{"style":290},[1871],{"type":23,"value":1872},"\u003C!-- BEFORE -->\n",{"type":18,"tag":181,"props":1874,"children":1875},{"class":183,"line":237},[1876,1880,1884,1888],{"type":18,"tag":181,"props":1877,"children":1878},{"style":188},[1879],{"type":23,"value":191},{"type":18,"tag":181,"props":1881,"children":1882},{"style":194},[1883],{"type":23,"value":197},{"type":18,"tag":181,"props":1885,"children":1886},{"style":200},[1887],{"type":23,"value":203},{"type":18,"tag":181,"props":1889,"children":1890},{"style":188},[1891],{"type":23,"value":234},{"type":18,"tag":181,"props":1893,"children":1894},{"class":183,"line":276},[1895,1899,1904,1908,1912,1916,1920,1925,1929],{"type":18,"tag":181,"props":1896,"children":1897},{"style":194},[1898],{"type":23,"value":1576},{"type":18,"tag":181,"props":1900,"children":1901},{"style":188},[1902],{"type":23,"value":1903}," props ",{"type":18,"tag":181,"props":1905,"children":1906},{"style":194},[1907],{"type":23,"value":213},{"type":18,"tag":181,"props":1909,"children":1910},{"style":300},[1911],{"type":23,"value":1612},{"type":18,"tag":181,"props":1913,"children":1914},{"style":188},[1915],{"type":23,"value":1617},{"type":18,"tag":181,"props":1917,"children":1918},{"style":216},[1919],{"type":23,"value":917},{"type":18,"tag":181,"props":1921,"children":1922},{"style":222},[1923],{"type":23,"value":1924},"modelValue",{"type":18,"tag":181,"props":1926,"children":1927},{"style":216},[1928],{"type":23,"value":917},{"type":18,"tag":181,"props":1930,"children":1931},{"style":188},[1932],{"type":23,"value":1635},{"type":18,"tag":181,"props":1934,"children":1935},{"class":183,"line":286},[1936,1940,1944,1948,1952,1956,1960,1965,1969],{"type":18,"tag":181,"props":1937,"children":1938},{"style":194},[1939],{"type":23,"value":1576},{"type":18,"tag":181,"props":1941,"children":1942},{"style":188},[1943],{"type":23,"value":873},{"type":18,"tag":181,"props":1945,"children":1946},{"style":194},[1947],{"type":23,"value":213},{"type":18,"tag":181,"props":1949,"children":1950},{"style":300},[1951],{"type":23,"value":882},{"type":18,"tag":181,"props":1953,"children":1954},{"style":188},[1955],{"type":23,"value":1617},{"type":18,"tag":181,"props":1957,"children":1958},{"style":216},[1959],{"type":23,"value":917},{"type":18,"tag":181,"props":1961,"children":1962},{"style":222},[1963],{"type":23,"value":1964},"update:modelValue",{"type":18,"tag":181,"props":1966,"children":1967},{"style":216},[1968],{"type":23,"value":917},{"type":18,"tag":181,"props":1970,"children":1971},{"style":188},[1972],{"type":23,"value":1635},{"type":18,"tag":181,"props":1974,"children":1975},{"class":183,"line":296},[1976,1981,1985],{"type":18,"tag":181,"props":1977,"children":1978},{"style":188},[1979],{"type":23,"value":1980},"  console.",{"type":18,"tag":181,"props":1982,"children":1983},{"style":300},[1984],{"type":23,"value":1695},{"type":18,"tag":181,"props":1986,"children":1987},{"style":188},[1988],{"type":23,"value":1989},"(props.modelValue)\n",{"type":18,"tag":181,"props":1991,"children":1992},{"class":183,"line":342},[1993],{"type":18,"tag":181,"props":1994,"children":1995},{"emptyLinePlaceholder":280},[1996],{"type":23,"value":283},{"type":18,"tag":181,"props":1998,"children":1999},{"class":183,"line":768},[2000,2005,2010,2014,2018],{"type":18,"tag":181,"props":2001,"children":2002},{"style":194},[2003],{"type":23,"value":2004},"  function",{"type":18,"tag":181,"props":2006,"children":2007},{"style":300},[2008],{"type":23,"value":2009}," onInput",{"type":18,"tag":181,"props":2011,"children":2012},{"style":188},[2013],{"type":23,"value":1700},{"type":18,"tag":181,"props":2015,"children":2016},{"style":310},[2017],{"type":23,"value":899},{"type":18,"tag":181,"props":2019,"children":2020},{"style":188},[2021],{"type":23,"value":2022},") {\n",{"type":18,"tag":181,"props":2024,"children":2025},{"class":183,"line":1675},[2026,2031,2035,2039,2043,2047],{"type":18,"tag":181,"props":2027,"children":2028},{"style":300},[2029],{"type":23,"value":2030},"    emit",{"type":18,"tag":181,"props":2032,"children":2033},{"style":188},[2034],{"type":23,"value":1700},{"type":18,"tag":181,"props":2036,"children":2037},{"style":216},[2038],{"type":23,"value":917},{"type":18,"tag":181,"props":2040,"children":2041},{"style":222},[2042],{"type":23,"value":1964},{"type":18,"tag":181,"props":2044,"children":2045},{"style":216},[2046],{"type":23,"value":917},{"type":18,"tag":181,"props":2048,"children":2049},{"style":188},[2050],{"type":23,"value":2051},", e.target.value)\n",{"type":18,"tag":181,"props":2053,"children":2054},{"class":183,"line":1684},[2055],{"type":18,"tag":181,"props":2056,"children":2057},{"style":188},[2058],{"type":23,"value":2059},"  }\n",{"type":18,"tag":181,"props":2061,"children":2062},{"class":183,"line":1732},[2063,2067,2071],{"type":18,"tag":181,"props":2064,"children":2065},{"style":188},[2066],{"type":23,"value":348},{"type":18,"tag":181,"props":2068,"children":2069},{"style":194},[2070],{"type":23,"value":197},{"type":18,"tag":181,"props":2072,"children":2073},{"style":188},[2074],{"type":23,"value":234},{"type":18,"tag":181,"props":2076,"children":2077},{"class":183,"line":1741},[2078],{"type":18,"tag":181,"props":2079,"children":2080},{"emptyLinePlaceholder":280},[2081],{"type":23,"value":283},{"type":18,"tag":181,"props":2083,"children":2084},{"class":183,"line":1757},[2085,2089,2093],{"type":18,"tag":181,"props":2086,"children":2087},{"style":188},[2088],{"type":23,"value":191},{"type":18,"tag":181,"props":2090,"children":2091},{"style":194},[2092],{"type":23,"value":1775},{"type":18,"tag":181,"props":2094,"children":2095},{"style":188},[2096],{"type":23,"value":234},{"type":18,"tag":181,"props":2098,"children":2099},{"class":183,"line":1765},[2100,2105,2110,2115,2120,2124,2128,2132,2136,2141,2145,2149,2153,2158,2162],{"type":18,"tag":181,"props":2101,"children":2102},{"style":188},[2103],{"type":23,"value":2104},"  \u003C",{"type":18,"tag":181,"props":2106,"children":2107},{"style":194},[2108],{"type":23,"value":2109},"input",{"type":18,"tag":181,"props":2111,"children":2112},{"style":188},[2113],{"type":23,"value":2114}," :",{"type":18,"tag":181,"props":2116,"children":2117},{"style":200},[2118],{"type":23,"value":2119},"value",{"type":18,"tag":181,"props":2121,"children":2122},{"style":194},[2123],{"type":23,"value":213},{"type":18,"tag":181,"props":2125,"children":2126},{"style":216},[2127],{"type":23,"value":219},{"type":18,"tag":181,"props":2129,"children":2130},{"style":188},[2131],{"type":23,"value":1924},{"type":18,"tag":181,"props":2133,"children":2134},{"style":216},[2135],{"type":23,"value":219},{"type":18,"tag":181,"props":2137,"children":2138},{"style":188},[2139],{"type":23,"value":2140}," @",{"type":18,"tag":181,"props":2142,"children":2143},{"style":200},[2144],{"type":23,"value":2109},{"type":18,"tag":181,"props":2146,"children":2147},{"style":194},[2148],{"type":23,"value":213},{"type":18,"tag":181,"props":2150,"children":2151},{"style":216},[2152],{"type":23,"value":219},{"type":18,"tag":181,"props":2154,"children":2155},{"style":188},[2156],{"type":23,"value":2157},"onInput",{"type":18,"tag":181,"props":2159,"children":2160},{"style":216},[2161],{"type":23,"value":219},{"type":18,"tag":181,"props":2163,"children":2164},{"style":188},[2165],{"type":23,"value":2166}," />\n",{"type":18,"tag":181,"props":2168,"children":2170},{"class":183,"line":2169},14,[2171,2175,2179],{"type":18,"tag":181,"props":2172,"children":2173},{"style":188},[2174],{"type":23,"value":348},{"type":18,"tag":181,"props":2176,"children":2177},{"style":194},[2178],{"type":23,"value":1775},{"type":18,"tag":181,"props":2180,"children":2181},{"style":188},[2182],{"type":23,"value":234},{"type":18,"tag":19,"props":2184,"children":2185},{},[2186,2188,2193],{"type":23,"value":2187},"3.3 simplifies the usage with the new ",{"type":18,"tag":30,"props":2189,"children":2191},{"className":2190},[],[2192],{"type":23,"value":1836},{"type":23,"value":2194}," macro. The macro automatically registers a prop, and returns a ref that can be directly mutated:",{"type":18,"tag":171,"props":2196,"children":2198},{"className":173,"code":2197,"language":175,"meta":7,"style":7},"\u003C!-- AFTER -->\n\u003Cscript setup>\n  const modelValue = defineModel()\n  console.log(modelValue.value)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"modelValue\" />\n\u003C/template>\n",[2199],{"type":18,"tag":30,"props":2200,"children":2201},{"__ignoreMap":7},[2202,2210,2229,2255,2271,2286,2293,2308,2344],{"type":18,"tag":181,"props":2203,"children":2204},{"class":183,"line":184},[2205],{"type":18,"tag":181,"props":2206,"children":2207},{"style":290},[2208],{"type":23,"value":2209},"\u003C!-- AFTER -->\n",{"type":18,"tag":181,"props":2211,"children":2212},{"class":183,"line":237},[2213,2217,2221,2225],{"type":18,"tag":181,"props":2214,"children":2215},{"style":188},[2216],{"type":23,"value":191},{"type":18,"tag":181,"props":2218,"children":2219},{"style":194},[2220],{"type":23,"value":197},{"type":18,"tag":181,"props":2222,"children":2223},{"style":200},[2224],{"type":23,"value":203},{"type":18,"tag":181,"props":2226,"children":2227},{"style":188},[2228],{"type":23,"value":234},{"type":18,"tag":181,"props":2230,"children":2231},{"class":183,"line":276},[2232,2236,2241,2245,2250],{"type":18,"tag":181,"props":2233,"children":2234},{"style":194},[2235],{"type":23,"value":1576},{"type":18,"tag":181,"props":2237,"children":2238},{"style":188},[2239],{"type":23,"value":2240}," modelValue ",{"type":18,"tag":181,"props":2242,"children":2243},{"style":194},[2244],{"type":23,"value":213},{"type":18,"tag":181,"props":2246,"children":2247},{"style":300},[2248],{"type":23,"value":2249}," defineModel",{"type":18,"tag":181,"props":2251,"children":2252},{"style":188},[2253],{"type":23,"value":2254},"()\n",{"type":18,"tag":181,"props":2256,"children":2257},{"class":183,"line":286},[2258,2262,2266],{"type":18,"tag":181,"props":2259,"children":2260},{"style":188},[2261],{"type":23,"value":1980},{"type":18,"tag":181,"props":2263,"children":2264},{"style":300},[2265],{"type":23,"value":1695},{"type":18,"tag":181,"props":2267,"children":2268},{"style":188},[2269],{"type":23,"value":2270},"(modelValue.value)\n",{"type":18,"tag":181,"props":2272,"children":2273},{"class":183,"line":296},[2274,2278,2282],{"type":18,"tag":181,"props":2275,"children":2276},{"style":188},[2277],{"type":23,"value":348},{"type":18,"tag":181,"props":2279,"children":2280},{"style":194},[2281],{"type":23,"value":197},{"type":18,"tag":181,"props":2283,"children":2284},{"style":188},[2285],{"type":23,"value":234},{"type":18,"tag":181,"props":2287,"children":2288},{"class":183,"line":342},[2289],{"type":18,"tag":181,"props":2290,"children":2291},{"emptyLinePlaceholder":280},[2292],{"type":23,"value":283},{"type":18,"tag":181,"props":2294,"children":2295},{"class":183,"line":768},[2296,2300,2304],{"type":18,"tag":181,"props":2297,"children":2298},{"style":188},[2299],{"type":23,"value":191},{"type":18,"tag":181,"props":2301,"children":2302},{"style":194},[2303],{"type":23,"value":1775},{"type":18,"tag":181,"props":2305,"children":2306},{"style":188},[2307],{"type":23,"value":234},{"type":18,"tag":181,"props":2309,"children":2310},{"class":183,"line":1675},[2311,2315,2319,2324,2328,2332,2336,2340],{"type":18,"tag":181,"props":2312,"children":2313},{"style":188},[2314],{"type":23,"value":2104},{"type":18,"tag":181,"props":2316,"children":2317},{"style":194},[2318],{"type":23,"value":2109},{"type":18,"tag":181,"props":2320,"children":2321},{"style":200},[2322],{"type":23,"value":2323}," v-model",{"type":18,"tag":181,"props":2325,"children":2326},{"style":194},[2327],{"type":23,"value":213},{"type":18,"tag":181,"props":2329,"children":2330},{"style":216},[2331],{"type":23,"value":219},{"type":18,"tag":181,"props":2333,"children":2334},{"style":188},[2335],{"type":23,"value":1924},{"type":18,"tag":181,"props":2337,"children":2338},{"style":216},[2339],{"type":23,"value":219},{"type":18,"tag":181,"props":2341,"children":2342},{"style":188},[2343],{"type":23,"value":2166},{"type":18,"tag":181,"props":2345,"children":2346},{"class":183,"line":1684},[2347,2351,2355],{"type":18,"tag":181,"props":2348,"children":2349},{"style":188},[2350],{"type":23,"value":348},{"type":18,"tag":181,"props":2352,"children":2353},{"style":194},[2354],{"type":23,"value":1775},{"type":18,"tag":181,"props":2356,"children":2357},{"style":188},[2358],{"type":23,"value":234},{"type":18,"tag":19,"props":2360,"children":2361},{},[2362],{"type":23,"value":1812},{"type":18,"tag":96,"props":2364,"children":2365},{},[2366],{"type":18,"tag":100,"props":2367,"children":2368},{},[2369,2370],{"type":23,"value":369},{"type":18,"tag":39,"props":2371,"children":2374},{"href":2372,"rel":2373,"target":44},"https://github.com/vuejs/rfcs/discussions/503",[43,43],[2375],{"type":23,"value":2376},"RFC#503",{"type":18,"tag":126,"props":2378,"children":2380},{"id":2379},"other-notable-features",[2381],{"type":23,"value":2382},"Other Notable Features",{"type":18,"tag":138,"props":2384,"children":2386},{"id":2385},"defineoptions",[2387],{"type":18,"tag":30,"props":2388,"children":2390},{"className":2389},[],[2391],{"type":23,"value":2392},"defineOptions",{"type":18,"tag":19,"props":2394,"children":2395},{},[2396,2397,2402,2404,2409,2411,2417],{"type":23,"value":1203},{"type":18,"tag":30,"props":2398,"children":2400},{"className":2399},[],[2401],{"type":23,"value":2392},{"type":23,"value":2403}," macro allows declaring component options directly in ",{"type":18,"tag":30,"props":2405,"children":2407},{"className":2406},[],[2408],{"type":23,"value":35},{"type":23,"value":2410},", without requiring a separate ",{"type":18,"tag":30,"props":2412,"children":2414},{"className":2413},[],[2415],{"type":23,"value":2416},"\u003Cscript>",{"type":23,"value":2418}," block:",{"type":18,"tag":171,"props":2420,"children":2422},{"className":173,"code":2421,"language":175,"meta":7,"style":7},"\u003Cscript setup>\n  defineOptions({ inheritAttrs: false })\n\u003C/script>\n",[2423],{"type":18,"tag":30,"props":2424,"children":2425},{"__ignoreMap":7},[2426,2445,2473],{"type":18,"tag":181,"props":2427,"children":2428},{"class":183,"line":184},[2429,2433,2437,2441],{"type":18,"tag":181,"props":2430,"children":2431},{"style":188},[2432],{"type":23,"value":191},{"type":18,"tag":181,"props":2434,"children":2435},{"style":194},[2436],{"type":23,"value":197},{"type":18,"tag":181,"props":2438,"children":2439},{"style":200},[2440],{"type":23,"value":203},{"type":18,"tag":181,"props":2442,"children":2443},{"style":188},[2444],{"type":23,"value":234},{"type":18,"tag":181,"props":2446,"children":2447},{"class":183,"line":237},[2448,2453,2458,2462,2468],{"type":18,"tag":181,"props":2449,"children":2450},{"style":300},[2451],{"type":23,"value":2452},"  defineOptions",{"type":18,"tag":181,"props":2454,"children":2455},{"style":188},[2456],{"type":23,"value":2457},"({ inheritAttrs",{"type":18,"tag":181,"props":2459,"children":2460},{"style":194},[2461],{"type":23,"value":495},{"type":18,"tag":181,"props":2463,"children":2465},{"style":2464},"--shiki-default:#BF9EEE",[2466],{"type":23,"value":2467}," false",{"type":18,"tag":181,"props":2469,"children":2470},{"style":188},[2471],{"type":23,"value":2472}," })\n",{"type":18,"tag":181,"props":2474,"children":2475},{"class":183,"line":276},[2476,2480,2484],{"type":18,"tag":181,"props":2477,"children":2478},{"style":188},[2479],{"type":23,"value":348},{"type":18,"tag":181,"props":2481,"children":2482},{"style":194},[2483],{"type":23,"value":197},{"type":18,"tag":181,"props":2485,"children":2486},{"style":188},[2487],{"type":23,"value":234},{"type":18,"tag":138,"props":2489,"children":2491},{"id":2490},"better-getter-support-with-toref-and-tovalue",[2492,2494,2500,2501],{"type":23,"value":2493},"Better Getter Support with ",{"type":18,"tag":30,"props":2495,"children":2497},{"className":2496},[],[2498],{"type":23,"value":2499},"toRef",{"type":23,"value":156},{"type":18,"tag":30,"props":2502,"children":2504},{"className":2503},[],[2505],{"type":23,"value":2506},"toValue",{"type":18,"tag":19,"props":2508,"children":2509},{},[2510,2515],{"type":18,"tag":30,"props":2511,"children":2513},{"className":2512},[],[2514],{"type":23,"value":2499},{"type":23,"value":2516}," has been enhanced to support normalizing values / getters / existing refs into refs:",{"type":18,"tag":171,"props":2518,"children":2522},{"className":2519,"code":2520,"language":2521,"meta":7,"style":7},"language-js shiki shiki-themes dracula-soft","// equivalent to ref(1)\ntoRef(1)\n// creates a readonly ref that calls the getter on .value access\ntoRef(() => props.foo)\n// returns existing refs as-is\ntoRef(existingRef)\n","js",[2523],{"type":18,"tag":30,"props":2524,"children":2525},{"__ignoreMap":7},[2526,2534,2554,2562,2582,2590],{"type":18,"tag":181,"props":2527,"children":2528},{"class":183,"line":184},[2529],{"type":18,"tag":181,"props":2530,"children":2531},{"style":290},[2532],{"type":23,"value":2533},"// equivalent to ref(1)\n",{"type":18,"tag":181,"props":2535,"children":2536},{"class":183,"line":237},[2537,2541,2545,2550],{"type":18,"tag":181,"props":2538,"children":2539},{"style":300},[2540],{"type":23,"value":2499},{"type":18,"tag":181,"props":2542,"children":2543},{"style":188},[2544],{"type":23,"value":1700},{"type":18,"tag":181,"props":2546,"children":2547},{"style":2464},[2548],{"type":23,"value":2549},"1",{"type":18,"tag":181,"props":2551,"children":2552},{"style":188},[2553],{"type":23,"value":1729},{"type":18,"tag":181,"props":2555,"children":2556},{"class":183,"line":276},[2557],{"type":18,"tag":181,"props":2558,"children":2559},{"style":290},[2560],{"type":23,"value":2561},"// creates a readonly ref that calls the getter on .value access\n",{"type":18,"tag":181,"props":2563,"children":2564},{"class":183,"line":286},[2565,2569,2573,2577],{"type":18,"tag":181,"props":2566,"children":2567},{"style":300},[2568],{"type":23,"value":2499},{"type":18,"tag":181,"props":2570,"children":2571},{"style":188},[2572],{"type":23,"value":1655},{"type":18,"tag":181,"props":2574,"children":2575},{"style":194},[2576],{"type":23,"value":1317},{"type":18,"tag":181,"props":2578,"children":2579},{"style":188},[2580],{"type":23,"value":2581}," props.foo)\n",{"type":18,"tag":181,"props":2583,"children":2584},{"class":183,"line":296},[2585],{"type":18,"tag":181,"props":2586,"children":2587},{"style":290},[2588],{"type":23,"value":2589},"// returns existing refs as-is\n",{"type":18,"tag":181,"props":2591,"children":2592},{"class":183,"line":342},[2593,2597],{"type":18,"tag":181,"props":2594,"children":2595},{"style":300},[2596],{"type":23,"value":2499},{"type":18,"tag":181,"props":2598,"children":2599},{"style":188},[2600],{"type":23,"value":2601},"(existingRef)\n",{"type":18,"tag":19,"props":2603,"children":2604},{},[2605,2607,2612,2614,2620],{"type":23,"value":2606},"Calling ",{"type":18,"tag":30,"props":2608,"children":2610},{"className":2609},[],[2611],{"type":23,"value":2499},{"type":23,"value":2613}," with a getter is similar to ",{"type":18,"tag":30,"props":2615,"children":2617},{"className":2616},[],[2618],{"type":23,"value":2619},"computed",{"type":23,"value":2621},", but can be more efficient when the getter is just performing property access with no expensive computations.",{"type":18,"tag":19,"props":2623,"children":2624},{},[2625,2626,2631],{"type":23,"value":1203},{"type":18,"tag":30,"props":2627,"children":2629},{"className":2628},[],[2630],{"type":23,"value":2506},{"type":23,"value":2632}," utility method provides the opposite, normalizing values / getters / refs into values:",{"type":18,"tag":171,"props":2634,"children":2636},{"className":2519,"code":2635,"language":2521,"meta":7,"style":7},"toValue(1) //       --> 1\ntoValue(ref(1)) //  --> 1\ntoValue(() => 1) // --> 1\n",[2637],{"type":18,"tag":30,"props":2638,"children":2639},{"__ignoreMap":7},[2640,2665,2699],{"type":18,"tag":181,"props":2641,"children":2642},{"class":183,"line":184},[2643,2647,2651,2655,2660],{"type":18,"tag":181,"props":2644,"children":2645},{"style":300},[2646],{"type":23,"value":2506},{"type":18,"tag":181,"props":2648,"children":2649},{"style":188},[2650],{"type":23,"value":1700},{"type":18,"tag":181,"props":2652,"children":2653},{"style":2464},[2654],{"type":23,"value":2549},{"type":18,"tag":181,"props":2656,"children":2657},{"style":188},[2658],{"type":23,"value":2659},") ",{"type":18,"tag":181,"props":2661,"children":2662},{"style":290},[2663],{"type":23,"value":2664},"//       --> 1\n",{"type":18,"tag":181,"props":2666,"children":2667},{"class":183,"line":237},[2668,2672,2676,2681,2685,2689,2694],{"type":18,"tag":181,"props":2669,"children":2670},{"style":300},[2671],{"type":23,"value":2506},{"type":18,"tag":181,"props":2673,"children":2674},{"style":188},[2675],{"type":23,"value":1700},{"type":18,"tag":181,"props":2677,"children":2678},{"style":300},[2679],{"type":23,"value":2680},"ref",{"type":18,"tag":181,"props":2682,"children":2683},{"style":188},[2684],{"type":23,"value":1700},{"type":18,"tag":181,"props":2686,"children":2687},{"style":2464},[2688],{"type":23,"value":2549},{"type":18,"tag":181,"props":2690,"children":2691},{"style":188},[2692],{"type":23,"value":2693},")) ",{"type":18,"tag":181,"props":2695,"children":2696},{"style":290},[2697],{"type":23,"value":2698},"//  --> 1\n",{"type":18,"tag":181,"props":2700,"children":2701},{"class":183,"line":276},[2702,2706,2710,2714,2719,2723],{"type":18,"tag":181,"props":2703,"children":2704},{"style":300},[2705],{"type":23,"value":2506},{"type":18,"tag":181,"props":2707,"children":2708},{"style":188},[2709],{"type":23,"value":1655},{"type":18,"tag":181,"props":2711,"children":2712},{"style":194},[2713],{"type":23,"value":1317},{"type":18,"tag":181,"props":2715,"children":2716},{"style":2464},[2717],{"type":23,"value":2718}," 1",{"type":18,"tag":181,"props":2720,"children":2721},{"style":188},[2722],{"type":23,"value":2659},{"type":18,"tag":181,"props":2724,"children":2725},{"style":290},[2726],{"type":23,"value":2727},"// --> 1\n",{"type":18,"tag":19,"props":2729,"children":2730},{},[2731,2736,2738,2744],{"type":18,"tag":30,"props":2732,"children":2734},{"className":2733},[],[2735],{"type":23,"value":2506},{"type":23,"value":2737}," can be used in composables in place of ",{"type":18,"tag":30,"props":2739,"children":2741},{"className":2740},[],[2742],{"type":23,"value":2743},"unref",{"type":23,"value":2745}," so that your composable can accept getters as reactive data sources:",{"type":18,"tag":171,"props":2747,"children":2749},{"className":2519,"code":2748,"language":2521,"meta":7,"style":7},"// before: allocating unnecessary intermediate refs\nuseFeature(computed(() => props.foo))\nuseFeature(toRef(props, 'foo'))\n\n// after: more efficient and succinct\nuseFeature(() => props.foo)\n",[2750],{"type":18,"tag":30,"props":2751,"children":2752},{"__ignoreMap":7},[2753,2761,2790,2827,2834,2842],{"type":18,"tag":181,"props":2754,"children":2755},{"class":183,"line":184},[2756],{"type":18,"tag":181,"props":2757,"children":2758},{"style":290},[2759],{"type":23,"value":2760},"// before: allocating unnecessary intermediate refs\n",{"type":18,"tag":181,"props":2762,"children":2763},{"class":183,"line":237},[2764,2769,2773,2777,2781,2785],{"type":18,"tag":181,"props":2765,"children":2766},{"style":300},[2767],{"type":23,"value":2768},"useFeature",{"type":18,"tag":181,"props":2770,"children":2771},{"style":188},[2772],{"type":23,"value":1700},{"type":18,"tag":181,"props":2774,"children":2775},{"style":300},[2776],{"type":23,"value":2619},{"type":18,"tag":181,"props":2778,"children":2779},{"style":188},[2780],{"type":23,"value":1655},{"type":18,"tag":181,"props":2782,"children":2783},{"style":194},[2784],{"type":23,"value":1317},{"type":18,"tag":181,"props":2786,"children":2787},{"style":188},[2788],{"type":23,"value":2789}," props.foo))\n",{"type":18,"tag":181,"props":2791,"children":2792},{"class":183,"line":276},[2793,2797,2801,2805,2810,2814,2818,2822],{"type":18,"tag":181,"props":2794,"children":2795},{"style":300},[2796],{"type":23,"value":2768},{"type":18,"tag":181,"props":2798,"children":2799},{"style":188},[2800],{"type":23,"value":1700},{"type":18,"tag":181,"props":2802,"children":2803},{"style":300},[2804],{"type":23,"value":2499},{"type":18,"tag":181,"props":2806,"children":2807},{"style":188},[2808],{"type":23,"value":2809},"(props, ",{"type":18,"tag":181,"props":2811,"children":2812},{"style":216},[2813],{"type":23,"value":917},{"type":18,"tag":181,"props":2815,"children":2816},{"style":222},[2817],{"type":23,"value":912},{"type":18,"tag":181,"props":2819,"children":2820},{"style":216},[2821],{"type":23,"value":917},{"type":18,"tag":181,"props":2823,"children":2824},{"style":188},[2825],{"type":23,"value":2826},"))\n",{"type":18,"tag":181,"props":2828,"children":2829},{"class":183,"line":286},[2830],{"type":18,"tag":181,"props":2831,"children":2832},{"emptyLinePlaceholder":280},[2833],{"type":23,"value":283},{"type":18,"tag":181,"props":2835,"children":2836},{"class":183,"line":296},[2837],{"type":18,"tag":181,"props":2838,"children":2839},{"style":290},[2840],{"type":23,"value":2841},"// after: more efficient and succinct\n",{"type":18,"tag":181,"props":2843,"children":2844},{"class":183,"line":342},[2845,2849,2853,2857],{"type":18,"tag":181,"props":2846,"children":2847},{"style":300},[2848],{"type":23,"value":2768},{"type":18,"tag":181,"props":2850,"children":2851},{"style":188},[2852],{"type":23,"value":1655},{"type":18,"tag":181,"props":2854,"children":2855},{"style":194},[2856],{"type":23,"value":1317},{"type":18,"tag":181,"props":2858,"children":2859},{"style":188},[2860],{"type":23,"value":2581},{"type":18,"tag":19,"props":2862,"children":2863},{},[2864,2866,2871,2872,2877,2879,2884,2885,2890],{"type":23,"value":2865},"The relationship between ",{"type":18,"tag":30,"props":2867,"children":2869},{"className":2868},[],[2870],{"type":23,"value":2499},{"type":23,"value":156},{"type":18,"tag":30,"props":2873,"children":2875},{"className":2874},[],[2876],{"type":23,"value":2506},{"type":23,"value":2878}," is similar to that between ",{"type":18,"tag":30,"props":2880,"children":2882},{"className":2881},[],[2883],{"type":23,"value":2680},{"type":23,"value":156},{"type":18,"tag":30,"props":2886,"children":2888},{"className":2887},[],[2889],{"type":23,"value":2743},{"type":23,"value":2891},", with the main difference being the special handling of getter functions.",{"type":18,"tag":96,"props":2893,"children":2894},{},[2895],{"type":18,"tag":100,"props":2896,"children":2897},{},[2898,2899],{"type":23,"value":369},{"type":18,"tag":39,"props":2900,"children":2903},{"href":2901,"rel":2902,"target":44},"https://github.com/vuejs/core/pull/7997",[43,43],[2904],{"type":23,"value":2905},"PR#7997",{"type":18,"tag":138,"props":2907,"children":2909},{"id":2908},"jsx-import-source-support",[2910],{"type":23,"value":2911},"JSX Import Source Support",{"type":18,"tag":19,"props":2913,"children":2914},{},[2915],{"type":23,"value":2916},"Currently, Vue's types automatically registers global JSX typing. This may cause conflict with used together with other libraries that needs JSX type inference, in particular React.",{"type":18,"tag":19,"props":2918,"children":2919},{},[2920,2922,2929],{"type":23,"value":2921},"Starting in 3.3, Vue supports specifying JSX namespace via TypeScript's ",{"type":18,"tag":39,"props":2923,"children":2926},{"href":2924,"rel":2925,"target":44},"https://www.typescriptlang.org/tsconfig#jsxImportSource",[43,43],[2927],{"type":23,"value":2928},"jsxImportSource",{"type":23,"value":2930}," option. This allows the users to choose global or per-file opt-in based on their use case.",{"type":18,"tag":19,"props":2932,"children":2933},{},[2934,2936,2942,2944,2949,2951,2957],{"type":23,"value":2935},"For backwards compatibility, 3.3 still registers JSX namespace globally. ",{"type":18,"tag":2937,"props":2938,"children":2939},"strong",{},[2940],{"type":23,"value":2941},"We plan to remove the default global registration in 3.4.",{"type":23,"value":2943}," If you are using TSX with Vue, you should add explicit ",{"type":18,"tag":30,"props":2945,"children":2947},{"className":2946},[],[2948],{"type":23,"value":2928},{"type":23,"value":2950}," to your ",{"type":18,"tag":30,"props":2952,"children":2954},{"className":2953},[],[2955],{"type":23,"value":2956},"tsconfig.json",{"type":23,"value":2958}," after upgrading to 3.3 to avoid breakage in 3.4.",{"type":18,"tag":126,"props":2960,"children":2962},{"id":2961},"maintenance-infrastructure-improvements",[2963],{"type":23,"value":2964},"Maintenance Infrastructure Improvements",{"type":18,"tag":19,"props":2966,"children":2967},{},[2968],{"type":23,"value":2969},"This release builds upon many maintenance infrastructure improvements that allow us to move faster with more confidence:",{"type":18,"tag":96,"props":2971,"children":2972},{},[2973,2993,3006,3025],{"type":18,"tag":100,"props":2974,"children":2975},{},[2976,2978,2984,2986,2992],{"type":23,"value":2977},"10x faster builds by separating type checking from the rollup build and moving from ",{"type":18,"tag":30,"props":2979,"children":2981},{"className":2980},[],[2982],{"type":23,"value":2983},"rollup-plugin-typescript2",{"type":23,"value":2985}," to ",{"type":18,"tag":30,"props":2987,"children":2989},{"className":2988},[],[2990],{"type":23,"value":2991},"rollup-plugin-esbuild",{"type":23,"value":85},{"type":18,"tag":100,"props":2994,"children":2995},{},[2996,2998,3005],{"type":23,"value":2997},"Faster tests by moving from Jest to ",{"type":18,"tag":39,"props":2999,"children":3002},{"href":3000,"rel":3001,"target":44},"https://vitest.dev",[43,43],[3003],{"type":23,"value":3004},"Vitest",{"type":23,"value":85},{"type":18,"tag":100,"props":3007,"children":3008},{},[3009,3011,3017,3018,3024],{"type":23,"value":3010},"Faster types generation by moving from ",{"type":18,"tag":30,"props":3012,"children":3014},{"className":3013},[],[3015],{"type":23,"value":3016},"@microsoft/api-extractor",{"type":23,"value":2985},{"type":18,"tag":30,"props":3019,"children":3021},{"className":3020},[],[3022],{"type":23,"value":3023},"rollup-plugin-dts",{"type":23,"value":85},{"type":18,"tag":100,"props":3026,"children":3027},{},[3028,3030,3037],{"type":23,"value":3029},"Comprehensive regression tests via ",{"type":18,"tag":39,"props":3031,"children":3034},{"href":3032,"rel":3033,"target":44},"https://github.com/vuejs/ecosystem-ci",[43,43],[3035],{"type":23,"value":3036},"ecosystem-ci",{"type":23,"value":3038}," - catches regressions in major ecosystem dependents before releases!",{"type":18,"tag":19,"props":3040,"children":3041},{},[3042],{"type":23,"value":3043},"As planned, we aim to start making smaller and more frequent feature releases in 2023. Stay tuned!",{"type":18,"tag":3045,"props":3046,"children":3047},"style",{},[3048],{"type":23,"value":3049},"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":237,"depth":237,"links":3051},[3052,3061,3065,3071],{"id":128,"depth":237,"text":3053,"children":3054},"\u003Cscript setup> + TypeScript DX Improvements",[3055,3056,3057,3059],{"id":140,"depth":276,"text":143},{"id":379,"depth":276,"text":382},{"id":824,"depth":276,"text":3058},"More Ergonomic defineEmits",{"id":1189,"depth":276,"text":3060},"Typed Slots with defineSlots",{"id":1488,"depth":237,"text":1491,"children":3062},[3063,3064],{"id":1494,"depth":276,"text":1497},{"id":1829,"depth":276,"text":1836},{"id":2379,"depth":237,"text":2382,"children":3066},[3067,3068,3070],{"id":2385,"depth":276,"text":2392},{"id":2490,"depth":276,"text":3069},"Better Getter Support with toRef and toValue",{"id":2908,"depth":276,"text":2911},{"id":2961,"depth":237,"text":2964},"markdown","content:blog:vue-3-3.md","content","blog/vue-3-3.md","blog/vue-3-3","md",{"loc":4},["Island",3080],{"key":3081,"result":3082},"StaticMarkdown_nMv27YLzgJ",{"head":3083},{"meta":3084,"title":8,"link":3087,"style":3088},[3085],{"name":3086,"content":8},"description",[],[],1788519848820]