[{"data":1,"prerenderedAt":1923},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue中key的作用":3},{"id":4,"title":5,"body":6,"description":1916,"extension":1917,"meta":1918,"navigation":320,"path":1919,"seo":1920,"stem":1921,"__hash__":1922},"content\u002FVue\u002FVue中key的作用.md","Vue中key的作用",{"type":7,"value":8,"toc":1907},"minimark",[9,13,62,66,139,142,165,892,896,973,1005,1033,1078,1763,1766,1797,1844,1883,1886,1894,1897,1903],[10,11,5],"h1",{"id":12},"vue中key的作用",[14,15,16,20,21,24,25,28,29,32,33,36,37,40,41,43,44,46,47,49,50,52,53,55,56,58,59,61],"p",{},[17,18,19],"code",{},"key","的特殊",[17,22,23],{},"attribute","主要用在",[17,26,27],{},"Vue","的虚拟",[17,30,31],{},"DOM","算法，在新旧",[17,34,35],{},"Nodes","对比时辨识",[17,38,39],{},"VNodes","。如果不使用",[17,42,19],{},"，",[17,45,27],{},"会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法，而使用",[17,48,19],{},"时，它会基于",[17,51,19],{},"的变化重新排列元素顺序，并且会移除",[17,54,19],{},"不存在的元素。此外有相同父元素的子元素必须有独特的",[17,57,19],{},"，重复的",[17,60,19],{},"会造成渲染错误。",[63,64,65],"h2",{"id":65},"描述",[14,67,68,69,71,72,75,76,78,79,81,82,84,85,87,88,91,92,94,95,97,98,100,101,104,105,107,108,110,111,114,115,117,118,120,121,124,125,127,128,130,131,124,133,135,136,138],{},"首先是官方文档的描述，当",[17,70,27],{},"正在更新使用",[17,73,74],{},"v-for","渲染的元素列表时，它默认使用就地更新的策略，如果数据项的顺序被改变，",[17,77,27],{},"将不会移动",[17,80,31],{},"元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时",[17,83,31],{},"状态的列表渲染输出，例如表单输入值。为了给",[17,86,27],{},"一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 ",[17,89,90],{},"key attribute","，建议尽可能在使用",[17,93,74],{},"时提供",[17,96,90],{},"，除非遍历输出的",[17,99,31],{},"内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。",[102,103],"br",{},"\n简单来说，当在列表循环中使用",[17,106,19],{},"时，需要使用",[17,109,19],{},"来给每个节点做一个唯一标识，",[17,112,113],{},"diff","算法就可以正确的识别此节点，找到正确的位置直接操作节点，尽可能地进行重用元素，",[17,116,19],{},"的作用主要是为了高效的更新虚拟",[17,119,31],{},"。此外，使用",[17,122,123],{},"index","作为",[17,126,19],{},"是并不推荐的做法，其只能保证",[17,129,27],{},"在数据变化时强制更新组件，以避免原地复用带来的副作用，但不能保证最大限度的元素重用，且使用",[17,132,123],{},[17,134,19],{},"在数据更新方面和不使用",[17,137,19],{},"的效果基本相同。",[63,140,141],{"id":141},"示例",[14,143,144,145,147,148,150,151,153,154,157,158,161,162,164],{},"首先定义一个",[17,146,27],{},"实例，渲染四个列表，分别为简单列表与复杂列表，以及其分别携带",[17,149,19],{},"与不携带",[17,152,19],{},"时对比其更新渲染时的速度，本次测试使用的是",[17,155,156],{},"Chrome 81.0","，每次在",[17,159,160],{},"Console","执行代码时首先会进行刷新重新加载界面，避免浏览器以及",[17,163,27],{},"自身优化带来的影响。",[166,167,172],"pre",{"className":168,"code":169,"language":170,"meta":171,"style":171},"language-html shiki shiki-themes github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Ctitle>Vue\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv id=\"app\">\n        \u003Cul>\n            \u003Cli v-for=\"item in simpleListWithoutKey\" >{{item}}\u003C\u002Fli>\n        \u003C\u002Ful>\n\n        \u003Cul>\n            \u003Cli v-for=\"item in simpleListWithKey\" :key=\"item\" >{{item}}\u003C\u002Fli>\n        \u003C\u002Ful>\n\n        \u003Cul>\n            \u003Cli v-for=\"item in complexListWithoutKey\">\n                \u003Cspan v-for=\"value in item.list\" v-if=\"value > 5\">{{value}}\u003C\u002Fspan>\n            \u003C\u002Fli>\n        \u003C\u002Ful>\n\n        \u003Cul>\n            \u003Cli v-for=\"item in complexListWithKey\" :key=\"item.id\">\n                \u003Cspan v-for=\"value in item.list\" :key=\"value\" v-if=\"value > 5\">{{value}}\u003C\u002Fspan>\n            \u003C\u002Fli>\n        \u003C\u002Ful>\n\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003Cscript src=\"https:\u002F\u002Fcdn.staticfile.org\u002Fvue\u002F2.2.2\u002Fvue.min.js\">\u003C\u002Fscript>\n\u003Cscript type=\"text\u002Fjavascript\">\n    var vm = new Vue({\n        el: '#app',\n        data: {\n            simpleListWithoutKey: [1, 2, 3, 4, 5, 6],\n            simpleListWithKey: [1, 2, 3, 4, 5, 6],\n            complexListWithoutKey:[\n                {id: 1, list: [1, 2, 3]},\n                {id: 2, list: [4, 5, 6]},\n                {id: 3, list: [7, 8, 9]}\n            ],\n            complexListWithKey:[\n                {id: 1, list: [1, 2, 3]},\n                {id: 2, list: [4, 5, 6]},\n                {id: 3, list: [7, 8, 9]}\n            ],\n        }\n    })\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n","html","",[17,173,174,194,204,214,230,240,250,270,281,305,315,322,331,359,368,373,382,398,428,438,447,452,461,484,516,525,534,539,549,558,581,598,619,631,637,676,706,712,736,757,782,788,794,815,836,857,862,868,874,883],{"__ignoreMap":171},[175,176,179,183,187,191],"span",{"class":177,"line":178},"line",1,[175,180,182],{"class":181},"sVt8B","\u003C!",[175,184,186],{"class":185},"s9eBZ","DOCTYPE",[175,188,190],{"class":189},"sScJk"," html",[175,192,193],{"class":181},">\n",[175,195,197,200,202],{"class":177,"line":196},2,[175,198,199],{"class":181},"\u003C",[175,201,170],{"class":185},[175,203,193],{"class":181},[175,205,207,209,212],{"class":177,"line":206},3,[175,208,199],{"class":181},[175,210,211],{"class":185},"head",[175,213,193],{"class":181},[175,215,217,220,223,226,228],{"class":177,"line":216},4,[175,218,219],{"class":181},"    \u003C",[175,221,222],{"class":185},"title",[175,224,225],{"class":181},">Vue\u003C\u002F",[175,227,222],{"class":185},[175,229,193],{"class":181},[175,231,233,236,238],{"class":177,"line":232},5,[175,234,235],{"class":181},"\u003C\u002F",[175,237,211],{"class":185},[175,239,193],{"class":181},[175,241,243,245,248],{"class":177,"line":242},6,[175,244,199],{"class":181},[175,246,247],{"class":185},"body",[175,249,193],{"class":181},[175,251,253,255,258,261,264,268],{"class":177,"line":252},7,[175,254,219],{"class":181},[175,256,257],{"class":185},"div",[175,259,260],{"class":189}," id",[175,262,263],{"class":181},"=",[175,265,267],{"class":266},"sZZnC","\"app\"",[175,269,193],{"class":181},[175,271,273,276,279],{"class":177,"line":272},8,[175,274,275],{"class":181},"        \u003C",[175,277,278],{"class":185},"ul",[175,280,193],{"class":181},[175,282,284,287,290,293,295,298,301,303],{"class":177,"line":283},9,[175,285,286],{"class":181},"            \u003C",[175,288,289],{"class":185},"li",[175,291,292],{"class":189}," v-for",[175,294,263],{"class":181},[175,296,297],{"class":266},"\"item in simpleListWithoutKey\"",[175,299,300],{"class":181}," >{{item}}\u003C\u002F",[175,302,289],{"class":185},[175,304,193],{"class":181},[175,306,308,311,313],{"class":177,"line":307},10,[175,309,310],{"class":181},"        \u003C\u002F",[175,312,278],{"class":185},[175,314,193],{"class":181},[175,316,318],{"class":177,"line":317},11,[175,319,321],{"emptyLinePlaceholder":320},true,"\n",[175,323,325,327,329],{"class":177,"line":324},12,[175,326,275],{"class":181},[175,328,278],{"class":185},[175,330,193],{"class":181},[175,332,334,336,338,340,342,345,348,350,353,355,357],{"class":177,"line":333},13,[175,335,286],{"class":181},[175,337,289],{"class":185},[175,339,292],{"class":189},[175,341,263],{"class":181},[175,343,344],{"class":266},"\"item in simpleListWithKey\"",[175,346,347],{"class":189}," :key",[175,349,263],{"class":181},[175,351,352],{"class":266},"\"item\"",[175,354,300],{"class":181},[175,356,289],{"class":185},[175,358,193],{"class":181},[175,360,362,364,366],{"class":177,"line":361},14,[175,363,310],{"class":181},[175,365,278],{"class":185},[175,367,193],{"class":181},[175,369,371],{"class":177,"line":370},15,[175,372,321],{"emptyLinePlaceholder":320},[175,374,376,378,380],{"class":177,"line":375},16,[175,377,275],{"class":181},[175,379,278],{"class":185},[175,381,193],{"class":181},[175,383,385,387,389,391,393,396],{"class":177,"line":384},17,[175,386,286],{"class":181},[175,388,289],{"class":185},[175,390,292],{"class":189},[175,392,263],{"class":181},[175,394,395],{"class":266},"\"item in complexListWithoutKey\"",[175,397,193],{"class":181},[175,399,401,404,406,408,410,413,416,418,421,424,426],{"class":177,"line":400},18,[175,402,403],{"class":181},"                \u003C",[175,405,175],{"class":185},[175,407,292],{"class":189},[175,409,263],{"class":181},[175,411,412],{"class":266},"\"value in item.list\"",[175,414,415],{"class":189}," v-if",[175,417,263],{"class":181},[175,419,420],{"class":266},"\"value > 5\"",[175,422,423],{"class":181},">{{value}}\u003C\u002F",[175,425,175],{"class":185},[175,427,193],{"class":181},[175,429,431,434,436],{"class":177,"line":430},19,[175,432,433],{"class":181},"            \u003C\u002F",[175,435,289],{"class":185},[175,437,193],{"class":181},[175,439,441,443,445],{"class":177,"line":440},20,[175,442,310],{"class":181},[175,444,278],{"class":185},[175,446,193],{"class":181},[175,448,450],{"class":177,"line":449},21,[175,451,321],{"emptyLinePlaceholder":320},[175,453,455,457,459],{"class":177,"line":454},22,[175,456,275],{"class":181},[175,458,278],{"class":185},[175,460,193],{"class":181},[175,462,464,466,468,470,472,475,477,479,482],{"class":177,"line":463},23,[175,465,286],{"class":181},[175,467,289],{"class":185},[175,469,292],{"class":189},[175,471,263],{"class":181},[175,473,474],{"class":266},"\"item in complexListWithKey\"",[175,476,347],{"class":189},[175,478,263],{"class":181},[175,480,481],{"class":266},"\"item.id\"",[175,483,193],{"class":181},[175,485,487,489,491,493,495,497,499,501,504,506,508,510,512,514],{"class":177,"line":486},24,[175,488,403],{"class":181},[175,490,175],{"class":185},[175,492,292],{"class":189},[175,494,263],{"class":181},[175,496,412],{"class":266},[175,498,347],{"class":189},[175,500,263],{"class":181},[175,502,503],{"class":266},"\"value\"",[175,505,415],{"class":189},[175,507,263],{"class":181},[175,509,420],{"class":266},[175,511,423],{"class":181},[175,513,175],{"class":185},[175,515,193],{"class":181},[175,517,519,521,523],{"class":177,"line":518},25,[175,520,433],{"class":181},[175,522,289],{"class":185},[175,524,193],{"class":181},[175,526,528,530,532],{"class":177,"line":527},26,[175,529,310],{"class":181},[175,531,278],{"class":185},[175,533,193],{"class":181},[175,535,537],{"class":177,"line":536},27,[175,538,321],{"emptyLinePlaceholder":320},[175,540,542,545,547],{"class":177,"line":541},28,[175,543,544],{"class":181},"    \u003C\u002F",[175,546,257],{"class":185},[175,548,193],{"class":181},[175,550,552,554,556],{"class":177,"line":551},29,[175,553,235],{"class":181},[175,555,247],{"class":185},[175,557,193],{"class":181},[175,559,561,563,566,569,571,574,577,579],{"class":177,"line":560},30,[175,562,199],{"class":181},[175,564,565],{"class":185},"script",[175,567,568],{"class":189}," src",[175,570,263],{"class":181},[175,572,573],{"class":266},"\"https:\u002F\u002Fcdn.staticfile.org\u002Fvue\u002F2.2.2\u002Fvue.min.js\"",[175,575,576],{"class":181},">\u003C\u002F",[175,578,565],{"class":185},[175,580,193],{"class":181},[175,582,584,586,588,591,593,596],{"class":177,"line":583},31,[175,585,199],{"class":181},[175,587,565],{"class":185},[175,589,590],{"class":189}," type",[175,592,263],{"class":181},[175,594,595],{"class":266},"\"text\u002Fjavascript\"",[175,597,193],{"class":181},[175,599,601,605,608,610,613,616],{"class":177,"line":600},32,[175,602,604],{"class":603},"szBVR","    var",[175,606,607],{"class":181}," vm ",[175,609,263],{"class":603},[175,611,612],{"class":603}," new",[175,614,615],{"class":189}," Vue",[175,617,618],{"class":181},"({\n",[175,620,622,625,628],{"class":177,"line":621},33,[175,623,624],{"class":181},"        el: ",[175,626,627],{"class":266},"'#app'",[175,629,630],{"class":181},",\n",[175,632,634],{"class":177,"line":633},34,[175,635,636],{"class":181},"        data: {\n",[175,638,640,643,647,650,653,655,658,660,663,665,668,670,673],{"class":177,"line":639},35,[175,641,642],{"class":181},"            simpleListWithoutKey: [",[175,644,646],{"class":645},"sj4cs","1",[175,648,649],{"class":181},", ",[175,651,652],{"class":645},"2",[175,654,649],{"class":181},[175,656,657],{"class":645},"3",[175,659,649],{"class":181},[175,661,662],{"class":645},"4",[175,664,649],{"class":181},[175,666,667],{"class":645},"5",[175,669,649],{"class":181},[175,671,672],{"class":645},"6",[175,674,675],{"class":181},"],\n",[175,677,679,682,684,686,688,690,692,694,696,698,700,702,704],{"class":177,"line":678},36,[175,680,681],{"class":181},"            simpleListWithKey: [",[175,683,646],{"class":645},[175,685,649],{"class":181},[175,687,652],{"class":645},[175,689,649],{"class":181},[175,691,657],{"class":645},[175,693,649],{"class":181},[175,695,662],{"class":645},[175,697,649],{"class":181},[175,699,667],{"class":645},[175,701,649],{"class":181},[175,703,672],{"class":645},[175,705,675],{"class":181},[175,707,709],{"class":177,"line":708},37,[175,710,711],{"class":181},"            complexListWithoutKey:[\n",[175,713,715,718,720,723,725,727,729,731,733],{"class":177,"line":714},38,[175,716,717],{"class":181},"                {id: ",[175,719,646],{"class":645},[175,721,722],{"class":181},", list: [",[175,724,646],{"class":645},[175,726,649],{"class":181},[175,728,652],{"class":645},[175,730,649],{"class":181},[175,732,657],{"class":645},[175,734,735],{"class":181},"]},\n",[175,737,739,741,743,745,747,749,751,753,755],{"class":177,"line":738},39,[175,740,717],{"class":181},[175,742,652],{"class":645},[175,744,722],{"class":181},[175,746,662],{"class":645},[175,748,649],{"class":181},[175,750,667],{"class":645},[175,752,649],{"class":181},[175,754,672],{"class":645},[175,756,735],{"class":181},[175,758,760,762,764,766,769,771,774,776,779],{"class":177,"line":759},40,[175,761,717],{"class":181},[175,763,657],{"class":645},[175,765,722],{"class":181},[175,767,768],{"class":645},"7",[175,770,649],{"class":181},[175,772,773],{"class":645},"8",[175,775,649],{"class":181},[175,777,778],{"class":645},"9",[175,780,781],{"class":181},"]}\n",[175,783,785],{"class":177,"line":784},41,[175,786,787],{"class":181},"            ],\n",[175,789,791],{"class":177,"line":790},42,[175,792,793],{"class":181},"            complexListWithKey:[\n",[175,795,797,799,801,803,805,807,809,811,813],{"class":177,"line":796},43,[175,798,717],{"class":181},[175,800,646],{"class":645},[175,802,722],{"class":181},[175,804,646],{"class":645},[175,806,649],{"class":181},[175,808,652],{"class":645},[175,810,649],{"class":181},[175,812,657],{"class":645},[175,814,735],{"class":181},[175,816,818,820,822,824,826,828,830,832,834],{"class":177,"line":817},44,[175,819,717],{"class":181},[175,821,652],{"class":645},[175,823,722],{"class":181},[175,825,662],{"class":645},[175,827,649],{"class":181},[175,829,667],{"class":645},[175,831,649],{"class":181},[175,833,672],{"class":645},[175,835,735],{"class":181},[175,837,839,841,843,845,847,849,851,853,855],{"class":177,"line":838},45,[175,840,717],{"class":181},[175,842,657],{"class":645},[175,844,722],{"class":181},[175,846,768],{"class":645},[175,848,649],{"class":181},[175,850,773],{"class":645},[175,852,649],{"class":181},[175,854,778],{"class":645},[175,856,781],{"class":181},[175,858,860],{"class":177,"line":859},46,[175,861,787],{"class":181},[175,863,865],{"class":177,"line":864},47,[175,866,867],{"class":181},"        }\n",[175,869,871],{"class":177,"line":870},48,[175,872,873],{"class":181},"    })\n",[175,875,877,879,881],{"class":177,"line":876},49,[175,878,235],{"class":181},[175,880,565],{"class":185},[175,882,193],{"class":181},[175,884,886,888,890],{"class":177,"line":885},50,[175,887,235],{"class":181},[175,889,170],{"class":185},[175,891,193],{"class":181},[893,894,895],"h3",{"id":895},"简单列表",[14,897,898,899,901,902,904,905,907,908,910,911,913,914,916,917,916,919,916,921,916,923,916,925,928,929,932,933,936,937,939,940,916,942,916,944,916,946,948,949,916,951,953,954,916,956,916,958,916,960,916,962,916,964,966,967,969,970,972],{},"在简单列表的情况下，不使用",[17,900,19],{},"可能会比使用",[17,903,19],{},"的情况下在更新时的渲染速度更快，这也就是官方文档中提到的，除非遍历输出的",[17,906,31],{},"内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。在下面的例子中可以看到没有",[17,909,19],{},"的情况下列表更新时渲染速度会快，当不存在",[17,912,19],{},"的情况下，这个列表直接进行原地复用，原有的节点的位置不变，原地复用元素，将内容更新为",[17,915,667],{},"、",[17,918,672],{},[17,920,768],{},[17,922,773],{},[17,924,778],{},[17,926,927],{},"10","，并添加了",[17,930,931],{},"11","与",[17,934,935],{},"12","两个节点，而存在",[17,938,19],{},"的情况下，原有的",[17,941,646],{},[17,943,652],{},[17,945,657],{},[17,947,662],{},"节点被删除，",[17,950,667],{},[17,952,672],{},"节点保留，添加了",[17,955,768],{},[17,957,773],{},[17,959,778],{},[17,961,927],{},[17,963,931],{},[17,965,935],{},"六个节点，由于在",[17,968,31],{},"的增删操作上比较耗时，所以表现为不带",[17,971,19],{},"的情况下速度更快一些。",[166,974,978],{"className":975,"code":976,"language":977,"meta":171,"style":171},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F 没有key的情况下\nconsole.time();\nvm.simpleListWithoutKey = [5, 6, 7, 8, 9, 10, 11, 12];\nvm.$nextTick(() => console.timeEnd());\n\u002F\u002F default: 2.193056640625ms\n","javascript",[17,979,980,985,990,995,1000],{"__ignoreMap":171},[175,981,982],{"class":177,"line":178},[175,983,984],{},"\u002F\u002F 没有key的情况下\n",[175,986,987],{"class":177,"line":196},[175,988,989],{},"console.time();\n",[175,991,992],{"class":177,"line":206},[175,993,994],{},"vm.simpleListWithoutKey = [5, 6, 7, 8, 9, 10, 11, 12];\n",[175,996,997],{"class":177,"line":216},[175,998,999],{},"vm.$nextTick(() => console.timeEnd());\n",[175,1001,1002],{"class":177,"line":232},[175,1003,1004],{},"\u002F\u002F default: 2.193056640625ms\n",[166,1006,1008],{"className":975,"code":1007,"language":977,"meta":171,"style":171},"\u002F\u002F 存在key的情况下\nconsole.time();\nvm.simpleListWithKey = [5, 6, 7, 8, 9, 10, 11, 12];\nvm.$nextTick(() => console.timeEnd());\n\u002F\u002F default: 3.2138671875ms\n",[17,1009,1010,1015,1019,1024,1028],{"__ignoreMap":171},[175,1011,1012],{"class":177,"line":178},[175,1013,1014],{},"\u002F\u002F 存在key的情况下\n",[175,1016,1017],{"class":177,"line":196},[175,1018,989],{},[175,1020,1021],{"class":177,"line":206},[175,1022,1023],{},"vm.simpleListWithKey = [5, 6, 7, 8, 9, 10, 11, 12];\n",[175,1025,1026],{"class":177,"line":216},[175,1027,999],{},[175,1029,1030],{"class":177,"line":232},[175,1031,1032],{},"\u002F\u002F default: 3.2138671875ms\n",[14,1034,1035,1036,1038,1039,1041,1042,1045,1046,1048,1049,1051,1052,1054,1055,1057,1058,1060,1061,1064,1065,1067,1068,1071,1072,1074,1075,1077],{},"原地复用可能会带来一些副作用，文档中提到原地复用这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时",[17,1037,31],{},"状态的列表渲染输出，例如表单输入值。在不设置",[17,1040,19],{},"的情况下，元素中没有与数据",[17,1043,1044],{},"data","绑定的部分，",[17,1047,27],{},"会默认使用已经渲染的",[17,1050,31],{},"，而绑定了数据",[17,1053,1044],{},"的部分会进行跟随数据渲染，假如操作了元素位置，则元素中未绑定",[17,1056,1044],{},"的部分会停留在原地，而绑定了",[17,1059,1044],{},"的部分会跟随操作进行移动，在下面的例子中首先需要将两个",[17,1062,1063],{},"A","之后的输入框添加数据信息，这样就制作了一个临时状态，如果此时点击下移按钮，那么不使用",[17,1066,19],{},"的组中的输入框将不会跟随下移，且",[17,1069,1070],{},"B","到了顶端并成为了红色，而使用",[17,1073,19],{},"的组中会将输入框进行下移，且",[17,1076,1063],{},"依旧是红色跟随下移。",[166,1079,1081],{"className":168,"code":1080,"language":170,"meta":171,"style":171},"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width\">\n  \u003Ctitle>就地复用\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n  \u003Cdiv id=\"app\">\n    \u003Ch3>采用就地复用策略(vuejs默认情况)\u003C\u002Fh3>\n    \u003Cdiv  v-for='(p, i) in persons'>\n      \u003Cspan>{{p.name}}\u003Cspan>  \n      \u003Cinput type=\"text\"\u002F>  \n      \u003Cbutton @click='down(i)' v-if='i != persons.length - 1'>下移\u003C\u002Fbutton>\n    \u003C\u002Fdiv> \n\n    \u003Ch3>不采用就地复用策略(设置key)\u003C\u002Fh3>\n    \u003Cdiv  v-for='(p, i) in persons' :key='p.id'>\n      \u003Cspan>{{p.name}}\u003Cspan> \n      \u003Cinput type=\"text\"\u002F>  \n      \u003Cbutton @click='down(i)' v-if='i != persons.length - 1'>下移\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\u003Cscript src=\"https:\u002F\u002Fcdn.staticfile.org\u002Fvue\u002F2.2.2\u002Fvue.min.js\">\u003C\u002Fscript>\n  \u003Cscript>\n    new Vue({\n      el: '#app',\n      data: {\n        persons: [\n            { id: 1, name: 'A' },\n            { id: 2, name: 'B' },\n            { id: 3, name: 'C' }\n        ]\n      },\n      mounted: function(){\n        \u002F\u002F 此DOM操作将两个A的颜色设置为红色 主要是为了演示原地复用\n        document.querySelectorAll(\"h3 + div > span:first-child\").forEach( v => v.style.color=\"red\");\n      },\n      methods: {\n        down: function(i) {\n            if (i == this.persons.length - 1) return;\n          var listClone = this.persons.slice();\n          var one = listClone[i];\n          listClone[i] = listClone[i + 1];\n          listClone[i + 1] = one;\n          this.persons = listClone;\n        }\n      }\n    });\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n\u003C!-- 源于 https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F61078310 @霸都丶傲天 有修改-->\n",[17,1082,1083,1093,1101,1109,1127,1151,1164,1172,1180,1184,1198,1211,1227,1242,1259,1288,1297,1301,1314,1335,1347,1361,1385,1393,1397,1406,1424,1432,1441,1450,1455,1460,1476,1489,1503,1508,1513,1527,1533,1574,1578,1583,1600,1635,1655,1667,1685,1702,1715,1719,1724,1730,1739,1748,1757],{"__ignoreMap":171},[175,1084,1085,1087,1089,1091],{"class":177,"line":178},[175,1086,182],{"class":181},[175,1088,186],{"class":185},[175,1090,190],{"class":189},[175,1092,193],{"class":181},[175,1094,1095,1097,1099],{"class":177,"line":196},[175,1096,199],{"class":181},[175,1098,170],{"class":185},[175,1100,193],{"class":181},[175,1102,1103,1105,1107],{"class":177,"line":206},[175,1104,199],{"class":181},[175,1106,211],{"class":185},[175,1108,193],{"class":181},[175,1110,1111,1114,1117,1120,1122,1125],{"class":177,"line":216},[175,1112,1113],{"class":181},"  \u003C",[175,1115,1116],{"class":185},"meta",[175,1118,1119],{"class":189}," charset",[175,1121,263],{"class":181},[175,1123,1124],{"class":266},"\"utf-8\"",[175,1126,193],{"class":181},[175,1128,1129,1131,1133,1136,1138,1141,1144,1146,1149],{"class":177,"line":232},[175,1130,1113],{"class":181},[175,1132,1116],{"class":185},[175,1134,1135],{"class":189}," name",[175,1137,263],{"class":181},[175,1139,1140],{"class":266},"\"viewport\"",[175,1142,1143],{"class":189}," content",[175,1145,263],{"class":181},[175,1147,1148],{"class":266},"\"width=device-width\"",[175,1150,193],{"class":181},[175,1152,1153,1155,1157,1160,1162],{"class":177,"line":242},[175,1154,1113],{"class":181},[175,1156,222],{"class":185},[175,1158,1159],{"class":181},">就地复用\u003C\u002F",[175,1161,222],{"class":185},[175,1163,193],{"class":181},[175,1165,1166,1168,1170],{"class":177,"line":252},[175,1167,235],{"class":181},[175,1169,211],{"class":185},[175,1171,193],{"class":181},[175,1173,1174,1176,1178],{"class":177,"line":272},[175,1175,199],{"class":181},[175,1177,247],{"class":185},[175,1179,193],{"class":181},[175,1181,1182],{"class":177,"line":283},[175,1183,321],{"emptyLinePlaceholder":320},[175,1185,1186,1188,1190,1192,1194,1196],{"class":177,"line":307},[175,1187,1113],{"class":181},[175,1189,257],{"class":185},[175,1191,260],{"class":189},[175,1193,263],{"class":181},[175,1195,267],{"class":266},[175,1197,193],{"class":181},[175,1199,1200,1202,1204,1207,1209],{"class":177,"line":317},[175,1201,219],{"class":181},[175,1203,893],{"class":185},[175,1205,1206],{"class":181},">采用就地复用策略(vuejs默认情况)\u003C\u002F",[175,1208,893],{"class":185},[175,1210,193],{"class":181},[175,1212,1213,1215,1217,1220,1222,1225],{"class":177,"line":324},[175,1214,219],{"class":181},[175,1216,257],{"class":185},[175,1218,1219],{"class":189},"  v-for",[175,1221,263],{"class":181},[175,1223,1224],{"class":266},"'(p, i) in persons'",[175,1226,193],{"class":181},[175,1228,1229,1232,1234,1237,1239],{"class":177,"line":333},[175,1230,1231],{"class":181},"      \u003C",[175,1233,175],{"class":185},[175,1235,1236],{"class":181},">{{p.name}}\u003C",[175,1238,175],{"class":185},[175,1240,1241],{"class":181},">  \n",[175,1243,1244,1246,1249,1251,1253,1256],{"class":177,"line":361},[175,1245,1231],{"class":181},[175,1247,1248],{"class":185},"input",[175,1250,590],{"class":189},[175,1252,263],{"class":181},[175,1254,1255],{"class":266},"\"text\"",[175,1257,1258],{"class":181},"\u002F>  \n",[175,1260,1261,1263,1266,1269,1271,1274,1276,1278,1281,1284,1286],{"class":177,"line":370},[175,1262,1231],{"class":181},[175,1264,1265],{"class":185},"button",[175,1267,1268],{"class":189}," @click",[175,1270,263],{"class":181},[175,1272,1273],{"class":266},"'down(i)'",[175,1275,415],{"class":189},[175,1277,263],{"class":181},[175,1279,1280],{"class":266},"'i != persons.length - 1'",[175,1282,1283],{"class":181},">下移\u003C\u002F",[175,1285,1265],{"class":185},[175,1287,193],{"class":181},[175,1289,1290,1292,1294],{"class":177,"line":375},[175,1291,544],{"class":181},[175,1293,257],{"class":185},[175,1295,1296],{"class":181},"> \n",[175,1298,1299],{"class":177,"line":384},[175,1300,321],{"emptyLinePlaceholder":320},[175,1302,1303,1305,1307,1310,1312],{"class":177,"line":400},[175,1304,219],{"class":181},[175,1306,893],{"class":185},[175,1308,1309],{"class":181},">不采用就地复用策略(设置key)\u003C\u002F",[175,1311,893],{"class":185},[175,1313,193],{"class":181},[175,1315,1316,1318,1320,1322,1324,1326,1328,1330,1333],{"class":177,"line":430},[175,1317,219],{"class":181},[175,1319,257],{"class":185},[175,1321,1219],{"class":189},[175,1323,263],{"class":181},[175,1325,1224],{"class":266},[175,1327,347],{"class":189},[175,1329,263],{"class":181},[175,1331,1332],{"class":266},"'p.id'",[175,1334,193],{"class":181},[175,1336,1337,1339,1341,1343,1345],{"class":177,"line":440},[175,1338,1231],{"class":181},[175,1340,175],{"class":185},[175,1342,1236],{"class":181},[175,1344,175],{"class":185},[175,1346,1296],{"class":181},[175,1348,1349,1351,1353,1355,1357,1359],{"class":177,"line":449},[175,1350,1231],{"class":181},[175,1352,1248],{"class":185},[175,1354,590],{"class":189},[175,1356,263],{"class":181},[175,1358,1255],{"class":266},[175,1360,1258],{"class":181},[175,1362,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383],{"class":177,"line":454},[175,1364,1231],{"class":181},[175,1366,1265],{"class":185},[175,1368,1268],{"class":189},[175,1370,263],{"class":181},[175,1372,1273],{"class":266},[175,1374,415],{"class":189},[175,1376,263],{"class":181},[175,1378,1280],{"class":266},[175,1380,1283],{"class":181},[175,1382,1265],{"class":185},[175,1384,193],{"class":181},[175,1386,1387,1389,1391],{"class":177,"line":463},[175,1388,544],{"class":181},[175,1390,257],{"class":185},[175,1392,193],{"class":181},[175,1394,1395],{"class":177,"line":486},[175,1396,321],{"emptyLinePlaceholder":320},[175,1398,1399,1402,1404],{"class":177,"line":518},[175,1400,1401],{"class":181},"  \u003C\u002F",[175,1403,257],{"class":185},[175,1405,193],{"class":181},[175,1407,1408,1410,1412,1414,1416,1418,1420,1422],{"class":177,"line":527},[175,1409,199],{"class":181},[175,1411,565],{"class":185},[175,1413,568],{"class":189},[175,1415,263],{"class":181},[175,1417,573],{"class":266},[175,1419,576],{"class":181},[175,1421,565],{"class":185},[175,1423,193],{"class":181},[175,1425,1426,1428,1430],{"class":177,"line":536},[175,1427,1113],{"class":181},[175,1429,565],{"class":185},[175,1431,193],{"class":181},[175,1433,1434,1437,1439],{"class":177,"line":541},[175,1435,1436],{"class":603},"    new",[175,1438,615],{"class":189},[175,1440,618],{"class":181},[175,1442,1443,1446,1448],{"class":177,"line":551},[175,1444,1445],{"class":181},"      el: ",[175,1447,627],{"class":266},[175,1449,630],{"class":181},[175,1451,1452],{"class":177,"line":560},[175,1453,1454],{"class":181},"      data: {\n",[175,1456,1457],{"class":177,"line":583},[175,1458,1459],{"class":181},"        persons: [\n",[175,1461,1462,1465,1467,1470,1473],{"class":177,"line":600},[175,1463,1464],{"class":181},"            { id: ",[175,1466,646],{"class":645},[175,1468,1469],{"class":181},", name: ",[175,1471,1472],{"class":266},"'A'",[175,1474,1475],{"class":181}," },\n",[175,1477,1478,1480,1482,1484,1487],{"class":177,"line":621},[175,1479,1464],{"class":181},[175,1481,652],{"class":645},[175,1483,1469],{"class":181},[175,1485,1486],{"class":266},"'B'",[175,1488,1475],{"class":181},[175,1490,1491,1493,1495,1497,1500],{"class":177,"line":633},[175,1492,1464],{"class":181},[175,1494,657],{"class":645},[175,1496,1469],{"class":181},[175,1498,1499],{"class":266},"'C'",[175,1501,1502],{"class":181}," }\n",[175,1504,1505],{"class":177,"line":639},[175,1506,1507],{"class":181},"        ]\n",[175,1509,1510],{"class":177,"line":678},[175,1511,1512],{"class":181},"      },\n",[175,1514,1515,1518,1521,1524],{"class":177,"line":708},[175,1516,1517],{"class":189},"      mounted",[175,1519,1520],{"class":181},": ",[175,1522,1523],{"class":603},"function",[175,1525,1526],{"class":181},"(){\n",[175,1528,1529],{"class":177,"line":714},[175,1530,1532],{"class":1531},"sJ8bj","        \u002F\u002F 此DOM操作将两个A的颜色设置为红色 主要是为了演示原地复用\n",[175,1534,1535,1538,1541,1544,1547,1550,1553,1556,1560,1563,1566,1568,1571],{"class":177,"line":738},[175,1536,1537],{"class":181},"        document.",[175,1539,1540],{"class":189},"querySelectorAll",[175,1542,1543],{"class":181},"(",[175,1545,1546],{"class":266},"\"h3 + div > span:first-child\"",[175,1548,1549],{"class":181},").",[175,1551,1552],{"class":189},"forEach",[175,1554,1555],{"class":181},"( ",[175,1557,1559],{"class":1558},"s4XuR","v",[175,1561,1562],{"class":603}," =>",[175,1564,1565],{"class":181}," v.style.color",[175,1567,263],{"class":603},[175,1569,1570],{"class":266},"\"red\"",[175,1572,1573],{"class":181},");\n",[175,1575,1576],{"class":177,"line":759},[175,1577,1512],{"class":181},[175,1579,1580],{"class":177,"line":784},[175,1581,1582],{"class":181},"      methods: {\n",[175,1584,1585,1588,1590,1592,1594,1597],{"class":177,"line":790},[175,1586,1587],{"class":189},"        down",[175,1589,1520],{"class":181},[175,1591,1523],{"class":603},[175,1593,1543],{"class":181},[175,1595,1596],{"class":1558},"i",[175,1598,1599],{"class":181},") {\n",[175,1601,1602,1605,1608,1611,1614,1617,1620,1623,1626,1629,1632],{"class":177,"line":796},[175,1603,1604],{"class":603},"            if",[175,1606,1607],{"class":181}," (i ",[175,1609,1610],{"class":603},"==",[175,1612,1613],{"class":645}," this",[175,1615,1616],{"class":181},".persons.",[175,1618,1619],{"class":645},"length",[175,1621,1622],{"class":603}," -",[175,1624,1625],{"class":645}," 1",[175,1627,1628],{"class":181},") ",[175,1630,1631],{"class":603},"return",[175,1633,1634],{"class":181},";\n",[175,1636,1637,1640,1643,1645,1647,1649,1652],{"class":177,"line":817},[175,1638,1639],{"class":603},"          var",[175,1641,1642],{"class":181}," listClone ",[175,1644,263],{"class":603},[175,1646,1613],{"class":645},[175,1648,1616],{"class":181},[175,1650,1651],{"class":189},"slice",[175,1653,1654],{"class":181},"();\n",[175,1656,1657,1659,1662,1664],{"class":177,"line":838},[175,1658,1639],{"class":603},[175,1660,1661],{"class":181}," one ",[175,1663,263],{"class":603},[175,1665,1666],{"class":181}," listClone[i];\n",[175,1668,1669,1672,1674,1677,1680,1682],{"class":177,"line":859},[175,1670,1671],{"class":181},"          listClone[i] ",[175,1673,263],{"class":603},[175,1675,1676],{"class":181}," listClone[i ",[175,1678,1679],{"class":603},"+",[175,1681,1625],{"class":645},[175,1683,1684],{"class":181},"];\n",[175,1686,1687,1690,1692,1694,1697,1699],{"class":177,"line":864},[175,1688,1689],{"class":181},"          listClone[i ",[175,1691,1679],{"class":603},[175,1693,1625],{"class":645},[175,1695,1696],{"class":181},"] ",[175,1698,263],{"class":603},[175,1700,1701],{"class":181}," one;\n",[175,1703,1704,1707,1710,1712],{"class":177,"line":870},[175,1705,1706],{"class":645},"          this",[175,1708,1709],{"class":181},".persons ",[175,1711,263],{"class":603},[175,1713,1714],{"class":181}," listClone;\n",[175,1716,1717],{"class":177,"line":876},[175,1718,867],{"class":181},[175,1720,1721],{"class":177,"line":885},[175,1722,1723],{"class":181},"      }\n",[175,1725,1727],{"class":177,"line":1726},51,[175,1728,1729],{"class":181},"    });\n",[175,1731,1733,1735,1737],{"class":177,"line":1732},52,[175,1734,1401],{"class":181},[175,1736,565],{"class":185},[175,1738,193],{"class":181},[175,1740,1742,1744,1746],{"class":177,"line":1741},53,[175,1743,235],{"class":181},[175,1745,247],{"class":185},[175,1747,193],{"class":181},[175,1749,1751,1753,1755],{"class":177,"line":1750},54,[175,1752,235],{"class":181},[175,1754,170],{"class":185},[175,1756,193],{"class":181},[175,1758,1760],{"class":177,"line":1759},55,[175,1761,1762],{"class":1531},"\u003C!-- 源于 https:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F61078310 @霸都丶傲天 有修改-->\n",[893,1764,1765],{"id":1765},"复杂列表",[14,1767,1768,1769,1771,1772,1774,1775,1778,1779,1781,1782,1784,1785,1787,1788,1790,1791,1793,1794,1796],{},"使用",[17,1770,19],{},"不仅能够避免上述的原地复用的副作用，且在一些操作上可能能够提高渲染的效率，主要体现在重新排序的情况，包括在中间插入和删除节点的操作，在下面的例子中没有",[17,1773,19],{},"的情况下重新排序会原地复用元素，但是由于",[17,1776,1777],{},"v-if","绑定了",[17,1780,1044],{},"所以会一并进行操作，在这个",[17,1783,31],{},"操作上比较消耗时间，而使用",[17,1786,19],{},"得情况则直接复用元素，",[17,1789,1777],{},"控制的元素在初次渲染就已经决定，在本例中没有对其进行更新，所以不涉及",[17,1792,1777],{},"的",[17,1795,31],{},"操作，所以在效率上会高一些。",[166,1798,1800],{"className":975,"code":1799,"language":977,"meta":171,"style":171},"console.time();\nvm.complexListWithoutKey = [\n        {id: 3, list: [7, 8, 9]},\n        {id: 2, list: [4, 5, 6]},\n        {id: 1, list: [1, 2, 3]},\n    ];\nvm.$nextTick(() => console.timeEnd());\nvm.$nextTick(() => console.timeEnd());\n\u002F\u002F default: 4.100244140625ms\n",[17,1801,1802,1806,1811,1816,1821,1826,1831,1835,1839],{"__ignoreMap":171},[175,1803,1804],{"class":177,"line":178},[175,1805,989],{},[175,1807,1808],{"class":177,"line":196},[175,1809,1810],{},"vm.complexListWithoutKey = [\n",[175,1812,1813],{"class":177,"line":206},[175,1814,1815],{},"        {id: 3, list: [7, 8, 9]},\n",[175,1817,1818],{"class":177,"line":216},[175,1819,1820],{},"        {id: 2, list: [4, 5, 6]},\n",[175,1822,1823],{"class":177,"line":232},[175,1824,1825],{},"        {id: 1, list: [1, 2, 3]},\n",[175,1827,1828],{"class":177,"line":242},[175,1829,1830],{},"    ];\n",[175,1832,1833],{"class":177,"line":252},[175,1834,999],{},[175,1836,1837],{"class":177,"line":272},[175,1838,999],{},[175,1840,1841],{"class":177,"line":283},[175,1842,1843],{},"\u002F\u002F default: 4.100244140625ms\n",[166,1845,1847],{"className":975,"code":1846,"language":977,"meta":171,"style":171},"console.time();\nvm.complexListWithKey = [\n        {id: 3, list: [7, 8, 9]},\n        {id: 2, list: [4, 5, 6]},\n        {id: 1, list: [1, 2, 3]},\n    ];\nvm.$nextTick(() => console.timeEnd());\n\u002F\u002F default: 3.016064453125ms\n",[17,1848,1849,1853,1858,1862,1866,1870,1874,1878],{"__ignoreMap":171},[175,1850,1851],{"class":177,"line":178},[175,1852,989],{},[175,1854,1855],{"class":177,"line":196},[175,1856,1857],{},"vm.complexListWithKey = [\n",[175,1859,1860],{"class":177,"line":206},[175,1861,1815],{},[175,1863,1864],{"class":177,"line":216},[175,1865,1820],{},[175,1867,1868],{"class":177,"line":232},[175,1869,1825],{},[175,1871,1872],{"class":177,"line":242},[175,1873,1830],{},[175,1875,1876],{"class":177,"line":252},[175,1877,999],{},[175,1879,1880],{"class":177,"line":272},[175,1881,1882],{},"\u002F\u002F default: 3.016064453125ms\n",[63,1884,1885],{"id":1885},"每日一题",[166,1887,1892],{"className":1888,"code":1890,"language":1891},[1889],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[17,1893,1890],{"__ignoreMap":171},[63,1895,1896],{"id":1896},"参考",[166,1898,1901],{"className":1899,"code":1900,"language":1891},[1889],"https:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fapi\u002F#key\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002F4bdd2690859c\nhttps:\u002F\u002Fwww.zhihu.com\u002Fquestion\u002F61078310\nhttps:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000012861862\nhttps:\u002F\u002Fwww.cnblogs.com\u002Fzhumingzhenhao\u002Fp\u002F7688336.html\nhttps:\u002F\u002Fblog.csdn.net\u002Fhl18730262380\u002Farticle\u002Fdetails\u002F89306500\nhttps:\u002F\u002Fgithub.com\u002FAdvanced-Frontend\u002FDaily-Interview-Question\u002Fissues\u002F1\nhttps:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fguide\u002Flist.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81\n",[17,1902,1900],{"__ignoreMap":171},[1904,1905,1906],"style",{},"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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":171,"searchDepth":196,"depth":196,"links":1908},[1909,1910,1914,1915],{"id":65,"depth":196,"text":65},{"id":141,"depth":196,"text":141,"children":1911},[1912,1913],{"id":895,"depth":206,"text":895},{"id":1765,"depth":206,"text":1765},{"id":1885,"depth":196,"text":1885},{"id":1896,"depth":196,"text":1896},"key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法，而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。此外有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。","md",{},"\u002Fvue\u002Fvue中key的作用",{"title":5,"description":1916},"Vue\u002FVue中key的作用","7oGwVUyoD71-ehr9rbmnYVRZAvxGe0qLbPXHwkyYD5g",1791042470195]