[{"data":1,"prerenderedAt":1671},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue3.0新特性":3},{"id":4,"title":5,"body":6,"description":1664,"extension":1665,"meta":1666,"navigation":227,"path":1667,"seo":1668,"stem":1669,"__hash__":1670},"content\u002FVue\u002FVue3.0新特性.md","Vue3.0新特性",{"type":7,"value":8,"toc":1643},"minimark",[9,13,29,33,44,48,122,139,431,435,466,506,549,612,615,671,699,703,750,753,798,801,813,817,835,838,895,898,933,936,970,973,989,992,1103,1107,1159,1162,1170,1620,1623,1631,1634,1640],[10,11,5],"h1",{"id":12},"vue30新特性",[14,15,16,20,21,24,25,28],"p",{},[17,18,19],"code",{},"Vue3.0","的设计目标可以概括为体积更小、速度更快、加强",[17,22,23],{},"TypeScript","支持、加强",[17,26,27],{},"API","设计一致性、提高自身可维护性、开放更多底层功能。",[30,31,32],"h2",{"id":32},"描述",[14,34,35,36,39,40,43],{},"从",[17,37,38],{},"Vue2","到",[17,41,42],{},"Vue3","在一些比较重要的方面的详细对比。",[45,46,47],"h3",{"id":47},"生命周期的变化",[49,50,51,57,62,67,72,77,82,87,92,97,102,107,112,117],"ul",{},[52,53,54],"li",{},[17,55,56],{},"Vue2 -> Vue3",[52,58,59],{},[17,60,61],{},"beforeCreate -> setup",[52,63,64],{},[17,65,66],{},"created -> setup",[52,68,69],{},[17,70,71],{},"beforeMount -> onBeforeMount",[52,73,74],{},[17,75,76],{},"mounted -> onMounted",[52,78,79],{},[17,80,81],{},"beforeUpdate -> onBeforeUpdate",[52,83,84],{},[17,85,86],{},"updated -> onUpdated",[52,88,89],{},[17,90,91],{},"beforeDestroy -> onBeforeUnmount",[52,93,94],{},[17,95,96],{},"destroyed -> onUnmounted",[52,98,99],{},[17,100,101],{},"activated -> onActivated",[52,103,104],{},[17,105,106],{},"deactivated -> onDeactivated",[52,108,109],{},[17,110,111],{},"errorCaptured -> onErrorCaptured",[52,113,114],{},[17,115,116],{},"renderTracked -> onRenderTracked",[52,118,119],{},[17,120,121],{},"renderTriggered -> onRenderTriggered",[14,123,124,125,128,129,131,132,135,136,138],{},"在这里主要是增加了",[17,126,127],{},"setup","这个生命周期，而其他的生命周期都是以",[17,130,27],{},"的形式调用，实际上随着",[17,133,134],{},"Composition API","的引入，我们访问这些钩子函数的方式已经改变，我们所有的生命周期都应该写在",[17,137,127],{},"中，此方法我们应该实现大多数组件代码，并处理响应式，生命周期钩子函数等。",[140,141,146],"pre",{"className":142,"code":143,"language":144,"meta":145,"style":145},"language-javascript shiki shiki-themes github-light github-dark","import { onBeforeMount, \n    onMounted, \n    onBeforeUpdate, \n    onUpdated, \n    onBeforeUnmount, \n    onUnmounted, \n    onActivated, \n    onDeactivated, \n    onErrorCaptured, \n    onRenderTracked,  \n    onRenderTriggered\n} from \"vue\";\n\nexport default {\n    setup() {\n        onBeforeMount(() => {\n            \u002F\u002F ... \n        })\n        onMounted(() => {\n            \u002F\u002F ... \n        })\n        onBeforeUpdate(() => {\n            \u002F\u002F ... \n        })\n        onUpdated(() => {\n            \u002F\u002F ... \n        })\n        onBeforeUnmount(() => {\n            \u002F\u002F ... \n        })\n        onUnmounted(() => {\n            \u002F\u002F ... \n        })\n        onActivated(() => {\n            \u002F\u002F ... \n        })\n        onDeactivated(() => {\n            \u002F\u002F ... \n        })\n        onErrorCaptured(() => {\n            \u002F\u002F ... \n        })\n        onRenderTracked(() => {\n            \u002F\u002F ... \n        })\n        onRenderTriggered(() => {\n            \u002F\u002F ... \n        })\n    }\n}\n","javascript","",[17,147,148,156,162,168,174,180,186,192,198,204,210,216,222,229,235,241,247,253,259,265,270,275,281,286,291,297,302,307,313,318,323,329,334,339,345,350,355,361,366,371,377,382,387,393,398,403,409,414,419,425],{"__ignoreMap":145},[149,150,153],"span",{"class":151,"line":152},"line",1,[149,154,155],{},"import { onBeforeMount, \n",[149,157,159],{"class":151,"line":158},2,[149,160,161],{},"    onMounted, \n",[149,163,165],{"class":151,"line":164},3,[149,166,167],{},"    onBeforeUpdate, \n",[149,169,171],{"class":151,"line":170},4,[149,172,173],{},"    onUpdated, \n",[149,175,177],{"class":151,"line":176},5,[149,178,179],{},"    onBeforeUnmount, \n",[149,181,183],{"class":151,"line":182},6,[149,184,185],{},"    onUnmounted, \n",[149,187,189],{"class":151,"line":188},7,[149,190,191],{},"    onActivated, \n",[149,193,195],{"class":151,"line":194},8,[149,196,197],{},"    onDeactivated, \n",[149,199,201],{"class":151,"line":200},9,[149,202,203],{},"    onErrorCaptured, \n",[149,205,207],{"class":151,"line":206},10,[149,208,209],{},"    onRenderTracked,  \n",[149,211,213],{"class":151,"line":212},11,[149,214,215],{},"    onRenderTriggered\n",[149,217,219],{"class":151,"line":218},12,[149,220,221],{},"} from \"vue\";\n",[149,223,225],{"class":151,"line":224},13,[149,226,228],{"emptyLinePlaceholder":227},true,"\n",[149,230,232],{"class":151,"line":231},14,[149,233,234],{},"export default {\n",[149,236,238],{"class":151,"line":237},15,[149,239,240],{},"    setup() {\n",[149,242,244],{"class":151,"line":243},16,[149,245,246],{},"        onBeforeMount(() => {\n",[149,248,250],{"class":151,"line":249},17,[149,251,252],{},"            \u002F\u002F ... \n",[149,254,256],{"class":151,"line":255},18,[149,257,258],{},"        })\n",[149,260,262],{"class":151,"line":261},19,[149,263,264],{},"        onMounted(() => {\n",[149,266,268],{"class":151,"line":267},20,[149,269,252],{},[149,271,273],{"class":151,"line":272},21,[149,274,258],{},[149,276,278],{"class":151,"line":277},22,[149,279,280],{},"        onBeforeUpdate(() => {\n",[149,282,284],{"class":151,"line":283},23,[149,285,252],{},[149,287,289],{"class":151,"line":288},24,[149,290,258],{},[149,292,294],{"class":151,"line":293},25,[149,295,296],{},"        onUpdated(() => {\n",[149,298,300],{"class":151,"line":299},26,[149,301,252],{},[149,303,305],{"class":151,"line":304},27,[149,306,258],{},[149,308,310],{"class":151,"line":309},28,[149,311,312],{},"        onBeforeUnmount(() => {\n",[149,314,316],{"class":151,"line":315},29,[149,317,252],{},[149,319,321],{"class":151,"line":320},30,[149,322,258],{},[149,324,326],{"class":151,"line":325},31,[149,327,328],{},"        onUnmounted(() => {\n",[149,330,332],{"class":151,"line":331},32,[149,333,252],{},[149,335,337],{"class":151,"line":336},33,[149,338,258],{},[149,340,342],{"class":151,"line":341},34,[149,343,344],{},"        onActivated(() => {\n",[149,346,348],{"class":151,"line":347},35,[149,349,252],{},[149,351,353],{"class":151,"line":352},36,[149,354,258],{},[149,356,358],{"class":151,"line":357},37,[149,359,360],{},"        onDeactivated(() => {\n",[149,362,364],{"class":151,"line":363},38,[149,365,252],{},[149,367,369],{"class":151,"line":368},39,[149,370,258],{},[149,372,374],{"class":151,"line":373},40,[149,375,376],{},"        onErrorCaptured(() => {\n",[149,378,380],{"class":151,"line":379},41,[149,381,252],{},[149,383,385],{"class":151,"line":384},42,[149,386,258],{},[149,388,390],{"class":151,"line":389},43,[149,391,392],{},"        onRenderTracked(() => {\n",[149,394,396],{"class":151,"line":395},44,[149,397,252],{},[149,399,401],{"class":151,"line":400},45,[149,402,258],{},[149,404,406],{"class":151,"line":405},46,[149,407,408],{},"        onRenderTriggered(() => {\n",[149,410,412],{"class":151,"line":411},47,[149,413,252],{},[149,415,417],{"class":151,"line":416},48,[149,418,258],{},[149,420,422],{"class":151,"line":421},49,[149,423,424],{},"    }\n",[149,426,428],{"class":151,"line":427},50,[149,429,430],{},"}\n",[45,432,434],{"id":433},"使用proxy代替defineproperty","使用proxy代替defineProperty",[14,436,437,439,440,443,444,447,448,451,452,454,455,458,459,462,463,465],{},[17,438,38],{},"是通过数据劫持的方式来实现响应式的，其中最核心的方法便是通过",[17,441,442],{},"Object.defineProperty()","来实现对属性的劫持，该方法允许精确地添加或修改对象的属性，对数据添加属性描述符中的",[17,445,446],{},"getter","与",[17,449,450],{},"setter","存取描述符实现劫持。",[17,453,38],{},"之所以只能兼容到",[17,456,457],{},"IE8","主要就是因为",[17,460,461],{},"defineProperty","无法兼容",[17,464,457],{},"，其他浏览器也会存在轻微兼容问题。",[140,467,469],{"className":142,"code":468,"language":144,"meta":145,"style":145},"var obj = { __x: 1 };\nObject.defineProperty(obj, \"x\", {\n    set: function(x){ console.log(\"watch\"); this.__x = x; },\n    get: function(){ return this.__x; }\n});\nobj.x = 11; \u002F\u002F watch\nconsole.log(obj.x); \u002F\u002F 11\n",[17,470,471,476,481,486,491,496,501],{"__ignoreMap":145},[149,472,473],{"class":151,"line":152},[149,474,475],{},"var obj = { __x: 1 };\n",[149,477,478],{"class":151,"line":158},[149,479,480],{},"Object.defineProperty(obj, \"x\", {\n",[149,482,483],{"class":151,"line":164},[149,484,485],{},"    set: function(x){ console.log(\"watch\"); this.__x = x; },\n",[149,487,488],{"class":151,"line":170},[149,489,490],{},"    get: function(){ return this.__x; }\n",[149,492,493],{"class":151,"line":176},[149,494,495],{},"});\n",[149,497,498],{"class":151,"line":182},[149,499,500],{},"obj.x = 11; \u002F\u002F watch\n",[149,502,503],{"class":151,"line":188},[149,504,505],{},"console.log(obj.x); \u002F\u002F 11\n",[14,507,508,510,511,514,515,518,519,521,522,525,526,529,530,532,533,535,536,539,540,542,543,545,546,548],{},[17,509,42],{},"使用",[17,512,513],{},"Proxy","实现数据劫持，",[17,516,517],{},"Object.defineProperty","只能监听属性，而",[17,520,513],{},"能监听整个对象，通过调用",[17,523,524],{},"new Proxy()","，可以创建一个代理用来替代另一个对象被称为目标，这个代理对目标对象进行了虚拟，因此该代理与该目标对象表面上可以被当作同一个对象来对待。代理允许拦截在目标对象上的底层操作，而这原本是",[17,527,528],{},"Js","引擎的内部能力，拦截行为使用了一个能够响应特定操作的函数，即通过",[17,531,513],{},"去对一个对象进行代理之后，我们将得到一个和被代理对象几乎完全一样的对象，并且可以从底层实现对这个对象进行完全的监控。",[17,534,513],{},"对象是",[17,537,538],{},"ES6","引入的新特性，",[17,541,42],{},"放弃使用了",[17,544,517],{},"，而选择了使用更快的原生",[17,547,513],{},"，即是在兼容性方面更偏向于现代浏览器。",[140,550,552],{"className":142,"code":551,"language":144,"meta":145,"style":145},"var target = {a: 1};\nvar proxy = new Proxy(target, {\n    set: function(target, key, value, receiver){ \n        console.log(\"watch\");\n        return Reflect.set(target, key, value, receiver);\n    },\n    get: function(target, key, receiver){ \n        return target[key];\n    }\n});\nproxy.a = 11; \u002F\u002F watch\nconsole.log(target); \u002F\u002F { a: 11 }\n",[17,553,554,559,564,569,574,579,584,589,594,598,602,607],{"__ignoreMap":145},[149,555,556],{"class":151,"line":152},[149,557,558],{},"var target = {a: 1};\n",[149,560,561],{"class":151,"line":158},[149,562,563],{},"var proxy = new Proxy(target, {\n",[149,565,566],{"class":151,"line":164},[149,567,568],{},"    set: function(target, key, value, receiver){ \n",[149,570,571],{"class":151,"line":170},[149,572,573],{},"        console.log(\"watch\");\n",[149,575,576],{"class":151,"line":176},[149,577,578],{},"        return Reflect.set(target, key, value, receiver);\n",[149,580,581],{"class":151,"line":182},[149,582,583],{},"    },\n",[149,585,586],{"class":151,"line":188},[149,587,588],{},"    get: function(target, key, receiver){ \n",[149,590,591],{"class":151,"line":194},[149,592,593],{},"        return target[key];\n",[149,595,596],{"class":151,"line":200},[149,597,424],{},[149,599,600],{"class":151,"line":206},[149,601,495],{},[149,603,604],{"class":151,"line":212},[149,605,606],{},"proxy.a = 11; \u002F\u002F watch\n",[149,608,609],{"class":151,"line":218},[149,610,611],{},"console.log(target); \u002F\u002F { a: 11 }\n",[45,613,614],{"id":614},"diff算法的提升",[14,616,617,620,621,624,625,627,628,631,632,635,636,639,640,642,643,645,646,649,651,652,654,655,657,658,660,661,663,664,667,668,670],{},[17,618,619],{},"diff","算法的基础是",[17,622,623],{},"Virtual DOM","，",[17,626,623],{},"是一棵以",[17,629,630],{},"JavaScript","对象作为基础的树，每一个节点称为",[17,633,634],{},"VNode","，用对象属性来描述节点，实际上它是一层对真实",[17,637,638],{},"DOM","的抽象，最终可以通过渲染操作使这棵树映射到真实环境上，简单来说",[17,641,623],{},"就是一个",[17,644,528],{},"对象，用以描述整个文档。",[647,648],"br",{},[17,650,38],{},"框架通过深度递归遍历新旧两个虚拟",[17,653,638],{},"树，并比较每个节点上的每个属性，来确定实际",[17,656,638],{},"的哪些部分需要更新，由于现代",[17,659,630],{},"引擎执行的高级优化，这种有点暴力的算法通常非常快速，但是",[17,662,638],{},"的更新仍然涉及许多不必要的",[17,665,666],{},"CPU","工作。",[647,669],{},"\n在这里引用尤大的描述，为了实现这一点，编译器和运行时需要协同工作：编译器分析模板并生成带有优化提示的代码，而运行时尽可能获取提示并采用快速路径，这里有三个主要的优化：",[49,672,673,693,696],{},[52,674,675,676,678,679,682,683,686,687,689,690,692],{},"首先，在",[17,677,638],{},"树级别，我们注意到，在没有动态改变节点结构的模板指令(例如",[17,680,681],{},"v-if","和",[17,684,685],{},"v-for",")的情况下，节点结构保持完全静态，如果我们将一个模板分成由这些结构指令分隔的嵌套块，则每个块中的节点结构将再次完全静态，当我们更新块中的节点时，我们不再需要递归遍历",[17,688,638],{},"树，该块内的动态绑定可以在一个平面数组中跟踪，这种优化通过将需要执行的树遍历量减少一个数量级来规避虚拟",[17,691,638],{},"的大部分开销。",[52,694,695],{},"其次，编译器积极地检测模板中的静态节点、子树甚至数据对象，并在生成的代码中将它们提升到渲染函数之外，这样可以避免在每次渲染时重新创建这些对象，从而大大提高内存使用率并减少垃圾回收的频率。",[52,697,698],{},"第三，在元素级别，编译器还根据需要执行的更新类型，为每个具有动态绑定的元素生成一个优化标志，例如具有动态类绑定和许多静态属性的元素将收到一个标志，提示只需要进行类检查，运行时将获取这些提示并采用专用的快速路径。",[45,700,702],{"id":701},"typescript的支持","TypeScript的支持",[14,704,705,707,708,710,711,713,714,716,717,720,721,723,724,727,728,731,732,734,735,737,738,741,742,624,744,746,747,749],{},[17,706,38],{},"中使用的都是",[17,709,528],{},"，其本身并没有类型系统这个概念，现如今",[17,712,23],{},"异常火爆，对于规模很大的项目，没有类型声明，后期维护和代码的阅读都是头疼的事情，虽然",[17,715,38],{},"实际上也是可以使用",[17,718,719],{},"TS","的，但是支持并不算特别完美，此外",[17,722,38],{},"的源码也是使用",[17,725,726],{},"Facebook","的",[17,729,730],{},"Flow","做类型检查。",[647,733],{},"\n最终",[17,736,42],{},"借鉴了",[17,739,740],{},"React Hook","实现了更自由的编程方式，提出了",[17,743,134],{},[17,745,134],{},"不需要通过指定一长串选项来定义组件，而是允许用户像编写函数一样自由地表达、组合和重用有状态的组件逻辑，同时提供出色的",[17,748,23],{},"支持。",[45,751,752],{"id":752},"打包体积变化",[14,754,755,757,758,761,762,764,765,767,768,770,771,727,773,776,777,780,781,783,784,787,788,790,791,794,795,797],{},[17,756,38],{},"官方说明运行时打包",[17,759,760],{},"23k","，但这只是没安装依赖的时候，随着依赖包和框架特性的增多，有时候不必要的，未使用的代码文件都被打包了进去，所以后期项目大了，打包文件会特别多还很大。",[647,763],{},"\n在",[17,766,42],{},"中，通过将大多数全局",[17,769,27],{},"和内部帮助程序移动到",[17,772,630],{},[17,774,775],{},"module.exports","属性上实现这一点，这允许现代模式下的",[17,778,779],{},"module bundler","能够静态地分析模块依赖关系，并删除与未使用的",[17,782,775],{},"属性相关的代码，模板编译器还生成了对",[17,785,786],{},"Tree Shaking","摇树优化友好的代码，只有在模板中实际使用某个特性时，该代码才导入该特性的帮助程序，尽管增加了许多新特性，但",[17,789,42],{},"被压缩后的基线大小约为",[17,792,793],{},"10KB","，不到",[17,796,38],{},"的一半。",[30,799,800],{"id":800},"非兼容变更",[14,802,803,805,806,808,809,812],{},[17,804,42],{},"相对于",[17,807,38],{},"的非兼容的变更概括，详情可以查阅",[17,810,811],{},"https:\u002F\u002Fv3.cn.vuejs.org\u002Fguide\u002Fmigration\u002Fintroduction.html","。",[45,814,816],{"id":815},"全局api","全局API",[49,818,819,826],{},[52,820,821,822,825],{},"全局",[17,823,824],{},"Vue API","已更改为使用应用程序实例。",[52,827,828,829,831,832,812],{},"全局和内部",[17,830,27],{},"已经被重构为可",[17,833,834],{},"tree-shakable",[45,836,837],{"id":837},"模板指令",[49,839,840,850,863,871,877,883],{},[52,841,842,843,846,847,812],{},"组件上",[17,844,845],{},"v-model","用法已更改，替换",[17,848,849],{},"v-bind.sync",[52,851,852,855,856,858,859,862],{},[17,853,854],{},"\u003Ctemplate v-for>","和非",[17,857,685],{},"节点上",[17,860,861],{},"key","用法已更改。",[52,864,865,866,682,868,870],{},"在同一元素上使用的",[17,867,681],{},[17,869,685],{},"优先级已更改。",[52,872,873,876],{},[17,874,875],{},"v-bind=\"object\"","现在排序敏感。",[52,878,879,882],{},[17,880,881],{},"v-on:event.native","修饰符已移除。",[52,884,885,887,888,891,892,894],{},[17,886,685],{},"中的",[17,889,890],{},"ref","不再注册",[17,893,890],{},"数组。",[45,896,897],{"id":897},"组件",[49,899,900,903,919,926],{},[52,901,902],{},"只能使用普通函数创建功能组件。",[52,904,905,908,909,912,913,682,916,918],{},[17,906,907],{},"functional","属性在",[17,910,911],{},"SFC","单文件组件",[17,914,915],{},"\u003Ctemplate>",[17,917,907],{},"组件选项被抛弃。",[52,920,921,922,925],{},"异步组件现在需要",[17,923,924],{},"defineAsyncComponent","方法来创建。",[52,927,928,929,932],{},"组件事件现在需要在",[17,930,931],{},"emits","选项中声明。",[45,934,935],{"id":935},"渲染函数",[49,937,938,943,953,962],{},[52,939,935,940,942],{},[17,941,27],{},"改变。",[52,944,945,948,949,952],{},[17,946,947],{},"$scopedSlots property","已删除，所有插槽都通过",[17,950,951],{},"$slots","作为函数暴露。",[52,954,955,958,959,812],{},[17,956,957],{},"$listeners","被移除或整合到",[17,960,961],{},"$attrs",[52,963,964,966,967,812],{},[17,965,961],{},"现在包含",[17,968,969],{},"class and style attribute",[45,971,972],{"id":972},"自定义元素",[49,974,975,978],{},[52,976,977],{},"自定义元素白名单现在已经在编译时执行。",[52,979,980,981,984,985,988],{},"对特殊的",[17,982,983],{},"is prop","的使用只严格限制在被保留的",[17,986,987],{},"\u003Ccomponent>","标记中。",[45,990,991],{"id":991},"其他小改变",[49,993,994,1003,1011,1021,1027,1033,1042,1048,1055,1061,1068,1086],{},[52,995,996,999,1000,812],{},[17,997,998],{},"destroyed","生命周期选项被重命名为",[17,1001,1002],{},"unmounted",[52,1004,1005,999,1008,812],{},[17,1006,1007],{},"beforeDestroy",[17,1009,1010],{},"beforeUnmount",[52,1012,1013,1016,1017,1020],{},[17,1014,1015],{},"default prop","工厂函数不再可以访问",[17,1018,1019],{},"this","上下文。",[52,1022,1023,1024,1026],{},"自定义指令",[17,1025,27],{},"已更改为与组件生命周期一致。",[52,1028,1029,1032],{},[17,1030,1031],{},"data","选项应始终被声明为一个函数。",[52,1034,1035,1036,727,1039,1041],{},"来自",[17,1037,1038],{},"mixin",[17,1040,1031],{},"选项现在为浅合并。",[52,1043,1044,1047],{},[17,1045,1046],{},"Attribute","强制策略已更改。",[52,1049,1050,1051,1054],{},"一些过渡",[17,1052,1053],{},"class","被重命名。",[52,1056,1057,1060],{},[17,1058,1059],{},"\u003CTransitionGroup>","不再默认渲染包裹元素。",[52,1062,1063,1064,1067],{},"当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则需要指定",[17,1065,1066],{},"deep","选项。",[52,1069,1070,1071,1074,1075,1074,1077,727,1080,1082,1083,1085],{},"没有特殊指令的标记",[17,1072,1073],{},"v-if\u002Felse-if\u002Felse","、",[17,1076,685],{},[17,1078,1079],{},"v-slot",[17,1081,915],{},"现在被视为普通元素，并将生成原生的",[17,1084,915],{},"元素，而不是渲染其内部内容。",[52,1087,1088,1089,1091,1092,1095,1096,1098,1099,1102],{},"在",[17,1090,38],{},"中，应用根容器的",[17,1093,1094],{},"outerHTML","将替换为根组件模板，如果根组件没有模板\u002F渲染选项，则最终编译为模板，",[17,1097,42],{},"现在使用应用容器的",[17,1100,1101],{},"innerHTML","，这意味着容器本身不再被视为模板的一部分。",[45,1104,1106],{"id":1105},"移除api","移除API",[49,1108,1109,1119,1131,1134,1140,1149],{},[52,1110,1111,1114,1115,1118],{},[17,1112,1113],{},"keyCode","支持作为",[17,1116,1117],{},"v-on","的修饰符。",[52,1120,1121,1074,1124,682,1127,1130],{},[17,1122,1123],{},"$on",[17,1125,1126],{},"$off",[17,1128,1129],{},"$once","实例方法",[52,1132,1133],{},"过滤器方法，建议用计算属性或方法代替过滤器。",[52,1135,1136,1137,812],{},"内联模板",[17,1138,1139],{},"attribute",[52,1141,1142,1145,1146,812],{},[17,1143,1144],{},"$children","实例",[17,1147,1148],{},"property",[52,1150,1151,1154,1155,1158],{},[17,1152,1153],{},"$destroy","实例方法，用户不应再手动管理单个",[17,1156,1157],{},"Vue","组件的生命周期。",[30,1160,1161],{"id":1161},"示例",[14,1163,1164,1166,1167,812],{},[17,1165,42],{},"的组件简单示例，可查看在线示例",[17,1168,1169],{},"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fc1437?file=\u002Fsrc\u002FApp.vue",[140,1171,1175],{"className":1172,"code":1173,"language":1174,"meta":145,"style":145},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv>{{ msg }}\u003C\u002Fdiv>\n    \u003Cdiv>count: {{ count }}\u003C\u002Fdiv>\n    \u003Cdiv>double-count: {{ doubleCount }}\u003C\u002Fdiv>\n    \u003Cbutton @click=\"multCount(3)\">count => count*3\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { onMounted, reactive, computed } from \"vue\";\nexport default {\n  name: \"App\",\n  components: {},\n  setup: () => {\n    \u002F* 定义data *\u002F\n    const data = reactive({\n      msg: \"Hello World\",\n      count: 1,\n    });\n\n    \u002F* 处理生命周期 *\u002F\n    onMounted(() => {\n      console.log(\"Mounted\");\n    });\n\n    \u002F* 处理computed *\u002F\n    const computeds = {\n      doubleCount: computed(() => data.count * 2),\n    };\n\n    \u002F* 定义methods *\u002F\n    const methods = {\n      multCount: function (n) {\n        data.count = data.count * n;\n      },\n    };\n\n    \u002F* 返回数据 *\u002F\n    return Object.assign(data, computeds, methods);\n  },\n};\n\u003C\u002Fscript>\n\n\u003Cstyle>\n\u003C\u002Fstyle>\n","html",[17,1176,1177,1190,1200,1214,1227,1240,1265,1274,1283,1287,1296,1314,1325,1336,1341,1354,1360,1378,1388,1398,1403,1407,1412,1424,1441,1445,1449,1454,1465,1489,1494,1498,1503,1514,1535,1549,1554,1558,1562,1567,1581,1586,1591,1599,1603,1612],{"__ignoreMap":145},[149,1178,1179,1183,1187],{"class":151,"line":152},[149,1180,1182],{"class":1181},"sVt8B","\u003C",[149,1184,1186],{"class":1185},"s9eBZ","template",[149,1188,1189],{"class":1181},">\n",[149,1191,1192,1195,1198],{"class":151,"line":158},[149,1193,1194],{"class":1181},"  \u003C",[149,1196,1197],{"class":1185},"div",[149,1199,1189],{"class":1181},[149,1201,1202,1205,1207,1210,1212],{"class":151,"line":164},[149,1203,1204],{"class":1181},"    \u003C",[149,1206,1197],{"class":1185},[149,1208,1209],{"class":1181},">{{ msg }}\u003C\u002F",[149,1211,1197],{"class":1185},[149,1213,1189],{"class":1181},[149,1215,1216,1218,1220,1223,1225],{"class":151,"line":170},[149,1217,1204],{"class":1181},[149,1219,1197],{"class":1185},[149,1221,1222],{"class":1181},">count: {{ count }}\u003C\u002F",[149,1224,1197],{"class":1185},[149,1226,1189],{"class":1181},[149,1228,1229,1231,1233,1236,1238],{"class":151,"line":176},[149,1230,1204],{"class":1181},[149,1232,1197],{"class":1185},[149,1234,1235],{"class":1181},">double-count: {{ doubleCount }}\u003C\u002F",[149,1237,1197],{"class":1185},[149,1239,1189],{"class":1181},[149,1241,1242,1244,1247,1251,1254,1258,1261,1263],{"class":151,"line":182},[149,1243,1204],{"class":1181},[149,1245,1246],{"class":1185},"button",[149,1248,1250],{"class":1249},"sScJk"," @click",[149,1252,1253],{"class":1181},"=",[149,1255,1257],{"class":1256},"sZZnC","\"multCount(3)\"",[149,1259,1260],{"class":1181},">count => count*3\u003C\u002F",[149,1262,1246],{"class":1185},[149,1264,1189],{"class":1181},[149,1266,1267,1270,1272],{"class":151,"line":188},[149,1268,1269],{"class":1181},"  \u003C\u002F",[149,1271,1197],{"class":1185},[149,1273,1189],{"class":1181},[149,1275,1276,1279,1281],{"class":151,"line":194},[149,1277,1278],{"class":1181},"\u003C\u002F",[149,1280,1186],{"class":1185},[149,1282,1189],{"class":1181},[149,1284,1285],{"class":151,"line":200},[149,1286,228],{"emptyLinePlaceholder":227},[149,1288,1289,1291,1294],{"class":151,"line":206},[149,1290,1182],{"class":1181},[149,1292,1293],{"class":1185},"script",[149,1295,1189],{"class":1181},[149,1297,1298,1302,1305,1308,1311],{"class":151,"line":212},[149,1299,1301],{"class":1300},"szBVR","import",[149,1303,1304],{"class":1181}," { onMounted, reactive, computed } ",[149,1306,1307],{"class":1300},"from",[149,1309,1310],{"class":1256}," \"vue\"",[149,1312,1313],{"class":1181},";\n",[149,1315,1316,1319,1322],{"class":151,"line":218},[149,1317,1318],{"class":1300},"export",[149,1320,1321],{"class":1300}," default",[149,1323,1324],{"class":1181}," {\n",[149,1326,1327,1330,1333],{"class":151,"line":224},[149,1328,1329],{"class":1181},"  name: ",[149,1331,1332],{"class":1256},"\"App\"",[149,1334,1335],{"class":1181},",\n",[149,1337,1338],{"class":151,"line":231},[149,1339,1340],{"class":1181},"  components: {},\n",[149,1342,1343,1346,1349,1352],{"class":151,"line":237},[149,1344,1345],{"class":1249},"  setup",[149,1347,1348],{"class":1181},": () ",[149,1350,1351],{"class":1300},"=>",[149,1353,1324],{"class":1181},[149,1355,1356],{"class":151,"line":243},[149,1357,1359],{"class":1358},"sJ8bj","    \u002F* 定义data *\u002F\n",[149,1361,1362,1365,1369,1372,1375],{"class":151,"line":249},[149,1363,1364],{"class":1300},"    const",[149,1366,1368],{"class":1367},"sj4cs"," data",[149,1370,1371],{"class":1300}," =",[149,1373,1374],{"class":1249}," reactive",[149,1376,1377],{"class":1181},"({\n",[149,1379,1380,1383,1386],{"class":151,"line":255},[149,1381,1382],{"class":1181},"      msg: ",[149,1384,1385],{"class":1256},"\"Hello World\"",[149,1387,1335],{"class":1181},[149,1389,1390,1393,1396],{"class":151,"line":261},[149,1391,1392],{"class":1181},"      count: ",[149,1394,1395],{"class":1367},"1",[149,1397,1335],{"class":1181},[149,1399,1400],{"class":151,"line":267},[149,1401,1402],{"class":1181},"    });\n",[149,1404,1405],{"class":151,"line":272},[149,1406,228],{"emptyLinePlaceholder":227},[149,1408,1409],{"class":151,"line":277},[149,1410,1411],{"class":1358},"    \u002F* 处理生命周期 *\u002F\n",[149,1413,1414,1417,1420,1422],{"class":151,"line":283},[149,1415,1416],{"class":1249},"    onMounted",[149,1418,1419],{"class":1181},"(() ",[149,1421,1351],{"class":1300},[149,1423,1324],{"class":1181},[149,1425,1426,1429,1432,1435,1438],{"class":151,"line":288},[149,1427,1428],{"class":1181},"      console.",[149,1430,1431],{"class":1249},"log",[149,1433,1434],{"class":1181},"(",[149,1436,1437],{"class":1256},"\"Mounted\"",[149,1439,1440],{"class":1181},");\n",[149,1442,1443],{"class":151,"line":293},[149,1444,1402],{"class":1181},[149,1446,1447],{"class":151,"line":299},[149,1448,228],{"emptyLinePlaceholder":227},[149,1450,1451],{"class":151,"line":304},[149,1452,1453],{"class":1358},"    \u002F* 处理computed *\u002F\n",[149,1455,1456,1458,1461,1463],{"class":151,"line":309},[149,1457,1364],{"class":1300},[149,1459,1460],{"class":1367}," computeds",[149,1462,1371],{"class":1300},[149,1464,1324],{"class":1181},[149,1466,1467,1470,1473,1475,1477,1480,1483,1486],{"class":151,"line":315},[149,1468,1469],{"class":1181},"      doubleCount: ",[149,1471,1472],{"class":1249},"computed",[149,1474,1419],{"class":1181},[149,1476,1351],{"class":1300},[149,1478,1479],{"class":1181}," data.count ",[149,1481,1482],{"class":1300},"*",[149,1484,1485],{"class":1367}," 2",[149,1487,1488],{"class":1181},"),\n",[149,1490,1491],{"class":151,"line":320},[149,1492,1493],{"class":1181},"    };\n",[149,1495,1496],{"class":151,"line":325},[149,1497,228],{"emptyLinePlaceholder":227},[149,1499,1500],{"class":151,"line":331},[149,1501,1502],{"class":1358},"    \u002F* 定义methods *\u002F\n",[149,1504,1505,1507,1510,1512],{"class":151,"line":336},[149,1506,1364],{"class":1300},[149,1508,1509],{"class":1367}," methods",[149,1511,1371],{"class":1300},[149,1513,1324],{"class":1181},[149,1515,1516,1519,1522,1525,1528,1532],{"class":151,"line":341},[149,1517,1518],{"class":1249},"      multCount",[149,1520,1521],{"class":1181},": ",[149,1523,1524],{"class":1300},"function",[149,1526,1527],{"class":1181}," (",[149,1529,1531],{"class":1530},"s4XuR","n",[149,1533,1534],{"class":1181},") {\n",[149,1536,1537,1540,1542,1544,1546],{"class":151,"line":347},[149,1538,1539],{"class":1181},"        data.count ",[149,1541,1253],{"class":1300},[149,1543,1479],{"class":1181},[149,1545,1482],{"class":1300},[149,1547,1548],{"class":1181}," n;\n",[149,1550,1551],{"class":151,"line":352},[149,1552,1553],{"class":1181},"      },\n",[149,1555,1556],{"class":151,"line":357},[149,1557,1493],{"class":1181},[149,1559,1560],{"class":151,"line":363},[149,1561,228],{"emptyLinePlaceholder":227},[149,1563,1564],{"class":151,"line":368},[149,1565,1566],{"class":1358},"    \u002F* 返回数据 *\u002F\n",[149,1568,1569,1572,1575,1578],{"class":151,"line":373},[149,1570,1571],{"class":1300},"    return",[149,1573,1574],{"class":1181}," Object.",[149,1576,1577],{"class":1249},"assign",[149,1579,1580],{"class":1181},"(data, computeds, methods);\n",[149,1582,1583],{"class":151,"line":379},[149,1584,1585],{"class":1181},"  },\n",[149,1587,1588],{"class":151,"line":384},[149,1589,1590],{"class":1181},"};\n",[149,1592,1593,1595,1597],{"class":151,"line":389},[149,1594,1278],{"class":1181},[149,1596,1293],{"class":1185},[149,1598,1189],{"class":1181},[149,1600,1601],{"class":151,"line":395},[149,1602,228],{"emptyLinePlaceholder":227},[149,1604,1605,1607,1610],{"class":151,"line":400},[149,1606,1182],{"class":1181},[149,1608,1609],{"class":1185},"style",[149,1611,1189],{"class":1181},[149,1613,1614,1616,1618],{"class":151,"line":405},[149,1615,1278],{"class":1181},[149,1617,1609],{"class":1185},[149,1619,1189],{"class":1181},[30,1621,1622],{"id":1622},"每日一题",[140,1624,1629],{"className":1625,"code":1627,"language":1628},[1626],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[17,1630,1627],{"__ignoreMap":145},[30,1632,1633],{"id":1633},"参考",[140,1635,1638],{"className":1636,"code":1637,"language":1628},[1626],"https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F92143274\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002F9d3ddaec9134\nhttps:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F257044300\nhttps:\u002F\u002Fjuejin.cn\u002Fpost\u002F6867123074148335624\nhttps:\u002F\u002Fjuejin.cn\u002Fpost\u002F6892295955844956167\nhttps:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000024580501\nhttps:\u002F\u002Fv3.cn.vuejs.org\u002Fguide\u002Fmigration\u002Fintroduction.html\n",[17,1639,1637],{"__ignoreMap":145},[1609,1641,1642],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":145,"searchDepth":158,"depth":158,"links":1644},[1645,1652,1661,1662,1663],{"id":32,"depth":158,"text":32,"children":1646},[1647,1648,1649,1650,1651],{"id":47,"depth":164,"text":47},{"id":433,"depth":164,"text":434},{"id":614,"depth":164,"text":614},{"id":701,"depth":164,"text":702},{"id":752,"depth":164,"text":752},{"id":800,"depth":158,"text":800,"children":1653},[1654,1655,1656,1657,1658,1659,1660],{"id":815,"depth":164,"text":816},{"id":837,"depth":164,"text":837},{"id":897,"depth":164,"text":897},{"id":935,"depth":164,"text":935},{"id":972,"depth":164,"text":972},{"id":991,"depth":164,"text":991},{"id":1105,"depth":164,"text":1106},{"id":1161,"depth":158,"text":1161},{"id":1622,"depth":158,"text":1622},{"id":1633,"depth":158,"text":1633},"Vue3.0的设计目标可以概括为体积更小、速度更快、加强TypeScript支持、加强API设计一致性、提高自身可维护性、开放更多底层功能。","md",{},"\u002Fvue\u002Fvue3.0新特性",{"title":5,"description":1664},"Vue\u002FVue3.0新特性","RoCdY8pXzvCScuVYd91g1Ikl7DgRaw2LhduohDARXb8",1791042468261]