[{"data":1,"prerenderedAt":1600},["ShallowReactive",2],{"vue-2-7-beta":3,"StaticMarkdown_0HYwGo0qTO":1590},{"_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":1583,"_id":1584,"_source":1585,"_file":1586,"_stem":1587,"_extension":1588,"sitemap":1589},"/blog/vue-2-7-beta","blog",false,"","Vue 2.7 is Now in Beta","We are happy to announce that Vue 2.7 is now in beta.","2022-06-20","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":1571},[26,30,34,39,46,92,97,203,210,311,317,322,440,452,525,531,536,542,1389,1395,1417,1422,1428,1448,1534,1540,1545,1565],{"type":18,"tag":19,"props":27,"children":28},{},[29],{"type":23,"value":9},{"type":18,"tag":31,"props":32,"children":33},"hr",{},[],{"type":18,"tag":19,"props":35,"children":36},{},[37],{"type":23,"value":38},"Despite Vue 3 now being the default version, we understand that there are still many users who have to stay on Vue 2 due to dependency compatibility, browser support requirements, or simply not enough bandwidth to upgrade. In Vue 2.7, we have backported some of the most important features from Vue 3 so that Vue 2 users can benefit from them as well.",{"type":18,"tag":40,"props":41,"children":43},"h2",{"id":42},"backported-features",[44],{"type":23,"value":45},"Backported Features",{"type":18,"tag":47,"props":48,"children":49},"ul",{},[50,64,81],{"type":18,"tag":51,"props":52,"children":53},"li",{},[54],{"type":18,"tag":55,"props":56,"children":61},"a",{"href":57,"rel":58,"target":60},"https://vuejs.org/guide/extras/composition-api-faq.html",[59,59],"noopener","_blank",[62],{"type":23,"value":63},"Composition API",{"type":18,"tag":51,"props":65,"children":66},{},[67,69],{"type":23,"value":68},"SFC ",{"type":18,"tag":55,"props":70,"children":73},{"href":71,"rel":72,"target":60},"https://vuejs.org/api/sfc-script-setup.html",[59,59],[74],{"type":18,"tag":75,"props":76,"children":78},"code",{"className":77},[],[79],{"type":23,"value":80},"\u003Cscript setup>",{"type":18,"tag":51,"props":82,"children":83},{},[84,85],{"type":23,"value":68},{"type":18,"tag":55,"props":86,"children":89},{"href":87,"rel":88,"target":60},"https://vuejs.org/api/sfc-css-features.html#v-bind-in-css",[59,59],[90],{"type":23,"value":91},"CSS v-bind",{"type":18,"tag":19,"props":93,"children":94},{},[95],{"type":23,"value":96},"In addition, the following APIs are also supported:",{"type":18,"tag":47,"props":98,"children":99},{},[100,119,150,176],{"type":18,"tag":51,"props":101,"children":102},{},[103,109,111,117],{"type":18,"tag":75,"props":104,"children":106},{"className":105},[],[107],{"type":23,"value":108},"defineComponent()",{"type":23,"value":110}," with improved type inference (compared to ",{"type":18,"tag":75,"props":112,"children":114},{"className":113},[],[115],{"type":23,"value":116},"Vue.extend",{"type":23,"value":118},")",{"type":18,"tag":51,"props":120,"children":121},{},[122,128,130,136,137,143,144],{"type":18,"tag":75,"props":123,"children":125},{"className":124},[],[126],{"type":23,"value":127},"h()",{"type":23,"value":129},", ",{"type":18,"tag":75,"props":131,"children":133},{"className":132},[],[134],{"type":23,"value":135},"useSlot()",{"type":23,"value":129},{"type":18,"tag":75,"props":138,"children":140},{"className":139},[],[141],{"type":23,"value":142},"useAttrs()",{"type":23,"value":129},{"type":18,"tag":75,"props":145,"children":147},{"className":146},[],[148],{"type":23,"value":149},"useCssModules()",{"type":18,"tag":51,"props":151,"children":152},{},[153,159,160,166,168,174],{"type":18,"tag":75,"props":154,"children":156},{"className":155},[],[157],{"type":23,"value":158},"set()",{"type":23,"value":129},{"type":18,"tag":75,"props":161,"children":163},{"className":162},[],[164],{"type":23,"value":165},"del()",{"type":23,"value":167}," and ",{"type":18,"tag":75,"props":169,"children":171},{"className":170},[],[172],{"type":23,"value":173},"nextTick()",{"type":23,"value":175}," are also provided as named exports in ESM builds.",{"type":18,"tag":51,"props":177,"children":178},{},[179,181,187,189,193,195,201],{"type":23,"value":180},"The ",{"type":18,"tag":75,"props":182,"children":184},{"className":183},[],[185],{"type":23,"value":186},"emits",{"type":23,"value":188}," option is also supported, but only for type-checking purposes (does not affect runtime behavior)",{"type":18,"tag":190,"props":191,"children":192},"br",{},[],{"type":23,"value":194},"2.7 also supports using ESNext syntax in template expressions. When using a build system, the compiled template render function will go through the same loaders / plugins configured for normal JavaScript. This means if you have configured Babel for ",{"type":18,"tag":75,"props":196,"children":198},{"className":197},[],[199],{"type":23,"value":200},".js",{"type":23,"value":202}," files, it will also apply to the expressions in your SFC templates.",{"type":18,"tag":204,"props":205,"children":207},"h3",{"id":206},"notes-on-api-exposure",[208],{"type":23,"value":209},"Notes on API exposure",{"type":18,"tag":47,"props":211,"children":212},{},[213,293,306],{"type":18,"tag":51,"props":214,"children":215},{},[216,218],{"type":23,"value":217},"In ESM builds, these APIs are provided as named exports (and named exports only):",{"type":18,"tag":219,"props":220,"children":224},"pre",{"className":221,"code":222,"language":223,"meta":7,"style":7},"language-js shiki shiki-themes dracula-soft","import Vue, { ref } from 'vue'\n\nVue.ref // undefined, use named export instead\n","js",[225],{"type":18,"tag":75,"props":226,"children":227},{"__ignoreMap":7},[228,268,278],{"type":18,"tag":229,"props":230,"children":233},"span",{"class":231,"line":232},"line",1,[234,240,246,251,257,263],{"type":18,"tag":229,"props":235,"children":237},{"style":236},"--shiki-default:#F286C4",[238],{"type":23,"value":239},"import",{"type":18,"tag":229,"props":241,"children":243},{"style":242},"--shiki-default:#F6F6F4",[244],{"type":23,"value":245}," Vue, { ref } ",{"type":18,"tag":229,"props":247,"children":248},{"style":236},[249],{"type":23,"value":250},"from",{"type":18,"tag":229,"props":252,"children":254},{"style":253},"--shiki-default:#DEE492",[255],{"type":23,"value":256}," '",{"type":18,"tag":229,"props":258,"children":260},{"style":259},"--shiki-default:#E7EE98",[261],{"type":23,"value":262},"vue",{"type":18,"tag":229,"props":264,"children":265},{"style":253},[266],{"type":23,"value":267},"'\n",{"type":18,"tag":229,"props":269,"children":271},{"class":231,"line":270},2,[272],{"type":18,"tag":229,"props":273,"children":275},{"emptyLinePlaceholder":274},true,[276],{"type":23,"value":277},"\n",{"type":18,"tag":229,"props":279,"children":281},{"class":231,"line":280},3,[282,287],{"type":18,"tag":229,"props":283,"children":284},{"style":242},[285],{"type":23,"value":286},"Vue.ref ",{"type":18,"tag":229,"props":288,"children":290},{"style":289},"--shiki-default:#7B7F8B",[291],{"type":23,"value":292},"// undefined, use named export instead\n",{"type":18,"tag":51,"props":294,"children":295},{},[296,298,304],{"type":23,"value":297},"In UMD and CJS builds, these APIs are exposed as properties on the global ",{"type":18,"tag":75,"props":299,"children":301},{"className":300},[],[302],{"type":23,"value":303},"Vue",{"type":23,"value":305}," object.",{"type":18,"tag":51,"props":307,"children":308},{},[309],{"type":23,"value":310},"When bundling with CJS builds externalized, bundlers should be able to handle ESM interop when externalizing CJS builds.",{"type":18,"tag":204,"props":312,"children":314},{"id":313},"behavior-differences-from-vue-3",[315],{"type":23,"value":316},"Behavior Differences from Vue 3",{"type":18,"tag":19,"props":318,"children":319},{},[320],{"type":23,"value":321},"The Composition API is backported using Vue 2's getter/setter-based reactivity system to ensure browser compatibility. This means there are some important behavior differences from Vue 3's proxy-based system:",{"type":18,"tag":47,"props":323,"children":324},{},[325,339,404,423,435],{"type":18,"tag":51,"props":326,"children":327},{},[328,330,337],{"type":23,"value":329},"All ",{"type":18,"tag":55,"props":331,"children":334},{"href":332,"rel":333,"target":60},"https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats",[59,59],[335],{"type":23,"value":336},"Vue 2 change detection caveats",{"type":23,"value":338}," still apply.",{"type":18,"tag":51,"props":340,"children":341},{},[342,348,349,355,357,363,365],{"type":18,"tag":75,"props":343,"children":345},{"className":344},[],[346],{"type":23,"value":347},"reactive()",{"type":23,"value":129},{"type":18,"tag":75,"props":350,"children":352},{"className":351},[],[353],{"type":23,"value":354},"ref()",{"type":23,"value":356},", and ",{"type":18,"tag":75,"props":358,"children":360},{"className":359},[],[361],{"type":23,"value":362},"shallowReactive()",{"type":23,"value":364}," will directly convert original objects instead of creating proxies. This means:",{"type":18,"tag":219,"props":366,"children":368},{"className":221,"code":367,"language":223,"meta":7,"style":7},"// true in 2.7, false in 3.x\nreactive(foo) === foo\n",[369],{"type":18,"tag":75,"props":370,"children":371},{"__ignoreMap":7},[372,380],{"type":18,"tag":229,"props":373,"children":374},{"class":231,"line":232},[375],{"type":18,"tag":229,"props":376,"children":377},{"style":289},[378],{"type":23,"value":379},"// true in 2.7, false in 3.x\n",{"type":18,"tag":229,"props":381,"children":382},{"class":231,"line":270},[383,389,394,399],{"type":18,"tag":229,"props":384,"children":386},{"style":385},"--shiki-default:#62E884",[387],{"type":23,"value":388},"reactive",{"type":18,"tag":229,"props":390,"children":391},{"style":242},[392],{"type":23,"value":393},"(foo) ",{"type":18,"tag":229,"props":395,"children":396},{"style":236},[397],{"type":23,"value":398},"===",{"type":18,"tag":229,"props":400,"children":401},{"style":242},[402],{"type":23,"value":403}," foo\n",{"type":18,"tag":51,"props":405,"children":406},{},[407,413,415,421],{"type":18,"tag":75,"props":408,"children":410},{"className":409},[],[411],{"type":23,"value":412},"readonly()",{"type":23,"value":414}," ",{"type":18,"tag":416,"props":417,"children":418},"strong",{},[419],{"type":23,"value":420},"does",{"type":23,"value":422}," create a separate object, but it won't track newly added properties and does not work on arrays.",{"type":18,"tag":51,"props":424,"children":425},{},[426,428,433],{"type":23,"value":427},"Avoid using arrays as root values in ",{"type":18,"tag":75,"props":429,"children":431},{"className":430},[],[432],{"type":23,"value":347},{"type":23,"value":434}," because without property access the array's mutation won't be tracked (this will result in a warning).",{"type":18,"tag":51,"props":436,"children":437},{},[438],{"type":23,"value":439},"Reactivity APIs ignore properties with symbol keys.",{"type":18,"tag":19,"props":441,"children":442},{},[443,445,450],{"type":23,"value":444},"In addition, the following features are explicitly ",{"type":18,"tag":416,"props":446,"children":447},{},[448],{"type":23,"value":449},"NOT",{"type":23,"value":451}," ported:",{"type":18,"tag":47,"props":453,"children":454},{},[455,468,488,493,498],{"type":18,"tag":51,"props":456,"children":457},{},[458,460,466],{"type":23,"value":459},"❌ ",{"type":18,"tag":75,"props":461,"children":463},{"className":462},[],[464],{"type":23,"value":465},"createApp()",{"type":23,"value":467}," (Vue 2 doesn't have isolated app scope)",{"type":18,"tag":51,"props":469,"children":470},{},[471,473,479,481,486],{"type":23,"value":472},"❌ Top-level ",{"type":18,"tag":75,"props":474,"children":476},{"className":475},[],[477],{"type":23,"value":478},"await",{"type":23,"value":480}," in ",{"type":18,"tag":75,"props":482,"children":484},{"className":483},[],[485],{"type":23,"value":80},{"type":23,"value":487}," (Vue 2 does not support async component initialization)",{"type":18,"tag":51,"props":489,"children":490},{},[491],{"type":23,"value":492},"❌ TypeScript syntax in template expressions (incompatible w/ Vue 2 parser)",{"type":18,"tag":51,"props":494,"children":495},{},[496],{"type":23,"value":497},"❌ Reactivity transform (still experimental)",{"type":18,"tag":51,"props":499,"children":500},{},[501,502,508,510,516,518,523],{"type":23,"value":459},{"type":18,"tag":75,"props":503,"children":505},{"className":504},[],[506],{"type":23,"value":507},"expose",{"type":23,"value":509}," option is not supported for options components (but ",{"type":18,"tag":75,"props":511,"children":513},{"className":512},[],[514],{"type":23,"value":515},"defineExpose()",{"type":23,"value":517}," is supported in ",{"type":18,"tag":75,"props":519,"children":521},{"className":520},[],[522],{"type":23,"value":80},{"type":23,"value":524},").",{"type":18,"tag":40,"props":526,"children":528},{"id":527},"beta-adoption-guide",[529],{"type":23,"value":530},"Beta Adoption Guide",{"type":18,"tag":19,"props":532,"children":533},{},[534],{"type":23,"value":535},"2.7 is currently in beta stage and may still have rough edges. Please help us test its stability by opting into the beta. Here's how:",{"type":18,"tag":204,"props":537,"children":539},{"id":538},"vue-cli",[540],{"type":23,"value":541},"Vue CLI",{"type":18,"tag":543,"props":544,"children":545},"ol",{},[546,584,620,645,1353,1377],{"type":18,"tag":51,"props":547,"children":548},{},[549,551,557,559],{"type":23,"value":550},"Upgrade local ",{"type":18,"tag":75,"props":552,"children":554},{"className":553},[],[555],{"type":23,"value":556},"@vue/cli-xxx",{"type":23,"value":558}," dependencies the latest version in your major version range:",{"type":18,"tag":47,"props":560,"children":561},{},[562,573],{"type":18,"tag":51,"props":563,"children":564},{},[565,571],{"type":18,"tag":75,"props":566,"children":568},{"className":567},[],[569],{"type":23,"value":570},"~4.5.18",{"type":23,"value":572}," for v4",{"type":18,"tag":51,"props":574,"children":575},{},[576,582],{"type":18,"tag":75,"props":577,"children":579},{"className":578},[],[580],{"type":23,"value":581},"~5.0.6",{"type":23,"value":583}," for v5",{"type":18,"tag":51,"props":585,"children":586},{},[587,589,594,596,602,604,610,612,618],{"type":23,"value":588},"Upgrade ",{"type":18,"tag":75,"props":590,"children":592},{"className":591},[],[593],{"type":23,"value":262},{"type":23,"value":595}," to ",{"type":18,"tag":75,"props":597,"children":599},{"className":598},[],[600],{"type":23,"value":601},"v2-beta",{"type":23,"value":603},", or pin to a specific version (latest beta as of this writing is ",{"type":18,"tag":75,"props":605,"children":607},{"className":606},[],[608],{"type":23,"value":609},"2.7.0-beta.3",{"type":23,"value":611},"). You can also remove ",{"type":18,"tag":75,"props":613,"children":615},{"className":614},[],[616],{"type":23,"value":617},"vue-template-compiler",{"type":23,"value":619}," from the dependencies - it is no longer needed in 2.7.",{"type":18,"tag":51,"props":621,"children":622},{},[623,625,636,638,643],{"type":23,"value":624},"If you were previously using ",{"type":18,"tag":55,"props":626,"children":629},{"href":627,"rel":628,"target":60},"https://github.com/vuejs/composition-api",[59,59],[630],{"type":18,"tag":75,"props":631,"children":633},{"className":632},[],[634],{"type":23,"value":635},"@vue/composition-api",{"type":23,"value":637},", update imports from it to ",{"type":18,"tag":75,"props":639,"children":641},{"className":640},[],[642],{"type":23,"value":262},{"type":23,"value":644}," instead.",{"type":18,"tag":51,"props":646,"children":647},{},[648,650,656,658,663,665,671,673],{"type":23,"value":649},"Opt-in to ",{"type":18,"tag":75,"props":651,"children":653},{"className":652},[],[654],{"type":23,"value":655},"vue-loader",{"type":23,"value":657}," v15 beta. Since ",{"type":18,"tag":75,"props":659,"children":661},{"className":660},[],[662],{"type":23,"value":655},{"type":23,"value":664}," is a transitive dependency of ",{"type":18,"tag":75,"props":666,"children":668},{"className":667},[],[669],{"type":23,"value":670},"@vue/cli-service",{"type":23,"value":672},", you will need to force your package manager to explicitly use the beta version. The forced resolution will no longer be necessary when it goes stable.",{"type":18,"tag":47,"props":674,"children":675},{},[676,899,1097],{"type":18,"tag":51,"props":677,"children":678},{},[679,681,687,689,696,698,704,706,709,711,810,813,815],{"type":23,"value":680},"For ",{"type":18,"tag":75,"props":682,"children":684},{"className":683},[],[685],{"type":23,"value":686},"npm",{"type":23,"value":688}," (>=8.3.0), use the ",{"type":18,"tag":55,"props":690,"children":693},{"href":691,"rel":692,"target":60},"https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides",[59,59],[694],{"type":23,"value":695},"overrides",{"type":23,"value":697}," field in ",{"type":18,"tag":75,"props":699,"children":701},{"className":700},[],[702],{"type":23,"value":703},"package.json",{"type":23,"value":705},".",{"type":18,"tag":190,"props":707,"children":708},{},[],{"type":23,"value":710},"If using Vue CLI v4:",{"type":18,"tag":219,"props":712,"children":716},{"className":713,"code":714,"language":715,"meta":7,"style":7},"language-json shiki shiki-themes dracula-soft","{\n  \"overrides\": {\n    \"vue-loader\": \"^15.10.0-beta.6\"\n  }\n}\n","json",[717],{"type":18,"tag":75,"props":718,"children":719},{"__ignoreMap":7},[720,728,757,792,801],{"type":18,"tag":229,"props":721,"children":722},{"class":231,"line":232},[723],{"type":18,"tag":229,"props":724,"children":725},{"style":242},[726],{"type":23,"value":727},"{\n",{"type":18,"tag":229,"props":729,"children":730},{"class":231,"line":270},[731,737,742,747,752],{"type":18,"tag":229,"props":732,"children":734},{"style":733},"--shiki-default:#97E2F2",[735],{"type":23,"value":736},"  \"",{"type":18,"tag":229,"props":738,"children":740},{"style":739},"--shiki-default:#97E1F1",[741],{"type":23,"value":695},{"type":18,"tag":229,"props":743,"children":744},{"style":733},[745],{"type":23,"value":746},"\"",{"type":18,"tag":229,"props":748,"children":749},{"style":236},[750],{"type":23,"value":751},":",{"type":18,"tag":229,"props":753,"children":754},{"style":242},[755],{"type":23,"value":756}," {\n",{"type":18,"tag":229,"props":758,"children":759},{"class":231,"line":280},[760,765,769,773,777,782,787],{"type":18,"tag":229,"props":761,"children":762},{"style":733},[763],{"type":23,"value":764},"    \"",{"type":18,"tag":229,"props":766,"children":767},{"style":739},[768],{"type":23,"value":655},{"type":18,"tag":229,"props":770,"children":771},{"style":733},[772],{"type":23,"value":746},{"type":18,"tag":229,"props":774,"children":775},{"style":236},[776],{"type":23,"value":751},{"type":18,"tag":229,"props":778,"children":779},{"style":253},[780],{"type":23,"value":781}," \"",{"type":18,"tag":229,"props":783,"children":784},{"style":259},[785],{"type":23,"value":786},"^15.10.0-beta.6",{"type":18,"tag":229,"props":788,"children":789},{"style":253},[790],{"type":23,"value":791},"\"\n",{"type":18,"tag":229,"props":793,"children":795},{"class":231,"line":794},4,[796],{"type":18,"tag":229,"props":797,"children":798},{"style":242},[799],{"type":23,"value":800},"  }\n",{"type":18,"tag":229,"props":802,"children":804},{"class":231,"line":803},5,[805],{"type":18,"tag":229,"props":806,"children":807},{"style":242},[808],{"type":23,"value":809},"}\n",{"type":18,"tag":190,"props":811,"children":812},{},[],{"type":23,"value":814},"If using Vue CLI v5:",{"type":18,"tag":219,"props":816,"children":818},{"className":713,"code":817,"language":715,"meta":7,"style":7},"{\n  \"overrides\": {\n    \"@vue/vue-loader-v15\": \"npm:vue-loader@^15.10.0-beta.6\"\n  }\n}\n",[819],{"type":18,"tag":75,"props":820,"children":821},{"__ignoreMap":7},[822,829,852,885,892],{"type":18,"tag":229,"props":823,"children":824},{"class":231,"line":232},[825],{"type":18,"tag":229,"props":826,"children":827},{"style":242},[828],{"type":23,"value":727},{"type":18,"tag":229,"props":830,"children":831},{"class":231,"line":270},[832,836,840,844,848],{"type":18,"tag":229,"props":833,"children":834},{"style":733},[835],{"type":23,"value":736},{"type":18,"tag":229,"props":837,"children":838},{"style":739},[839],{"type":23,"value":695},{"type":18,"tag":229,"props":841,"children":842},{"style":733},[843],{"type":23,"value":746},{"type":18,"tag":229,"props":845,"children":846},{"style":236},[847],{"type":23,"value":751},{"type":18,"tag":229,"props":849,"children":850},{"style":242},[851],{"type":23,"value":756},{"type":18,"tag":229,"props":853,"children":854},{"class":231,"line":280},[855,859,864,868,872,876,881],{"type":18,"tag":229,"props":856,"children":857},{"style":733},[858],{"type":23,"value":764},{"type":18,"tag":229,"props":860,"children":861},{"style":739},[862],{"type":23,"value":863},"@vue/vue-loader-v15",{"type":18,"tag":229,"props":865,"children":866},{"style":733},[867],{"type":23,"value":746},{"type":18,"tag":229,"props":869,"children":870},{"style":236},[871],{"type":23,"value":751},{"type":18,"tag":229,"props":873,"children":874},{"style":253},[875],{"type":23,"value":781},{"type":18,"tag":229,"props":877,"children":878},{"style":259},[879],{"type":23,"value":880},"npm:vue-loader@^15.10.0-beta.6",{"type":18,"tag":229,"props":882,"children":883},{"style":253},[884],{"type":23,"value":791},{"type":18,"tag":229,"props":886,"children":887},{"class":231,"line":794},[888],{"type":18,"tag":229,"props":889,"children":890},{"style":242},[891],{"type":23,"value":800},{"type":18,"tag":229,"props":893,"children":894},{"class":231,"line":803},[895],{"type":18,"tag":229,"props":896,"children":897},{"style":242},[898],{"type":23,"value":809},{"type":18,"tag":51,"props":900,"children":901},{},[902,903,909,911,918,919,924,925,928,929,1011,1014,1015],{"type":23,"value":680},{"type":18,"tag":75,"props":904,"children":906},{"className":905},[],[907],{"type":23,"value":908},"yarn",{"type":23,"value":910},", use the ",{"type":18,"tag":55,"props":912,"children":915},{"href":913,"rel":914,"target":60},"https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/",[59,59],[916],{"type":23,"value":917},"resolutions",{"type":23,"value":697},{"type":18,"tag":75,"props":920,"children":922},{"className":921},[],[923],{"type":23,"value":703},{"type":23,"value":705},{"type":18,"tag":190,"props":926,"children":927},{},[],{"type":23,"value":710},{"type":18,"tag":219,"props":930,"children":932},{"className":713,"code":931,"language":715,"meta":7,"style":7},"{\n  \"resolutions\": {\n    \"vue-loader\": \"^15.10.0-beta.6\"\n  }\n}\n",[933],{"type":18,"tag":75,"props":934,"children":935},{"__ignoreMap":7},[936,943,966,997,1004],{"type":18,"tag":229,"props":937,"children":938},{"class":231,"line":232},[939],{"type":18,"tag":229,"props":940,"children":941},{"style":242},[942],{"type":23,"value":727},{"type":18,"tag":229,"props":944,"children":945},{"class":231,"line":270},[946,950,954,958,962],{"type":18,"tag":229,"props":947,"children":948},{"style":733},[949],{"type":23,"value":736},{"type":18,"tag":229,"props":951,"children":952},{"style":739},[953],{"type":23,"value":917},{"type":18,"tag":229,"props":955,"children":956},{"style":733},[957],{"type":23,"value":746},{"type":18,"tag":229,"props":959,"children":960},{"style":236},[961],{"type":23,"value":751},{"type":18,"tag":229,"props":963,"children":964},{"style":242},[965],{"type":23,"value":756},{"type":18,"tag":229,"props":967,"children":968},{"class":231,"line":280},[969,973,977,981,985,989,993],{"type":18,"tag":229,"props":970,"children":971},{"style":733},[972],{"type":23,"value":764},{"type":18,"tag":229,"props":974,"children":975},{"style":739},[976],{"type":23,"value":655},{"type":18,"tag":229,"props":978,"children":979},{"style":733},[980],{"type":23,"value":746},{"type":18,"tag":229,"props":982,"children":983},{"style":236},[984],{"type":23,"value":751},{"type":18,"tag":229,"props":986,"children":987},{"style":253},[988],{"type":23,"value":781},{"type":18,"tag":229,"props":990,"children":991},{"style":259},[992],{"type":23,"value":786},{"type":18,"tag":229,"props":994,"children":995},{"style":253},[996],{"type":23,"value":791},{"type":18,"tag":229,"props":998,"children":999},{"class":231,"line":794},[1000],{"type":18,"tag":229,"props":1001,"children":1002},{"style":242},[1003],{"type":23,"value":800},{"type":18,"tag":229,"props":1005,"children":1006},{"class":231,"line":803},[1007],{"type":18,"tag":229,"props":1008,"children":1009},{"style":242},[1010],{"type":23,"value":809},{"type":18,"tag":190,"props":1012,"children":1013},{},[],{"type":23,"value":814},{"type":18,"tag":219,"props":1016,"children":1018},{"className":713,"code":1017,"language":715,"meta":7,"style":7},"{\n  \"resolutions\": {\n    \"@vue/vue-loader-v15\": \"npm:vue-loader@^15.10.0-beta.6\"\n  }\n}\n",[1019],{"type":18,"tag":75,"props":1020,"children":1021},{"__ignoreMap":7},[1022,1029,1052,1083,1090],{"type":18,"tag":229,"props":1023,"children":1024},{"class":231,"line":232},[1025],{"type":18,"tag":229,"props":1026,"children":1027},{"style":242},[1028],{"type":23,"value":727},{"type":18,"tag":229,"props":1030,"children":1031},{"class":231,"line":270},[1032,1036,1040,1044,1048],{"type":18,"tag":229,"props":1033,"children":1034},{"style":733},[1035],{"type":23,"value":736},{"type":18,"tag":229,"props":1037,"children":1038},{"style":739},[1039],{"type":23,"value":917},{"type":18,"tag":229,"props":1041,"children":1042},{"style":733},[1043],{"type":23,"value":746},{"type":18,"tag":229,"props":1045,"children":1046},{"style":236},[1047],{"type":23,"value":751},{"type":18,"tag":229,"props":1049,"children":1050},{"style":242},[1051],{"type":23,"value":756},{"type":18,"tag":229,"props":1053,"children":1054},{"class":231,"line":280},[1055,1059,1063,1067,1071,1075,1079],{"type":18,"tag":229,"props":1056,"children":1057},{"style":733},[1058],{"type":23,"value":764},{"type":18,"tag":229,"props":1060,"children":1061},{"style":739},[1062],{"type":23,"value":863},{"type":18,"tag":229,"props":1064,"children":1065},{"style":733},[1066],{"type":23,"value":746},{"type":18,"tag":229,"props":1068,"children":1069},{"style":236},[1070],{"type":23,"value":751},{"type":18,"tag":229,"props":1072,"children":1073},{"style":253},[1074],{"type":23,"value":781},{"type":18,"tag":229,"props":1076,"children":1077},{"style":259},[1078],{"type":23,"value":880},{"type":18,"tag":229,"props":1080,"children":1081},{"style":253},[1082],{"type":23,"value":791},{"type":18,"tag":229,"props":1084,"children":1085},{"class":231,"line":794},[1086],{"type":18,"tag":229,"props":1087,"children":1088},{"style":242},[1089],{"type":23,"value":800},{"type":18,"tag":229,"props":1091,"children":1092},{"class":231,"line":803},[1093],{"type":18,"tag":229,"props":1094,"children":1095},{"style":242},[1096],{"type":23,"value":809},{"type":18,"tag":51,"props":1098,"children":1099},{},[1100,1101,1107,1109,1116,1117,1120,1121,1237,1240,1241],{"type":23,"value":680},{"type":18,"tag":75,"props":1102,"children":1104},{"className":1103},[],[1105],{"type":23,"value":1106},"pnpm",{"type":23,"value":1108},", use ",{"type":18,"tag":55,"props":1110,"children":1113},{"href":1111,"rel":1112,"target":60},"https://pnpm.io/package_json#pnpmoverrides",[59,59],[1114],{"type":23,"value":1115},"pnpm.overrides",{"type":23,"value":751},{"type":18,"tag":190,"props":1118,"children":1119},{},[],{"type":23,"value":710},{"type":18,"tag":219,"props":1122,"children":1124},{"className":713,"code":1123,"language":715,"meta":7,"style":7},"{\n  \"pnpm\": {\n    \"overrides\": {\n      \"vue-loader\": \"^15.10.0-beta.6\"\n    }\n  }\n}\n",[1125],{"type":18,"tag":75,"props":1126,"children":1127},{"__ignoreMap":7},[1128,1135,1158,1181,1213,1221,1229],{"type":18,"tag":229,"props":1129,"children":1130},{"class":231,"line":232},[1131],{"type":18,"tag":229,"props":1132,"children":1133},{"style":242},[1134],{"type":23,"value":727},{"type":18,"tag":229,"props":1136,"children":1137},{"class":231,"line":270},[1138,1142,1146,1150,1154],{"type":18,"tag":229,"props":1139,"children":1140},{"style":733},[1141],{"type":23,"value":736},{"type":18,"tag":229,"props":1143,"children":1144},{"style":739},[1145],{"type":23,"value":1106},{"type":18,"tag":229,"props":1147,"children":1148},{"style":733},[1149],{"type":23,"value":746},{"type":18,"tag":229,"props":1151,"children":1152},{"style":236},[1153],{"type":23,"value":751},{"type":18,"tag":229,"props":1155,"children":1156},{"style":242},[1157],{"type":23,"value":756},{"type":18,"tag":229,"props":1159,"children":1160},{"class":231,"line":280},[1161,1165,1169,1173,1177],{"type":18,"tag":229,"props":1162,"children":1163},{"style":733},[1164],{"type":23,"value":764},{"type":18,"tag":229,"props":1166,"children":1167},{"style":739},[1168],{"type":23,"value":695},{"type":18,"tag":229,"props":1170,"children":1171},{"style":733},[1172],{"type":23,"value":746},{"type":18,"tag":229,"props":1174,"children":1175},{"style":236},[1176],{"type":23,"value":751},{"type":18,"tag":229,"props":1178,"children":1179},{"style":242},[1180],{"type":23,"value":756},{"type":18,"tag":229,"props":1182,"children":1183},{"class":231,"line":794},[1184,1189,1193,1197,1201,1205,1209],{"type":18,"tag":229,"props":1185,"children":1186},{"style":733},[1187],{"type":23,"value":1188},"      \"",{"type":18,"tag":229,"props":1190,"children":1191},{"style":739},[1192],{"type":23,"value":655},{"type":18,"tag":229,"props":1194,"children":1195},{"style":733},[1196],{"type":23,"value":746},{"type":18,"tag":229,"props":1198,"children":1199},{"style":236},[1200],{"type":23,"value":751},{"type":18,"tag":229,"props":1202,"children":1203},{"style":253},[1204],{"type":23,"value":781},{"type":18,"tag":229,"props":1206,"children":1207},{"style":259},[1208],{"type":23,"value":786},{"type":18,"tag":229,"props":1210,"children":1211},{"style":253},[1212],{"type":23,"value":791},{"type":18,"tag":229,"props":1214,"children":1215},{"class":231,"line":803},[1216],{"type":18,"tag":229,"props":1217,"children":1218},{"style":242},[1219],{"type":23,"value":1220},"    }\n",{"type":18,"tag":229,"props":1222,"children":1224},{"class":231,"line":1223},6,[1225],{"type":18,"tag":229,"props":1226,"children":1227},{"style":242},[1228],{"type":23,"value":800},{"type":18,"tag":229,"props":1230,"children":1232},{"class":231,"line":1231},7,[1233],{"type":18,"tag":229,"props":1234,"children":1235},{"style":242},[1236],{"type":23,"value":809},{"type":18,"tag":190,"props":1238,"children":1239},{},[],{"type":23,"value":814},{"type":18,"tag":219,"props":1242,"children":1244},{"className":713,"code":1243,"language":715,"meta":7,"style":7},"{\n  \"pnpm\": {\n    \"overrides\": {\n      \"@vue/vue-loader-v15\": \"npm:vue-loader@^15.10.0-beta.6\"\n    }\n  }\n}\n",[1245],{"type":18,"tag":75,"props":1246,"children":1247},{"__ignoreMap":7},[1248,1255,1278,1301,1332,1339,1346],{"type":18,"tag":229,"props":1249,"children":1250},{"class":231,"line":232},[1251],{"type":18,"tag":229,"props":1252,"children":1253},{"style":242},[1254],{"type":23,"value":727},{"type":18,"tag":229,"props":1256,"children":1257},{"class":231,"line":270},[1258,1262,1266,1270,1274],{"type":18,"tag":229,"props":1259,"children":1260},{"style":733},[1261],{"type":23,"value":736},{"type":18,"tag":229,"props":1263,"children":1264},{"style":739},[1265],{"type":23,"value":1106},{"type":18,"tag":229,"props":1267,"children":1268},{"style":733},[1269],{"type":23,"value":746},{"type":18,"tag":229,"props":1271,"children":1272},{"style":236},[1273],{"type":23,"value":751},{"type":18,"tag":229,"props":1275,"children":1276},{"style":242},[1277],{"type":23,"value":756},{"type":18,"tag":229,"props":1279,"children":1280},{"class":231,"line":280},[1281,1285,1289,1293,1297],{"type":18,"tag":229,"props":1282,"children":1283},{"style":733},[1284],{"type":23,"value":764},{"type":18,"tag":229,"props":1286,"children":1287},{"style":739},[1288],{"type":23,"value":695},{"type":18,"tag":229,"props":1290,"children":1291},{"style":733},[1292],{"type":23,"value":746},{"type":18,"tag":229,"props":1294,"children":1295},{"style":236},[1296],{"type":23,"value":751},{"type":18,"tag":229,"props":1298,"children":1299},{"style":242},[1300],{"type":23,"value":756},{"type":18,"tag":229,"props":1302,"children":1303},{"class":231,"line":794},[1304,1308,1312,1316,1320,1324,1328],{"type":18,"tag":229,"props":1305,"children":1306},{"style":733},[1307],{"type":23,"value":1188},{"type":18,"tag":229,"props":1309,"children":1310},{"style":739},[1311],{"type":23,"value":863},{"type":18,"tag":229,"props":1313,"children":1314},{"style":733},[1315],{"type":23,"value":746},{"type":18,"tag":229,"props":1317,"children":1318},{"style":236},[1319],{"type":23,"value":751},{"type":18,"tag":229,"props":1321,"children":1322},{"style":253},[1323],{"type":23,"value":781},{"type":18,"tag":229,"props":1325,"children":1326},{"style":259},[1327],{"type":23,"value":880},{"type":18,"tag":229,"props":1329,"children":1330},{"style":253},[1331],{"type":23,"value":791},{"type":18,"tag":229,"props":1333,"children":1334},{"class":231,"line":803},[1335],{"type":18,"tag":229,"props":1336,"children":1337},{"style":242},[1338],{"type":23,"value":1220},{"type":18,"tag":229,"props":1340,"children":1341},{"class":231,"line":1223},[1342],{"type":18,"tag":229,"props":1343,"children":1344},{"style":242},[1345],{"type":23,"value":800},{"type":18,"tag":229,"props":1347,"children":1348},{"class":231,"line":1231},[1349],{"type":18,"tag":229,"props":1350,"children":1351},{"style":242},[1352],{"type":23,"value":809},{"type":18,"tag":51,"props":1354,"children":1355},{},[1356,1358,1369,1371,1376],{"type":23,"value":1357},"If you were previously using any libraries that rely on ",{"type":18,"tag":55,"props":1359,"children":1362},{"href":1360,"rel":1361,"target":60},"https://github.com/vueuse/vue-demi",[59,59],[1363],{"type":18,"tag":75,"props":1364,"children":1366},{"className":1365},[],[1367],{"type":23,"value":1368},"vue-demi",{"type":23,"value":1370}," (e.g. VueUse or Pinia), you may need to remove lockfile and do a fresh npm install to upgrade to the latest version of ",{"type":18,"tag":75,"props":1372,"children":1374},{"className":1373},[],[1375],{"type":23,"value":1368},{"type":23,"value":705},{"type":18,"tag":51,"props":1378,"children":1379},{},[1380,1382,1387],{"type":23,"value":1381},"The SFC compiler for 2.7 now uses PostCSS 8 (upgraded from 7). PostCSS 8 should be backwards compatible with most plugins, but the upgrade ",{"type":18,"tag":416,"props":1383,"children":1384},{},[1385],{"type":23,"value":1386},"may",{"type":23,"value":1388}," cause issues if you were previously using a custom PostCSS plugin that can only work with PostCSS 7. In such cases, you will need to upgrade the relevant plugins to their PostCSS 8 compatible versions.",{"type":18,"tag":204,"props":1390,"children":1392},{"id":1391},"vite",[1393],{"type":23,"value":1394},"Vite",{"type":18,"tag":19,"props":1396,"children":1397},{},[1398,1400,1407,1409,1416],{"type":23,"value":1399},"2.7 support for Vite is provided via a new plugin: ",{"type":18,"tag":55,"props":1401,"children":1404},{"href":1402,"rel":1403,"target":60},"https://github.com/vitejs/vite-plugin-vue2",[59,59],[1405],{"type":23,"value":1406},"@vitejs/plugin-vue2",{"type":23,"value":1408},". This new plugin requires Vue 2.7 or above and supersedes the existing ",{"type":18,"tag":55,"props":1410,"children":1413},{"href":1411,"rel":1412,"target":60},"https://github.com/underfin/vite-plugin-vue2",[59,59],[1414],{"type":23,"value":1415},"vite-plugin-vue2",{"type":23,"value":705},{"type":18,"tag":19,"props":1418,"children":1419},{},[1420],{"type":23,"value":1421},"Note that the new plugin does not handle Vue-specific JSX / TSX transform, which is intentional. Vue 2 JSX / TSX transform should be handled in a separate, dedicated plugin.",{"type":18,"tag":204,"props":1423,"children":1425},{"id":1424},"volar-compatibility",[1426],{"type":23,"value":1427},"Volar Compatibility",{"type":18,"tag":19,"props":1429,"children":1430},{},[1431,1433,1439,1441,1447],{"type":23,"value":1432},"2.7 ships improved type definitions so it is no longer necessary to install ",{"type":18,"tag":75,"props":1434,"children":1436},{"className":1435},[],[1437],{"type":23,"value":1438},"@vue/runtime-dom",{"type":23,"value":1440}," just for Volar template type inference support. All you need now is the following config in ",{"type":18,"tag":75,"props":1442,"children":1444},{"className":1443},[],[1445],{"type":23,"value":1446},"tsconfig.json",{"type":23,"value":751},{"type":18,"tag":219,"props":1449,"children":1451},{"className":713,"code":1450,"language":715,"meta":7,"style":7},"{\n  // ...\n  \"vueCompilerOptions\": {\n    \"target\": 2.7\n  }\n}\n",[1452],{"type":18,"tag":75,"props":1453,"children":1454},{"__ignoreMap":7},[1455,1462,1470,1494,1520,1527],{"type":18,"tag":229,"props":1456,"children":1457},{"class":231,"line":232},[1458],{"type":18,"tag":229,"props":1459,"children":1460},{"style":242},[1461],{"type":23,"value":727},{"type":18,"tag":229,"props":1463,"children":1464},{"class":231,"line":270},[1465],{"type":18,"tag":229,"props":1466,"children":1467},{"style":289},[1468],{"type":23,"value":1469},"  // ...\n",{"type":18,"tag":229,"props":1471,"children":1472},{"class":231,"line":280},[1473,1477,1482,1486,1490],{"type":18,"tag":229,"props":1474,"children":1475},{"style":733},[1476],{"type":23,"value":736},{"type":18,"tag":229,"props":1478,"children":1479},{"style":739},[1480],{"type":23,"value":1481},"vueCompilerOptions",{"type":18,"tag":229,"props":1483,"children":1484},{"style":733},[1485],{"type":23,"value":746},{"type":18,"tag":229,"props":1487,"children":1488},{"style":236},[1489],{"type":23,"value":751},{"type":18,"tag":229,"props":1491,"children":1492},{"style":242},[1493],{"type":23,"value":756},{"type":18,"tag":229,"props":1495,"children":1496},{"class":231,"line":794},[1497,1501,1506,1510,1514],{"type":18,"tag":229,"props":1498,"children":1499},{"style":733},[1500],{"type":23,"value":764},{"type":18,"tag":229,"props":1502,"children":1503},{"style":739},[1504],{"type":23,"value":1505},"target",{"type":18,"tag":229,"props":1507,"children":1508},{"style":733},[1509],{"type":23,"value":746},{"type":18,"tag":229,"props":1511,"children":1512},{"style":236},[1513],{"type":23,"value":751},{"type":18,"tag":229,"props":1515,"children":1517},{"style":1516},"--shiki-default:#BF9EEE",[1518],{"type":23,"value":1519}," 2.7\n",{"type":18,"tag":229,"props":1521,"children":1522},{"class":231,"line":803},[1523],{"type":18,"tag":229,"props":1524,"children":1525},{"style":242},[1526],{"type":23,"value":800},{"type":18,"tag":229,"props":1528,"children":1529},{"class":231,"line":1223},[1530],{"type":18,"tag":229,"props":1531,"children":1532},{"style":242},[1533],{"type":23,"value":809},{"type":18,"tag":40,"props":1535,"children":1537},{"id":1536},"implications-of-the-27-release",[1538],{"type":23,"value":1539},"Implications of the 2.7 Release",{"type":18,"tag":19,"props":1541,"children":1542},{},[1543],{"type":23,"value":1544},"2.7 stable is scheduled to land around end of June 2022. As stated before, it will be the final minor release of Vue 2.x. Once 2.7 is released as stable, Vue 2 will no longer receive new features, and will enter LTS (long-term support) which lasts for 18 months.",{"type":18,"tag":19,"props":1546,"children":1547},{},[1548,1550,1555,1557,1564],{"type":23,"value":1549},"This means ",{"type":18,"tag":416,"props":1551,"children":1552},{},[1553],{"type":23,"value":1554},"Vue 2 will reach End of Life by the end of 2023",{"type":23,"value":1556},". We believe this should provide plenty of time for most of the ecosystem to migrate over to Vue 3. However, we also understand that there could be teams or projects that cannot upgrade by this timeline while still need to fullfil security and compliance requirements. We are planning to provide extended support for Vue 2 for teams with such needs - if your team expects to be using Vue 2 beyond end of 2023, make sure to plan head and register your interest ",{"type":18,"tag":55,"props":1558,"children":1561},{"href":1559,"rel":1560,"target":60},"https://airtable.com/shrj37Zf4ZIfrxFzh",[59,59],[1562],{"type":23,"value":1563},"here",{"type":23,"value":705},{"type":18,"tag":1566,"props":1567,"children":1568},"style",{},[1569],{"type":23,"value":1570},"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":270,"depth":270,"links":1572},[1573,1577,1582],{"id":42,"depth":270,"text":45,"children":1574},[1575,1576],{"id":206,"depth":280,"text":209},{"id":313,"depth":280,"text":316},{"id":527,"depth":270,"text":530,"children":1578},[1579,1580,1581],{"id":538,"depth":280,"text":541},{"id":1391,"depth":280,"text":1394},{"id":1424,"depth":280,"text":1427},{"id":1536,"depth":270,"text":1539},"markdown","content:blog:vue-2-7-beta.md","content","blog/vue-2-7-beta.md","blog/vue-2-7-beta","md",{"loc":4},["Island",1591],{"key":1592,"result":1593},"StaticMarkdown_0HYwGo0qTO",{"head":1594},{"meta":1595,"title":8,"link":1598,"style":1599},[1596],{"name":1597,"content":8},"description",[],[],1788519848975]