[{"data":1,"prerenderedAt":1147},["ShallowReactive",2],{"note:code\u002Fvue\u002F12-performance-a11y-security":3},{"id":4,"title":5,"body":6,"description":16,"extension":1140,"meta":1141,"navigation":184,"path":1143,"seo":1144,"stem":1145,"__hash__":1146},"notes\u002Fsource\u002Fcode\u002Fvue\u002F12-performance-a11y-security.md","12 性能、可访问性和安全",{"type":7,"value":8,"toc":1121},"minimark",[9,13,17,25,30,33,52,55,59,62,105,108,231,234,265,271,275,282,285,296,299,303,306,358,361,365,368,382,385,389,392,406,409,413,415,438,440,502,505,516,520,522,556,558,595,600,614,620,624,662,668,671,673,681,683,689,693,696,729,732,806,809,813,831,834,866,869,875,878,908,913,916,927,933,937,940,954,957,964,975,978,989,992,996,999,1013,1024,1027,1031,1034,1048,1051,1068,1071,1088,1091,1117],[10,11,5],"h1",{"id":12},"_12-性能可访问性和安全",[14,15,16],"p",{},"页面能跑只是第一步。真实项目还要考虑速度、可访问性和安全。初学阶段不必追求极限优化，但必须避免明显问题。",[14,18,19,20,24],{},"本章目标：你能识别常见性能浪费，能写基础可访问表单，能知道 ",[21,22,23],"code",{},"v-html"," 和前端密钥为什么危险。",[26,27,29],"h2",{"id":28},"_1-性能优化先从不浪费开始","1. 性能优化先从不浪费开始",[14,31,32],{},"常见浪费：",[34,35,36,40,43,46,49],"ul",{},[37,38,39],"li",{},"模板中写复杂计算。",[37,41,42],{},"列表没有稳定 key。",[37,44,45],{},"一次性渲染超大列表。",[37,47,48],{},"首页加载所有页面代码。",[37,50,51],{},"状态放得太高，导致大范围组件更新。",[14,53,54],{},"性能不是一开始就上复杂工具，而是先写清楚、写稳定。",[26,56,58],{"id":57},"_2-用-computed-避免重复计算","2. 用 computed 避免重复计算",[14,60,61],{},"不推荐：",[63,64,69],"pre",{"className":65,"code":66,"language":67,"meta":68,"style":68},"language-vue shiki shiki-themes github-light github-dark","\u003Cp>{{ tasks.filter(task => !task.done).length }}\u003C\u002Fp>\n\u003Cp>{{ tasks.filter(task => task.done).length }}\u003C\u002Fp>\n","vue","",[21,70,71,91],{"__ignoreMap":68},[72,73,76,80,83,86,88],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"sVt8B","\u003C",[72,81,14],{"class":82},"s9eBZ",[72,84,85],{"class":78},">{{ tasks.filter(task => !task.done).length }}\u003C\u002F",[72,87,14],{"class":82},[72,89,90],{"class":78},">\n",[72,92,94,96,98,101,103],{"class":74,"line":93},2,[72,95,79],{"class":78},[72,97,14],{"class":82},[72,99,100],{"class":78},">{{ tasks.filter(task => task.done).length }}\u003C\u002F",[72,102,14],{"class":82},[72,104,90],{"class":78},[14,106,107],{},"推荐：",[63,109,113],{"className":110,"code":111,"language":112,"meta":68,"style":68},"language-js shiki shiki-themes github-light github-dark","const remainingCount = computed(() => {\n  return tasks.value.filter((task) => !task.done).length\n})\n\nconst completedCount = computed(() => {\n  return tasks.value.filter((task) => task.done).length\n})\n","js",[21,114,115,141,173,179,186,204,226],{"__ignoreMap":68},[72,116,117,121,125,128,132,135,138],{"class":74,"line":75},[72,118,120],{"class":119},"szBVR","const",[72,122,124],{"class":123},"sj4cs"," remainingCount",[72,126,127],{"class":119}," =",[72,129,131],{"class":130},"sScJk"," computed",[72,133,134],{"class":78},"(() ",[72,136,137],{"class":119},"=>",[72,139,140],{"class":78}," {\n",[72,142,143,146,149,152,155,159,162,164,167,170],{"class":74,"line":93},[72,144,145],{"class":119},"  return",[72,147,148],{"class":78}," tasks.value.",[72,150,151],{"class":130},"filter",[72,153,154],{"class":78},"((",[72,156,158],{"class":157},"s4XuR","task",[72,160,161],{"class":78},") ",[72,163,137],{"class":119},[72,165,166],{"class":119}," !",[72,168,169],{"class":78},"task.done).",[72,171,172],{"class":123},"length\n",[72,174,176],{"class":74,"line":175},3,[72,177,178],{"class":78},"})\n",[72,180,182],{"class":74,"line":181},4,[72,183,185],{"emptyLinePlaceholder":184},true,"\n",[72,187,189,191,194,196,198,200,202],{"class":74,"line":188},5,[72,190,120],{"class":119},[72,192,193],{"class":123}," completedCount",[72,195,127],{"class":119},[72,197,131],{"class":130},[72,199,134],{"class":78},[72,201,137],{"class":119},[72,203,140],{"class":78},[72,205,207,209,211,213,215,217,219,221,224],{"class":74,"line":206},6,[72,208,145],{"class":119},[72,210,148],{"class":78},[72,212,151],{"class":130},[72,214,154],{"class":78},[72,216,158],{"class":157},[72,218,161],{"class":78},[72,220,137],{"class":119},[72,222,223],{"class":78}," task.done).",[72,225,172],{"class":123},[72,227,229],{"class":74,"line":228},7,[72,230,178],{"class":78},[14,232,233],{},"模板：",[63,235,237],{"className":65,"code":236,"language":67,"meta":68,"style":68},"\u003Cp>未完成 {{ remainingCount }}\u003C\u002Fp>\n\u003Cp>已完成 {{ completedCount }}\u003C\u002Fp>\n",[21,238,239,252],{"__ignoreMap":68},[72,240,241,243,245,248,250],{"class":74,"line":75},[72,242,79],{"class":78},[72,244,14],{"class":82},[72,246,247],{"class":78},">未完成 {{ remainingCount }}\u003C\u002F",[72,249,14],{"class":82},[72,251,90],{"class":78},[72,253,254,256,258,261,263],{"class":74,"line":93},[72,255,79],{"class":78},[72,257,14],{"class":82},[72,259,260],{"class":78},">已完成 {{ completedCount }}\u003C\u002F",[72,262,14],{"class":82},[72,264,90],{"class":78},[14,266,267,270],{},[21,268,269],{},"computed"," 让逻辑有名字，并且根据依赖缓存结果。",[26,272,274],{"id":273},"_3-大列表不要一次性硬渲染","3. 大列表不要一次性硬渲染",[14,276,277,278,281],{},"如果列表只有几十项，普通 ",[21,279,280],{},"v-for"," 没问题。",[14,283,284],{},"如果有几千上万项：",[34,286,287,290,293],{},[37,288,289],{},"考虑分页。",[37,291,292],{},"考虑搜索筛选。",[37,294,295],{},"考虑虚拟列表库。",[14,297,298],{},"不要一开始就把所有数据都塞到页面上。",[26,300,302],{"id":301},"_4-路由懒加载","4. 路由懒加载",[14,304,305],{},"页面多时：",[63,307,309],{"className":110,"code":308,"language":112,"meta":68,"style":68},"{\n  path: '\u002Fsettings',\n  component: () => import('..\u002Fviews\u002FSettingsView.vue')\n}\n",[21,310,311,316,331,353],{"__ignoreMap":68},[72,312,313],{"class":74,"line":75},[72,314,315],{"class":78},"{\n",[72,317,318,321,324,328],{"class":74,"line":93},[72,319,320],{"class":130},"  path",[72,322,323],{"class":78},": ",[72,325,327],{"class":326},"sZZnC","'\u002Fsettings'",[72,329,330],{"class":78},",\n",[72,332,333,336,339,341,344,347,350],{"class":74,"line":175},[72,334,335],{"class":130},"  component",[72,337,338],{"class":78},": () ",[72,340,137],{"class":119},[72,342,343],{"class":119}," import",[72,345,346],{"class":78},"(",[72,348,349],{"class":326},"'..\u002Fviews\u002FSettingsView.vue'",[72,351,352],{"class":78},")\n",[72,354,355],{"class":74,"line":181},[72,356,357],{"class":78},"}\n",[14,359,360],{},"访问时才加载。这样首页不必下载用户暂时不用的页面。",[26,362,364],{"id":363},"_5-图片和资源","5. 图片和资源",[14,366,367],{},"常见建议：",[34,369,370,373,376,379],{},[37,371,372],{},"图片尺寸不要远大于显示尺寸。",[37,374,375],{},"大图使用压缩格式。",[37,377,378],{},"列表图片懒加载。",[37,380,381],{},"不要把无关大资源放进首屏。",[14,383,384],{},"Vue 本身不能替你解决所有资源问题，工程上也要注意。",[26,386,388],{"id":387},"_6-可访问性是什么","6. 可访问性是什么",[14,390,391],{},"可访问性是让更多用户能使用你的应用，包括：",[34,393,394,397,400,403],{},[37,395,396],{},"使用键盘的人。",[37,398,399],{},"使用屏幕阅读器的人。",[37,401,402],{},"视力较弱的人。",[37,404,405],{},"临时受限的人，例如鼠标坏了。",[14,407,408],{},"可访问性不是额外功能，而是基础质量。",[26,410,412],{"id":411},"_7-表单必须有-label","7. 表单必须有 label",[14,414,61],{},[63,416,418],{"className":65,"code":417,"language":67,"meta":68,"style":68},"\u003Cinput placeholder=\"邮箱\">\n",[21,419,420],{"__ignoreMap":68},[72,421,422,424,427,430,433,436],{"class":74,"line":75},[72,423,79],{"class":78},[72,425,426],{"class":82},"input",[72,428,429],{"class":130}," placeholder",[72,431,432],{"class":78},"=",[72,434,435],{"class":326},"\"邮箱\"",[72,437,90],{"class":78},[14,439,107],{},[63,441,443],{"className":65,"code":442,"language":67,"meta":68,"style":68},"\u003Clabel for=\"email\">邮箱\u003C\u002Flabel>\n\u003Cinput id=\"email\" v-model=\"email\" type=\"email\">\n",[21,444,445,467],{"__ignoreMap":68},[72,446,447,449,452,455,457,460,463,465],{"class":74,"line":75},[72,448,79],{"class":78},[72,450,451],{"class":82},"label",[72,453,454],{"class":130}," for",[72,456,432],{"class":78},[72,458,459],{"class":326},"\"email\"",[72,461,462],{"class":78},">邮箱\u003C\u002F",[72,464,451],{"class":82},[72,466,90],{"class":78},[72,468,469,471,473,476,478,480,483,485,488,491,493,496,498,500],{"class":74,"line":93},[72,470,79],{"class":78},[72,472,426],{"class":82},[72,474,475],{"class":130}," id",[72,477,432],{"class":78},[72,479,459],{"class":326},[72,481,482],{"class":130}," v-model",[72,484,432],{"class":78},[72,486,487],{"class":326},"\"",[72,489,490],{"class":78},"email",[72,492,487],{"class":326},[72,494,495],{"class":130}," type",[72,497,432],{"class":78},[72,499,459],{"class":326},[72,501,90],{"class":78},[14,503,504],{},"原因：",[34,506,507,510,513],{},[37,508,509],{},"屏幕阅读器能读出输入框含义。",[37,511,512],{},"点击 label 可以聚焦输入框。",[37,514,515],{},"placeholder 不是稳定标签。",[26,517,519],{"id":518},"_8-按钮就用-button","8. 按钮就用 button",[14,521,61],{},[63,523,525],{"className":65,"code":524,"language":67,"meta":68,"style":68},"\u003Cdiv @click=\"submit\">提交\u003C\u002Fdiv>\n",[21,526,527],{"__ignoreMap":68},[72,528,529,531,534,537,540,542,544,547,549,552,554],{"class":74,"line":75},[72,530,79],{"class":78},[72,532,533],{"class":82},"div",[72,535,536],{"class":78}," @",[72,538,539],{"class":130},"click",[72,541,432],{"class":78},[72,543,487],{"class":326},[72,545,546],{"class":78},"submit",[72,548,487],{"class":326},[72,550,551],{"class":78},">提交\u003C\u002F",[72,553,533],{"class":82},[72,555,90],{"class":78},[14,557,107],{},[63,559,561],{"className":65,"code":560,"language":67,"meta":68,"style":68},"\u003Cbutton type=\"button\" @click=\"submit\">提交\u003C\u002Fbutton>\n",[21,562,563],{"__ignoreMap":68},[72,564,565,567,570,572,574,577,579,581,583,585,587,589,591,593],{"class":74,"line":75},[72,566,79],{"class":78},[72,568,569],{"class":82},"button",[72,571,495],{"class":130},[72,573,432],{"class":78},[72,575,576],{"class":326},"\"button\"",[72,578,536],{"class":78},[72,580,539],{"class":130},[72,582,432],{"class":78},[72,584,487],{"class":326},[72,586,546],{"class":78},[72,588,487],{"class":326},[72,590,551],{"class":78},[72,592,569],{"class":82},[72,594,90],{"class":78},[14,596,597,599],{},[21,598,569],{}," 天然支持：",[34,601,602,605,608,611],{},[37,603,604],{},"键盘操作。",[37,606,607],{},"焦点。",[37,609,610],{},"语义。",[37,612,613],{},"disabled 状态。",[14,615,616,617,619],{},"用 ",[21,618,533],{}," 冒充按钮，需要自己补很多行为，容易漏。",[26,621,623],{"id":622},"_9-错误提示","9. 错误提示",[63,625,627],{"className":65,"code":626,"language":67,"meta":68,"style":68},"\u003Cp v-if=\"error\" role=\"alert\">{{ error }}\u003C\u002Fp>\n",[21,628,629],{"__ignoreMap":68},[72,630,631,633,635,638,640,642,645,647,650,652,655,658,660],{"class":74,"line":75},[72,632,79],{"class":78},[72,634,14],{"class":82},[72,636,637],{"class":119}," v-if",[72,639,432],{"class":78},[72,641,487],{"class":326},[72,643,644],{"class":78},"error",[72,646,487],{"class":326},[72,648,649],{"class":130}," role",[72,651,432],{"class":78},[72,653,654],{"class":326},"\"alert\"",[72,656,657],{"class":78},">{{ error }}\u003C\u002F",[72,659,14],{"class":82},[72,661,90],{"class":78},[14,663,664,667],{},[21,665,666],{},"role=\"alert\""," 告诉辅助技术这里是重要变化。",[14,669,670],{},"表单错误应该具体：",[14,672,61],{},[63,674,679],{"className":675,"code":677,"language":678,"meta":68},[676],"language-text","输入错误\n","text",[21,680,677],{"__ignoreMap":68},[14,682,107],{},[63,684,687],{"className":685,"code":686,"language":678,"meta":68},[676],"标题不能为空\n标题不能超过 30 个字符\n",[21,688,686],{"__ignoreMap":68},[26,690,692],{"id":691},"_10-焦点样式","10. 焦点样式",[14,694,695],{},"不要随便去掉：",[63,697,701],{"className":698,"code":699,"language":700,"meta":68,"style":68},"language-css shiki shiki-themes github-light github-dark","button:focus {\n  outline: none;\n}\n","css",[21,702,703,712,725],{"__ignoreMap":68},[72,704,705,707,710],{"class":74,"line":75},[72,706,569],{"class":82},[72,708,709],{"class":130},":focus",[72,711,140],{"class":78},[72,713,714,717,719,722],{"class":74,"line":93},[72,715,716],{"class":123},"  outline",[72,718,323],{"class":78},[72,720,721],{"class":123},"none",[72,723,724],{"class":78},";\n",[72,726,727],{"class":74,"line":175},[72,728,357],{"class":78},[14,730,731],{},"如果你移除默认焦点样式，必须提供新的明显焦点样式：",[63,733,735],{"className":698,"code":734,"language":700,"meta":68,"style":68},"button:focus-visible {\n  outline: 3px solid rgba(37, 99, 235, 0.35);\n  outline-offset: 2px;\n}\n",[21,736,737,746,788,802],{"__ignoreMap":68},[72,738,739,741,744],{"class":74,"line":75},[72,740,569],{"class":82},[72,742,743],{"class":130},":focus-visible",[72,745,140],{"class":78},[72,747,748,750,752,755,758,761,764,766,769,772,775,777,780,782,785],{"class":74,"line":93},[72,749,716],{"class":123},[72,751,323],{"class":78},[72,753,754],{"class":123},"3",[72,756,757],{"class":119},"px",[72,759,760],{"class":123}," solid",[72,762,763],{"class":123}," rgba",[72,765,346],{"class":78},[72,767,768],{"class":123},"37",[72,770,771],{"class":78},", ",[72,773,774],{"class":123},"99",[72,776,771],{"class":78},[72,778,779],{"class":123},"235",[72,781,771],{"class":78},[72,783,784],{"class":123},"0.35",[72,786,787],{"class":78},");\n",[72,789,790,793,795,798,800],{"class":74,"line":175},[72,791,792],{"class":123},"  outline-offset",[72,794,323],{"class":78},[72,796,797],{"class":123},"2",[72,799,757],{"class":119},[72,801,724],{"class":78},[72,803,804],{"class":74,"line":181},[72,805,357],{"class":78},[14,807,808],{},"键盘用户需要知道当前焦点在哪里。",[26,810,812],{"id":811},"_11-安全vue-默认会转义文本","11. 安全：Vue 默认会转义文本",[63,814,816],{"className":65,"code":815,"language":67,"meta":68,"style":68},"\u003Cp>{{ userInput }}\u003C\u002Fp>\n",[21,817,818],{"__ignoreMap":68},[72,819,820,822,824,827,829],{"class":74,"line":75},[72,821,79],{"class":78},[72,823,14],{"class":82},[72,825,826],{"class":78},">{{ userInput }}\u003C\u002F",[72,828,14],{"class":82},[72,830,90],{"class":78},[14,832,833],{},"如果用户输入：",[63,835,839],{"className":836,"code":837,"language":838,"meta":68,"style":68},"language-html shiki shiki-themes github-light github-dark","\u003Cscript>alert('hack')\u003C\u002Fscript>\n","html",[21,840,841],{"__ignoreMap":68},[72,842,843,845,848,851,854,856,859,862,864],{"class":74,"line":75},[72,844,79],{"class":78},[72,846,847],{"class":82},"script",[72,849,850],{"class":78},">",[72,852,853],{"class":130},"alert",[72,855,346],{"class":78},[72,857,858],{"class":326},"'hack'",[72,860,861],{"class":78},")\u003C\u002F",[72,863,847],{"class":82},[72,865,90],{"class":78},[14,867,868],{},"Vue 会把它当文本显示，而不是执行脚本。这是安全的。",[26,870,872,873],{"id":871},"_12-谨慎使用-v-html","12. 谨慎使用 ",[21,874,23],{},[14,876,877],{},"危险写法：",[63,879,881],{"className":65,"code":880,"language":67,"meta":68,"style":68},"\u003Cdiv v-html=\"userInput\">\u003C\u002Fdiv>\n",[21,882,883],{"__ignoreMap":68},[72,884,885,887,889,892,894,896,899,901,904,906],{"class":74,"line":75},[72,886,79],{"class":78},[72,888,533],{"class":82},[72,890,891],{"class":130}," v-html",[72,893,432],{"class":78},[72,895,487],{"class":326},[72,897,898],{"class":78},"userInput",[72,900,487],{"class":326},[72,902,903],{"class":78},">\u003C\u002F",[72,905,533],{"class":82},[72,907,90],{"class":78},[14,909,910,912],{},[21,911,23],{}," 会把字符串当 HTML 插入页面。如果内容来自用户，可能导致 XSS。",[14,914,915],{},"除非你非常确定：",[34,917,918,921,924],{},[37,919,920],{},"HTML 来源可信。",[37,922,923],{},"已经过安全清洗。",[37,925,926],{},"业务确实需要渲染 HTML。",[14,928,929,930,932],{},"否则不要用 ",[21,931,23],{},"。",[26,934,936],{"id":935},"_13-前端不能保存真正秘密","13. 前端不能保存真正秘密",[14,938,939],{},"不要把这些放前端：",[34,941,942,945,948,951],{},[37,943,944],{},"数据库密码。",[37,946,947],{},"后端私密 API key。",[37,949,950],{},"管理员 token。",[37,952,953],{},"支付平台密钥。",[14,955,956],{},"原因：前端代码会被下载到用户浏览器。即使你写在环境变量里，只要打包进前端，用户就可能看到。",[14,958,959,960,963],{},"Vite 中以 ",[21,961,962],{},"VITE_"," 开头的环境变量会暴露给前端：",[63,965,969],{"className":966,"code":967,"language":968,"meta":68,"style":68},"language-env shiki shiki-themes github-light github-dark","VITE_API_BASE_URL=https:\u002F\u002Fapi.example.com\n","env",[21,970,971],{"__ignoreMap":68},[72,972,973],{"class":74,"line":75},[72,974,967],{},[14,976,977],{},"适合放：",[34,979,980,983,986],{},[37,981,982],{},"公开 API 地址。",[37,984,985],{},"公开功能开关。",[37,987,988],{},"公开项目配置。",[14,990,991],{},"不适合放秘密。",[26,993,995],{"id":994},"_14-依赖安全","14. 依赖安全",[14,997,998],{},"建议：",[34,1000,1001,1004,1007,1010],{},[37,1002,1003],{},"使用维护活跃的库。",[37,1005,1006],{},"不随便复制陌生脚本。",[37,1008,1009],{},"定期运行依赖审计。",[37,1011,1012],{},"遇到安全公告及时升级。",[63,1014,1018],{"className":1015,"code":1016,"language":1017,"meta":68,"style":68},"language-powershell shiki shiki-themes github-light github-dark","npm audit\n","powershell",[21,1019,1020],{"__ignoreMap":68},[72,1021,1022],{"class":74,"line":75},[72,1023,1016],{},[14,1025,1026],{},"但也不要看到任何 warning 就恐慌。要看是否影响生产、是否可利用、是否有修复版本。",[26,1028,1030],{"id":1029},"_15-常见检查清单","15. 常见检查清单",[14,1032,1033],{},"性能：",[34,1035,1036,1039,1042,1045],{},[37,1037,1038],{},"模板里有没有复杂计算？",[37,1040,1041],{},"列表有没有稳定 key？",[37,1043,1044],{},"是否一次渲染太多数据？",[37,1046,1047],{},"页面组件是否可以懒加载？",[14,1049,1050],{},"可访问性：",[34,1052,1053,1056,1059,1062,1065],{},[37,1054,1055],{},"输入框有没有 label？",[37,1057,1058],{},"按钮是否用 button？",[37,1060,1061],{},"错误是否有明确文本？",[37,1063,1064],{},"键盘能否操作主要流程？",[37,1066,1067],{},"焦点是否可见？",[14,1069,1070],{},"安全：",[34,1072,1073,1079,1082,1085],{},[37,1074,1075,1076,1078],{},"是否使用了 ",[21,1077,23],{},"？",[37,1080,1081],{},"前端是否暴露了秘密？",[37,1083,1084],{},"用户输入是否被直接拼进 HTML？",[37,1086,1087],{},"依赖是否来自可信来源？",[26,1089,1090],{"id":1090},"本章练习",[1092,1093,1094,1097,1100,1105,1108,1114],"ol",{},[37,1095,1096],{},"把一个模板里的复杂表达式改成 computed。",[37,1098,1099],{},"给任务表单补全 label。",[37,1101,1102,1103,932],{},"给错误提示加 ",[21,1104,666],{},[37,1106,1107],{},"用键盘 Tab 操作页面，检查焦点是否可见。",[37,1109,1110,1111,1113],{},"解释为什么 ",[21,1112,23],{}," 危险。",[37,1115,1116],{},"判断哪些环境变量能放前端，哪些不能。",[1118,1119,1120],"style",{},"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 .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 .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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":68,"searchDepth":93,"depth":93,"links":1122},[1123,1124,1125,1126,1127,1128,1129,1130,1131,1132,1133,1134,1136,1137,1138,1139],{"id":28,"depth":93,"text":29},{"id":57,"depth":93,"text":58},{"id":273,"depth":93,"text":274},{"id":301,"depth":93,"text":302},{"id":363,"depth":93,"text":364},{"id":387,"depth":93,"text":388},{"id":411,"depth":93,"text":412},{"id":518,"depth":93,"text":519},{"id":622,"depth":93,"text":623},{"id":691,"depth":93,"text":692},{"id":811,"depth":93,"text":812},{"id":871,"depth":93,"text":1135},"12. 谨慎使用 v-html",{"id":935,"depth":93,"text":936},{"id":994,"depth":93,"text":995},{"id":1029,"depth":93,"text":1030},{"id":1090,"depth":93,"text":1090},"md",{"order":1142},12,"\u002Fsource\u002Fcode\u002Fvue\u002F12-performance-a11y-security",{"title":5,"description":16},"source\u002Fcode\u002Fvue\u002F12-performance-a11y-security","NO2axRe45mmMTiRkl0oMXrGatzpNywjmaCcEN66JqC0",1784032889391]