[{"data":1,"prerenderedAt":13682},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue3":3},{"id":4,"title":5,"body":6,"description":12,"extension":13676,"meta":13677,"navigation":53,"path":13678,"seo":13679,"stem":13680,"__hash__":13681},"content\u002FVue\u002Fvue3.md","Vue3",{"type":7,"value":8,"toc":13557},"minimark",[9,13,16,19,22,25,203,206,210,213,216,219,222,226,356,359,363,366,370,378,385,390,406,410,437,441,456,460,466,473,476,496,499,521,524,538,541,547,554,637,640,712,719,725,740,750,753,756,759,805,811,1128,1135,1143,1146,1157,1160,1163,1170,1173,1589,1592,1595,1598,1681,1684,1695,1706,1735,1755,1920,1934,1939,2066,2069,2072,2123,2137,2144,2147,2149,2152,2212,2215,2221,2254,2261,2264,2267,2291,2294,2751,2754,2757,2763,2766,2772,2782,2792,2798,2801,2804,2915,2919,2925,2928,2935,2945,2975,2989,2994,3078,3084,3153,3159,3230,3234,3267,3270,3276,3286,3289,3304,3307,3353,3359,3366,3369,3375,3381,3387,3393,3396,3416,3436,3439,3442,3456,3459,3506,3509,3512,3586,3589,3592,3638,3641,3648,3654,3657,3702,3707,3763,3766,3772,3775,3778,3784,3791,3794,3800,3806,3809,3814,3817,3889,3892,3895,3898,3900,3906,3909,3915,3918,3924,3930,3933,3954,3958,3990,3994,4014,4020,4172,4175,4204,4211,4243,4250,4253,4321,4324,4357,4360,4366,4373,4379,4382,4386,4389,4443,4446,4452,4455,4458,4474,4480,4484,4527,4530,4535,4541,4547,4550,4553,4559,4565,4571,4577,4584,4590,4593,4596,4602,4609,4670,4673,4768,4790,4793,4799,4802,4805,4811,4817,4821,4824,4830,4833,4839,4845,4851,4854,4858,4861,4867,4870,4876,4882,4886,4892,4895,4901,4907,4910,4913,4916,4919,4922,4932,4938,4941,5001,5005,5017,5023,5026,5096,5099,5107,5111,5198,5204,5207,5210,5213,5216,5235,5241,5244,5250,5253,5259,5263,5266,5272,5275,5281,5284,5290,5293,5299,5302,5308,5311,5317,5323,5329,5333,5336,5342,5345,5351,5354,5360,5363,5369,5372,5378,5381,5387,5390,5393,5399,5402,5405,5411,5416,5419,5425,5432,5438,5444,5450,5453,5459,5462,5468,5471,5505,5508,5514,5517,5520,5523,5529,5532,5538,5541,5544,5547,5550,5553,5559,5562,5565,5568,5571,5577,5580,5583,5586,5589,5595,5598,5601,5978,5989,5993,6096,6100,6144,6148,6152,6157,6161,6167,6173,6191,6194,6200,6225,6229,6233,6237,6241,6245,6255,6282,6301,6336,6342,6360,6363,6397,6400,6450,6456,6462,6477,6483,6493,6511,6517,6520,6526,6536,6538,6544,6569,6575,6579,6583,6594,6621,6626,6643,6646,6650,6662,6727,6745,6749,6752,6760,6781,6784,6885,6888,6992,6995,7178,7181,7329,7332,7650,7654,7676,7681,7916,7921,8014,8019,8309,8313,8329,8435,8438,8660,8664,8678,8750,8754,8789,8793,8807,8841,8844,8849,8855,8859,8862,8866,8877,8894,8905,8908,8934,8997,9002,9081,9087,9102,9108,9160,9166,9174,9216,9223,9280,9287,9318,9325,9349,9357,9364,9370,9444,9447,9551,9559,9562,9568,9571,10295,10299,10317,10364,10367,10371,10760,10764,11204,11207,11224,11251,11254,11507,11510,11848,11851,13050,13054,13057,13062,13065,13070,13073,13173,13176,13182,13193,13265,13478,13481,13484,13490,13493,13497,13503,13520,13547,13554],[10,11,12],"p",{},"​",[10,14,15],{},"​\t项目的入口文件是index.html 也就是呈现给给浏览器的主页",[10,17,18],{},"​\t启动可以看一下短命令，短命令可以看package.json里，里面的script规定了命令等其他指令，比如build构建项目 npm run dev 便可以运行项目，ctrl+c可以退出vite构建工具",[10,20,21],{},"​\tvite.config.ts是工程配置文件，可以配置插件，代理等",[10,23,24],{},"​\tmain.ts 决定了样式和创建应用app",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-ts shiki shiki-themes github-light github-dark","import '.\u002Fassets\u002Fmain.css'\n\nimport { createApp } from 'vue' \u002F\u002F这个相当于花的盆栽\nimport { createPinia } from 'pinia' \n\nimport App from '.\u002FApp.vue' \u002F\u002F相当于花的根\nimport router from '.\u002Frouter'\n\nconst app = createApp(App)\n\napp.use(createPinia())\napp.use(router)\n\napp.mount('#app')\n","ts","",[33,34,35,48,55,74,90,95,111,124,129,149,154,172,182,187],"code",{"__ignoreMap":31},[36,37,40,44],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"szBVR","import",[36,45,47],{"class":46},"sZZnC"," '.\u002Fassets\u002Fmain.css'\n",[36,49,51],{"class":38,"line":50},2,[36,52,54],{"emptyLinePlaceholder":53},true,"\n",[36,56,58,60,64,67,70],{"class":38,"line":57},3,[36,59,43],{"class":42},[36,61,63],{"class":62},"sVt8B"," { createApp } ",[36,65,66],{"class":42},"from",[36,68,69],{"class":46}," 'vue'",[36,71,73],{"class":72},"sJ8bj"," \u002F\u002F这个相当于花的盆栽\n",[36,75,77,79,82,84,87],{"class":38,"line":76},4,[36,78,43],{"class":42},[36,80,81],{"class":62}," { createPinia } ",[36,83,66],{"class":42},[36,85,86],{"class":46}," 'pinia'",[36,88,89],{"class":62}," \n",[36,91,93],{"class":38,"line":92},5,[36,94,54],{"emptyLinePlaceholder":53},[36,96,98,100,103,105,108],{"class":38,"line":97},6,[36,99,43],{"class":42},[36,101,102],{"class":62}," App ",[36,104,66],{"class":42},[36,106,107],{"class":46}," '.\u002FApp.vue'",[36,109,110],{"class":72}," \u002F\u002F相当于花的根\n",[36,112,114,116,119,121],{"class":38,"line":113},7,[36,115,43],{"class":42},[36,117,118],{"class":62}," router ",[36,120,66],{"class":42},[36,122,123],{"class":46}," '.\u002Frouter'\n",[36,125,127],{"class":38,"line":126},8,[36,128,54],{"emptyLinePlaceholder":53},[36,130,132,135,139,142,146],{"class":38,"line":131},9,[36,133,134],{"class":42},"const",[36,136,138],{"class":137},"sj4cs"," app",[36,140,141],{"class":42}," =",[36,143,145],{"class":144},"sScJk"," createApp",[36,147,148],{"class":62},"(App)\n",[36,150,152],{"class":38,"line":151},10,[36,153,54],{"emptyLinePlaceholder":53},[36,155,157,160,163,166,169],{"class":38,"line":156},11,[36,158,159],{"class":62},"app.",[36,161,162],{"class":144},"use",[36,164,165],{"class":62},"(",[36,167,168],{"class":144},"createPinia",[36,170,171],{"class":62},"())\n",[36,173,175,177,179],{"class":38,"line":174},12,[36,176,159],{"class":62},[36,178,162],{"class":144},[36,180,181],{"class":62},"(router)\n",[36,183,185],{"class":38,"line":184},13,[36,186,54],{"emptyLinePlaceholder":53},[36,188,190,192,195,197,200],{"class":38,"line":189},14,[36,191,159],{"class":62},[36,193,194],{"class":144},"mount",[36,196,165],{"class":62},[36,198,199],{"class":46},"'#app'",[36,201,202],{"class":62},")\n",[10,204,205],{},"index.html 里把app的位置写入了进去！ 可以看作是摆放花盆的位置",[207,208,209],"h3",{"id":209},"componets",[10,211,212],{},"componets文件夹主要放的是组件！ 其中App.vue可以看作是app的根！",[10,214,215],{},"icons里的HelloWorld.vue等文件可以看作是植物的叶子，没有App.vue的优先级高！。",[207,217,218],{"id":218},"assets",[10,220,221],{},"里面存放的是固有的css文件",[207,223,225],{"id":224},"maints","main.ts",[26,227,229],{"className":28,"code":228,"language":30,"meta":31,"style":31},"import '.\u002Fassets\u002Fmain.css'\n\nimport { createApp } from 'vue' \u002F\u002F相当于盆栽\nimport { createPinia } from 'pinia'\n\nimport App from '.\u002FApp.vue' \u002F\u002F相当于根（组件）\nimport router from '.\u002Frouter'\n\nconst app = createApp(App) \u002F\u002F把App组件挂载到app上\n\napp.use(createPinia())\napp.use(router)\n\napp.mount('#app') \u002F\u002F把app挂载到id为app的div(容器)里\n\n",[33,230,231,237,241,254,265,269,282,292,296,312,316,328,336,340],{"__ignoreMap":31},[36,232,233,235],{"class":38,"line":39},[36,234,43],{"class":42},[36,236,47],{"class":46},[36,238,239],{"class":38,"line":50},[36,240,54],{"emptyLinePlaceholder":53},[36,242,243,245,247,249,251],{"class":38,"line":57},[36,244,43],{"class":42},[36,246,63],{"class":62},[36,248,66],{"class":42},[36,250,69],{"class":46},[36,252,253],{"class":72}," \u002F\u002F相当于盆栽\n",[36,255,256,258,260,262],{"class":38,"line":76},[36,257,43],{"class":42},[36,259,81],{"class":62},[36,261,66],{"class":42},[36,263,264],{"class":46}," 'pinia'\n",[36,266,267],{"class":38,"line":92},[36,268,54],{"emptyLinePlaceholder":53},[36,270,271,273,275,277,279],{"class":38,"line":97},[36,272,43],{"class":42},[36,274,102],{"class":62},[36,276,66],{"class":42},[36,278,107],{"class":46},[36,280,281],{"class":72}," \u002F\u002F相当于根（组件）\n",[36,283,284,286,288,290],{"class":38,"line":113},[36,285,43],{"class":42},[36,287,118],{"class":62},[36,289,66],{"class":42},[36,291,123],{"class":46},[36,293,294],{"class":38,"line":126},[36,295,54],{"emptyLinePlaceholder":53},[36,297,298,300,302,304,306,309],{"class":38,"line":131},[36,299,134],{"class":42},[36,301,138],{"class":137},[36,303,141],{"class":42},[36,305,145],{"class":144},[36,307,308],{"class":62},"(App) ",[36,310,311],{"class":72},"\u002F\u002F把App组件挂载到app上\n",[36,313,314],{"class":38,"line":151},[36,315,54],{"emptyLinePlaceholder":53},[36,317,318,320,322,324,326],{"class":38,"line":156},[36,319,159],{"class":62},[36,321,162],{"class":144},[36,323,165],{"class":62},[36,325,168],{"class":144},[36,327,171],{"class":62},[36,329,330,332,334],{"class":38,"line":174},[36,331,159],{"class":62},[36,333,162],{"class":144},[36,335,181],{"class":62},[36,337,338],{"class":38,"line":184},[36,339,54],{"emptyLinePlaceholder":53},[36,341,342,344,346,348,350,353],{"class":38,"line":189},[36,343,159],{"class":62},[36,345,194],{"class":144},[36,347,165],{"class":62},[36,349,199],{"class":46},[36,351,352],{"class":62},") ",[36,354,355],{"class":72},"\u002F\u002F把app挂载到id为app的div(容器)里\n",[10,357,358],{},"可以定义应用，组件，挂载等操作",[207,360,362],{"id":361},"appvue","App.vue",[10,364,365],{},"里面可以定义标签，包括应用所在的位置或是javascript等",[367,368,369],"h2",{"id":369},"分别暴露和默认暴露",[10,371,372,373,377],{},"在 JavaScript 中，模块导出（export）有两种方式：",[374,375,376],"strong",{},"暴露（Named Exports）**和**默认暴露（Default Export）","。这两种导出的方式有一些关键的差别，主要体现在如何导入、命名以及是否支持多个导出等方面。",[207,379,381,382],{"id":380},"_1-暴露named-exports","1. ",[374,383,384],{},"暴露（Named Exports）",[386,387,389],"h4",{"id":388},"特点","特点：",[391,392,393,400],"ul",{},[394,395,396,399],"li",{},[374,397,398],{},"暴露多个值","：一个模块可以暴露多个变量、函数或类。",[394,401,402,405],{},[374,403,404],{},"必须使用相同的名称进行导入","：导入时需要明确指定导入的名称，且名称必须和导出的名称一致。",[386,407,409],{"id":408},"语法","语法：",[391,411,412,426],{},[394,413,414,417,418],{},[374,415,416],{},"导出","：",[26,419,424],{"className":420,"code":422,"language":423},[421],"language-text","\u002F\u002F 可以暴露多个变量、函数、类等\nexport const foo = 'bar';\nexport function myFunction() {\n  \u002F\u002F ...\n}\nexport class MyClass {\n  \u002F\u002F ...\n}\n","text",[33,425,422],{"__ignoreMap":31},[394,427,428,417,431],{},[374,429,430],{},"导入",[26,432,435],{"className":433,"code":434,"language":423},[421],"javascript\n\nimport { foo, myFunction, MyClass } from '.\u002Fmodule';\n",[33,436,434],{"__ignoreMap":31},[386,438,440],{"id":439},"特点总结","特点总结：",[391,442,443,446,453],{},[394,444,445],{},"一个模块可以导出多个成员。",[394,447,448,449,452],{},"导入时需要使用 ",[33,450,451],{},"{}"," 来指定导入的具体成员名称。",[394,454,455],{},"可以选择只导入某些特定的成员。",[386,457,459],{"id":458},"示例","示例：",[26,461,464],{"className":462,"code":463,"language":423},[421],"\u002F\u002F module.js\nexport const a = 10;\nexport const b = 20;\nexport function add(x, y) {\n  return x + y;\n}\n\n\u002F\u002F main.js\nimport { a, add } from '.\u002Fmodule.js';\nconsole.log(a); \u002F\u002F 10\nconsole.log(add(2, 3)); \u002F\u002F 5\n",[33,465,463],{"__ignoreMap":31},[207,467,469,470],{"id":468},"_2-默认暴露default-export","2. ",[374,471,472],{},"默认暴露（Default Export）",[386,474,389],{"id":475},"特点-1",[391,477,478,487],{},[394,479,480,483,484,486],{},[374,481,482],{},"只能有一个默认导出","：每个模块",[374,485,482],{},"。",[394,488,489,492,493,495],{},[374,490,491],{},"导入时可以自定义名称","：导入时不需要使用 ",[33,494,451],{},"，并且可以为默认导出的值自定义名称。",[386,497,409],{"id":498},"语法-1",[391,500,501,511],{},[394,502,503,417,505],{},[374,504,416],{},[26,506,509],{"className":507,"code":508,"language":423},[421],"\u002F\u002F 只能有一个默认导出\nexport default function() {\n  console.log('This is the default export function');\n}\n\n\u002F\u002F 或者导出一个值\nexport default 42;\n",[33,510,508],{"__ignoreMap":31},[394,512,513,417,515],{},[374,514,430],{},[26,516,519],{"className":517,"code":518,"language":423},[421],"import myFunction from '.\u002Fmodule';\nimport number from '.\u002Fmodule';\n",[33,520,518],{"__ignoreMap":31},[386,522,440],{"id":523},"特点总结-1",[391,525,526,529,535],{},[394,527,528],{},"每个模块只能有一个默认导出。",[394,530,531,532,534],{},"导入时不需要使用 ",[33,533,451],{},"，并且可以自由命名。",[394,536,537],{},"默认导出通常用于导出单一对象、函数或类。",[386,539,459],{"id":540},"示例-1",[26,542,545],{"className":543,"code":544,"language":423},[421],"\u002F\u002F module.js\nexport default function() {\n  console.log('Hello from default export');\n}\n\n\u002F\u002F main.js\nimport greet from '.\u002Fmodule.js';\ngreet(); \u002F\u002F Hello from default export\n",[33,546,544],{"__ignoreMap":31},[207,548,550,551],{"id":549},"_3-暴露与默认暴露的对比","3. ",[374,552,553],{},"暴露与默认暴露的对比",[555,556,557,575],"table",{},[558,559,560],"thead",{},[561,562,563,567,571],"tr",{},[564,565,566],"th",{},"特性",[564,568,569],{},[374,570,384],{},[564,572,573],{},[374,574,472],{},[576,577,578,592,611,624],"tbody",{},[561,579,580,586,589],{},[581,582,583],"td",{},[374,584,585],{},"导出数量",[581,587,588],{},"可以导出多个成员",[581,590,591],{},"只能导出一个成员",[561,593,594,599,605],{},[581,595,596],{},[374,597,598],{},"导入方式",[581,600,601,602,604],{},"需要使用 ",[33,603,451],{}," 指定导入的名称",[581,606,607,608,610],{},"不需要 ",[33,609,451],{},"，可以自定义导入名称",[561,612,613,618,621],{},[581,614,615],{},[374,616,617],{},"命名要求",[581,619,620],{},"导入时必须使用相同的名称",[581,622,623],{},"可以自由命名",[561,625,626,631,634],{},[581,627,628],{},[374,629,630],{},"常见用途",[581,632,633],{},"导出多个工具函数、常量、类等",[581,635,636],{},"导出一个主功能或对象，通常是单一的功能",[367,638,639],{"id":639},"暴露组件定义",[26,641,645],{"className":642,"code":643,"language":644,"meta":31,"style":31},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript lang=\"ts\">\nexport default { \n    \u002F\u002F用于导出整个组件配置对象，这样其他文件或组件就可以导入并使用它。\n  name: 'App', \u002F\u002F暴露组件名\n}\n\u003C\u002Fscript>\n","vue",[33,646,647,668,679,684,698,703],{"__ignoreMap":31},[36,648,649,652,656,659,662,665],{"class":38,"line":39},[36,650,651],{"class":62},"\u003C",[36,653,655],{"class":654},"s9eBZ","script",[36,657,658],{"class":144}," lang",[36,660,661],{"class":62},"=",[36,663,664],{"class":46},"\"ts\"",[36,666,667],{"class":62},">\n",[36,669,670,673,676],{"class":38,"line":50},[36,671,672],{"class":42},"export",[36,674,675],{"class":42}," default",[36,677,678],{"class":62}," { \n",[36,680,681],{"class":38,"line":57},[36,682,683],{"class":72},"    \u002F\u002F用于导出整个组件配置对象，这样其他文件或组件就可以导入并使用它。\n",[36,685,686,689,692,695],{"class":38,"line":76},[36,687,688],{"class":62},"  name: ",[36,690,691],{"class":46},"'App'",[36,693,694],{"class":62},", ",[36,696,697],{"class":72},"\u002F\u002F暴露组件名\n",[36,699,700],{"class":38,"line":92},[36,701,702],{"class":62},"}\n",[36,704,705,708,710],{"class":38,"line":97},[36,706,707],{"class":62},"\u003C\u002F",[36,709,655],{"class":654},[36,711,667],{"class":62},[10,713,714,715,718],{},"这段代码是一个 Vue 组件的定义，它使用 TypeScript (",[33,716,717],{},"lang=\"ts\"",") 编写。其目的和作用如下：",[207,720,381,722,417],{"id":721},"_1-定义组件",[374,723,724],{},"定义组件",[391,726,727],{},[394,728,729,732,733,739],{},[33,730,731],{},"\u003Cscript lang=\"ts\">"," 标签表示在 Vue 单文件组件中使用 TypeScript 作为脚本语言。",[374,734,735,736,738],{},"Vue 默认使用 JavaScript，但通过 ",[33,737,717],{},"，可以让 Vue 支持 TypeScript 特性","，如类型检查、类型推导、接口等。",[207,741,469,743,417],{"id":742},"_2-组件的-name-属性",[374,744,745,746,749],{},"组件的 ",[33,747,748],{},"name"," 属性",[10,751,752],{},"name: 'App'是 Vue 组件的 name",[10,754,755],{},"选项，用来指定组件的名称。",[10,757,758],{},"name选项对于 Vue 来说有几个作用：",[391,760,761,776,789],{},[394,762,763,766,767,772,773,486],{},[374,764,765],{},"调试用途","：在浏览器开发者工具中查看 Vue 组件时，",[374,768,769,771],{},[33,770,748],{}," 属性会显示为组件的名称","，这有",[374,774,775],{},"助于调试",[394,777,778,781,782,785,786,788],{},[374,779,780],{},"递归组件","：如果你需要",[374,783,784],{},"在组件内部递归调用自己","（例如在组件中嵌套相同类型的子组件），",[33,787,748],{}," 是必须的。",[394,790,791,794,795,798,799,801,802],{},[374,792,793],{},"路由视图","：如果你使用 ",[374,796,797],{},"Vue Router 并且使用动态路由或异步组件加载","，",[33,800,748],{}," 也是",[374,803,804],{},"帮助 Vue 匹配路由和加载相应组件的关键。",[207,806,550,808,417],{"id":807},"_3-暴露组件名",[374,809,810],{},"暴露组件名",[391,812,813],{},[394,814,815,818,819,826,827,830,831,486,834,837,838,840,841,843,844,986,988,417,991,1002,1004,1005,1007,1008],{},[33,816,817],{},"name: 'App'"," 这行代码的意思是",[374,820,821,822,825],{},"暴露一个名为 ",[33,823,824],{},"App"," 的 Vue 组件","。这通常是 Vue 项目的",[374,828,829],{},"根组件","或者是你",[374,832,833],{},"自定义的某个组件",[835,836],"br",{},"在 Vue 中，每个组件都可以通过 ",[33,839,748],{}," 选项来指定组件的名称，这个名称用于在 Vue 开发工具中识别组件，并且在注册组件时也非常有用。你可以在组件定义时通过 ",[33,842,748],{}," 来指定它的名字，这样在父组件或者其他地方就可以引用该组件。",[26,845,847],{"className":642,"code":846,"language":644,"meta":31,"style":31},"\u003C!-- Person.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ name }}\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: 'Person', \u002F\u002F 这里暴露了组件名称\n  data() {\n    return {\n      name: 'Alice'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n",[33,848,849,854,863,873,888,897,905,909,917,926,938,946,953,961,966,972,977],{"__ignoreMap":31},[36,850,851],{"class":38,"line":39},[36,852,853],{"class":72},"\u003C!-- Person.vue -->\n",[36,855,856,858,861],{"class":38,"line":50},[36,857,651],{"class":62},[36,859,860],{"class":654},"template",[36,862,667],{"class":62},[36,864,865,868,871],{"class":38,"line":57},[36,866,867],{"class":62},"  \u003C",[36,869,870],{"class":654},"div",[36,872,667],{"class":62},[36,874,875,878,881,884,886],{"class":38,"line":76},[36,876,877],{"class":62},"    \u003C",[36,879,880],{"class":654},"h1",[36,882,883],{"class":62},">{{ name }}\u003C\u002F",[36,885,880],{"class":654},[36,887,667],{"class":62},[36,889,890,893,895],{"class":38,"line":92},[36,891,892],{"class":62},"  \u003C\u002F",[36,894,870],{"class":654},[36,896,667],{"class":62},[36,898,899,901,903],{"class":38,"line":97},[36,900,707],{"class":62},[36,902,860],{"class":654},[36,904,667],{"class":62},[36,906,907],{"class":38,"line":113},[36,908,54],{"emptyLinePlaceholder":53},[36,910,911,913,915],{"class":38,"line":126},[36,912,651],{"class":62},[36,914,655],{"class":654},[36,916,667],{"class":62},[36,918,919,921,923],{"class":38,"line":131},[36,920,672],{"class":42},[36,922,675],{"class":42},[36,924,925],{"class":62}," {\n",[36,927,928,930,933,935],{"class":38,"line":151},[36,929,688],{"class":62},[36,931,932],{"class":46},"'Person'",[36,934,694],{"class":62},[36,936,937],{"class":72},"\u002F\u002F 这里暴露了组件名称\n",[36,939,940,943],{"class":38,"line":156},[36,941,942],{"class":144},"  data",[36,944,945],{"class":62},"() {\n",[36,947,948,951],{"class":38,"line":174},[36,949,950],{"class":42},"    return",[36,952,925],{"class":62},[36,954,955,958],{"class":38,"line":184},[36,956,957],{"class":62},"      name: ",[36,959,960],{"class":46},"'Alice'\n",[36,962,963],{"class":38,"line":189},[36,964,965],{"class":62},"    }\n",[36,967,969],{"class":38,"line":968},15,[36,970,971],{"class":62},"  }\n",[36,973,975],{"class":38,"line":974},16,[36,976,702],{"class":62},[36,978,980,982,984],{"class":38,"line":979},17,[36,981,707],{"class":62},[36,983,655],{"class":654},[36,985,667],{"class":62},[835,987],{},[374,989,990],{},"解释",[391,992,993],{},[394,994,995,998,999,486],{},[33,996,997],{},"name: 'Person'","：这是 Vue 组件的名称，它",[374,1000,1001],{},"暴露了该组件的名字，其他组件或应用可以通过这个名称来识别它",[835,1003],{},"​        你可以在父组件中通过 ",[33,1006,748],{}," 来引用子组件。父组件通常通过注册组件来使用它。",[26,1009,1011],{"className":642,"code":1010,"language":644,"meta":31,"style":31},"\u003C!-- App.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CPerson \u002F> \u003C!-- 使用 Person 组件 -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport Person from '.\u002Fcomponents\u002FPerson.vue'\n\nexport default {\n  components: {\n    Person \u002F\u002F 注册组件时，使用组件的 `name` 属性\n  }\n}\n\u003C\u002Fscript>\n\n",[33,1012,1013,1018,1026,1034,1047,1055,1063,1067,1075,1087,1091,1099,1104,1112,1116,1120],{"__ignoreMap":31},[36,1014,1015],{"class":38,"line":39},[36,1016,1017],{"class":72},"\u003C!-- App.vue -->\n",[36,1019,1020,1022,1024],{"class":38,"line":50},[36,1021,651],{"class":62},[36,1023,860],{"class":654},[36,1025,667],{"class":62},[36,1027,1028,1030,1032],{"class":38,"line":57},[36,1029,867],{"class":62},[36,1031,870],{"class":654},[36,1033,667],{"class":62},[36,1035,1036,1038,1041,1044],{"class":38,"line":76},[36,1037,877],{"class":62},[36,1039,1040],{"class":654},"Person",[36,1042,1043],{"class":62}," \u002F> ",[36,1045,1046],{"class":72},"\u003C!-- 使用 Person 组件 -->\n",[36,1048,1049,1051,1053],{"class":38,"line":92},[36,1050,892],{"class":62},[36,1052,870],{"class":654},[36,1054,667],{"class":62},[36,1056,1057,1059,1061],{"class":38,"line":97},[36,1058,707],{"class":62},[36,1060,860],{"class":654},[36,1062,667],{"class":62},[36,1064,1065],{"class":38,"line":113},[36,1066,54],{"emptyLinePlaceholder":53},[36,1068,1069,1071,1073],{"class":38,"line":126},[36,1070,651],{"class":62},[36,1072,655],{"class":654},[36,1074,667],{"class":62},[36,1076,1077,1079,1082,1084],{"class":38,"line":131},[36,1078,43],{"class":42},[36,1080,1081],{"class":62}," Person ",[36,1083,66],{"class":42},[36,1085,1086],{"class":46}," '.\u002Fcomponents\u002FPerson.vue'\n",[36,1088,1089],{"class":38,"line":151},[36,1090,54],{"emptyLinePlaceholder":53},[36,1092,1093,1095,1097],{"class":38,"line":156},[36,1094,672],{"class":42},[36,1096,675],{"class":42},[36,1098,925],{"class":62},[36,1100,1101],{"class":38,"line":174},[36,1102,1103],{"class":62},"  components: {\n",[36,1105,1106,1109],{"class":38,"line":184},[36,1107,1108],{"class":62},"    Person ",[36,1110,1111],{"class":72},"\u002F\u002F 注册组件时，使用组件的 `name` 属性\n",[36,1113,1114],{"class":38,"line":189},[36,1115,971],{"class":62},[36,1117,1118],{"class":38,"line":968},[36,1119,702],{"class":62},[36,1121,1122,1124,1126],{"class":38,"line":974},[36,1123,707],{"class":62},[36,1125,655],{"class":654},[36,1127,667],{"class":62},[207,1129,1131,1132,417],{"id":1130},"_4-typescript-的使用","4. ",[374,1133,1134],{},"TypeScript 的使用",[391,1136,1137],{},[394,1138,1139,1140,1142],{},"虽然这段代码没有涉及 TypeScript 的具体语法，但通过使用 ",[33,1141,731],{},"，你可以在组件内部利用 TypeScript 的强类型特性（例如类型检查、接口、类等）来增强代码的可维护性和安全性。",[367,1144,1145],{"id":1145},"vue2和vue3的api风格",[10,1147,1148,1149,1152,1153,1156],{},"​\tvue2的api是",[374,1150,1151],{},"Options","（配置）风格的， vue3的api是",[374,1154,1155],{},"composition","(组合)风格的。",[10,1158,1159],{},"​\tOptions的表现为：数据，方法和属性等都是分布在data,methods,computed这些代码块中的，因此，新增或者修改都要修改这些代码块里的内容。",[10,1161,1162],{},"​\t因为数据是写在data中的",[10,1164,1165],{},[1166,1167],"img",{"alt":1168,"src":1169},"image-20250203143230163",".\u002Fassets\u002Fimage-20250203143230163.png",[10,1171,1172],{},"方法写在methods里，计算属性等就写在computed里，监视等在watch里！",[26,1174,1176],{"className":642,"code":1175,"language":644,"meta":31,"style":31},"\u003Ctemplate>\n  \u003Cdiv class=\"person\">\n    \u003Ch2>姓名:{{ name }}\u003C\u002Fh2>\n    \u003Ch2>年龄:{{ age }}\u003C\u002Fh2>\n    \u003Cbutton @click=\"showtel\">查看联系方式\u003C\u002Fbutton>\n    \u003Cbutton @click=\"ChangeName\">修改名字\u003C\u002Fbutton>\n    \u003Cbutton @click=\"ChangeAge\">修改年龄\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\">\nexport default {\n  name: 'Person',\n  data() {\n    return { name: 'kiriyama', age: 20, tel: '123' }\n  },\n  methods: {\n    ChangeName() {\n      this.name = 'kiriyama_2'\n    },\n    ChangeAge() {\n      this.age += 1\n    },\n\n    showtel() {\n      alert(this.tel)\n    },\n  },\n}\n\u003C\u002Fscript>\n\u003Cstyle scoped>\n.person {\n  background-color: #ddd;\n  box-shadow: 0 0 10px;\n  border-radius: 10px;\n  padding: 20px;\n}\n\u003C\u002Fstyle>\n\n",[33,1177,1178,1186,1202,1215,1228,1250,1270,1290,1298,1306,1310,1324,1332,1341,1347,1372,1377,1382,1390,1404,1410,1418,1432,1437,1442,1450,1464,1469,1474,1479,1488,1501,1509,1524,1546,1561,1575,1580],{"__ignoreMap":31},[36,1179,1180,1182,1184],{"class":38,"line":39},[36,1181,651],{"class":62},[36,1183,860],{"class":654},[36,1185,667],{"class":62},[36,1187,1188,1190,1192,1195,1197,1200],{"class":38,"line":50},[36,1189,867],{"class":62},[36,1191,870],{"class":654},[36,1193,1194],{"class":144}," class",[36,1196,661],{"class":62},[36,1198,1199],{"class":46},"\"person\"",[36,1201,667],{"class":62},[36,1203,1204,1206,1208,1211,1213],{"class":38,"line":57},[36,1205,877],{"class":62},[36,1207,367],{"class":654},[36,1209,1210],{"class":62},">姓名:{{ name }}\u003C\u002F",[36,1212,367],{"class":654},[36,1214,667],{"class":62},[36,1216,1217,1219,1221,1224,1226],{"class":38,"line":76},[36,1218,877],{"class":62},[36,1220,367],{"class":654},[36,1222,1223],{"class":62},">年龄:{{ age }}\u003C\u002F",[36,1225,367],{"class":654},[36,1227,667],{"class":62},[36,1229,1230,1232,1235,1238,1240,1243,1246,1248],{"class":38,"line":92},[36,1231,877],{"class":62},[36,1233,1234],{"class":654},"button",[36,1236,1237],{"class":144}," @click",[36,1239,661],{"class":62},[36,1241,1242],{"class":46},"\"showtel\"",[36,1244,1245],{"class":62},">查看联系方式\u003C\u002F",[36,1247,1234],{"class":654},[36,1249,667],{"class":62},[36,1251,1252,1254,1256,1258,1260,1263,1266,1268],{"class":38,"line":97},[36,1253,877],{"class":62},[36,1255,1234],{"class":654},[36,1257,1237],{"class":144},[36,1259,661],{"class":62},[36,1261,1262],{"class":46},"\"ChangeName\"",[36,1264,1265],{"class":62},">修改名字\u003C\u002F",[36,1267,1234],{"class":654},[36,1269,667],{"class":62},[36,1271,1272,1274,1276,1278,1280,1283,1286,1288],{"class":38,"line":113},[36,1273,877],{"class":62},[36,1275,1234],{"class":654},[36,1277,1237],{"class":144},[36,1279,661],{"class":62},[36,1281,1282],{"class":46},"\"ChangeAge\"",[36,1284,1285],{"class":62},">修改年龄\u003C\u002F",[36,1287,1234],{"class":654},[36,1289,667],{"class":62},[36,1291,1292,1294,1296],{"class":38,"line":126},[36,1293,892],{"class":62},[36,1295,870],{"class":654},[36,1297,667],{"class":62},[36,1299,1300,1302,1304],{"class":38,"line":131},[36,1301,707],{"class":62},[36,1303,860],{"class":654},[36,1305,667],{"class":62},[36,1307,1308],{"class":38,"line":151},[36,1309,54],{"emptyLinePlaceholder":53},[36,1311,1312,1314,1316,1318,1320,1322],{"class":38,"line":156},[36,1313,651],{"class":62},[36,1315,655],{"class":654},[36,1317,658],{"class":144},[36,1319,661],{"class":62},[36,1321,664],{"class":46},[36,1323,667],{"class":62},[36,1325,1326,1328,1330],{"class":38,"line":174},[36,1327,672],{"class":42},[36,1329,675],{"class":42},[36,1331,925],{"class":62},[36,1333,1334,1336,1338],{"class":38,"line":184},[36,1335,688],{"class":62},[36,1337,932],{"class":46},[36,1339,1340],{"class":62},",\n",[36,1342,1343,1345],{"class":38,"line":189},[36,1344,942],{"class":144},[36,1346,945],{"class":62},[36,1348,1349,1351,1354,1357,1360,1363,1366,1369],{"class":38,"line":968},[36,1350,950],{"class":42},[36,1352,1353],{"class":62}," { name: ",[36,1355,1356],{"class":46},"'kiriyama'",[36,1358,1359],{"class":62},", age: ",[36,1361,1362],{"class":137},"20",[36,1364,1365],{"class":62},", tel: ",[36,1367,1368],{"class":46},"'123'",[36,1370,1371],{"class":62}," }\n",[36,1373,1374],{"class":38,"line":974},[36,1375,1376],{"class":62},"  },\n",[36,1378,1379],{"class":38,"line":979},[36,1380,1381],{"class":62},"  methods: {\n",[36,1383,1385,1388],{"class":38,"line":1384},18,[36,1386,1387],{"class":144},"    ChangeName",[36,1389,945],{"class":62},[36,1391,1393,1396,1399,1401],{"class":38,"line":1392},19,[36,1394,1395],{"class":137},"      this",[36,1397,1398],{"class":62},".name ",[36,1400,661],{"class":42},[36,1402,1403],{"class":46}," 'kiriyama_2'\n",[36,1405,1407],{"class":38,"line":1406},20,[36,1408,1409],{"class":62},"    },\n",[36,1411,1413,1416],{"class":38,"line":1412},21,[36,1414,1415],{"class":144},"    ChangeAge",[36,1417,945],{"class":62},[36,1419,1421,1423,1426,1429],{"class":38,"line":1420},22,[36,1422,1395],{"class":137},[36,1424,1425],{"class":62},".age ",[36,1427,1428],{"class":42},"+=",[36,1430,1431],{"class":137}," 1\n",[36,1433,1435],{"class":38,"line":1434},23,[36,1436,1409],{"class":62},[36,1438,1440],{"class":38,"line":1439},24,[36,1441,54],{"emptyLinePlaceholder":53},[36,1443,1445,1448],{"class":38,"line":1444},25,[36,1446,1447],{"class":144},"    showtel",[36,1449,945],{"class":62},[36,1451,1453,1456,1458,1461],{"class":38,"line":1452},26,[36,1454,1455],{"class":144},"      alert",[36,1457,165],{"class":62},[36,1459,1460],{"class":137},"this",[36,1462,1463],{"class":62},".tel)\n",[36,1465,1467],{"class":38,"line":1466},27,[36,1468,1409],{"class":62},[36,1470,1472],{"class":38,"line":1471},28,[36,1473,1376],{"class":62},[36,1475,1477],{"class":38,"line":1476},29,[36,1478,702],{"class":62},[36,1480,1482,1484,1486],{"class":38,"line":1481},30,[36,1483,707],{"class":62},[36,1485,655],{"class":654},[36,1487,667],{"class":62},[36,1489,1491,1493,1496,1499],{"class":38,"line":1490},31,[36,1492,651],{"class":62},[36,1494,1495],{"class":654},"style",[36,1497,1498],{"class":144}," scoped",[36,1500,667],{"class":62},[36,1502,1504,1507],{"class":38,"line":1503},32,[36,1505,1506],{"class":144},".person",[36,1508,925],{"class":62},[36,1510,1512,1515,1518,1521],{"class":38,"line":1511},33,[36,1513,1514],{"class":137},"  background-color",[36,1516,1517],{"class":62},": ",[36,1519,1520],{"class":137},"#ddd",[36,1522,1523],{"class":62},";\n",[36,1525,1527,1530,1532,1535,1538,1541,1544],{"class":38,"line":1526},34,[36,1528,1529],{"class":137},"  box-shadow",[36,1531,1517],{"class":62},[36,1533,1534],{"class":137},"0",[36,1536,1537],{"class":137}," 0",[36,1539,1540],{"class":137}," 10",[36,1542,1543],{"class":42},"px",[36,1545,1523],{"class":62},[36,1547,1549,1552,1554,1557,1559],{"class":38,"line":1548},35,[36,1550,1551],{"class":137},"  border-radius",[36,1553,1517],{"class":62},[36,1555,1556],{"class":137},"10",[36,1558,1543],{"class":42},[36,1560,1523],{"class":62},[36,1562,1564,1567,1569,1571,1573],{"class":38,"line":1563},36,[36,1565,1566],{"class":137},"  padding",[36,1568,1517],{"class":62},[36,1570,1362],{"class":137},[36,1572,1543],{"class":42},[36,1574,1523],{"class":62},[36,1576,1578],{"class":38,"line":1577},37,[36,1579,702],{"class":62},[36,1581,1583,1585,1587],{"class":38,"line":1582},38,[36,1584,707],{"class":62},[36,1586,1495],{"class":654},[36,1588,667],{"class":62},[10,1590,1591],{},"没加一个功能都要逮着这几个代码块猛猛改（很麻烦）",[10,1593,1594],{},"因此vue3的api改变为Composition，可以集中管理一个功能的属性，计算方法以及数据，更方便编写代码和实现",[10,1596,1597],{},"vue3中的定义功能，数据定义，计算等都在setup里进行！",[26,1599,1601],{"className":28,"code":1600,"language":30,"meta":31,"style":31},"  setup() {\n    \u002F\u002F数据\n    let name = 'kiriyama'\n    let age = 20\n    let tel = '123456789'\n    return {\n      name: name,\n      age: age,\n      tel: tel,\n    }\n  },\n",[33,1602,1603,1610,1615,1628,1640,1652,1658,1663,1668,1673,1677],{"__ignoreMap":31},[36,1604,1605,1608],{"class":38,"line":39},[36,1606,1607],{"class":144},"  setup",[36,1609,945],{"class":62},[36,1611,1612],{"class":38,"line":50},[36,1613,1614],{"class":72},"    \u002F\u002F数据\n",[36,1616,1617,1620,1623,1625],{"class":38,"line":57},[36,1618,1619],{"class":42},"    let",[36,1621,1622],{"class":62}," name ",[36,1624,661],{"class":42},[36,1626,1627],{"class":46}," 'kiriyama'\n",[36,1629,1630,1632,1635,1637],{"class":38,"line":76},[36,1631,1619],{"class":42},[36,1633,1634],{"class":62}," age ",[36,1636,661],{"class":42},[36,1638,1639],{"class":137}," 20\n",[36,1641,1642,1644,1647,1649],{"class":38,"line":92},[36,1643,1619],{"class":42},[36,1645,1646],{"class":62}," tel ",[36,1648,661],{"class":42},[36,1650,1651],{"class":46}," '123456789'\n",[36,1653,1654,1656],{"class":38,"line":97},[36,1655,950],{"class":42},[36,1657,925],{"class":62},[36,1659,1660],{"class":38,"line":113},[36,1661,1662],{"class":62},"      name: name,\n",[36,1664,1665],{"class":38,"line":126},[36,1666,1667],{"class":62},"      age: age,\n",[36,1669,1670],{"class":38,"line":131},[36,1671,1672],{"class":62},"      tel: tel,\n",[36,1674,1675],{"class":38,"line":151},[36,1676,965],{"class":62},[36,1678,1679],{"class":38,"line":156},[36,1680,1376],{"class":62},[10,1682,1683],{},"表面数据后 需要用return返回，可以直接写name,age,tel变量名，也可以写如上的键值对！",[207,1685,1687,1690,1691,1694],{"id":1686},"let-和-var-的区别",[33,1688,1689],{},"let"," 和 ",[33,1692,1693],{},"var"," 的区别",[10,1696,1697,1690,1699,1701,1702,1705],{},[33,1698,1689],{},[33,1700,1693],{}," 都是 ",[374,1703,1704],{},"JavaScript 中用来声明变量的关键字","，但有以下区别：",[391,1707,1708,1722],{},[394,1709,1710,1714,1715,798,1718,1721],{},[374,1711,1712],{},[33,1713,1689],{},"：具有",[374,1716,1717],{},"块级作用域",[374,1719,1720],{},"不会污染全局作用域","，并且不会发生变量提升。",[394,1723,1724,1714,1728,1731,1732,486],{},[374,1725,1726],{},[33,1727,1693],{},[374,1729,1730],{},"函数作用域","，可能会",[374,1733,1734],{},"出现变量提升的问题",[10,1736,1737,1738,1741,1742,1754],{},"在 Vue 的 ",[33,1739,1740],{},"setup()"," 函数里，",[374,1743,1744,1745,1747,1748,1690,1751],{},"你可以用 ",[33,1746,1689],{}," 来定义普通变量，但它并不会自动变成响应式数据。如果你想要响应式数据，就需要使用 Vue 提供的 API，比如 ",[33,1749,1750],{},"ref",[33,1752,1753],{},"reactive","。 setup里就无法使用 this这个关键词了",[26,1756,1758],{"className":28,"code":1757,"language":30,"meta":31,"style":31},"setup() {\n    \u002F\u002F数据\n    let name = 'kiriyama'\n    let age = 20\n    let tel = '123456789'\n    \u002F\u002F方法\n    function ChangeAge() {\n      age = age + 1\n    }\n    function ChangeName() {\n      name = 'kiriyama_2'\n    }\n    function showtel() {\n      alert(tel)\n    }\n    return {\n      name: name,\n      age: age,\n      tel: tel,\n      ChangeAge, \u002F\u002F交出去方法\n      ChangeName,\n      showtel,\n    }\n  },\n",[33,1759,1760,1767,1771,1781,1791,1801,1806,1816,1830,1834,1843,1852,1856,1865,1872,1876,1882,1886,1890,1894,1902,1907,1912,1916],{"__ignoreMap":31},[36,1761,1762,1765],{"class":38,"line":39},[36,1763,1764],{"class":144},"setup",[36,1766,945],{"class":62},[36,1768,1769],{"class":38,"line":50},[36,1770,1614],{"class":72},[36,1772,1773,1775,1777,1779],{"class":38,"line":57},[36,1774,1619],{"class":42},[36,1776,1622],{"class":62},[36,1778,661],{"class":42},[36,1780,1627],{"class":46},[36,1782,1783,1785,1787,1789],{"class":38,"line":76},[36,1784,1619],{"class":42},[36,1786,1634],{"class":62},[36,1788,661],{"class":42},[36,1790,1639],{"class":137},[36,1792,1793,1795,1797,1799],{"class":38,"line":92},[36,1794,1619],{"class":42},[36,1796,1646],{"class":62},[36,1798,661],{"class":42},[36,1800,1651],{"class":46},[36,1802,1803],{"class":38,"line":97},[36,1804,1805],{"class":72},"    \u002F\u002F方法\n",[36,1807,1808,1811,1814],{"class":38,"line":113},[36,1809,1810],{"class":42},"    function",[36,1812,1813],{"class":144}," ChangeAge",[36,1815,945],{"class":62},[36,1817,1818,1821,1823,1825,1828],{"class":38,"line":126},[36,1819,1820],{"class":62},"      age ",[36,1822,661],{"class":42},[36,1824,1634],{"class":62},[36,1826,1827],{"class":42},"+",[36,1829,1431],{"class":137},[36,1831,1832],{"class":38,"line":131},[36,1833,965],{"class":62},[36,1835,1836,1838,1841],{"class":38,"line":151},[36,1837,1810],{"class":42},[36,1839,1840],{"class":144}," ChangeName",[36,1842,945],{"class":62},[36,1844,1845,1848,1850],{"class":38,"line":156},[36,1846,1847],{"class":62},"      name ",[36,1849,661],{"class":42},[36,1851,1403],{"class":46},[36,1853,1854],{"class":38,"line":174},[36,1855,965],{"class":62},[36,1857,1858,1860,1863],{"class":38,"line":184},[36,1859,1810],{"class":42},[36,1861,1862],{"class":144}," showtel",[36,1864,945],{"class":62},[36,1866,1867,1869],{"class":38,"line":189},[36,1868,1455],{"class":144},[36,1870,1871],{"class":62},"(tel)\n",[36,1873,1874],{"class":38,"line":968},[36,1875,965],{"class":62},[36,1877,1878,1880],{"class":38,"line":974},[36,1879,950],{"class":42},[36,1881,925],{"class":62},[36,1883,1884],{"class":38,"line":979},[36,1885,1662],{"class":62},[36,1887,1888],{"class":38,"line":1384},[36,1889,1667],{"class":62},[36,1891,1892],{"class":38,"line":1392},[36,1893,1672],{"class":62},[36,1895,1896,1899],{"class":38,"line":1406},[36,1897,1898],{"class":62},"      ChangeAge, ",[36,1900,1901],{"class":72},"\u002F\u002F交出去方法\n",[36,1903,1904],{"class":38,"line":1412},[36,1905,1906],{"class":62},"      ChangeName,\n",[36,1908,1909],{"class":38,"line":1420},[36,1910,1911],{"class":62},"      showtel,\n",[36,1913,1914],{"class":38,"line":1434},[36,1915,965],{"class":62},[36,1917,1918],{"class":38,"line":1439},[36,1919,1376],{"class":62},[10,1921,1922,1923,1926,1927,1930,1931],{},"​\t并且你也可以",[374,1924,1925],{},"继续坚持写data对象来定义数据","，并且",[374,1928,1929],{},"data还可以读到setup对象里的定义好的数据！","（用this去访问，）",[374,1932,1933],{},"setup是最早的生命周期，他最早读到，因此setup先行。",[10,1935,1936],{},[374,1937,1938],{},"语法糖写法：",[26,1940,1942],{"className":28,"code":1941,"language":30,"meta":31,"style":31},"\u003Cscript setup lang=\"ts\">\nlet name = 'kiriyama'\nlet age = 20\nlet tel = '123456789'\n\u002F\u002F方法\nfunction ChangeAge() {\n  age = age + 1\n}\nfunction ChangeName() {\n  name = 'kiriyama_2'\n}\nfunction showtel() {\n  alert(tel)\n}\n\u003C\u002Fscript>\n",[33,1943,1944,1957,1967,1977,1987,1992,2001,2014,2018,2026,2035,2039,2047,2054,2058],{"__ignoreMap":31},[36,1945,1946,1948,1951,1953,1955],{"class":38,"line":39},[36,1947,651],{"class":42},[36,1949,1950],{"class":62},"script setup lang",[36,1952,661],{"class":42},[36,1954,664],{"class":46},[36,1956,667],{"class":42},[36,1958,1959,1961,1963,1965],{"class":38,"line":50},[36,1960,1689],{"class":42},[36,1962,1622],{"class":62},[36,1964,661],{"class":42},[36,1966,1627],{"class":46},[36,1968,1969,1971,1973,1975],{"class":38,"line":57},[36,1970,1689],{"class":42},[36,1972,1634],{"class":62},[36,1974,661],{"class":42},[36,1976,1639],{"class":137},[36,1978,1979,1981,1983,1985],{"class":38,"line":76},[36,1980,1689],{"class":42},[36,1982,1646],{"class":62},[36,1984,661],{"class":42},[36,1986,1651],{"class":46},[36,1988,1989],{"class":38,"line":92},[36,1990,1991],{"class":72},"\u002F\u002F方法\n",[36,1993,1994,1997,1999],{"class":38,"line":97},[36,1995,1996],{"class":42},"function",[36,1998,1813],{"class":144},[36,2000,945],{"class":62},[36,2002,2003,2006,2008,2010,2012],{"class":38,"line":113},[36,2004,2005],{"class":62},"  age ",[36,2007,661],{"class":42},[36,2009,1634],{"class":62},[36,2011,1827],{"class":42},[36,2013,1431],{"class":137},[36,2015,2016],{"class":38,"line":126},[36,2017,702],{"class":62},[36,2019,2020,2022,2024],{"class":38,"line":131},[36,2021,1996],{"class":42},[36,2023,1840],{"class":144},[36,2025,945],{"class":62},[36,2027,2028,2031,2033],{"class":38,"line":151},[36,2029,2030],{"class":62},"  name ",[36,2032,661],{"class":42},[36,2034,1403],{"class":46},[36,2036,2037],{"class":38,"line":156},[36,2038,702],{"class":62},[36,2040,2041,2043,2045],{"class":38,"line":174},[36,2042,1996],{"class":42},[36,2044,1862],{"class":144},[36,2046,945],{"class":62},[36,2048,2049,2052],{"class":38,"line":184},[36,2050,2051],{"class":144},"  alert",[36,2053,1871],{"class":62},[36,2055,2056],{"class":38,"line":189},[36,2057,702],{"class":62},[36,2059,2060,2062,2064],{"class":38,"line":968},[36,2061,707],{"class":42},[36,2063,655],{"class":62},[36,2065,667],{"class":42},[10,2067,2068],{},"那个script标签里的setup相当于return了 很方便，只是记得要加入Lang=\"ts\"让编译器理解到你写的是ts",[10,2070,2071],{},"因此建议保留两个script标签，一个来声明组件名称，也就是",[26,2073,2075],{"className":28,"code":2074,"language":30,"meta":31,"style":31},"export default {\n  name: 'Person',\n  beforeCreate() {\n    console.log('beforeCreate')\n  },\n}\n",[33,2076,2077,2085,2093,2100,2115,2119],{"__ignoreMap":31},[36,2078,2079,2081,2083],{"class":38,"line":39},[36,2080,672],{"class":42},[36,2082,675],{"class":42},[36,2084,925],{"class":62},[36,2086,2087,2089,2091],{"class":38,"line":50},[36,2088,688],{"class":62},[36,2090,932],{"class":46},[36,2092,1340],{"class":62},[36,2094,2095,2098],{"class":38,"line":57},[36,2096,2097],{"class":144},"  beforeCreate",[36,2099,945],{"class":62},[36,2101,2102,2105,2108,2110,2113],{"class":38,"line":76},[36,2103,2104],{"class":62},"    console.",[36,2106,2107],{"class":144},"log",[36,2109,165],{"class":62},[36,2111,2112],{"class":46},"'beforeCreate'",[36,2114,202],{"class":62},[36,2116,2117],{"class":38,"line":92},[36,2118,1376],{"class":62},[36,2120,2121],{"class":38,"line":97},[36,2122,702],{"class":62},[10,2124,2125,2126,2129,2130,2133,2134],{},"​\t另一个就是上面的放置功能的！也可以简化一些，通过安装插件：",[374,2127,2128],{},"npm i vite-plugin-vue-setup-extend -D","后再用import去引用进项目，项目配置文件也就是vite-config.ts: ",[374,2131,2132],{},"import setup_ from 'vite-plugin-vue-setup-extend'"," 之后就可以在script标签里直接写name=''来写出",[374,2135,2136],{},"组件名称",[10,2138,2139,2140,2143],{},"​\t只是这样写的话，数据改变了页面也不会改变（即使数据以及发生了变化），因为这些属性",[374,2141,2142],{},"不是响应式","的。因此我们接下来需要写vue3当中的响应式数据 **import { ref } from 'vue'**来完成响应式。",[367,2145,2146],{"id":2146},"响应式",[207,2148,1750],{"id":1750},[10,2150,2151],{},"想让哪个数据是响应式就把哪个数据去用ref包裹一遍即可。",[26,2153,2155],{"className":28,"code":2154,"language":30,"meta":31,"style":31},"\u003Cscript setup lang=\"ts\">\nlet name = ref('kiriyama')\nlet age = ref(20)\nlet tel = '123456789'\n",[33,2156,2157,2169,2186,2202],{"__ignoreMap":31},[36,2158,2159,2161,2163,2165,2167],{"class":38,"line":39},[36,2160,651],{"class":42},[36,2162,1950],{"class":62},[36,2164,661],{"class":42},[36,2166,664],{"class":46},[36,2168,667],{"class":42},[36,2170,2171,2173,2175,2177,2180,2182,2184],{"class":38,"line":50},[36,2172,1689],{"class":42},[36,2174,1622],{"class":62},[36,2176,661],{"class":42},[36,2178,2179],{"class":144}," ref",[36,2181,165],{"class":62},[36,2183,1356],{"class":46},[36,2185,202],{"class":62},[36,2187,2188,2190,2192,2194,2196,2198,2200],{"class":38,"line":57},[36,2189,1689],{"class":42},[36,2191,1634],{"class":62},[36,2193,661],{"class":42},[36,2195,2179],{"class":144},[36,2197,165],{"class":62},[36,2199,1362],{"class":137},[36,2201,202],{"class":62},[36,2203,2204,2206,2208,2210],{"class":38,"line":76},[36,2205,1689],{"class":42},[36,2207,1646],{"class":62},[36,2209,661],{"class":42},[36,2211,1651],{"class":46},[10,2213,2214],{},"这样 name 和age就变成对象的数据类型，",[10,2216,2217],{},[1166,2218],{"alt":2219,"src":2220},"image-20250203155613566",".\u002Fassets\u002Fimage-20250203155613566.png",[26,2222,2224],{"className":642,"code":2223,"language":644,"meta":31,"style":31},"  \u003Ch2>姓名:{{ name }}\u003C\u002Fh2>\n\n  \u003Ch2>年龄:{{ age }}\u003C\u002Fh2>  \n",[33,2225,2226,2238,2242],{"__ignoreMap":31},[36,2227,2228,2230,2232,2234,2236],{"class":38,"line":39},[36,2229,867],{"class":62},[36,2231,367],{"class":654},[36,2233,1210],{"class":62},[36,2235,367],{"class":654},[36,2237,667],{"class":62},[36,2239,2240],{"class":38,"line":50},[36,2241,54],{"emptyLinePlaceholder":53},[36,2243,2244,2246,2248,2250,2252],{"class":38,"line":57},[36,2245,867],{"class":62},[36,2247,367],{"class":654},[36,2249,1223],{"class":62},[36,2251,367],{"class":654},[36,2253,667],{"class":62},[10,2255,2256,2257,2260],{},"​\t这里模板里不用写.value,因为模板自动给你后面加了.value的 ，至于script里，就需要加value了，这样我们就可以得到响应式的数据类型了，并且提一嘴，模板这里其实",[2258,2259],"binding",{"value":31},"里面还可以写函数来调用(邪教   。",[207,2262,2263],{"id":2263},"reactive写法",[10,2265,2266],{},"import { reactive } from 'vue' 先在script这里引入",[26,2268,2270],{"className":28,"code":2269,"language":30,"meta":31,"style":31},"let age = reactive({ age: 20 })\n",[33,2271,2272],{"__ignoreMap":31},[36,2273,2274,2276,2278,2280,2283,2286,2288],{"class":38,"line":39},[36,2275,1689],{"class":42},[36,2277,1634],{"class":62},[36,2279,661],{"class":42},[36,2281,2282],{"class":144}," reactive",[36,2284,2285],{"class":62},"({ age: ",[36,2287,1362],{"class":137},[36,2289,2290],{"class":62}," })\n",[10,2292,2293],{},"然后定义用reactive去包裹一个键值对。",[26,2295,2297],{"className":28,"code":2296,"language":30,"meta":31,"style":31},"\u003Ctemplate>\n  \u003Cdiv class=\"person\">\n    \u003Ch2>姓名:{{ name }}\u003C\u002Fh2>\n    \u003Ch2>年龄:{{ age.age }}\u003C\u002Fh2>\n    \u003Cbutton @click=\"showtel\">查看联系方式\u003C\u002Fbutton>\n    \u003Cbutton @click=\"ChangeName\">修改名字\u003C\u002Fbutton>\n    \u003Cbutton @click=\"ChangeAge\">修改年龄\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\">\nimport { ref } from 'vue'\nimport { reactive } from 'vue'\nexport default {\n  name: 'Person',\n  beforeCreate() {\n    console.log('beforeCreate')\n  },\n}\n\u003C\u002Fscript>\n\n\u003Cscript setup lang=\"ts\">\nlet name = ref('kiriyama')\nlet age = reactive({ age: 20 })\nlet tel = '123456789'\n\u002F\u002F方法\nfunction ChangeAge() {\n  age.age = age.age + 1\n}\nfunction ChangeName() {\n  name.value = 'kiriyama_2'\n}\nfunction showtel() {\n  alert(tel)\n}\n\u003C\u002Fscript>\n\u003Cstyle scoped>\n.person {\n  background-color: #ddd;\n  box-shadow: 0 0 10px;\n  border-radius: 10px;\n  padding: 20px;\n}\n\u003C\u002Fstyle>\n\n",[33,2298,2299,2307,2320,2341,2361,2383,2404,2425,2433,2441,2445,2458,2470,2481,2489,2497,2503,2515,2519,2523,2531,2535,2547,2563,2579,2589,2593,2601,2615,2619,2627,2636,2640,2648,2654,2658,2666,2675,2680,2695,2715,2729,2737,2742],{"__ignoreMap":31},[36,2300,2301,2303,2305],{"class":38,"line":39},[36,2302,651],{"class":62},[36,2304,860],{"class":144},[36,2306,667],{"class":62},[36,2308,2309,2311,2314,2316,2318],{"class":38,"line":50},[36,2310,867],{"class":42},[36,2312,2313],{"class":62},"div class",[36,2315,661],{"class":42},[36,2317,1199],{"class":46},[36,2319,667],{"class":42},[36,2321,2322,2324,2326,2329,2332,2335,2337,2339],{"class":38,"line":57},[36,2323,877],{"class":62},[36,2325,367],{"class":144},[36,2327,2328],{"class":62},">",[36,2330,2331],{"class":144},"姓名",[36,2333,2334],{"class":62},":{{ name }}",[36,2336,707],{"class":42},[36,2338,367],{"class":62},[36,2340,667],{"class":42},[36,2342,2343,2345,2347,2349,2352,2355,2357,2359],{"class":38,"line":76},[36,2344,877],{"class":62},[36,2346,367],{"class":144},[36,2348,2328],{"class":62},[36,2350,2351],{"class":144},"年龄",[36,2353,2354],{"class":62},":{{ age.age }}",[36,2356,707],{"class":42},[36,2358,367],{"class":62},[36,2360,667],{"class":42},[36,2362,2363,2365,2368,2370,2372,2374,2377,2379,2381],{"class":38,"line":92},[36,2364,877],{"class":42},[36,2366,2367],{"class":62},"button @click",[36,2369,661],{"class":42},[36,2371,1242],{"class":46},[36,2373,2328],{"class":42},[36,2375,2376],{"class":62},"查看联系方式",[36,2378,707],{"class":42},[36,2380,1234],{"class":62},[36,2382,667],{"class":42},[36,2384,2385,2387,2389,2391,2393,2395,2398,2400,2402],{"class":38,"line":97},[36,2386,877],{"class":42},[36,2388,2367],{"class":62},[36,2390,661],{"class":42},[36,2392,1262],{"class":46},[36,2394,2328],{"class":42},[36,2396,2397],{"class":62},"修改名字",[36,2399,707],{"class":42},[36,2401,1234],{"class":62},[36,2403,667],{"class":42},[36,2405,2406,2408,2410,2412,2414,2416,2419,2421,2423],{"class":38,"line":113},[36,2407,877],{"class":42},[36,2409,2367],{"class":62},[36,2411,661],{"class":42},[36,2413,1282],{"class":46},[36,2415,2328],{"class":42},[36,2417,2418],{"class":62},"修改年龄",[36,2420,707],{"class":42},[36,2422,1234],{"class":62},[36,2424,667],{"class":42},[36,2426,2427,2429,2431],{"class":38,"line":126},[36,2428,892],{"class":42},[36,2430,870],{"class":62},[36,2432,667],{"class":42},[36,2434,2435,2437,2439],{"class":38,"line":131},[36,2436,707],{"class":42},[36,2438,860],{"class":62},[36,2440,667],{"class":42},[36,2442,2443],{"class":38,"line":151},[36,2444,54],{"emptyLinePlaceholder":53},[36,2446,2447,2449,2452,2454,2456],{"class":38,"line":156},[36,2448,651],{"class":42},[36,2450,2451],{"class":62},"script lang",[36,2453,661],{"class":42},[36,2455,664],{"class":46},[36,2457,667],{"class":42},[36,2459,2460,2462,2465,2467],{"class":38,"line":174},[36,2461,43],{"class":42},[36,2463,2464],{"class":62}," { ref } ",[36,2466,66],{"class":42},[36,2468,2469],{"class":46}," 'vue'\n",[36,2471,2472,2474,2477,2479],{"class":38,"line":184},[36,2473,43],{"class":42},[36,2475,2476],{"class":62}," { reactive } ",[36,2478,66],{"class":42},[36,2480,2469],{"class":46},[36,2482,2483,2485,2487],{"class":38,"line":189},[36,2484,672],{"class":42},[36,2486,675],{"class":42},[36,2488,925],{"class":62},[36,2490,2491,2493,2495],{"class":38,"line":968},[36,2492,688],{"class":62},[36,2494,932],{"class":46},[36,2496,1340],{"class":62},[36,2498,2499,2501],{"class":38,"line":974},[36,2500,2097],{"class":144},[36,2502,945],{"class":62},[36,2504,2505,2507,2509,2511,2513],{"class":38,"line":979},[36,2506,2104],{"class":62},[36,2508,2107],{"class":144},[36,2510,165],{"class":62},[36,2512,2112],{"class":46},[36,2514,202],{"class":62},[36,2516,2517],{"class":38,"line":1384},[36,2518,1376],{"class":62},[36,2520,2521],{"class":38,"line":1392},[36,2522,702],{"class":62},[36,2524,2525,2527,2529],{"class":38,"line":1406},[36,2526,707],{"class":42},[36,2528,655],{"class":62},[36,2530,667],{"class":42},[36,2532,2533],{"class":38,"line":1412},[36,2534,54],{"emptyLinePlaceholder":53},[36,2536,2537,2539,2541,2543,2545],{"class":38,"line":1420},[36,2538,651],{"class":42},[36,2540,1950],{"class":62},[36,2542,661],{"class":42},[36,2544,664],{"class":46},[36,2546,667],{"class":42},[36,2548,2549,2551,2553,2555,2557,2559,2561],{"class":38,"line":1434},[36,2550,1689],{"class":42},[36,2552,1622],{"class":62},[36,2554,661],{"class":42},[36,2556,2179],{"class":144},[36,2558,165],{"class":62},[36,2560,1356],{"class":46},[36,2562,202],{"class":62},[36,2564,2565,2567,2569,2571,2573,2575,2577],{"class":38,"line":1439},[36,2566,1689],{"class":42},[36,2568,1634],{"class":62},[36,2570,661],{"class":42},[36,2572,2282],{"class":144},[36,2574,2285],{"class":62},[36,2576,1362],{"class":137},[36,2578,2290],{"class":62},[36,2580,2581,2583,2585,2587],{"class":38,"line":1444},[36,2582,1689],{"class":42},[36,2584,1646],{"class":62},[36,2586,661],{"class":42},[36,2588,1651],{"class":46},[36,2590,2591],{"class":38,"line":1452},[36,2592,1991],{"class":72},[36,2594,2595,2597,2599],{"class":38,"line":1466},[36,2596,1996],{"class":42},[36,2598,1813],{"class":144},[36,2600,945],{"class":62},[36,2602,2603,2606,2608,2611,2613],{"class":38,"line":1471},[36,2604,2605],{"class":62},"  age.age ",[36,2607,661],{"class":42},[36,2609,2610],{"class":62}," age.age ",[36,2612,1827],{"class":42},[36,2614,1431],{"class":137},[36,2616,2617],{"class":38,"line":1476},[36,2618,702],{"class":62},[36,2620,2621,2623,2625],{"class":38,"line":1481},[36,2622,1996],{"class":42},[36,2624,1840],{"class":144},[36,2626,945],{"class":62},[36,2628,2629,2632,2634],{"class":38,"line":1490},[36,2630,2631],{"class":62},"  name.value ",[36,2633,661],{"class":42},[36,2635,1403],{"class":46},[36,2637,2638],{"class":38,"line":1503},[36,2639,702],{"class":62},[36,2641,2642,2644,2646],{"class":38,"line":1511},[36,2643,1996],{"class":42},[36,2645,1862],{"class":144},[36,2647,945],{"class":62},[36,2649,2650,2652],{"class":38,"line":1526},[36,2651,2051],{"class":144},[36,2653,1871],{"class":62},[36,2655,2656],{"class":38,"line":1548},[36,2657,702],{"class":62},[36,2659,2660,2662,2664],{"class":38,"line":1563},[36,2661,707],{"class":42},[36,2663,655],{"class":62},[36,2665,667],{"class":42},[36,2667,2668,2670,2673],{"class":38,"line":1577},[36,2669,651],{"class":42},[36,2671,2672],{"class":62},"style scoped",[36,2674,667],{"class":42},[36,2676,2677],{"class":38,"line":1582},[36,2678,2679],{"class":62},".person {\n",[36,2681,2683,2686,2689,2692],{"class":38,"line":2682},39,[36,2684,2685],{"class":62},"  background",[36,2687,2688],{"class":42},"-",[36,2690,2691],{"class":144},"color",[36,2693,2694],{"class":62},": #ddd;\n",[36,2696,2698,2701,2703,2706,2708,2710,2712],{"class":38,"line":2697},40,[36,2699,2700],{"class":62},"  box",[36,2702,2688],{"class":42},[36,2704,2705],{"class":144},"shadow",[36,2707,1517],{"class":62},[36,2709,1534],{"class":137},[36,2711,1537],{"class":137},[36,2713,2714],{"class":62}," 10px;\n",[36,2716,2718,2721,2723,2726],{"class":38,"line":2717},41,[36,2719,2720],{"class":62},"  border",[36,2722,2688],{"class":42},[36,2724,2725],{"class":144},"radius",[36,2727,2728],{"class":62},": 10px;\n",[36,2730,2732,2734],{"class":38,"line":2731},42,[36,2733,1566],{"class":144},[36,2735,2736],{"class":62},": 20px;\n",[36,2738,2740],{"class":38,"line":2739},43,[36,2741,702],{"class":62},[36,2743,2745,2747,2749],{"class":38,"line":2744},44,[36,2746,707],{"class":42},[36,2748,1495],{"class":62},[36,2750,667],{"class":42},[10,2752,2753],{},"​\t只是这样的话，你就要在上面的模板写入.age 等key 来显示他们的value。  这个也很方便！",[10,2755,2756],{},"并且被包裹起来的键值对会变成以下的格式：",[10,2758,2759],{},[1166,2760],{"alt":2761,"src":2762},"image-20250203160702773",".\u002Fassets\u002Fimage-20250203160702773.png",[10,2764,2765],{},"被包裹的键值对变成了一个响应式对象，展开如下：",[10,2767,2768],{},[1166,2769],{"alt":2770,"src":2771},"image-20250203160802776",".\u002Fassets\u002Fimage-20250203160802776.png",[10,2773,2774,2775],{},"另外，reactive里面也可以",[374,2776,2777,2778,2781],{},"写入数组等其他数据类型！",[374,2779,2780],{},"比如","数组里再包裹键值对来达到一次性定义的好处",[10,2783,2784,2785,2788,2789],{},"并且。reactive",[374,2786,2787],{},"只能定义对象类型的响应式数据","，实际上，",[374,2790,2791],{},"ref也可以定义对象型的响应式数据。",[10,2793,2794],{},[1166,2795],{"alt":2796,"src":2797},"image-20250203161914081",".\u002Fassets\u002Fimage-20250203161914081.png",[10,2799,2800],{},"只是访问有点麻烦。。。",[10,2802,2803],{},"​\t并且的是,reactive的数组可以用push进行压栈操作，可以很轻松完成一系列的任务。",[26,2805,2807],{"className":28,"code":2806,"language":30,"meta":31,"style":31},"const sum = ref(0)\nconst dogList = reactive(['https:\u002F\u002Fimages.dog.ceo\u002Fbreeds\u002Fpembroke\u002Fn02113023_6269.jpg'])\n\u002F\u002F 方法：改变 sum 值\nasync function change() {\n  const result = await axios.get('https:\u002F\u002Fdog.ceo\u002Fapi\u002Fbreed\u002Fpembroke\u002Fimages\u002Frandom')\n  console.log(result.data)\n  dogList.push(result.data.message)\n}\n\n",[33,2808,2809,2826,2846,2851,2864,2890,2900,2911],{"__ignoreMap":31},[36,2810,2811,2813,2816,2818,2820,2822,2824],{"class":38,"line":39},[36,2812,134],{"class":42},[36,2814,2815],{"class":137}," sum",[36,2817,141],{"class":42},[36,2819,2179],{"class":144},[36,2821,165],{"class":62},[36,2823,1534],{"class":137},[36,2825,202],{"class":62},[36,2827,2828,2830,2833,2835,2837,2840,2843],{"class":38,"line":50},[36,2829,134],{"class":42},[36,2831,2832],{"class":137}," dogList",[36,2834,141],{"class":42},[36,2836,2282],{"class":144},[36,2838,2839],{"class":62},"([",[36,2841,2842],{"class":46},"'https:\u002F\u002Fimages.dog.ceo\u002Fbreeds\u002Fpembroke\u002Fn02113023_6269.jpg'",[36,2844,2845],{"class":62},"])\n",[36,2847,2848],{"class":38,"line":57},[36,2849,2850],{"class":72},"\u002F\u002F 方法：改变 sum 值\n",[36,2852,2853,2856,2859,2862],{"class":38,"line":76},[36,2854,2855],{"class":42},"async",[36,2857,2858],{"class":42}," function",[36,2860,2861],{"class":144}," change",[36,2863,945],{"class":62},[36,2865,2866,2869,2872,2874,2877,2880,2883,2885,2888],{"class":38,"line":92},[36,2867,2868],{"class":42},"  const",[36,2870,2871],{"class":137}," result",[36,2873,141],{"class":42},[36,2875,2876],{"class":42}," await",[36,2878,2879],{"class":62}," axios.",[36,2881,2882],{"class":144},"get",[36,2884,165],{"class":62},[36,2886,2887],{"class":46},"'https:\u002F\u002Fdog.ceo\u002Fapi\u002Fbreed\u002Fpembroke\u002Fimages\u002Frandom'",[36,2889,202],{"class":62},[36,2891,2892,2895,2897],{"class":38,"line":97},[36,2893,2894],{"class":62},"  console.",[36,2896,2107],{"class":144},[36,2898,2899],{"class":62},"(result.data)\n",[36,2901,2902,2905,2908],{"class":38,"line":113},[36,2903,2904],{"class":62},"  dogList.",[36,2906,2907],{"class":144},"push",[36,2909,2910],{"class":62},"(result.data.message)\n",[36,2912,2913],{"class":38,"line":126},[36,2914,702],{"class":62},[207,2916,2918],{"id":2917},"toref和torefs","toRef和toRefs",[10,2920,2921],{},[1166,2922],{"alt":2923,"src":2924},"image-20250203162523178",".\u002Fassets\u002Fimage-20250203162523178.png",[10,2926,2927],{},"​\t这种写法 可以把name 和age 和person所代表的对象的属性提出来，来给模板这些使用，并且下面的函数也可以正常使用！只不过这个只是把person.name 和 person.age 的响应式数据给读了出来，因此页面不会更新。",[10,2929,2930,2931,2934],{},"那么这里就要讲一个",[374,2932,2933],{},"toRefs","的工具",[10,2936,2937,2938,2941,2942],{},"​\t把这个toRefs去给person包裹一下，这样name,page就是响应式的数据了，并且是",[374,2939,2940],{},"ref所定义的响应式数据","。并且这样的话你也会",[374,2943,2944],{},"把原来的person的数据也给改了！也就是双向绑定！",[10,2946,2947,2948,2951,2952,2955,2956,2959,2960,2963,2964,2967,2968,2971,2972,486],{},"​\t为什么呢，这是因为栈拷贝。",[374,2949,2950],{},"栈拷贝","（Stack Copy）是指在程序中对",[374,2953,2954],{},"数据结构（通常是变量）进行的复制操作","，这种复制操作发生在 ",[374,2957,2958],{},"栈"," 上，而栈是计算机内存中的一种存储区域。栈是以 ",[374,2961,2962],{},"后进先出（LIFO）"," 的方式管理内存的，它通常用于",[374,2965,2966],{},"存储局部变量","、",[374,2969,2970],{},"函数的参数","以及",[374,2973,2974],{},"函数调用的返回地址",[10,2976,2977,2978,2981,2982,1690,2985,2988],{},"​\t在编程中，尤其是涉及到",[374,2979,2980],{},"函数调用和参数传递","时，栈拷贝是一个非常常见的操作。这里的拷贝可以分为 ",[374,2983,2984],{},"值拷贝",[374,2986,2987],{},"地址拷贝"," 两种情况。",[386,2990,2992,417],{"id":2991},"栈拷贝与值拷贝",[374,2993,2991],{},[391,2995,2996,3016],{},[394,2997,2998,2999,3002,3003,3005,3006,3008,3009,3012,3013,486],{},"当我们将一个 ",[374,3000,3001],{},"基本数据类型","（如整数、浮点数等）从一个函数传递到另一个函数时，通常会进行 ",[374,3004,2950],{},"。这种拷贝是",[374,3007,2984],{},"，意味着",[374,3010,3011],{},"传递的是数据的副本","，而不是",[374,3014,3015],{},"数据的引用（地址）",[394,3017,3018,3019,3068,3070,3071,3074,3075],{},"例如：",[26,3020,3024],{"className":3021,"code":3022,"language":3023,"meta":31,"style":31},"language-cpp shiki shiki-themes github-light github-dark","void foo(int a) {\n    a = 10;  \u002F\u002F a的值被改变，但外部的变量不会受到影响\n}\n\nint main() {\n    int x = 5;\n    foo(x);  \u002F\u002F x 的值会被拷贝到 foo 中\n    std::cout \u003C\u003C x;  \u002F\u002F 输出 5\n}\n","cpp",[33,3025,3026,3031,3036,3040,3044,3049,3054,3059,3064],{"__ignoreMap":31},[36,3027,3028],{"class":38,"line":39},[36,3029,3030],{},"void foo(int a) {\n",[36,3032,3033],{"class":38,"line":50},[36,3034,3035],{},"    a = 10;  \u002F\u002F a的值被改变，但外部的变量不会受到影响\n",[36,3037,3038],{"class":38,"line":57},[36,3039,702],{},[36,3041,3042],{"class":38,"line":76},[36,3043,54],{"emptyLinePlaceholder":53},[36,3045,3046],{"class":38,"line":92},[36,3047,3048],{},"int main() {\n",[36,3050,3051],{"class":38,"line":97},[36,3052,3053],{},"    int x = 5;\n",[36,3055,3056],{"class":38,"line":113},[36,3057,3058],{},"    foo(x);  \u002F\u002F x 的值会被拷贝到 foo 中\n",[36,3060,3061],{"class":38,"line":126},[36,3062,3063],{},"    std::cout \u003C\u003C x;  \u002F\u002F 输出 5\n",[36,3065,3066],{"class":38,"line":131},[36,3067,702],{},[835,3069],{},"这里，",[374,3072,3073],{},"x的值被拷贝到 foo函数的栈帧中","，foo",[374,3076,3077],{},"函数的修改不会影响到 x",[386,3079,469,3081,417],{"id":3080},"_2-栈拷贝与地址拷贝引用拷贝",[374,3082,3083],{},"栈拷贝与地址拷贝（引用拷贝）",[391,3085,3086,3096],{},[394,3087,3088,3089,3092,3093,3095],{},"如果我们传递的是一个 ",[374,3090,3091],{},"引用类型","（如对象、数组、指针等），那么传递的是 ",[374,3094,2987],{},"，即拷贝的是数据在内存中的地址，而不是数据的副本。这样修改函数内部的数据会直接影响到外部的数据。",[394,3097,3018,3098,3143,3145,3146,3149,3150],{},[26,3099,3101],{"className":3021,"code":3100,"language":3023,"meta":31,"style":31},"void foo(int &a) {\n    a = 10;  \u002F\u002F a的值被修改，外部的变量会受到影响\n}\n\nint main() {\n    int x = 5;\n    foo(x);  \u002F\u002F 传递的是 x 的地址\n    std::cout \u003C\u003C x;  \u002F\u002F 输出 10\n}\n",[33,3102,3103,3108,3113,3117,3121,3125,3129,3134,3139],{"__ignoreMap":31},[36,3104,3105],{"class":38,"line":39},[36,3106,3107],{},"void foo(int &a) {\n",[36,3109,3110],{"class":38,"line":50},[36,3111,3112],{},"    a = 10;  \u002F\u002F a的值被修改，外部的变量会受到影响\n",[36,3114,3115],{"class":38,"line":57},[36,3116,702],{},[36,3118,3119],{"class":38,"line":76},[36,3120,54],{"emptyLinePlaceholder":53},[36,3122,3123],{"class":38,"line":92},[36,3124,3048],{},[36,3126,3127],{"class":38,"line":97},[36,3128,3053],{},[36,3130,3131],{"class":38,"line":113},[36,3132,3133],{},"    foo(x);  \u002F\u002F 传递的是 x 的地址\n",[36,3135,3136],{"class":38,"line":126},[36,3137,3138],{},"    std::cout \u003C\u003C x;  \u002F\u002F 输出 10\n",[36,3140,3141],{"class":38,"line":131},[36,3142,702],{},[835,3144],{},"在这种情况下，",[374,3147,3148],{},"x 的地址被传递给 foo","，因此",[374,3151,3152],{},"对 a 的修改会直接影响到 x",[386,3154,550,3156,417],{"id":3155},"_3-栈拷贝与内存管理",[374,3157,3158],{},"栈拷贝与内存管理",[391,3160,3161,3175,3181],{},[394,3162,3163,3164,3167,3168,3171,3172,486],{},"栈拷贝通常发生在",[374,3165,3166],{},"栈内存","中。当",[374,3169,3170],{},"函数调用时，局部变量和参数会被压入栈中","。当函数调用结束时，这些",[374,3173,3174],{},"栈帧（包括栈上的拷贝）会被销毁",[394,3176,3177,3178],{},"栈的分配和回收非常高效，因此大多数编程语言会优先使用栈来存储局部变量。但栈内存的大小是有限的，",[374,3179,3180],{},"过多的栈拷贝或递归可能会导致栈溢出（stack overflow）。",[394,3182,3183,3186,3187,3190,3191,3194,3195,3197,3198],{},[374,3184,3185],{},"栈帧","（stack frame）是",[374,3188,3189],{},"栈内存中用于存储函数","调用信息的一个",[374,3192,3193],{},"单位","。每当函数被调用时，操作系统会为该函数创建一个",[374,3196,3185],{},"，栈帧中存储着与该函数执行相关的所有数据。这些数据包括：\n",[3199,3200,3201,3207,3212,3218,3224],"ol",{},[394,3202,3203,3206],{},[374,3204,3205],{},"函数的局部变量","：函数内部声明的变量。",[394,3208,3209,3211],{},[374,3210,2970],{},"：传递给函数的参数。",[394,3213,3214,3217],{},[374,3215,3216],{},"返回地址","：函数执行完毕后，程序需要返回的位置。",[394,3219,3220,3223],{},[374,3221,3222],{},"保存的寄存器值","：某些寄存器在函数调用前需要保存，以便函数执行后恢复。",[394,3225,3226,3229],{},[374,3227,3228],{},"调用者的栈帧指针","：指向调用该函数的栈帧，允许函数返回时能够正确回到调用点。",[207,3231,3233],{"id":3232},"栈拷贝与堆拷贝的对比","栈拷贝与堆拷贝的对比：",[391,3235,3236,3241],{},[394,3237,3238,3240],{},[374,3239,2958],{},"：栈是自动管理的，内存的分配和释放由操作系统和编译器管理。栈上的数据在函数调用结束后自动销毁。栈拷贝通常发生在基本类型（如整数、字符等）数据的传递中。",[394,3242,3243,3246,3247,3250,3251,3262,3263,3266],{},[374,3244,3245],{},"堆","：堆是",[374,3248,3249],{},"动态分配的内存区域","，通常需要",[374,3252,3253,3254,3257,3258,3261],{},"手动管理内存（例如使用 ",[33,3255,3256],{},"malloc","\u002F",[33,3259,3260],{},"free","，或者在高级语言中使用垃圾回收机制）","。堆上的数据不会自动销毁，需要程序员",[374,3264,3265],{},"显式释放或由垃圾回收机制回收","。堆拷贝通常用于**复杂对象（如类、结构体等）**或需要在多个函数间共享的引用类型。",[10,3268,3269],{},"至于toref",[10,3271,3272],{},[1166,3273],{"alt":3274,"src":3275},"image-20250203164422922",".\u002Fassets\u002Fimage-20250203164422922.png",[10,3277,3278,3279,3282,3283,486],{},"就是单独把person里的",[374,3280,3281],{},"响应式属性提取出来","赋值并进行",[374,3284,3285],{},"双向绑定",[367,3287,3288],{"id":3288},"computed和输入",[10,3290,3291,3292,3295,3296,3299,3300,3303],{},"​\t",[33,3293,3294],{},"v-model"," 是 Vue.js 中用于实现 ",[374,3297,3298],{},"双向数据绑定"," 的指令 可以加入在",[3301,3302],"input",{},"这种输入的标签里，实现与数据的双向绑定。",[10,3305,3306],{},"​\tvue3中的计算属性方法是如下定义的，并且这么定义的计算属性是只读的！并且计算属性计算出来也是个ref，是computedref 类型的响应式数据！",[26,3308,3310],{"className":28,"code":3309,"language":30,"meta":31,"style":31},"let add_n = computed(() => {\n  return name.value + '123'\n})  \u002F\u002F方便的lamda表达式\n",[33,3311,3312,3332,3345],{"__ignoreMap":31},[36,3313,3314,3316,3319,3321,3324,3327,3330],{"class":38,"line":39},[36,3315,1689],{"class":42},[36,3317,3318],{"class":62}," add_n ",[36,3320,661],{"class":42},[36,3322,3323],{"class":144}," computed",[36,3325,3326],{"class":62},"(() ",[36,3328,3329],{"class":42},"=>",[36,3331,925],{"class":62},[36,3333,3334,3337,3340,3342],{"class":38,"line":50},[36,3335,3336],{"class":42},"  return",[36,3338,3339],{"class":62}," name.value ",[36,3341,1827],{"class":42},[36,3343,3344],{"class":46}," '123'\n",[36,3346,3347,3350],{"class":38,"line":57},[36,3348,3349],{"class":62},"})  ",[36,3351,3352],{"class":72},"\u002F\u002F方便的lamda表达式\n",[10,3354,3355],{},[1166,3356],{"alt":3357,"src":3358},"image-20250203170249995",".\u002Fassets\u002Fimage-20250203170249995.png",[10,3360,3361,3362,3365],{},"​\t注意计算出来的属性是很聪明的，如果上一次与下一次的计算的值是一样的，那么这个",[374,3363,3364],{},"lamda表达式里的函数便不会执行","（不管你是写了什么console.log啥的），它会继续使用上一次的计算结果。",[10,3367,3368],{},"​\t想要可以写可以读的就如下的写法：",[10,3370,3371],{},[1166,3372],{"alt":3373,"src":3374},"image-20250203171302097",".\u002Fassets\u002Fimage-20250203171302097.png",[10,3376,3377,3378],{},"这样写法既有get也有 set的访问器。 就十分方便了 可以修改了 可以给访问器set设置",[374,3379,3380],{},"变量传递",[10,3382,3383],{},[1166,3384],{"alt":3385,"src":3386},"image-20250203171628137",".\u002Fassets\u002Fimage-20250203171628137.png",[10,3388,3389],{},[1166,3390],{"alt":3391,"src":3392},"image-20250203171918735",".\u002Fassets\u002Fimage-20250203171918735.png",[10,3394,3395],{},"如果通过如上的函数去尝试设置计算属性的值的花便会引起访问器set的执行，会把**'li-si'**这个变量传递进去。",[10,3397,3398,3402,3403,3406,3407,798,3410,3412,3413,486],{},[374,3399,3400],{},[33,3401,2882],{}," 访问器用于",[374,3404,3405],{},"读取计算属性的值","，当你",[374,3408,3409],{},"访问该计算属性时",[33,3411,2882],{}," 会被触发，",[374,3414,3415],{},"返回属性的值",[10,3417,3418,3402,3423,3406,3426,798,3429,3431,3432,3435],{},[374,3419,3420],{},[33,3421,3422],{},"set",[374,3424,3425],{},"修改计算属性的值",[374,3427,3428],{},"给计算属性赋值时",[33,3430,3422],{}," 会被触发，并且会根据你",[374,3433,3434],{},"传入的值来更新对象的数据。"," 就和java或者csharp一样",[367,3437,3438],{"id":3438},"watch监视",[10,3440,3441],{},"vue3中的watch可以监视以下四种数据：",[3199,3443,3444,3447,3450,3453],{},[394,3445,3446],{},"ref定义的数据",[394,3448,3449],{},"reactive定义的数据",[394,3451,3452],{},"函数返回一个值(getter函数)",[394,3454,3455],{},"一个包含上述内容的数组",[10,3457,3458],{},"使用的话还是要先把{ref,watch}来引入再使用watch函数！",[26,3460,3462],{"className":28,"code":3461,"language":30,"meta":31,"style":31},"watch(sum, (newValue, old) => {\n  console.log('newValue', newValue, old)\n})\n",[33,3463,3464,3487,3501],{"__ignoreMap":31},[36,3465,3466,3469,3472,3476,3478,3481,3483,3485],{"class":38,"line":39},[36,3467,3468],{"class":144},"watch",[36,3470,3471],{"class":62},"(sum, (",[36,3473,3475],{"class":3474},"s4XuR","newValue",[36,3477,694],{"class":62},[36,3479,3480],{"class":3474},"old",[36,3482,352],{"class":62},[36,3484,3329],{"class":42},[36,3486,925],{"class":62},[36,3488,3489,3491,3493,3495,3498],{"class":38,"line":50},[36,3490,2894],{"class":62},[36,3492,2107],{"class":144},[36,3494,165],{"class":62},[36,3496,3497],{"class":46},"'newValue'",[36,3499,3500],{"class":62},", newValue, old)\n",[36,3502,3503],{"class":38,"line":57},[36,3504,3505],{"class":62},"})\n",[10,3507,3508],{},"注意看watch函数的回调是一个数组，里面有新的值和旧的值！",[10,3510,3511],{},"另外 watch函数可在前定义一个函数，作用是是否停止监视。",[26,3513,3515],{"className":28,"code":3514,"language":30,"meta":31,"style":31},"const x = watch(sum, (newValue, old) => {\n  console.log('newValue', newValue, old)\n  if (newValue > 10) {\n    x()\n  }\n})\n",[33,3516,3517,3543,3555,3570,3578,3582],{"__ignoreMap":31},[36,3518,3519,3521,3524,3526,3529,3531,3533,3535,3537,3539,3541],{"class":38,"line":39},[36,3520,134],{"class":42},[36,3522,3523],{"class":137}," x",[36,3525,141],{"class":42},[36,3527,3528],{"class":144}," watch",[36,3530,3471],{"class":62},[36,3532,3475],{"class":3474},[36,3534,694],{"class":62},[36,3536,3480],{"class":3474},[36,3538,352],{"class":62},[36,3540,3329],{"class":42},[36,3542,925],{"class":62},[36,3544,3545,3547,3549,3551,3553],{"class":38,"line":50},[36,3546,2894],{"class":62},[36,3548,2107],{"class":144},[36,3550,165],{"class":62},[36,3552,3497],{"class":46},[36,3554,3500],{"class":62},[36,3556,3557,3560,3563,3565,3567],{"class":38,"line":57},[36,3558,3559],{"class":42},"  if",[36,3561,3562],{"class":62}," (newValue ",[36,3564,2328],{"class":42},[36,3566,1540],{"class":137},[36,3568,3569],{"class":62},") {\n",[36,3571,3572,3575],{"class":38,"line":76},[36,3573,3574],{"class":144},"    x",[36,3576,3577],{"class":62},"()\n",[36,3579,3580],{"class":38,"line":92},[36,3581,971],{"class":62},[36,3583,3584],{"class":38,"line":97},[36,3585,3505],{"class":62},[10,3587,3588],{},"​\t上述所说的x函数其实就是stopwatch的函数，它可以用来判断是否停止监视！",[207,3590,3591],{"id":3591},"监视ref对象的情况",[26,3593,3595],{"className":28,"code":3594,"language":30,"meta":31,"style":31},"\u002F\u002F监视\nwatch(person, (newValue, old) => {\n  console.log('person变化了', newValue, old)\n})\n",[33,3596,3597,3602,3621,3634],{"__ignoreMap":31},[36,3598,3599],{"class":38,"line":39},[36,3600,3601],{"class":72},"\u002F\u002F监视\n",[36,3603,3604,3606,3609,3611,3613,3615,3617,3619],{"class":38,"line":50},[36,3605,3468],{"class":144},[36,3607,3608],{"class":62},"(person, (",[36,3610,3475],{"class":3474},[36,3612,694],{"class":62},[36,3614,3480],{"class":3474},[36,3616,352],{"class":62},[36,3618,3329],{"class":42},[36,3620,925],{"class":62},[36,3622,3623,3625,3627,3629,3632],{"class":38,"line":57},[36,3624,2894],{"class":62},[36,3626,2107],{"class":144},[36,3628,165],{"class":62},[36,3630,3631],{"class":46},"'person变化了'",[36,3633,3500],{"class":62},[36,3635,3636],{"class":38,"line":76},[36,3637,3505],{"class":62},[10,3639,3640],{},"​\t这种写法watch函数不会监视person对象里的值的变化，只是当所有的属性都发生变化后，他才会发生监视事件并执行后面的函数。",[10,3642,3643,3644,3647],{},"​\t页面在刷新一次后，",[374,3645,3646],{},"其实person就变了一次，从undefined","变成了person对象。",[10,3649,3650],{},[1166,3651],{"alt":3652,"src":3653},"image-20250214184253305",".\u002Fassets\u002Fimage-20250214184253305.png",[10,3655,3656],{},"因此如果你需要监视里面的属性的话，需要在后面加上{ deep: true }",[26,3658,3660],{"className":28,"code":3659,"language":30,"meta":31,"style":31},"watch(person, (newValue, old) => {\n  console.log('person变化了', newValue, old), { deep: true }\n})\n",[33,3661,3662,3680,3698],{"__ignoreMap":31},[36,3663,3664,3666,3668,3670,3672,3674,3676,3678],{"class":38,"line":39},[36,3665,3468],{"class":144},[36,3667,3608],{"class":62},[36,3669,3475],{"class":3474},[36,3671,694],{"class":62},[36,3673,3480],{"class":3474},[36,3675,352],{"class":62},[36,3677,3329],{"class":42},[36,3679,925],{"class":62},[36,3681,3682,3684,3686,3688,3690,3693,3696],{"class":38,"line":50},[36,3683,2894],{"class":62},[36,3685,2107],{"class":144},[36,3687,165],{"class":62},[36,3689,3631],{"class":46},[36,3691,3692],{"class":62},", newValue, old), { deep: ",[36,3694,3695],{"class":137},"true",[36,3697,1371],{"class":62},[36,3699,3700],{"class":38,"line":57},[36,3701,3505],{"class":62},[10,3703,3704],{},[374,3705,3706],{},"具体说明：",[391,3708,3709,3741],{},[394,3710,3711,3718,3719],{},[374,3712,3713,3714,3717],{},"没有 ",[33,3715,3716],{},"deep: true"," 时","：\n",[391,3720,3721],{},[394,3722,3723,3724,3727,3728,3730,3731,3727,3734,3736,3737,3740],{},"如果你修改了对象的某个属性（如 ",[33,3725,3726],{},"person.name","），",[33,3729,3468],{}," 会触发，但如果你修改了对象内部的嵌套属性（如 ",[33,3732,3733],{},"person.address.city",[33,3735,3468],{}," ",[374,3738,3739],{},"不会"," 被触发。",[394,3742,3743,3718,3748],{},[374,3744,3745,3746,3717],{},"设置 ",[33,3747,3716],{},[391,3749,3750],{},[394,3751,3752,3754,3755,3758,3759,3762],{},[33,3753,3468],{}," 会监听对象内部所有属性的变化，不管你修改的是 ",[374,3756,3757],{},"嵌套属性"," 还是 ",[374,3760,3761],{},"数组元素","，都能触发监听。",[207,3764,3765],{"id":3765},"监视reactive定义的数据类型",[10,3767,3768],{},[1166,3769],{"alt":3770,"src":3771},"image-20250221183256054",".\u002Fassets\u002Fimage-20250221183256054.png",[10,3773,3774],{},"​\t用这种Object.assign的方法可以做到不改变属性的地址值，只是改变值。",[10,3776,3777],{},"只要对象的属性值发现变化就会触发watch后的函数。",[10,3779,3780],{},[1166,3781],{"alt":3782,"src":3783},"image-20250221183726384",".\u002Fassets\u002Fimage-20250221183726384.png",[10,3785,3786,3787,3790],{},"​\t如果在监视reactive对象的情况下，会",[374,3788,3789],{},"默认开启深度检测","！并且无法关闭！",[207,3792,3793],{"id":3793},"监视单个属性",[10,3795,3796],{},[1166,3797],{"alt":3798,"src":3799},"image-20250221185420736",".\u002Fassets\u002Fimage-20250221185420736.png",[10,3801,3802],{},[1166,3803],{"alt":3804,"src":3805},"image-20250221185636658",".\u002Fassets\u002Fimage-20250221185636658.png",[10,3807,3808],{},"在如上的代码，里面的name 和age属于是响应式数据里的基本数据类型（字符串）",[10,3810,3291,3811],{},[374,3812,3813],{},"注意watch可以输入的是一个函数，返回一个值，一个ref，一个响应式对象，或是由以上类型的值组成的数组",[10,3815,3816],{},"直接                        watch(()=>{return person.name},(new,old)=>{})",[26,3818,3820],{"className":28,"code":3819,"language":30,"meta":31,"style":31},"watch(\n  () => {\n    return person.name\n  },\n  (newValue, oldValue) => {\n    console.log('person.name变化了', newValue, oldValue)\n  },\n)\n",[33,3821,3822,3829,3838,3845,3849,3867,3881,3885],{"__ignoreMap":31},[36,3823,3824,3826],{"class":38,"line":39},[36,3825,3468],{"class":144},[36,3827,3828],{"class":62},"(\n",[36,3830,3831,3834,3836],{"class":38,"line":50},[36,3832,3833],{"class":62},"  () ",[36,3835,3329],{"class":42},[36,3837,925],{"class":62},[36,3839,3840,3842],{"class":38,"line":57},[36,3841,950],{"class":42},[36,3843,3844],{"class":62}," person.name\n",[36,3846,3847],{"class":38,"line":76},[36,3848,1376],{"class":62},[36,3850,3851,3854,3856,3858,3861,3863,3865],{"class":38,"line":92},[36,3852,3853],{"class":62},"  (",[36,3855,3475],{"class":3474},[36,3857,694],{"class":62},[36,3859,3860],{"class":3474},"oldValue",[36,3862,352],{"class":62},[36,3864,3329],{"class":42},[36,3866,925],{"class":62},[36,3868,3869,3871,3873,3875,3878],{"class":38,"line":97},[36,3870,2104],{"class":62},[36,3872,2107],{"class":144},[36,3874,165],{"class":62},[36,3876,3877],{"class":46},"'person.name变化了'",[36,3879,3880],{"class":62},", newValue, oldValue)\n",[36,3882,3883],{"class":38,"line":113},[36,3884,1376],{"class":62},[36,3886,3887],{"class":38,"line":126},[36,3888,202],{"class":62},[10,3890,3891],{},"​\t注意这里用的是 {return person.name}这个函数  若该属性不是对象类型，则需要写成函数形式！而person.car就是对象类型，可以直接写",[207,3893,3894],{"id":3894},"监视多个数据的情况",[10,3896,3897],{},"​\t可以写成数组形式！",[10,3899,12],{},[10,3901,3902],{},[1166,3903],{"alt":3904,"src":3905},"image-20250221191033804",".\u002Fassets\u002Fimage-20250221191033804.png",[207,3907,3908],{"id":3908},"watcheffect",[10,3910,3911],{},[1166,3912],{"alt":3913,"src":3914},"image-20250221192057463",".\u002Fassets\u002Fimage-20250221192057463.png",[10,3916,3917],{},"条件判断！",[10,3919,3920],{},[1166,3921],{"alt":3922,"src":3923},"image-20250221194611293",".\u002Fassets\u002Fimage-20250221194611293.png",[10,3925,3926,3927,3929],{},"​\t在 Vue 中，使用 ",[33,3928,1750],{}," 来引用一个组件或 DOM 元素，使得你可以在父组件中通过这个引用来访问子组件的实例或元素。",[10,3931,3932],{},"在你的例子中：",[26,3934,3936],{"className":642,"code":3935,"language":644,"meta":31,"style":31},"\u003CPerson ref=\"ren\"\u002F>\n",[33,3937,3938],{"__ignoreMap":31},[36,3939,3940,3942,3944,3946,3948,3951],{"class":38,"line":39},[36,3941,651],{"class":62},[36,3943,1040],{"class":654},[36,3945,2179],{"class":144},[36,3947,661],{"class":62},[36,3949,3950],{"class":46},"\"ren\"",[36,3952,3953],{"class":62},"\u002F>\n",[367,3955,3957],{"id":3956},"含义","含义：",[391,3959,3960,3979],{},[394,3961,3962,417,3967,3969,3970,3972,3973,3975,3976,486],{},[374,3963,3964],{},[33,3965,3966],{},"ref=\"ren\"",[33,3968,1750],{}," 是 Vue 提供的一个特殊属性，用来为组件或元素创建一个引用。在这里，",[33,3971,3966],{}," 为 ",[33,3974,1040],{}," 组件创建了一个引用，名字是 ",[33,3977,3978],{},"ren",[394,3980,3981,3986,3987,3989],{},[374,3982,3983],{},[33,3984,3985],{},"\u003CPerson \u002F>","：这是一个子组件，",[33,3988,1040],{}," 是该组件的名称。",[207,3991,3993],{"id":3992},"如何访问子组件","如何访问子组件：",[10,3995,3996,3997,3999,4000,4003,4004,4006,4007,4010,4011,4013],{},"​\t通过 ",[33,3998,1750],{}," 创建的引用，可以",[374,4001,4002],{},"在父组件中访问子组件的实例","。在父组件（比如 ",[33,4005,362],{},"）中，可以通过 ",[33,4008,4009],{},"this.$refs.ren"," 来访问 ",[33,4012,1040],{}," 组件的实例。",[10,4015,4016,4017,4019],{},"假设你在 ",[33,4018,362],{}," 中有这样的代码：",[26,4021,4023],{"className":642,"code":4022,"language":644,"meta":31,"style":31},"\u003Cdiv>\n    \u003CPerson ref=\"ren\" \u002F>\n    \u003Cbutton @click=\"accessPerson\">访问Person组件\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport Person from '.\u002Fcomponents\u002FPerson.vue'\n\nexport default {\n  components: {\n    Person,\n  },\n  methods: {\n    accessPerson() {\n      \u002F\u002F 访问 Person 组件实例\n      console.log(this.$refs.ren)\n      this.$refs.ren.changename()  \u002F\u002F 调用 Person 组件中的 changename 方法\n    }\n  }\n}\n\u003C\u002Fscript>\n",[33,4024,4025,4033,4038,4043,4051,4059,4063,4071,4081,4085,4093,4097,4102,4106,4110,4117,4122,4136,4152,4156,4160,4164],{"__ignoreMap":31},[36,4026,4027,4029,4031],{"class":38,"line":39},[36,4028,651],{"class":62},[36,4030,870],{"class":654},[36,4032,667],{"class":62},[36,4034,4035],{"class":38,"line":50},[36,4036,4037],{"class":62},"    \u003CPerson ref=\"ren\" \u002F>\n",[36,4039,4040],{"class":38,"line":57},[36,4041,4042],{"class":62},"    \u003Cbutton @click=\"accessPerson\">访问Person组件\u003C\u002Fbutton>\n",[36,4044,4045,4047,4049],{"class":38,"line":76},[36,4046,892],{"class":62},[36,4048,870],{"class":654},[36,4050,667],{"class":62},[36,4052,4053,4055,4057],{"class":38,"line":92},[36,4054,707],{"class":62},[36,4056,860],{"class":654},[36,4058,667],{"class":62},[36,4060,4061],{"class":38,"line":97},[36,4062,54],{"emptyLinePlaceholder":53},[36,4064,4065,4067,4069],{"class":38,"line":113},[36,4066,651],{"class":62},[36,4068,655],{"class":654},[36,4070,667],{"class":62},[36,4072,4073,4075,4077,4079],{"class":38,"line":126},[36,4074,43],{"class":42},[36,4076,1081],{"class":62},[36,4078,66],{"class":42},[36,4080,1086],{"class":46},[36,4082,4083],{"class":38,"line":131},[36,4084,54],{"emptyLinePlaceholder":53},[36,4086,4087,4089,4091],{"class":38,"line":151},[36,4088,672],{"class":42},[36,4090,675],{"class":42},[36,4092,925],{"class":62},[36,4094,4095],{"class":38,"line":156},[36,4096,1103],{"class":62},[36,4098,4099],{"class":38,"line":174},[36,4100,4101],{"class":62},"    Person,\n",[36,4103,4104],{"class":38,"line":184},[36,4105,1376],{"class":62},[36,4107,4108],{"class":38,"line":189},[36,4109,1381],{"class":62},[36,4111,4112,4115],{"class":38,"line":968},[36,4113,4114],{"class":144},"    accessPerson",[36,4116,945],{"class":62},[36,4118,4119],{"class":38,"line":974},[36,4120,4121],{"class":72},"      \u002F\u002F 访问 Person 组件实例\n",[36,4123,4124,4127,4129,4131,4133],{"class":38,"line":979},[36,4125,4126],{"class":62},"      console.",[36,4128,2107],{"class":144},[36,4130,165],{"class":62},[36,4132,1460],{"class":137},[36,4134,4135],{"class":62},".$refs.ren)\n",[36,4137,4138,4140,4143,4146,4149],{"class":38,"line":1384},[36,4139,1395],{"class":137},[36,4141,4142],{"class":62},".$refs.ren.",[36,4144,4145],{"class":144},"changename",[36,4147,4148],{"class":62},"()  ",[36,4150,4151],{"class":72},"\u002F\u002F 调用 Person 组件中的 changename 方法\n",[36,4153,4154],{"class":38,"line":1392},[36,4155,965],{"class":62},[36,4157,4158],{"class":38,"line":1406},[36,4159,971],{"class":62},[36,4161,4162],{"class":38,"line":1412},[36,4163,702],{"class":62},[36,4165,4166,4168,4170],{"class":38,"line":1420},[36,4167,707],{"class":62},[36,4169,655],{"class":654},[36,4171,667],{"class":62},[207,4173,4174],{"id":990},"解释：",[391,4176,4177,4195],{},[394,4178,4179,417,4183,4186,4187,4189,4190,4192,4193,4013],{},[374,4180,4181],{},[33,4182,4009],{},[33,4184,4185],{},"$refs"," 是 Vue 提供的一个对象，包含所有通过 ",[33,4188,1750],{}," 注册的引用。在这里，",[33,4191,4009],{}," 会返回 ",[33,4194,1040],{},[394,4196,4197,4198,4200,4201,4203],{},"你可以通过这个引用来调用 ",[33,4199,1040],{}," 组件中的方法（比如 ",[33,4202,4145],{},"）或访问它的属性。",[207,4205,4207,4208,4210],{"id":4206},"使用-ref-的一些注意事项","使用 ",[33,4209,1750],{}," 的一些注意事项：",[3199,4212,4213,4228],{},[394,4214,4215,417,4218,4220,4221,4224,4225,4227],{},[374,4216,4217],{},"仅在组件渲染后访问",[33,4219,1750],{}," 只在组件渲染后才有效，因此在组件的生命周期中的某些时机（如 ",[33,4222,4223],{},"mounted","）使用 ",[33,4226,1750],{}," 更合适。",[394,4229,4230,417,4233,4235,4236,2967,4239,4242],{},[374,4231,4232],{},"不能用于动态组件",[33,4234,1750],{}," 无法在动态组件（通过 ",[33,4237,4238],{},"v-if",[33,4240,4241],{},"v-for"," 渲染的组件）中访问，除非组件被渲染出来。",[10,4244,4245,4246],{},"在其他的情况，比如",[1166,4247],{"alt":4248,"src":4249},"image-20250221200542672",".\u002Fassets\u002Fimage-20250221200542672.png",[10,4251,4252],{},"​\t这个情况在vue的组件下，给标签Person了一个a的属性，可以在Person组件里接受。需要使用defineProps",[26,4254,4256],{"className":28,"code":4255,"language":30,"meta":31,"style":31},"import {defineProps} from 'vue'\ndefineProps(['a']) \u002F\u002F如果是两个属性，则可以在数组后面加就是了！\n\u002F\u002F然后可以用了\n.....\n在上面加上\u003Ch2>{{a}}\u003C\u002Fh2>  就可以调用了，只不过无法打印（没有定义）\n\n",[33,4257,4258,4269,4285,4290,4298],{"__ignoreMap":31},[36,4259,4260,4262,4265,4267],{"class":38,"line":39},[36,4261,43],{"class":42},[36,4263,4264],{"class":62}," {defineProps} ",[36,4266,66],{"class":42},[36,4268,2469],{"class":46},[36,4270,4271,4274,4276,4279,4282],{"class":38,"line":50},[36,4272,4273],{"class":144},"defineProps",[36,4275,2839],{"class":62},[36,4277,4278],{"class":46},"'a'",[36,4280,4281],{"class":62},"]) ",[36,4283,4284],{"class":72},"\u002F\u002F如果是两个属性，则可以在数组后面加就是了！\n",[36,4286,4287],{"class":38,"line":57},[36,4288,4289],{"class":72},"\u002F\u002F然后可以用了\n",[36,4291,4292,4295],{"class":38,"line":76},[36,4293,4294],{"class":42},"...",[36,4296,4297],{"class":62},"..\n",[36,4299,4300,4303,4305,4307,4309,4312,4314,4316,4318],{"class":38,"line":92},[36,4301,4302],{"class":62},"在上面加上",[36,4304,651],{"class":42},[36,4306,367],{"class":62},[36,4308,2328],{"class":42},[36,4310,4311],{"class":62},"{{a}}",[36,4313,707],{"class":42},[36,4315,367],{"class":62},[36,4317,2328],{"class":42},[36,4319,4320],{"class":62},"  就可以调用了，只不过无法打印（没有定义）\n",[10,4322,4323],{},"​\t如果想要打印，就需要去定义再打印（打印出来是个对象，包含了你所有接受的东西）",[26,4325,4327],{"className":28,"code":4326,"language":30,"meta":31,"style":31},"let x = defineProps(['a'])\nconsole.log(x)\n",[33,4328,4329,4347],{"__ignoreMap":31},[36,4330,4331,4333,4336,4338,4341,4343,4345],{"class":38,"line":39},[36,4332,1689],{"class":42},[36,4334,4335],{"class":62}," x ",[36,4337,661],{"class":42},[36,4339,4340],{"class":144}," defineProps",[36,4342,2839],{"class":62},[36,4344,4278],{"class":46},[36,4346,2845],{"class":62},[36,4348,4349,4352,4354],{"class":38,"line":50},[36,4350,4351],{"class":62},"console.",[36,4353,2107],{"class":144},[36,4355,4356],{"class":62},"(x)\n",[10,4358,4359],{},"很巧的是 ，这个特性可以和下面的这个接口一起联合使用",[10,4361,4362],{},[1166,4363],{"alt":4364,"src":4365},"image-20250221201227015",".\u002Fassets\u002Fimage-20250221201227015.png",[10,4367,4368,4369,4372],{},"在list前面加上：  =》    ",[4370,4371],"list",{},"就会去读一个变量去传递。",[10,4374,4375],{},[1166,4376],{"alt":4377,"src":4378},"image-20250221203206801",".\u002Fassets\u002Fimage-20250221203206801.png",[10,4380,4381],{},"接上：的表里可以绑定有一个表达式，可以得到结果。",[207,4383,4385],{"id":4384},"限制接受","限制接受：",[10,4387,4388],{},"若list",[26,4390,4392],{"className":28,"code":4391,"language":30,"meta":31,"style":31},"import {type Persons} from 'vue'\nimport {defineProps} from '@\u002Ftypes'\ndefineProps\u003C{list:Persons}>() \u002F\u002F用这种方法去保证父组件传递的规范\n",[33,4393,4394,4411,4422],{"__ignoreMap":31},[36,4395,4396,4398,4401,4404,4407,4409],{"class":38,"line":39},[36,4397,43],{"class":42},[36,4399,4400],{"class":62}," {",[36,4402,4403],{"class":42},"type",[36,4405,4406],{"class":62}," Persons} ",[36,4408,66],{"class":42},[36,4410,2469],{"class":46},[36,4412,4413,4415,4417,4419],{"class":38,"line":50},[36,4414,43],{"class":42},[36,4416,4264],{"class":62},[36,4418,66],{"class":42},[36,4420,4421],{"class":46}," '@\u002Ftypes'\n",[36,4423,4424,4426,4429,4431,4434,4437,4440],{"class":38,"line":57},[36,4425,4273],{"class":144},[36,4427,4428],{"class":62},"\u003C{",[36,4430,4370],{"class":3474},[36,4432,4433],{"class":42},":",[36,4435,4436],{"class":144},"Persons",[36,4438,4439],{"class":62},"}>() ",[36,4441,4442],{"class":72},"\u002F\u002F用这种方法去保证父组件传递的规范\n",[10,4444,4445],{},"\u002F\u002F不传递，传递类型不规范都是会报错",[10,4447,4448],{},[1166,4449],{"alt":4450,"src":4451},"image-20250221204056242",".\u002Fassets\u002Fimage-20250221204056242.png",[10,4453,4454],{},"加上?就表示可以为空",[10,4456,4457],{},"如果要设置默认值，需要用到withDefaults的函数",[26,4459,4461],{"className":28,"code":4460,"language":30,"meta":31,"style":31},"import {defineProps,withDefaults} from 'vue'\n",[33,4462,4463],{"__ignoreMap":31},[36,4464,4465,4467,4470,4472],{"class":38,"line":39},[36,4466,43],{"class":42},[36,4468,4469],{"class":62}," {defineProps,withDefaults} ",[36,4471,66],{"class":42},[36,4473,2469],{"class":46},[10,4475,4476],{},[1166,4477],{"alt":4478,"src":4479},"image-20250221204339760",".\u002Fassets\u002Fimage-20250221204339760.png",[367,4481,4483],{"id":4482},"ts中的接口","TS中的接口",[26,4485,4487],{"className":28,"code":4486,"language":30,"meta":31,"style":31},"interface PersonInter{id:string,name:string,age=number}\n",[33,4488,4489],{"__ignoreMap":31},[36,4490,4491,4494,4497,4500,4503,4505,4508,4511,4513,4515,4517,4519,4522,4524],{"class":38,"line":39},[36,4492,4493],{"class":42},"interface",[36,4495,4496],{"class":144}," PersonInter",[36,4498,4499],{"class":62},"{",[36,4501,4502],{"class":3474},"id",[36,4504,4433],{"class":42},[36,4506,4507],{"class":137},"string",[36,4509,4510],{"class":62},",",[36,4512,748],{"class":3474},[36,4514,4433],{"class":42},[36,4516,4507],{"class":137},[36,4518,4510],{"class":62},[36,4520,4521],{"class":3474},"age",[36,4523,661],{"class":42},[36,4525,4526],{"class":62},"number}\n",[10,4528,4529],{},"​\t这便定义好了一个接口用于限制person对象的具体格式，现在得暴露出去。",[10,4531,4532,4533],{},"可以选择分别暴露。 就是在前面加上 ",[374,4534,672],{},[10,4536,4537],{},[1166,4538],{"alt":4539,"src":4540},"image-20250221200005684",".\u002Fassets\u002Fimage-20250221200005684.png",[10,4542,4543],{},[1166,4544],{"alt":4545,"src":4546},"image-20250221195614664",".\u002Fassets\u002Fimage-20250221195614664.png",[10,4548,4549],{},"​\t这里@\u002Ftypes 的意思是站在\u002Fsrc文件夹的视角去看下面的所有资源文件，因此可以快速定位到文件上去。",[10,4551,4552],{},"并且通过接口去实现一个属性必须要符合接口规范",[10,4554,4555],{},[1166,4556],{"alt":4557,"src":4558},"image-20250221195740677",".\u002Fassets\u002Fimage-20250221195740677.png",[10,4560,4561],{},[1166,4562],{"alt":4563,"src":4564},"image-20250221195851323",".\u002Fassets\u002Fimage-20250221195851323.png",[10,4566,4567,4568],{},"以及，对于列表情况，可以引用我们",[374,4569,4570],{},"之前定义的数据来定义更为复杂的自定义类型",[10,4572,4573],{},[1166,4574],{"alt":4575,"src":4576},"image-20250221200113216",".\u002Fassets\u002Fimage-20250221200113216.png",[10,4578,4579,4580],{},"​\t等到要用到响应式数据的时候，比如reactive函数，可以也在后面加上",[4581,4582,4583],"persons",{},"来防止写错的情况",[10,4585,4586],{},[1166,4587],{"alt":4588,"src":4589},"image-20250221200421238",".\u002Fassets\u002Fimage-20250221200421238.png",[367,4591,4592],{"id":4592},"数据展示",[207,4594,4595],{"id":4241},"v-for：",[10,4597,4598],{},[1166,4599],{"alt":4600,"src":4601},"image-20250221203322605",".\u002Fassets\u002Fimage-20250221203322605.png",[10,4603,4604,4605,4608],{},"后面的是数据源，前面的是",[374,4606,4607],{},"每一个数据","，相当于一个形参。",[26,4610,4612],{"className":642,"code":4611,"language":644,"meta":31,"style":31},"\u003Cimg v-for=\"(dog, index) in dogList\" :src=\"dog\" :key=\"index\" \u002F>\n",[33,4613,4614],{"__ignoreMap":31},[36,4615,4616,4618,4620,4623,4625,4628,4631,4634,4636,4638,4641,4644,4646,4648,4651,4653,4655,4658,4660,4662,4665,4667],{"class":38,"line":39},[36,4617,651],{"class":62},[36,4619,1166],{"class":654},[36,4621,4622],{"class":42}," v-for",[36,4624,661],{"class":62},[36,4626,4627],{"class":46},"\"",[36,4629,4630],{"class":62},"(dog, index) ",[36,4632,4633],{"class":42},"in",[36,4635,2832],{"class":62},[36,4637,4627],{"class":46},[36,4639,4640],{"class":62}," :",[36,4642,4643],{"class":144},"src",[36,4645,661],{"class":62},[36,4647,4627],{"class":46},[36,4649,4650],{"class":62},"dog",[36,4652,4627],{"class":46},[36,4654,4640],{"class":62},[36,4656,4657],{"class":144},"key",[36,4659,661],{"class":62},[36,4661,4627],{"class":46},[36,4663,4664],{"class":62},"index",[36,4666,4627],{"class":46},[36,4668,4669],{"class":62}," \u002F>\n",[386,4671,4174],{"id":4672},"解释-1",[3199,4674,4675,4703,4738],{},[394,4676,4677,3718,4682],{},[374,4678,4679],{},[33,4680,4681],{},"v-for=\"(dog, index) in dogList\"",[391,4683,4684,4690,4695],{},[394,4685,4686,4689],{},[33,4687,4688],{},"dogList"," 是你要循环遍历的数组。",[394,4691,4692,4694],{},[33,4693,4650],{}," 表示数组中的每一项，也就是每次循环中当前的元素。",[394,4696,4697,4699,4700,4702],{},[33,4698,4664],{}," 是当前元素在 ",[33,4701,4688],{}," 数组中的索引（从 0 开始）。",[394,4704,4705,3718,4710],{},[374,4706,4707],{},[33,4708,4709],{},":src=\"dog\"",[391,4711,4712,4719],{},[394,4713,4714,4716,4717,486],{},[33,4715,4643],{}," 属性绑定到 ",[33,4718,4650],{},[394,4720,4721,4722,4724,4725,4727,4728,4731,4732,4734,4735,4737],{},"假设 ",[33,4723,4688],{}," 是一个包含图片 URL 的数组，那么每次循环时 ",[33,4726,4650],{}," 就是一个图片的 URL，这会将 ",[33,4729,4730],{},"\u003Cimg>"," 标签的 ",[33,4733,4643],{}," 设置为当前 ",[33,4736,4650],{}," 对应的 URL，从而显示对应的图片。",[394,4739,4740,3718,4745],{},[374,4741,4742],{},[33,4743,4744],{},":key=\"index\"",[391,4746,4747],{},[394,4748,4749,4751,4752,4755,4756,4758,4759,4761,4762,4764,4765],{},[33,4750,4657],{}," 是 Vue.js 用来跟踪",[374,4753,4754],{},"每个元素的唯一标识符","。这里使用 ",[33,4757,4664],{}," 作为 ",[33,4760,4657],{},"，确保每个 ",[33,4763,4730],{}," 标签都有一个唯一的标识符，",[374,4766,4767],{},"以帮助 Vue 更高效地更新和渲染 DOM。",[10,4769,4770,4771,4773,4774,4776,4777,4779,4780,4782,4783,4786,4787,4789],{},"总结：这段代码会根据 ",[33,4772,4688],{}," 数组的内容，生成一组 ",[33,4775,4730],{}," 标签，每个标签的 ",[33,4778,4643],{}," 属性值来自于 ",[33,4781,4688],{}," 中的每一项（即图片的 URL）。并通过 ",[33,4784,4785],{},":key"," 确保每个 ",[33,4788,4730],{}," 标签在更新时能够高效地定位和管理。",[207,4791,4792],{"id":4238},"v-if:",[10,4794,4795],{},[1166,4796],{"alt":4797,"src":4798},"image-20250221214103699",".\u002Fassets\u002Fimage-20250221214103699.png",[10,4800,4801],{},"可以控制组件的是否显示。",[367,4803,4804],{"id":4804},"生命周期",[10,4806,4807],{},[1166,4808],{"alt":4809,"src":4810},"image-20250221204713407",".\u002Fassets\u002Fimage-20250221204713407.png",[10,4812,4813],{},[1166,4814],{"alt":4815,"src":4816},"image-20250221204724000",".\u002Fassets\u002Fimage-20250221204724000.png",[207,4818,4820],{"id":4819},"vue2中的生命周期写法","vue2中的生命周期写法：",[10,4822,4823],{},"把创建和挂载写在一起，然后是挂载，更新和销毁",[10,4825,4826],{},[1166,4827],{"alt":4828,"src":4829},"image-20250221213017410",".\u002Fassets\u002Fimage-20250221213017410.png",[10,4831,4832],{},"4和其实是笼统的说法，具体8个",[10,4834,4835],{},[1166,4836],{"alt":4837,"src":4838},"image-20250221213102137",".\u002Fassets\u002Fimage-20250221213102137.png",[10,4840,4841],{},[1166,4842],{"alt":4843,"src":4844},"image-20250221213310067",".\u002Fassets\u002Fimage-20250221213310067.png",[10,4846,4847],{},[1166,4848],{"alt":4849,"src":4850},"image-20250221213332905",".\u002Fassets\u002Fimage-20250221213332905.png",[10,4852,4853],{},"周期是为了帮助我们在特定的周期完成特定的操作。",[207,4855,4857],{"id":4856},"vue3的生命周期","vue3的生命周期：",[10,4859,4860],{},"​\t大部分一样，个别的函数名字不一样。",[10,4862,4863],{},[1166,4864],{"alt":4865,"src":4866},"image-20250221213733930",".\u002Fassets\u002Fimage-20250221213733930.png",[10,4868,4869],{},"setup相当于创建",[10,4871,4872],{},[1166,4873],{"alt":4874,"src":4875},"image-20250221213900941",".\u002Fassets\u002Fimage-20250221213900941.png",[10,4877,4878],{},[1166,4879],{"alt":4880,"src":4881},"image-20250221214025552",".\u002Fassets\u002Fimage-20250221214025552.png",[207,4883,4885],{"id":4884},"自定义钩子","自定义钩子:",[10,4887,4888,4889,486],{},"作用是把实现同一个功能的",[374,4890,4891],{},"数据和方法贴合在一起",[10,4893,4894],{},"所以要建立一个文件夹，命名为hooks,然后建立各个ts文件，把代码放在里面。",[10,4896,4897],{},[1166,4898],{"alt":4899,"src":4900},"image-20250221222731370",".\u002Fassets\u002Fimage-20250221222731370.png",[10,4902,4903],{},[1166,4904],{"alt":4905,"src":4906},"image-20250221222745318",".\u002Fassets\u002Fimage-20250221222745318.png",[10,4908,4909],{},"这样就可以做到很好的分离了！",[367,4911,4912],{"id":4912},"路由",[10,4914,4915],{},"​\t在\u002Fsrc文件夹下面创建\u002Frouter文件夹然后创建index.ts后就可以开始创建路由器并暴露出去。",[10,4917,4918],{},"​\t在制定路由的时候一定要制定路由器的工作模式。",[10,4920,4921],{},"先介绍单页面应用的两种路由模式：",[10,4923,4924,4925,1690,4928,4931],{},"路由的 ",[374,4926,4927],{},"历史模式",[374,4929,4930],{},"哈希模式"," 是两种常见的路由模式：",[207,4933,381,4935],{"id":4934},"_1-历史模式history-mode",[374,4936,4937],{},"历史模式（History Mode）",[386,4939,389],{"id":4940},"特点-2",[391,4942,4943,4964,4974,4987],{},[394,4944,4945,4946,4948,4949,4955,4957,4958],{},"URL 格式",[835,4947],{},"：历史模式下，URL 是干净的，没有",[26,4950,4953],{"className":4951,"code":4952,"language":423},[421],"#\n",[33,4954,4952],{"__ignoreMap":31},[835,4956],{},"符号。例如：",[26,4959,4962],{"className":4960,"code":4961,"language":423},[421],"http:\u002F\u002Fexample.com\u002Fabout\n",[33,4963,4961],{"__ignoreMap":31},[394,4965,4966,4969,4970,4973],{},[374,4967,4968],{},"浏览器行为","：历史模式使用的是浏览器的 ",[33,4971,4972],{},"history.pushState"," API 来更新浏览器的地址栏，不会触发页面的重新加载。这样可以保证应用的单页面性质。",[394,4975,4976,4977,417,4979],{},"优势",[835,4978],{},[391,4980,4981,4984],{},[394,4982,4983],{},"URL 更加简洁和符合常规的网页结构。",[394,4985,4986],{},"支持浏览器的前进、后退和刷新操作。",[394,4988,4989,4990,417,4992],{},"缺点",[835,4991],{},[391,4993,4994],{},[394,4995,4996,4997,5000],{},"需要服务器支持，因为历史模式会将 URL 中的路径作为请求发送到服务器。例如，访问 ",[33,4998,4999],{},"http:\u002F\u002Fexample.com\u002Fabout"," 时，服务器需要能够识别这个路径并正确返回页面。如果服务器没有做特别配置，直接访问这些 URL 可能会导致 404 错误。",[386,5002,5004],{"id":5003},"工作原理","工作原理：",[391,5006,5007,5014],{},[394,5008,5009,5010,5013],{},"当用户点击链接时，",[33,5011,5012],{},"pushState"," 被调用，URL 更新，但页面并不会重新加载。",[394,5015,5016],{},"浏览器的前进、后退按钮会工作得和多页面网站一样，适当地更新历史记录。",[207,5018,469,5020],{"id":5019},"_2-哈希模式hash-mode",[374,5021,5022],{},"哈希模式（Hash Mode）",[386,5024,389],{"id":5025},"特点-3",[391,5027,5028,5051,5068,5079],{},[394,5029,4945,5030,5032,5033,5038,4957,5040],{},[835,5031],{},"：哈希模式下，URL 会包含一个",[26,5034,5036],{"className":5035,"code":4952,"language":423},[421],[33,5037,4952],{"__ignoreMap":31},[835,5039],{},[26,5041,5045],{"className":5042,"code":5043,"language":5044,"meta":31,"style":31},"language-bash shiki shiki-themes github-light github-dark","http:\u002F\u002Fexample.com\u002F#\u002Fabout\n","bash",[33,5046,5047],{"__ignoreMap":31},[36,5048,5049],{"class":38,"line":39},[36,5050,5043],{"class":144},[394,5052,5053,5055,5056,5059,5060,5063,5064,5067],{},[374,5054,4968],{},"：哈希模式",[374,5057,5058],{},"依赖于浏览器的哈希值","（即 URL 中 ",[33,5061,5062],{},"#"," 后面的部分）。",[374,5065,5066],{},"哈希值的变化不会触发页面刷新","，因此它也能保持单页面应用的特性。",[394,5069,5070,5071],{},"优势：",[391,5072,5073],{},[394,5074,5075,5076],{},"不需要服务器做额外配置。因为哈希值的变化是由浏览器处理的，",[374,5077,5078],{},"服务器只会请求根路径，其他部分不会被发送到服务器，避免了 404 错误。",[394,5080,5081,5082],{},"缺点：",[391,5083,5084,5093],{},[394,5085,5086,5087,5089,5090,486],{},"URL 中有 ",[33,5088,5062],{},"，看起来",[374,5091,5092],{},"不如历史模式干净",[394,5094,5095],{},"不能利用现代浏览器提供的历史记录 API（如前进和后退按钮会处理哈希而非页面路径）。",[386,5097,5004],{"id":5098},"工作原理-1",[391,5100,5101,5104],{},[394,5102,5103],{},"当用户点击链接时，哈希值发生变化，但不会重新加载页面。",[394,5105,5106],{},"浏览器的前进和后退按钮会依据哈希值变化来控制页面的导航。",[207,5108,5110],{"id":5109},"总结","总结：",[555,5112,5113,5125],{},[558,5114,5115],{},[561,5116,5117,5119,5122],{},[564,5118,566],{},[564,5120,5121],{},"历史模式（History）",[564,5123,5124],{},"哈希模式（Hash）",[576,5126,5127,5143,5156,5173,5186],{},[561,5128,5129,5133,5138],{},[581,5130,5131],{},[374,5132,4945],{},[581,5134,5135],{},[33,5136,5137],{},"\u002Fabout",[581,5139,5140],{},[33,5141,5142],{},"#\u002Fabout",[561,5144,5145,5150,5153],{},[581,5146,5147],{},[374,5148,5149],{},"支持服务器配置",[581,5151,5152],{},"需要服务器支持（否则会出现 404）",[581,5154,5155],{},"无需服务器支持",[561,5157,5158,5162,5167],{},[581,5159,5160],{},[374,5161,4968],{},[581,5163,4207,5164,5166],{},[33,5165,4972],{},"，无刷新",[581,5168,5169,5170,5172],{},"使用哈希（",[33,5171,5062],{},"）更新 URL，页面无刷新",[561,5174,5175,5180,5183],{},[581,5176,5177],{},[374,5178,5179],{},"优点",[581,5181,5182],{},"URL 更干净、符合常规 URL 结构",[581,5184,5185],{},"无需服务器配置，避免 404 错误",[561,5187,5188,5192,5195],{},[581,5189,5190],{},[374,5191,4989],{},[581,5193,5194],{},"需要配置服务器，避免 404 错误",[581,5196,5197],{},"URL 不够干净，哈希值容易暴露实现细节",[10,5199,5200],{},[1166,5201],{"alt":5202,"src":5203},"image-20250221230559610",".\u002Fassets\u002Fimage-20250221230559610.png",[10,5205,5206],{},"写完后， 记得在main.ts中引用。",[10,5208,5209],{},"​\t这样配置完了后 当路径发生了变化，VueRouter就观察到了。然后找规则，并且真的找到了这个组件后，需要实现把它放在对应的地方。",[10,5211,5212],{},"所以要引入RouterView，这样便可以实现视图的更新了",[10,5214,5215],{},"最后我们要实现button去实现修改路径，需要使用RouterLink",[26,5217,5221],{"className":5218,"code":5219,"language":5220,"meta":31,"style":31},"language-json shiki shiki-themes github-light github-dark","import {RouterLink} from 'vue-router'\n","json",[33,5222,5223],{"__ignoreMap":31},[36,5224,5225,5228,5232],{"class":38,"line":39},[36,5226,5227],{"class":62},"import {",[36,5229,5231],{"class":5230},"s7hpK","RouterLink",[36,5233,5234],{"class":62},"} from 'vue-router'\n",[10,5236,5237],{},[1166,5238],{"alt":5239,"src":5240},"image-20250221232640630",".\u002Fassets\u002Fimage-20250221232640630.png",[10,5242,5243],{},"可以设置激活的状态：",[10,5245,5246],{},[1166,5247],{"alt":5248,"src":5249},"image-20250221232711726",".\u002Fassets\u002Fimage-20250221232711726.png",[10,5251,5252],{},"点击后就会亮",[10,5254,5255],{},[1166,5256],{"alt":5257,"src":5258},"image-20250221232732247",".\u002Fassets\u002Fimage-20250221232732247.png",[207,5260,5262],{"id":5261},"路由的两个注意点","路由的两个注意点：",[10,5264,5265],{},"​\t路由组件通常放在pages或者views文件夹里，一般的组件一般放在components文件夹里。通过点击导航，视觉效果上“消失”了的路由组件通常是被销毁掉了，需要再去挂载。",[10,5267,5268,5269],{},"一般的组件是要亲手写标签出来，比如",[5270,5271],"demo",{},[10,5273,5274],{},"而路由组件是靠规则渲染出来的",[10,5276,5277,5278,4510],{},"routes:",[36,5279,5280],{},"{path:'\u002Fdemo',component:Demo}",[207,5282,5283],{"id":5283},"to的两种写法",[10,5285,5286],{},[1166,5287],{"alt":5288,"src":5289},"image-20250221233517177",".\u002Fassets\u002Fimage-20250221233517177.png",[10,5291,5292],{},"命名路由：",[10,5294,5295],{},[1166,5296],{"alt":5297,"src":5298},"image-20250221233737884",".\u002Fassets\u002Fimage-20250221233737884.png",[10,5300,5301],{},"就可以是实现通过name去实现跳转",[10,5303,5304],{},[1166,5305],{"alt":5306,"src":5307},"image-20250221233910074",".\u002Fassets\u002Fimage-20250221233910074.png",[207,5309,5310],{"id":5310},"嵌套路由",[10,5312,5313,5314,5316],{},"需要在routes里添加children:",[36,5315],{},"来做到嵌套路由",[10,5318,5319],{},[1166,5320],{"alt":5321,"src":5322},"image-20250221235926946",".\u002Fassets\u002Fimage-20250221235926946.png",[10,5324,5325],{},[1166,5326],{"alt":5327,"src":5328},"image-20250221235935442",".\u002Fassets\u002Fimage-20250221235935442.png",[207,5330,5332],{"id":5331},"路由query参数进行传参","路由query参数进行传参：",[10,5334,5335],{},"可以通过在路由后加入？符号来进行传参",[10,5337,5338],{},[1166,5339],{"alt":5340,"src":5341},"image-20250222000308354",".\u002Fassets\u002Fimage-20250222000308354.png",[10,5343,5344],{},"&来分割传来的参数，这个写法属于get传参。",[10,5346,5347],{},[1166,5348],{"alt":5349,"src":5350},"image-20250222000453640",".\u002Fassets\u002Fimage-20250222000453640.png",[10,5352,5353],{},"这里要引入一个hooks userRoute  所有的hooks命名规则都是use+~~~来表示。",[10,5355,5356],{},[1166,5357],{"alt":5358,"src":5359},"image-20250222000658898",".\u002Fassets\u002Fimage-20250222000658898.png",[10,5361,5362],{},"在网页上可以看到这个变量的详细信息，以及还有query这种传入的参数。",[10,5364,5365],{},[1166,5366],{"alt":5367,"src":5368},"image-20250222000718192",".\u002Fassets\u002Fimage-20250222000718192.png",[10,5370,5371],{},"​\t所以在vue里可以用RounterLink 进行点击网页的方式传入参数，让vue来进行对路径的监控。显示更加完善的消息等。",[10,5373,5374],{},[1166,5375],{"alt":5376,"src":5377},"image-20250222001115372",".\u002Fassets\u002Fimage-20250222001115372.png",[10,5379,5380],{},"第二种写法：",[10,5382,5383],{},[1166,5384],{"alt":5385,"src":5386},"image-20250222001216513",".\u002Fassets\u002Fimage-20250222001216513.png",[207,5388,5389],{"id":5389},"路由params参数",[10,5391,5392],{},"特性：比query轻便一些，传递更加方便：",[10,5394,5395],{},[1166,5396],{"alt":5397,"src":5398},"image-20250222032726448",".\u002Fassets\u002Fimage-20250222032726448.png",[10,5400,5401],{},"直接\u002F去写就ok了。",[10,5403,5404],{},"\u002Fnews\u002Fdetail 是路径，  \u002F哈哈\u002F你好\u002F嘿嘿 是传递的参数。需要在路由规则去占位。",[10,5406,5407],{},[1166,5408],{"alt":5409,"src":5410},"image-20250222033729785",".\u002Fassets\u002Fimage-20250222033729785.png",[10,5412,5413,5415],{},[4502,5414],{},"\u002F:title\u002F:content就是占位用的",[10,5417,5418],{},"然后就可以在相关的路由组件去查看效果。",[10,5420,5421],{},[1166,5422],{"alt":5423,"src":5424},"image-20250222033941300",".\u002Fassets\u002Fimage-20250222033941300.png",[10,5426,5427,5428,5431],{},"如果不能是写死的情况，和query一样 用 ",[5429,5430],"to",{},"的方法。",[10,5433,5434],{},[1166,5435],{"alt":5436,"src":5437},"image-20250222034053527",".\u002Fassets\u002Fimage-20250222034053527.png",[10,5439,5440,5441,5443],{},"第二种 ",[5429,5442],{},"写法",[10,5445,5446],{},[1166,5447],{"alt":5448,"src":5449},"image-20250222034329441",".\u002Fassets\u002Fimage-20250222034329441.png",[10,5451,5452],{},"注意用的不是path 而是name去路由的。",[10,5454,5455],{},[1166,5456],{"alt":5457,"src":5458},"image-20250222034430855",".\u002Fassets\u002Fimage-20250222034430855.png",[10,5460,5461],{},"简化写法：",[10,5463,5464],{},[1166,5465],{"alt":5466,"src":5467},"image-20250222034826471",".\u002Fassets\u002Fimage-20250222034826471.png",[10,5469,5470],{},"使用toRefs",[26,5472,5474],{"className":28,"code":5473,"language":30,"meta":31,"style":31},"import {toRefs} from 'vue'\nlet {params} = toRefs(route) \u002F\u002F把params给提取出来。\n",[33,5475,5476,5487],{"__ignoreMap":31},[36,5477,5478,5480,5483,5485],{"class":38,"line":39},[36,5479,43],{"class":42},[36,5481,5482],{"class":62}," {toRefs} ",[36,5484,66],{"class":42},[36,5486,2469],{"class":46},[36,5488,5489,5491,5494,5496,5499,5502],{"class":38,"line":50},[36,5490,1689],{"class":42},[36,5492,5493],{"class":62}," {params} ",[36,5495,661],{"class":42},[36,5497,5498],{"class":144}," toRefs",[36,5500,5501],{"class":62},"(route) ",[36,5503,5504],{"class":72},"\u002F\u002F把params给提取出来。\n",[10,5506,5507],{},"其实还可以更加省略，从路由规则下手。",[10,5509,5510],{},[1166,5511],{"alt":5512,"src":5513},"image-20250222035039174",".\u002Fassets\u002Fimage-20250222035039174.png",[207,5515,5516],{"id":5516},"路由的props配置",[10,5518,5519],{},"​\t从上图可以看到在index.ts中定义的路由规则有一个props:true的属性。",[10,5521,5522],{},"它的作用是：",[10,5524,5525],{},[1166,5526],{"alt":5527,"src":5528},"image-20250222035224333",".\u002Fassets\u002Fimage-20250222035224333.png",[10,5530,5531],{},"将path:中接受的参数 转化为params 给组件，让组件可以接下来的操作。",[10,5533,5534],{},[1166,5535],{"alt":5536,"src":5537},"image-20250222035325711",".\u002Fassets\u002Fimage-20250222035325711.png",[207,5539,5540],{"id":5540},"路由的replace属性",[10,5542,5543],{},"路由在进行跳转的时候会利用浏览器的历史记录，路由起操作历史记录有",[10,5545,5546],{},"push         和         replace两个操作",[10,5548,5549],{},"push相当于压栈，可以前进和后退的操作",[10,5551,5552],{},"replace是单个历史记录的替换，因此不能前进和后退",[10,5554,5555],{},[1166,5556],{"alt":5557,"src":5558},"image-20250222035828311",".\u002Fassets\u002Fimage-20250222035828311.png",[10,5560,5561],{},"在RouterLink的地方加上replace就可以开启replace模式。",[207,5563,5564],{"id":5564},"编程式导航",[10,5566,5567],{},"作用是在ts区域编写脚本让SPA实现编程式路由导航的跳转。",[10,5569,5570],{},"可以脱离RoterLink来实现路由跳转。",[10,5572,5573],{},[1166,5574],{"alt":5575,"src":5576},"image-20250222040524255",".\u002Fassets\u002Fimage-20250222040524255.png",[10,5578,5579],{},"用push进行压栈的跳转。",[207,5581,5582],{"id":5582},"路由重定向",[10,5584,5585],{},"需要在规则上编写。",[10,5587,5588],{},"在一级规则写完后，即可在后面添加重定向：",[10,5590,5591],{},[1166,5592],{"alt":5593,"src":5594},"image-20250222144803630",".\u002Fassets\u002Fimage-20250222144803630.png",[10,5596,5597],{},"会发现: \u002F会被重定向到\u002Fhome",[367,5599,5600],{"id":5600},"vue3引入markdown编辑器",[26,5602,5604],{"className":642,"code":5603,"language":644,"meta":31,"style":31},"\u003Ctemplate>\n  \u003CMdPreview :editorId=\"id\" :modelValue=\"text\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport { MdPreview } from 'md-editor-v3';\nimport 'md-editor-v3\u002Flib\u002Fpreview.css';\n\nconst id = 'preview-only';\nconst text = ref(`\n# 😊欢迎来到首页\n---\n这是一个示例标题。\n\n## 示例内容\n\n- 列表项 1\n- 列表项 2\n- 列表项 3\n\n### 代码块\n\n\\`\\`\\`javascript\n\u002F\u002F modules\u002Fmy-vuetify-module\nexport default defineNuxtModule({\n  setup(_options, nuxt) {\n    \u002F\u002F If you're using Nuxt \u003C 3.8.1, you should add a ts-expect-error here\n    nuxt.hook('vuetify:registerModule', register => register({\n      moduleOptions: {\n        \u002F* module specific options *\u002F\n      },\n      vuetifyOptions: {\n        \u002F* vuetify options *\u002F\n      },\n    }))\n  },\n})\n\\`\\`\\`\n## 结尾\n希望大家能够享受这场游戏！\n`)\n\nlet scrollElement: HTMLElement | null = null;\n\nonMounted(() => {\n  \u002F\u002F 确保在客户端渲染时才访问 document\n  scrollElement = document.documentElement;\n});\n\u003C\u002Fscript>\n\n",[33,5605,5606,5614,5649,5657,5661,5678,5691,5705,5714,5718,5732,5748,5753,5758,5763,5767,5772,5776,5781,5786,5791,5795,5800,5804,5812,5817,5822,5827,5832,5837,5842,5847,5852,5857,5862,5866,5871,5875,5879,5884,5889,5894,5901,5905,5929,5934,5946,5952,5963,5969],{"__ignoreMap":31},[36,5607,5608,5610,5612],{"class":38,"line":39},[36,5609,651],{"class":62},[36,5611,860],{"class":654},[36,5613,667],{"class":62},[36,5615,5616,5618,5621,5623,5626,5628,5630,5632,5634,5636,5639,5641,5643,5645,5647],{"class":38,"line":50},[36,5617,867],{"class":62},[36,5619,5620],{"class":654},"MdPreview",[36,5622,4640],{"class":62},[36,5624,5625],{"class":144},"editorId",[36,5627,661],{"class":62},[36,5629,4627],{"class":46},[36,5631,4502],{"class":62},[36,5633,4627],{"class":46},[36,5635,4640],{"class":62},[36,5637,5638],{"class":144},"modelValue",[36,5640,661],{"class":62},[36,5642,4627],{"class":46},[36,5644,423],{"class":62},[36,5646,4627],{"class":46},[36,5648,4669],{"class":62},[36,5650,5651,5653,5655],{"class":38,"line":57},[36,5652,707],{"class":62},[36,5654,860],{"class":654},[36,5656,667],{"class":62},[36,5658,5659],{"class":38,"line":76},[36,5660,54],{"emptyLinePlaceholder":53},[36,5662,5663,5665,5667,5670,5672,5674,5676],{"class":38,"line":92},[36,5664,651],{"class":62},[36,5666,655],{"class":654},[36,5668,5669],{"class":144}," setup",[36,5671,658],{"class":144},[36,5673,661],{"class":62},[36,5675,664],{"class":46},[36,5677,667],{"class":62},[36,5679,5680,5682,5685,5687,5689],{"class":38,"line":97},[36,5681,43],{"class":42},[36,5683,5684],{"class":62}," { ref, onMounted } ",[36,5686,66],{"class":42},[36,5688,69],{"class":46},[36,5690,1523],{"class":62},[36,5692,5693,5695,5698,5700,5703],{"class":38,"line":113},[36,5694,43],{"class":42},[36,5696,5697],{"class":62}," { MdPreview } ",[36,5699,66],{"class":42},[36,5701,5702],{"class":46}," 'md-editor-v3'",[36,5704,1523],{"class":62},[36,5706,5707,5709,5712],{"class":38,"line":126},[36,5708,43],{"class":42},[36,5710,5711],{"class":46}," 'md-editor-v3\u002Flib\u002Fpreview.css'",[36,5713,1523],{"class":62},[36,5715,5716],{"class":38,"line":131},[36,5717,54],{"emptyLinePlaceholder":53},[36,5719,5720,5722,5725,5727,5730],{"class":38,"line":151},[36,5721,134],{"class":42},[36,5723,5724],{"class":137}," id",[36,5726,141],{"class":42},[36,5728,5729],{"class":46}," 'preview-only'",[36,5731,1523],{"class":62},[36,5733,5734,5736,5739,5741,5743,5745],{"class":38,"line":156},[36,5735,134],{"class":42},[36,5737,5738],{"class":137}," text",[36,5740,141],{"class":42},[36,5742,2179],{"class":144},[36,5744,165],{"class":62},[36,5746,5747],{"class":46},"`\n",[36,5749,5750],{"class":38,"line":174},[36,5751,5752],{"class":46},"# 😊欢迎来到首页\n",[36,5754,5755],{"class":38,"line":184},[36,5756,5757],{"class":46},"---\n",[36,5759,5760],{"class":38,"line":189},[36,5761,5762],{"class":46},"这是一个示例标题。\n",[36,5764,5765],{"class":38,"line":968},[36,5766,54],{"emptyLinePlaceholder":53},[36,5768,5769],{"class":38,"line":974},[36,5770,5771],{"class":46},"## 示例内容\n",[36,5773,5774],{"class":38,"line":979},[36,5775,54],{"emptyLinePlaceholder":53},[36,5777,5778],{"class":38,"line":1384},[36,5779,5780],{"class":46},"- 列表项 1\n",[36,5782,5783],{"class":38,"line":1392},[36,5784,5785],{"class":46},"- 列表项 2\n",[36,5787,5788],{"class":38,"line":1406},[36,5789,5790],{"class":46},"- 列表项 3\n",[36,5792,5793],{"class":38,"line":1412},[36,5794,54],{"emptyLinePlaceholder":53},[36,5796,5797],{"class":38,"line":1420},[36,5798,5799],{"class":46},"### 代码块\n",[36,5801,5802],{"class":38,"line":1434},[36,5803,54],{"emptyLinePlaceholder":53},[36,5805,5806,5809],{"class":38,"line":1439},[36,5807,5808],{"class":137},"\\`\\`\\`",[36,5810,5811],{"class":46},"javascript\n",[36,5813,5814],{"class":38,"line":1444},[36,5815,5816],{"class":46},"\u002F\u002F modules\u002Fmy-vuetify-module\n",[36,5818,5819],{"class":38,"line":1452},[36,5820,5821],{"class":46},"export default defineNuxtModule({\n",[36,5823,5824],{"class":38,"line":1466},[36,5825,5826],{"class":46},"  setup(_options, nuxt) {\n",[36,5828,5829],{"class":38,"line":1471},[36,5830,5831],{"class":46},"    \u002F\u002F If you're using Nuxt \u003C 3.8.1, you should add a ts-expect-error here\n",[36,5833,5834],{"class":38,"line":1476},[36,5835,5836],{"class":46},"    nuxt.hook('vuetify:registerModule', register => register({\n",[36,5838,5839],{"class":38,"line":1481},[36,5840,5841],{"class":46},"      moduleOptions: {\n",[36,5843,5844],{"class":38,"line":1490},[36,5845,5846],{"class":46},"        \u002F* module specific options *\u002F\n",[36,5848,5849],{"class":38,"line":1503},[36,5850,5851],{"class":46},"      },\n",[36,5853,5854],{"class":38,"line":1511},[36,5855,5856],{"class":46},"      vuetifyOptions: {\n",[36,5858,5859],{"class":38,"line":1526},[36,5860,5861],{"class":46},"        \u002F* vuetify options *\u002F\n",[36,5863,5864],{"class":38,"line":1548},[36,5865,5851],{"class":46},[36,5867,5868],{"class":38,"line":1563},[36,5869,5870],{"class":46},"    }))\n",[36,5872,5873],{"class":38,"line":1577},[36,5874,1376],{"class":46},[36,5876,5877],{"class":38,"line":1582},[36,5878,3505],{"class":46},[36,5880,5881],{"class":38,"line":2682},[36,5882,5883],{"class":137},"\\`\\`\\`\n",[36,5885,5886],{"class":38,"line":2697},[36,5887,5888],{"class":46},"## 结尾\n",[36,5890,5891],{"class":38,"line":2717},[36,5892,5893],{"class":46},"希望大家能够享受这场游戏！\n",[36,5895,5896,5899],{"class":38,"line":2731},[36,5897,5898],{"class":46},"`",[36,5900,202],{"class":62},[36,5902,5903],{"class":38,"line":2739},[36,5904,54],{"emptyLinePlaceholder":53},[36,5906,5907,5909,5912,5914,5917,5920,5923,5925,5927],{"class":38,"line":2744},[36,5908,1689],{"class":42},[36,5910,5911],{"class":62}," scrollElement",[36,5913,4433],{"class":42},[36,5915,5916],{"class":144}," HTMLElement",[36,5918,5919],{"class":42}," |",[36,5921,5922],{"class":137}," null",[36,5924,141],{"class":42},[36,5926,5922],{"class":137},[36,5928,1523],{"class":62},[36,5930,5932],{"class":38,"line":5931},45,[36,5933,54],{"emptyLinePlaceholder":53},[36,5935,5937,5940,5942,5944],{"class":38,"line":5936},46,[36,5938,5939],{"class":144},"onMounted",[36,5941,3326],{"class":62},[36,5943,3329],{"class":42},[36,5945,925],{"class":62},[36,5947,5949],{"class":38,"line":5948},47,[36,5950,5951],{"class":72},"  \u002F\u002F 确保在客户端渲染时才访问 document\n",[36,5953,5955,5958,5960],{"class":38,"line":5954},48,[36,5956,5957],{"class":62},"  scrollElement ",[36,5959,661],{"class":42},[36,5961,5962],{"class":62}," document.documentElement;\n",[36,5964,5966],{"class":38,"line":5965},49,[36,5967,5968],{"class":62},"});\n",[36,5970,5972,5974,5976],{"class":38,"line":5971},50,[36,5973,707],{"class":62},[36,5975,655],{"class":654},[36,5977,667],{"class":62},[10,5979,5980,5981,5984,5985,5988],{},"这段代码的实际含义是，确保在 Vue 组件的客户端渲染阶段，正确访问浏览器中的 ",[33,5982,5983],{},"document.documentElement"," 元素（即 ",[33,5986,5987],{},"\u003Chtml>"," 元素），而不会在服务器端渲染时出错。以下是更详细的解释：",[207,5990,5992],{"id":5991},"代码分解与含义","代码分解与含义：",[3199,5994,5995,6040,6067],{},[394,5996,5997,6002],{},[374,5998,5999],{},[33,6000,6001],{},"let scrollElement: HTMLElement | null = null;",[391,6003,6004,6018,6024],{},[394,6005,6006,6007,6010,6011,6014,6015,486],{},"这行代码声明了一个变量 ",[33,6008,6009],{},"scrollElement","，类型为 ",[33,6012,6013],{},"HTMLElement"," 或 ",[33,6016,6017],{},"null",[394,6019,6020,6021,6023],{},"初始值是 ",[33,6022,6017],{},"，表示这个变量一开始没有指向任何 DOM 元素。",[394,6025,6026,6028,6029,2967,6031,2967,6033,2967,6036,6039],{},[33,6027,6013],{}," 是 HTML 文档中元素的基类，它代表所有的 HTML 元素（如 ",[33,6030,870],{},[33,6032,10],{},[33,6034,6035],{},"html",[33,6037,6038],{},"body"," 等）。",[394,6041,6042,6047],{},[374,6043,6044],{},[33,6045,6046],{},"onMounted(() => { ... })",[391,6048,6049,6057],{},[394,6050,6051,6053,6054,6056],{},[33,6052,5939],{}," 是 Vue 3 的生命周期钩子，表示在组件挂载到页面后调用这个函数。具体来说，",[33,6055,5939],{}," 会在组件的 DOM 元素已经被插入到页面中时被触发。",[394,6058,6059,6060,6062,6063,6066],{},"在 Vue 的服务器端渲染（SSR）中，",[33,6061,5939],{}," 只有在客户端渲染时才会执行。因此，这个钩子确保访问 ",[33,6064,6065],{},"document"," 只会发生在客户端，而不会在服务器端引发错误。",[394,6068,6069,6074],{},[374,6070,6071],{},[33,6072,6073],{},"scrollElement = document.documentElement;",[391,6075,6076,6088],{},[394,6077,6078,6079,6081,6082,6084,6085,6087],{},"这行代码将 ",[33,6080,6009],{}," 设置为 ",[33,6083,5983],{},"，即整个 HTML 文档的根元素，通常就是 ",[33,6086,5987],{}," 标签。",[394,6089,6090,6092,6093,6095],{},[33,6091,5983],{}," 代表的是整个 HTML 文档的根节点，通常在浏览器中是 ",[33,6094,5987],{}," 元素。通过它，你可以访问页面的根元素，以便对页面的布局、样式等进行操作。",[207,6097,6099],{"id":6098},"代码的实际含义","代码的实际含义：",[391,6101,6102,6126],{},[394,6103,6104,6110,6111,6113,6114,6116,6117,6119,6120,6122,6123,486],{},[374,6105,6106,6107,6109],{},"客户端渲染时获取 ",[33,6108,6035],{}," 元素","：在 ",[33,6112,5939],{}," 钩子内，确保只有在组件挂载到 DOM 后才去访问浏览器的 ",[33,6115,5983],{},"。这样，",[33,6118,6009],{}," 会指向 ",[33,6121,5987],{}," 元素，并且",[374,6124,6125],{},"你可以在后续的逻辑中操作该元素",[394,6127,6128,6131,6132,6134,6135,6137,6138,6140,6141,6143],{},[374,6129,6130],{},"防止 SSR 错误","：如果在 Vue 应用中启用了服务器端渲染（SSR），在服务器渲染阶段 ",[33,6133,6065],{}," 并不存在，因此不能访问 ",[33,6136,5983],{},"。通过将代码放在 ",[33,6139,5939],{}," 钩子内，确保它只会在客户端执行，从而避免在服务器端渲染时访问 ",[33,6142,6065],{}," 导致的错误。",[367,6145,6147],{"id":6146},"packagejson讲解","Package.json讲解",[207,6149,6151],{"id":6150},"scripts","scripts:",[10,6153,6154,6156],{},[33,6155,6150],{}," 字段定义了一组可以通过命令行运行的脚本命令。这些脚本通常用于开发、构建、测试和部署等任务，简化了常用命令的执行。",[207,6158,6160],{"id":6159},"dependencies和devdependencies","dependencies和devDependencies",[10,6162,6163],{},[1166,6164],{"alt":6165,"src":6166},"image-20250313153916978",".\u002Fassets\u002Fimage-20250313153916978.png",[386,6168,6170],{"id":6169},"为什么要区分这两者",[374,6171,6172],{},"为什么要区分这两者？",[391,6174,6175,6185],{},[394,6176,6177,6180,6181,6184],{},[374,6178,6179],{},"优化生产环境",":\n在生产环境中，",[33,6182,6183],{},"devDependencies"," 不会被安装，从而减少了依赖的体积，提升了部署效率。",[394,6186,6187,6190],{},[374,6188,6189],{},"明确依赖的用途",":\n将开发工具和运行时依赖分开，可以让团队更清楚每个依赖的作用，便于维护。",[6192,6193],"hr",{},[386,6195,6197],{"id":6196},"_5-注意事项",[374,6198,6199],{},"5. 注意事项",[391,6201,6202,6219],{},[394,6203,6204,6207,6208,6014,6211,6214,6215,6218],{},[374,6205,6206],{},"误用问题",":\n如果将开发工具（如 ",[33,6209,6210],{},"sass",[33,6212,6213],{},"eslint","）放入 ",[33,6216,6217],{},"dependencies","，会导致它们在生产环境中也被安装，增加了不必要的体积。",[394,6220,6221,6224],{},[374,6222,6223],{},"混合使用问题",":\n某些依赖（如 UI 库）可能既在开发阶段使用，也在运行时使用，需要根据实际情况决定放在哪个字段中。",[367,6226,6228],{"id":6227},"动画制作框架","动画制作框架：",[207,6230,6232],{"id":6231},"gsap","GSAP、",[207,6234,6236],{"id":6235},"lottie","Lottie、",[207,6238,6240],{"id":6239},"matter","Matter、",[367,6242,6244],{"id":6243},"vue-compliervue编译器讲解","Vue-complier（VUE编译器讲解）:",[207,6246,6248],{"id":6247},"为什么需要-vue-compiler-将-vue-文件转换为-render-函数",[374,6249,6250,6251,6254],{},"为什么需要 Vue Compiler 将 ",[33,6252,6253],{},".vue"," 文件转换为 render 函数？",[10,6256,6257,6258,6260,6261,2967,6263,1690,6265,6267,6268,6270,6271,6273,6274,6277,6278,6281],{},"​\t在 Vue.js 中，",[33,6259,6253],{}," 文件（单文件组件，SFC）是开发者用来编写组件的主要方式，它包含了 ",[33,6262,860],{},[33,6264,655],{},[33,6266,1495],{}," 三个部分。为了让浏览器能够运行这些组件，Vue 需要将 ",[33,6269,6253],{}," 文件中的 ",[33,6272,860],{}," 转换为 JavaScript 的 ",[374,6275,6276],{},"render 函数","。这个过程由 ",[374,6279,6280],{},"Vue Template Compiler"," 完成。",[10,6283,6284,6285,6288,6289,6270,6291,3736,6293,6296,6297,6300],{},"​\tVue Compiler（如 ",[33,6286,6287],{},"vue-template-compiler","）的主要作用是将 ",[33,6290,6253],{},[33,6292,860],{},[374,6294,6295],{},"转换为 render 函数","，并将其",[374,6298,6299],{},"注入到组件的 JavaScript 模块","中。",[391,6302,6303],{},[394,6304,6305,3718,6308],{},[374,6306,6307],{},"编译过程",[3199,6309,6310,6319,6325],{},[394,6311,6312,6313,6315,6316,6318],{},"解析 ",[33,6314,6253],{}," 文件，提取 ",[33,6317,860],{}," 部分。",[394,6320,6321,6322,6324],{},"将 ",[33,6323,860],{}," 转换为 render 函数。",[394,6326,6327,6328,1690,6330,6332,6333,486],{},"将 render 函数与组件的其他部分（如 ",[33,6329,655],{},[33,6331,1495],{},"）整合，",[374,6334,6335],{},"生成最终的 JavaScript 模块",[207,6337,6339],{"id":6338},"什么是-render-函数",[374,6340,6341],{},"什么是 render 函数？",[10,6343,6344,6345,6348,6349,6352,6353,6356,6357,486],{},"​\tRender 函数是 Vue.js 中的一种",[374,6346,6347],{},"底层机制","，用于",[374,6350,6351],{},"描述组件的虚拟 DOM（Virtual DOM）","。它是一个",[374,6354,6355],{},"纯 JavaScript 函数，返回一个虚拟 DOM 节点树（VNode）","。与模板语法相比，",[374,6358,6359],{},"render 函数提供了更高的灵活性和更接近底层的控制",[10,6361,6362],{},"例如，一个简单的模板：",[26,6364,6366],{"className":642,"code":6365,"language":644,"meta":31,"style":31},"\u003Ctemplate>\n  \u003Cdiv>Hello, {{ name }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[33,6367,6368,6376,6389],{"__ignoreMap":31},[36,6369,6370,6372,6374],{"class":38,"line":39},[36,6371,651],{"class":62},[36,6373,860],{"class":654},[36,6375,667],{"class":62},[36,6377,6378,6380,6382,6385,6387],{"class":38,"line":50},[36,6379,867],{"class":62},[36,6381,870],{"class":654},[36,6383,6384],{"class":62},">Hello, {{ name }}\u003C\u002F",[36,6386,870],{"class":654},[36,6388,667],{"class":62},[36,6390,6391,6393,6395],{"class":38,"line":57},[36,6392,707],{"class":62},[36,6394,860],{"class":654},[36,6396,667],{"class":62},[10,6398,6399],{},"会被 Vue Compiler 转换为类似这样的 render 函数：",[26,6401,6405],{"className":6402,"code":6403,"language":6404,"meta":31,"style":31},"language-js shiki shiki-themes github-light github-dark","render(h) {\n  return h('div', {}, `Hello, ${this.name}`);\n}\n","js",[33,6406,6407,6415,6446],{"__ignoreMap":31},[36,6408,6409,6412],{"class":38,"line":39},[36,6410,6411],{"class":144},"render",[36,6413,6414],{"class":62},"(h) {\n",[36,6416,6417,6419,6422,6424,6427,6430,6433,6435,6438,6440,6443],{"class":38,"line":50},[36,6418,3336],{"class":42},[36,6420,6421],{"class":144}," h",[36,6423,165],{"class":62},[36,6425,6426],{"class":46},"'div'",[36,6428,6429],{"class":62},", {}, ",[36,6431,6432],{"class":46},"`Hello, ${",[36,6434,1460],{"class":137},[36,6436,6437],{"class":46},".",[36,6439,748],{"class":62},[36,6441,6442],{"class":46},"}`",[36,6444,6445],{"class":62},");\n",[36,6447,6448],{"class":38,"line":57},[36,6449,702],{"class":62},[207,6451,6453],{"id":6452},"为什么需要将模板转换为-render-函数",[374,6454,6455],{},"为什么需要将模板转换为 render 函数？",[386,6457,6459],{"id":6458},"_1-浏览器无法直接理解模板语法",[374,6460,6461],{},"(1) 浏览器无法直接理解模板语法",[10,6463,3291,6464,6270,6466,6468,6469,6472,6473,6476],{},[33,6465,6253],{},[33,6467,860],{}," 是一种",[374,6470,6471],{},"高层的声明式语法","，浏览器无法直接解析。为了让浏览器能够运行，",[374,6474,6475],{},"Vue 必须将这些模板转换为 JavaScript 代码（即 render 函数）","，因为浏览器可以直接执行 JavaScript。",[386,6478,6480],{"id":6479},"_2-提高运行时性能",[374,6481,6482],{},"(2) 提高运行时性能",[10,6484,6485,6486,6489,6490,486],{},"​\t模板语法是开发者友好的，但",[374,6487,6488],{},"它需要在运行时被解析为虚拟 DOM。通过在构建阶段（build time）将模板预编译为 render 函数","，可以",[374,6491,6492],{},"避免在运行时解析模板的开销，从而提高性能",[391,6494,6495,6501],{},[394,6496,6497,6500],{},[374,6498,6499],{},"开发阶段","：Vue Compiler 将模板转换为 render 函数。",[394,6502,6503,6506,6507,6510],{},[374,6504,6505],{},"生产阶段","：运行时",[374,6508,6509],{},"直接使用预编译的 render 函数","，减少了运行时的计算量。",[10,6512,6513],{},[1166,6514],{"alt":6515,"src":6516},"image-20250311192325277",".\u002Fassets\u002Fimage-20250311192325277.png",[10,6518,6519],{},"​\t只要代码一变化，就会由工具自动帮你完成以上的工作，这个就是构建工具。",[367,6521,6523],{"id":6522},"babel-语法降级",[374,6524,6525],{},"Babel 语法降级",[10,6527,6528,6529,6532,6533,486],{},"​\t在现代 JavaScript 开发中，",[374,6530,6531],{},"Babel"," 是一个非常重要的工具，用于将现代 JavaScript 代码（ES6+）转换为向后兼容的旧版本 JavaScript（如 ES5），以便在不支持最新语法的浏览器或运行环境中运行。这一过程被称为 ",[374,6534,6535],{},"语法降级（transpilation）",[6192,6537],{},[207,6539,6541],{"id":6540},"为什么需要-babel-语法降级",[374,6542,6543],{},"为什么需要 Babel 语法降级？",[3199,6545,6546,6557,6563],{},[394,6547,6548,6551,6552,3257,6554,6556],{},[374,6549,6550],{},"浏览器兼容性问题","\n不同的浏览器对 JavaScript 的支持程度不同，尤其是旧版浏览器（如 IE11）不支持许多现代 JavaScript 特性（如箭头函数、",[33,6553,1689],{},[33,6555,134],{},"、模块化等）。通过 Babel，可以将这些现代语法转换为旧版浏览器支持的语法。",[394,6558,6559,6562],{},[374,6560,6561],{},"支持更广泛的用户群体","\n如果你的应用需要支持较老的设备或浏览器（如企业内部系统或面向全球用户的应用），语法降级是必要的。",[394,6564,6565,6568],{},[374,6566,6567],{},"使用最新的 JavaScript 特性","\nBabel 允许开发者使用最新的 JavaScript 特性（如 ES2020、ES2021），即使这些特性尚未被所有浏览器支持。Babel 会将这些特性转换为兼容的旧语法。",[10,6570,6571],{},[1166,6572],{"alt":6573,"src":6574},"image-20250311193725306",".\u002Fassets\u002Fimage-20250311193725306.png",[367,6576,6578],{"id":6577},"es6语法","ES6语法：",[207,6580,6582],{"id":6581},"esm和cjs","ESM和CJS",[10,6584,6585,6586,6589,6590,6593],{},"​\tNuxt 3 默认使用的是 ",[374,6587,6588],{},"ES Modules (ESM)","，而不是 CommonJS (CJS)。它",[374,6591,6592],{},"完全基于现代的 ECMAScript 模块化系统构建","，旨在利用现代 JavaScript 的特性和性能优势。不过，Nuxt 3 仍然可以兼容使用 CommonJS 模块的库，但需要一些额外的处理。",[391,6595,6596,6606],{},[394,6597,6598,6601,6602,6605],{},[374,6599,6600],{},"CommonJS (CJS)"," 是 Node.js 的模块系统，主要用于服务端。它的模块导入（",[33,6603,6604],{},"require","）是在运行时由服务端执行的。",[394,6607,6608,6610,6611,6613,6614,798,6617,6620],{},[374,6609,6588],{}," 是现代 JavaScript 的模块系统，最初设计用于浏览器，但现在也被 Node.js 支持。ESM 的模块导入（",[33,6612,43],{},"）",[374,6615,6616],{},"在浏览器中是静态的",[374,6618,6619],{},"直接从服务端加载模块文件","，而在 Node.js 中则是服务端解析的。",[10,6622,6623],{},[374,6624,6625],{},"ES Modules 的导入机制：",[391,6627,6628,6631,6636],{},[394,6629,6630],{},"ESM 是现代 JavaScript 的模块化标准，最初设计用于浏览器，后来被 Node.js 采纳。",[394,6632,4207,6633,6635],{},[33,6634,43],{}," 导入模块，模块的解析是静态的（编译时确定依赖关系）。",[394,6637,6638,6639,6642],{},"在浏览器中，ESM 模块通过 ",[33,6640,6641],{},"\u003Cscript type=\"module\">"," 标签加载，浏览器会直接从服务端请求模块文件。",[10,6644,6645],{},"因此 如果全局导入，会出现卡顿等问题，所以模块化的优点很大！",[207,6647,6649],{"id":6648},"const-let","const let:",[10,6651,6652,6653,6655,6656,6658,6659,6661],{},"ES6 新增了",[33,6654,1689],{},"命令，用来声明变量。它的用法类似于",[33,6657,1693],{},"，但是所声明的变量，只在",[33,6660,1689],{},"命令所在的代码块内有效。",[26,6663,6667],{"className":6664,"code":6665,"language":6666,"meta":31,"style":31},"language-javascript shiki shiki-themes github-light github-dark","{\n  let a = 10;\n  var b = 1;\n}\n\na \u002F\u002F ReferenceError: a is not defined.\nb \u002F\u002F 1\n","javascript",[33,6668,6669,6674,6688,6703,6707,6711,6719],{"__ignoreMap":31},[36,6670,6671],{"class":38,"line":39},[36,6672,6673],{"class":62},"{\n",[36,6675,6676,6679,6682,6684,6686],{"class":38,"line":50},[36,6677,6678],{"class":42},"  let",[36,6680,6681],{"class":62}," a ",[36,6683,661],{"class":42},[36,6685,1540],{"class":137},[36,6687,1523],{"class":62},[36,6689,6690,6693,6696,6698,6701],{"class":38,"line":57},[36,6691,6692],{"class":42},"  var",[36,6694,6695],{"class":62}," b ",[36,6697,661],{"class":42},[36,6699,6700],{"class":137}," 1",[36,6702,1523],{"class":62},[36,6704,6705],{"class":38,"line":76},[36,6706,702],{"class":62},[36,6708,6709],{"class":38,"line":92},[36,6710,54],{"emptyLinePlaceholder":53},[36,6712,6713,6716],{"class":38,"line":97},[36,6714,6715],{"class":62},"a ",[36,6717,6718],{"class":72},"\u002F\u002F ReferenceError: a is not defined.\n",[36,6720,6721,6724],{"class":38,"line":113},[36,6722,6723],{"class":62},"b ",[36,6725,6726],{"class":72},"\u002F\u002F 1\n",[10,6728,6729,6730,6732,6733,6735,6736,6738,6739,6741,6742,6744],{},"上面代码在代码块之中，分别用",[33,6731,1689],{},"和",[33,6734,1693],{},"声明了两个变量。然后在代码块之外调用这两个变量，结果",[33,6737,1689],{},"声明的变量报错，",[33,6740,1693],{},"声明的变量返回了正确的值。这表明，",[33,6743,1689],{},"声明的变量只在它所在的代码块有效。",[367,6746,6748],{"id":6747},"esm和commonjs模块的导出","ESM和CommonJs模块的导出：",[10,6750,6751],{},"​\t基本差异：",[391,6753,6754,6757],{},[394,6755,6756],{},"CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。",[394,6758,6759],{},"CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。",[10,6761,6762,6763,6770,6771,6774,6775,6780],{},"​\t常见的Commonjs的导出模式有命名导出、函数",[6764,6765,6769],"a",{"href":6766,"rel":6767},"https:\u002F\u002Fzhida.zhihu.com\u002Fsearch?content_id=217245956&content_type=Article&match_order=1&q=%E5%AF%BC%E5%87%BA%E7%B1%BB&zhida_source=entity",[6768],"nofollow","导出类","导出和类的实例导出几种。Commonjs导出的关键词是",[374,6772,6773],{},"exports","或**",[6764,6776,6779],{"href":6777,"rel":6778},"https:\u002F\u002Fzhida.zhihu.com\u002Fsearch?content_id=217245956&content_type=Article&match_order=1&q=module.exports&zhida_source=entity",[6768],"module.exports","**。",[10,6782,6783],{},"命名导出模式示例如下：",[26,6785,6787],{"className":6402,"code":6786,"language":6404,"meta":31,"style":31},"\u002F\u002Fnamedexport.js\n\u002F\u002F命名的导出模式是commonjs的标准模式\nexports.info=(msg)=>{\n    console.log(`info:${msg}`);\n}\nexports.verbose=(msg)=>{\n    console.log(`verbose:${msg}`);\n}\n",[33,6788,6789,6794,6799,6822,6839,6843,6864,6881],{"__ignoreMap":31},[36,6790,6791],{"class":38,"line":39},[36,6792,6793],{"class":72},"\u002F\u002Fnamedexport.js\n",[36,6795,6796],{"class":38,"line":50},[36,6797,6798],{"class":72},"\u002F\u002F命名的导出模式是commonjs的标准模式\n",[36,6800,6801,6803,6805,6808,6810,6812,6815,6818,6820],{"class":38,"line":57},[36,6802,6773],{"class":137},[36,6804,6437],{"class":62},[36,6806,6807],{"class":144},"info",[36,6809,661],{"class":42},[36,6811,165],{"class":62},[36,6813,6814],{"class":3474},"msg",[36,6816,6817],{"class":62},")",[36,6819,3329],{"class":42},[36,6821,6673],{"class":62},[36,6823,6824,6826,6828,6830,6833,6835,6837],{"class":38,"line":76},[36,6825,2104],{"class":62},[36,6827,2107],{"class":144},[36,6829,165],{"class":62},[36,6831,6832],{"class":46},"`info:${",[36,6834,6814],{"class":62},[36,6836,6442],{"class":46},[36,6838,6445],{"class":62},[36,6840,6841],{"class":38,"line":92},[36,6842,702],{"class":62},[36,6844,6845,6847,6849,6852,6854,6856,6858,6860,6862],{"class":38,"line":97},[36,6846,6773],{"class":137},[36,6848,6437],{"class":62},[36,6850,6851],{"class":144},"verbose",[36,6853,661],{"class":42},[36,6855,165],{"class":62},[36,6857,6814],{"class":3474},[36,6859,6817],{"class":62},[36,6861,3329],{"class":42},[36,6863,6673],{"class":62},[36,6865,6866,6868,6870,6872,6875,6877,6879],{"class":38,"line":113},[36,6867,2104],{"class":62},[36,6869,2107],{"class":144},[36,6871,165],{"class":62},[36,6873,6874],{"class":46},"`verbose:${",[36,6876,6814],{"class":62},[36,6878,6442],{"class":46},[36,6880,6445],{"class":62},[36,6882,6883],{"class":38,"line":126},[36,6884,702],{"class":62},[10,6886,6887],{},"函数导出模式示例如下：",[26,6889,6891],{"className":6402,"code":6890,"language":6404,"meta":31,"style":31},"\u002F\u002Ffuncexport.js\n\u002F\u002F函数导出模式是commonjs的扩展\nmodule.exports=(msg)=>{\n    console.log(`info:${msg}`);\n}\n\nmodule.exports.verbose=(msg)=>{\n    console.log(`verbose:${msg}`);\n}\n",[33,6892,6893,6898,6903,6924,6940,6944,6948,6972,6988],{"__ignoreMap":31},[36,6894,6895],{"class":38,"line":39},[36,6896,6897],{"class":72},"\u002F\u002Ffuncexport.js\n",[36,6899,6900],{"class":38,"line":50},[36,6901,6902],{"class":72},"\u002F\u002F函数导出模式是commonjs的扩展\n",[36,6904,6905,6908,6910,6912,6914,6916,6918,6920,6922],{"class":38,"line":57},[36,6906,6907],{"class":137},"module",[36,6909,6437],{"class":62},[36,6911,6773],{"class":137},[36,6913,661],{"class":42},[36,6915,165],{"class":62},[36,6917,6814],{"class":3474},[36,6919,6817],{"class":62},[36,6921,3329],{"class":42},[36,6923,6673],{"class":62},[36,6925,6926,6928,6930,6932,6934,6936,6938],{"class":38,"line":76},[36,6927,2104],{"class":62},[36,6929,2107],{"class":144},[36,6931,165],{"class":62},[36,6933,6832],{"class":46},[36,6935,6814],{"class":62},[36,6937,6442],{"class":46},[36,6939,6445],{"class":62},[36,6941,6942],{"class":38,"line":92},[36,6943,702],{"class":62},[36,6945,6946],{"class":38,"line":97},[36,6947,54],{"emptyLinePlaceholder":53},[36,6949,6950,6952,6954,6956,6958,6960,6962,6964,6966,6968,6970],{"class":38,"line":113},[36,6951,6907],{"class":137},[36,6953,6437],{"class":62},[36,6955,6773],{"class":137},[36,6957,6437],{"class":62},[36,6959,6851],{"class":144},[36,6961,661],{"class":42},[36,6963,165],{"class":62},[36,6965,6814],{"class":3474},[36,6967,6817],{"class":62},[36,6969,3329],{"class":42},[36,6971,6673],{"class":62},[36,6973,6974,6976,6978,6980,6982,6984,6986],{"class":38,"line":126},[36,6975,2104],{"class":62},[36,6977,2107],{"class":144},[36,6979,165],{"class":62},[36,6981,6874],{"class":46},[36,6983,6814],{"class":62},[36,6985,6442],{"class":46},[36,6987,6445],{"class":62},[36,6989,6990],{"class":38,"line":131},[36,6991,702],{"class":62},[10,6993,6994],{},"类导出模式示例如下：",[26,6996,6998],{"className":6402,"code":6997,"language":6404,"meta":31,"style":31},"\u002F\u002Fclassexport.js\n\u002F\u002F类导出模式\nclass Logger{\n    constructor(name) {\n        this.name=name;\n    }\n    log(msg){\n        console.log(`[${this.name}]-${msg}`);\n    }\n    info(msg){\n        this.log(`info:${msg}`);\n    }\n    verbose(msg){\n        this.log(`verbose:${msg}`);\n    }\n}\n\nmodule.exports=Logger;\n",[33,6999,7000,7005,7010,7020,7031,7044,7048,7060,7087,7091,7102,7120,7124,7135,7153,7157,7161,7165],{"__ignoreMap":31},[36,7001,7002],{"class":38,"line":39},[36,7003,7004],{"class":72},"\u002F\u002Fclassexport.js\n",[36,7006,7007],{"class":38,"line":50},[36,7008,7009],{"class":72},"\u002F\u002F类导出模式\n",[36,7011,7012,7015,7018],{"class":38,"line":57},[36,7013,7014],{"class":42},"class",[36,7016,7017],{"class":144}," Logger",[36,7019,6673],{"class":62},[36,7021,7022,7025,7027,7029],{"class":38,"line":76},[36,7023,7024],{"class":42},"    constructor",[36,7026,165],{"class":62},[36,7028,748],{"class":3474},[36,7030,3569],{"class":62},[36,7032,7033,7036,7039,7041],{"class":38,"line":92},[36,7034,7035],{"class":137},"        this",[36,7037,7038],{"class":62},".name",[36,7040,661],{"class":42},[36,7042,7043],{"class":62},"name;\n",[36,7045,7046],{"class":38,"line":97},[36,7047,965],{"class":62},[36,7049,7050,7053,7055,7057],{"class":38,"line":113},[36,7051,7052],{"class":144},"    log",[36,7054,165],{"class":62},[36,7056,6814],{"class":3474},[36,7058,7059],{"class":62},"){\n",[36,7061,7062,7065,7067,7069,7072,7074,7076,7078,7081,7083,7085],{"class":38,"line":126},[36,7063,7064],{"class":62},"        console.",[36,7066,2107],{"class":144},[36,7068,165],{"class":62},[36,7070,7071],{"class":46},"`[${",[36,7073,1460],{"class":137},[36,7075,6437],{"class":46},[36,7077,748],{"class":62},[36,7079,7080],{"class":46},"}]-${",[36,7082,6814],{"class":62},[36,7084,6442],{"class":46},[36,7086,6445],{"class":62},[36,7088,7089],{"class":38,"line":131},[36,7090,965],{"class":62},[36,7092,7093,7096,7098,7100],{"class":38,"line":151},[36,7094,7095],{"class":144},"    info",[36,7097,165],{"class":62},[36,7099,6814],{"class":3474},[36,7101,7059],{"class":62},[36,7103,7104,7106,7108,7110,7112,7114,7116,7118],{"class":38,"line":156},[36,7105,7035],{"class":137},[36,7107,6437],{"class":62},[36,7109,2107],{"class":144},[36,7111,165],{"class":62},[36,7113,6832],{"class":46},[36,7115,6814],{"class":62},[36,7117,6442],{"class":46},[36,7119,6445],{"class":62},[36,7121,7122],{"class":38,"line":174},[36,7123,965],{"class":62},[36,7125,7126,7129,7131,7133],{"class":38,"line":184},[36,7127,7128],{"class":144},"    verbose",[36,7130,165],{"class":62},[36,7132,6814],{"class":3474},[36,7134,7059],{"class":62},[36,7136,7137,7139,7141,7143,7145,7147,7149,7151],{"class":38,"line":189},[36,7138,7035],{"class":137},[36,7140,6437],{"class":62},[36,7142,2107],{"class":144},[36,7144,165],{"class":62},[36,7146,6874],{"class":46},[36,7148,6814],{"class":62},[36,7150,6442],{"class":46},[36,7152,6445],{"class":62},[36,7154,7155],{"class":38,"line":968},[36,7156,965],{"class":62},[36,7158,7159],{"class":38,"line":974},[36,7160,702],{"class":62},[36,7162,7163],{"class":38,"line":979},[36,7164,54],{"emptyLinePlaceholder":53},[36,7166,7167,7169,7171,7173,7175],{"class":38,"line":1384},[36,7168,6907],{"class":137},[36,7170,6437],{"class":62},[36,7172,6773],{"class":137},[36,7174,661],{"class":42},[36,7176,7177],{"class":62},"Logger;\n",[10,7179,7180],{},"类的实例导出模式：",[26,7182,7184],{"className":6402,"code":7183,"language":6404,"meta":31,"style":31},"\u002F\u002Finstanceexport.js\n\u002F\u002F类的实例导出\nclass Logger{\n    constructor(name){\n        this.count=0;\n        this.name=name;\n    }\n    info(msg){\n        this.count++;\n        console.log(`[${this.name}] ,count=${this.count}:${msg}`);\n    }\n}\n\nmodule.exports=new Logger('DEFAULT');\n",[33,7185,7186,7191,7196,7204,7214,7227,7237,7241,7251,7262,7297,7301,7305,7309],{"__ignoreMap":31},[36,7187,7188],{"class":38,"line":39},[36,7189,7190],{"class":72},"\u002F\u002Finstanceexport.js\n",[36,7192,7193],{"class":38,"line":50},[36,7194,7195],{"class":72},"\u002F\u002F类的实例导出\n",[36,7197,7198,7200,7202],{"class":38,"line":57},[36,7199,7014],{"class":42},[36,7201,7017],{"class":144},[36,7203,6673],{"class":62},[36,7205,7206,7208,7210,7212],{"class":38,"line":76},[36,7207,7024],{"class":42},[36,7209,165],{"class":62},[36,7211,748],{"class":3474},[36,7213,7059],{"class":62},[36,7215,7216,7218,7221,7223,7225],{"class":38,"line":92},[36,7217,7035],{"class":137},[36,7219,7220],{"class":62},".count",[36,7222,661],{"class":42},[36,7224,1534],{"class":137},[36,7226,1523],{"class":62},[36,7228,7229,7231,7233,7235],{"class":38,"line":97},[36,7230,7035],{"class":137},[36,7232,7038],{"class":62},[36,7234,661],{"class":42},[36,7236,7043],{"class":62},[36,7238,7239],{"class":38,"line":113},[36,7240,965],{"class":62},[36,7242,7243,7245,7247,7249],{"class":38,"line":126},[36,7244,7095],{"class":144},[36,7246,165],{"class":62},[36,7248,6814],{"class":3474},[36,7250,7059],{"class":62},[36,7252,7253,7255,7257,7260],{"class":38,"line":131},[36,7254,7035],{"class":137},[36,7256,7220],{"class":62},[36,7258,7259],{"class":42},"++",[36,7261,1523],{"class":62},[36,7263,7264,7266,7268,7270,7272,7274,7276,7278,7281,7283,7285,7288,7291,7293,7295],{"class":38,"line":151},[36,7265,7064],{"class":62},[36,7267,2107],{"class":144},[36,7269,165],{"class":62},[36,7271,7071],{"class":46},[36,7273,1460],{"class":137},[36,7275,6437],{"class":46},[36,7277,748],{"class":62},[36,7279,7280],{"class":46},"}] ,count=${",[36,7282,1460],{"class":137},[36,7284,6437],{"class":46},[36,7286,7287],{"class":62},"count",[36,7289,7290],{"class":46},"}:${",[36,7292,6814],{"class":62},[36,7294,6442],{"class":46},[36,7296,6445],{"class":62},[36,7298,7299],{"class":38,"line":156},[36,7300,965],{"class":62},[36,7302,7303],{"class":38,"line":174},[36,7304,702],{"class":62},[36,7306,7307],{"class":38,"line":184},[36,7308,54],{"emptyLinePlaceholder":53},[36,7310,7311,7313,7315,7317,7320,7322,7324,7327],{"class":38,"line":189},[36,7312,6907],{"class":137},[36,7314,6437],{"class":62},[36,7316,6773],{"class":137},[36,7318,7319],{"class":42},"=new",[36,7321,7017],{"class":144},[36,7323,165],{"class":62},[36,7325,7326],{"class":46},"'DEFAULT'",[36,7328,6445],{"class":62},[10,7330,7331],{},"通过Commonjs导出模块的导入示例",[26,7333,7335],{"className":6402,"code":7334,"language":6404,"meta":31,"style":31},"\u002F\u002F命名导出的模块导入方法示例\nconst logger1=require('.\u002Fnamedexport');\nlogger1.info('This is a named export example');\nlogger1.verbose('With a verbose message');\n\n\u002F\u002F函数导出的模块导入方法示例\nconst logger2=require('.\u002Ffuncexport');\nlogger2('This is a function export example');\nlogger2.verbose('With a verbose message');\n\n\u002F\u002F类导出的模块导入方法示例\nconst Logger3=require('.\u002Fclassexport');\nlet logger3=new Logger3('DB');\nlogger3.info('This is a class export example');\nlogger3.verbose('With a verbose message');\n\n\u002F\u002F类的实例导出的模块导入方法示例\nconst logger4=require('.\u002Finstanceexport');\nlogger4.info('This is a class instance export example');\nconst logger5=require('.\u002Finstanceexport');\nlogger5.info('This is a class instance export example');\n\n\u002F\u002F可以通过以下方式向导入的模块添加customMessage方法\nrequire('.\u002Fnamedexport').customMessage=(msg)=>{\n    console.log(`This is a patched msg :${msg}`);\n}\nlogger1.customMessage('logger 1 is patched');\n",[33,7336,7337,7342,7360,7374,7387,7391,7396,7414,7426,7439,7443,7448,7466,7484,7498,7510,7514,7519,7537,7551,7568,7581,7585,7590,7616,7633,7637],{"__ignoreMap":31},[36,7338,7339],{"class":38,"line":39},[36,7340,7341],{"class":72},"\u002F\u002F命名导出的模块导入方法示例\n",[36,7343,7344,7346,7349,7351,7353,7355,7358],{"class":38,"line":50},[36,7345,134],{"class":42},[36,7347,7348],{"class":137}," logger1",[36,7350,661],{"class":42},[36,7352,6604],{"class":144},[36,7354,165],{"class":62},[36,7356,7357],{"class":46},"'.\u002Fnamedexport'",[36,7359,6445],{"class":62},[36,7361,7362,7365,7367,7369,7372],{"class":38,"line":57},[36,7363,7364],{"class":62},"logger1.",[36,7366,6807],{"class":144},[36,7368,165],{"class":62},[36,7370,7371],{"class":46},"'This is a named export example'",[36,7373,6445],{"class":62},[36,7375,7376,7378,7380,7382,7385],{"class":38,"line":76},[36,7377,7364],{"class":62},[36,7379,6851],{"class":144},[36,7381,165],{"class":62},[36,7383,7384],{"class":46},"'With a verbose message'",[36,7386,6445],{"class":62},[36,7388,7389],{"class":38,"line":92},[36,7390,54],{"emptyLinePlaceholder":53},[36,7392,7393],{"class":38,"line":97},[36,7394,7395],{"class":72},"\u002F\u002F函数导出的模块导入方法示例\n",[36,7397,7398,7400,7403,7405,7407,7409,7412],{"class":38,"line":113},[36,7399,134],{"class":42},[36,7401,7402],{"class":137}," logger2",[36,7404,661],{"class":42},[36,7406,6604],{"class":144},[36,7408,165],{"class":62},[36,7410,7411],{"class":46},"'.\u002Ffuncexport'",[36,7413,6445],{"class":62},[36,7415,7416,7419,7421,7424],{"class":38,"line":126},[36,7417,7418],{"class":144},"logger2",[36,7420,165],{"class":62},[36,7422,7423],{"class":46},"'This is a function export example'",[36,7425,6445],{"class":62},[36,7427,7428,7431,7433,7435,7437],{"class":38,"line":131},[36,7429,7430],{"class":62},"logger2.",[36,7432,6851],{"class":144},[36,7434,165],{"class":62},[36,7436,7384],{"class":46},[36,7438,6445],{"class":62},[36,7440,7441],{"class":38,"line":151},[36,7442,54],{"emptyLinePlaceholder":53},[36,7444,7445],{"class":38,"line":156},[36,7446,7447],{"class":72},"\u002F\u002F类导出的模块导入方法示例\n",[36,7449,7450,7452,7455,7457,7459,7461,7464],{"class":38,"line":174},[36,7451,134],{"class":42},[36,7453,7454],{"class":137}," Logger3",[36,7456,661],{"class":42},[36,7458,6604],{"class":144},[36,7460,165],{"class":62},[36,7462,7463],{"class":46},"'.\u002Fclassexport'",[36,7465,6445],{"class":62},[36,7467,7468,7470,7473,7475,7477,7479,7482],{"class":38,"line":184},[36,7469,1689],{"class":42},[36,7471,7472],{"class":62}," logger3",[36,7474,7319],{"class":42},[36,7476,7454],{"class":144},[36,7478,165],{"class":62},[36,7480,7481],{"class":46},"'DB'",[36,7483,6445],{"class":62},[36,7485,7486,7489,7491,7493,7496],{"class":38,"line":189},[36,7487,7488],{"class":62},"logger3.",[36,7490,6807],{"class":144},[36,7492,165],{"class":62},[36,7494,7495],{"class":46},"'This is a class export example'",[36,7497,6445],{"class":62},[36,7499,7500,7502,7504,7506,7508],{"class":38,"line":968},[36,7501,7488],{"class":62},[36,7503,6851],{"class":144},[36,7505,165],{"class":62},[36,7507,7384],{"class":46},[36,7509,6445],{"class":62},[36,7511,7512],{"class":38,"line":974},[36,7513,54],{"emptyLinePlaceholder":53},[36,7515,7516],{"class":38,"line":979},[36,7517,7518],{"class":72},"\u002F\u002F类的实例导出的模块导入方法示例\n",[36,7520,7521,7523,7526,7528,7530,7532,7535],{"class":38,"line":1384},[36,7522,134],{"class":42},[36,7524,7525],{"class":137}," logger4",[36,7527,661],{"class":42},[36,7529,6604],{"class":144},[36,7531,165],{"class":62},[36,7533,7534],{"class":46},"'.\u002Finstanceexport'",[36,7536,6445],{"class":62},[36,7538,7539,7542,7544,7546,7549],{"class":38,"line":1392},[36,7540,7541],{"class":62},"logger4.",[36,7543,6807],{"class":144},[36,7545,165],{"class":62},[36,7547,7548],{"class":46},"'This is a class instance export example'",[36,7550,6445],{"class":62},[36,7552,7553,7555,7558,7560,7562,7564,7566],{"class":38,"line":1406},[36,7554,134],{"class":42},[36,7556,7557],{"class":137}," logger5",[36,7559,661],{"class":42},[36,7561,6604],{"class":144},[36,7563,165],{"class":62},[36,7565,7534],{"class":46},[36,7567,6445],{"class":62},[36,7569,7570,7573,7575,7577,7579],{"class":38,"line":1412},[36,7571,7572],{"class":62},"logger5.",[36,7574,6807],{"class":144},[36,7576,165],{"class":62},[36,7578,7548],{"class":46},[36,7580,6445],{"class":62},[36,7582,7583],{"class":38,"line":1420},[36,7584,54],{"emptyLinePlaceholder":53},[36,7586,7587],{"class":38,"line":1434},[36,7588,7589],{"class":72},"\u002F\u002F可以通过以下方式向导入的模块添加customMessage方法\n",[36,7591,7592,7594,7596,7598,7601,7604,7606,7608,7610,7612,7614],{"class":38,"line":1439},[36,7593,6604],{"class":144},[36,7595,165],{"class":62},[36,7597,7357],{"class":46},[36,7599,7600],{"class":62},").",[36,7602,7603],{"class":144},"customMessage",[36,7605,661],{"class":42},[36,7607,165],{"class":62},[36,7609,6814],{"class":3474},[36,7611,6817],{"class":62},[36,7613,3329],{"class":42},[36,7615,6673],{"class":62},[36,7617,7618,7620,7622,7624,7627,7629,7631],{"class":38,"line":1444},[36,7619,2104],{"class":62},[36,7621,2107],{"class":144},[36,7623,165],{"class":62},[36,7625,7626],{"class":46},"`This is a patched msg :${",[36,7628,6814],{"class":62},[36,7630,6442],{"class":46},[36,7632,6445],{"class":62},[36,7634,7635],{"class":38,"line":1452},[36,7636,702],{"class":62},[36,7638,7639,7641,7643,7645,7648],{"class":38,"line":1466},[36,7640,7364],{"class":62},[36,7642,7603],{"class":144},[36,7644,165],{"class":62},[36,7646,7647],{"class":46},"'logger 1 is patched'",[36,7649,6445],{"class":62},[367,7651,7653],{"id":7652},"ecmascript模块导入与导出的方法","ECMAScript模块导入与导出的方法",[10,7655,7656,7657,7660,7661,7664,7665,7668,7669,7672,7673,7675],{},"​\tESMAScript方式仅在",[374,7658,7659],{},"较新的Nodejs版本中受支持","，此外，",[374,7662,7663],{},"Nodejs默认采用Commonjs语法导入导出模块","，直接使用ECMAScript模块会报错，在文件对应的",[33,7666,7667],{},"package.json","中添加",[33,7670,7671],{},"\"type\":\"module\",","字段，才能正常使用ECMAScript模块。而一旦确定了",[33,7674,4403],{},"字段后，就不能再使用Commonjs语法，需要参考下一节的内容进行调整。",[391,7677,7678],{},[394,7679,7680],{},"ECMAScript模块导出",[26,7682,7684],{"className":6402,"code":7683,"language":6404,"meta":31,"style":31},"\u002F\u002Fesmexport.js\n\u002F\u002F采用ESM导出示例\n\u002F\u002F导出函数\nexport function defaultlog(msg){\n    console.log(msg);\n}\n\u002F\u002F导出定义的常数\nexport const DEFAULT_VALUE='info';\n\nexport const LEVELS={\n    error:0,\n    debug:1,\n    warn:2,\n    data:3,\n    infor:4,\n    verbose:5\n}\n\n\u002F\u002F导出类\nexport class DefaultClass{\n    constructor(name){\n        this.name=name;\n    }\n    log(msg){\n        console.log(`[${this.name}]:${msg}`);\n    }\n}\n",[33,7685,7686,7691,7696,7701,7716,7725,7729,7734,7751,7755,7768,7777,7787,7797,7807,7817,7825,7829,7833,7838,7849,7859,7869,7873,7883,7908,7912],{"__ignoreMap":31},[36,7687,7688],{"class":38,"line":39},[36,7689,7690],{"class":72},"\u002F\u002Fesmexport.js\n",[36,7692,7693],{"class":38,"line":50},[36,7694,7695],{"class":72},"\u002F\u002F采用ESM导出示例\n",[36,7697,7698],{"class":38,"line":57},[36,7699,7700],{"class":72},"\u002F\u002F导出函数\n",[36,7702,7703,7705,7707,7710,7712,7714],{"class":38,"line":76},[36,7704,672],{"class":42},[36,7706,2858],{"class":42},[36,7708,7709],{"class":144}," defaultlog",[36,7711,165],{"class":62},[36,7713,6814],{"class":3474},[36,7715,7059],{"class":62},[36,7717,7718,7720,7722],{"class":38,"line":92},[36,7719,2104],{"class":62},[36,7721,2107],{"class":144},[36,7723,7724],{"class":62},"(msg);\n",[36,7726,7727],{"class":38,"line":97},[36,7728,702],{"class":62},[36,7730,7731],{"class":38,"line":113},[36,7732,7733],{"class":72},"\u002F\u002F导出定义的常数\n",[36,7735,7736,7738,7741,7744,7746,7749],{"class":38,"line":126},[36,7737,672],{"class":42},[36,7739,7740],{"class":42}," const",[36,7742,7743],{"class":137}," DEFAULT_VALUE",[36,7745,661],{"class":42},[36,7747,7748],{"class":46},"'info'",[36,7750,1523],{"class":62},[36,7752,7753],{"class":38,"line":131},[36,7754,54],{"emptyLinePlaceholder":53},[36,7756,7757,7759,7761,7764,7766],{"class":38,"line":151},[36,7758,672],{"class":42},[36,7760,7740],{"class":42},[36,7762,7763],{"class":137}," LEVELS",[36,7765,661],{"class":42},[36,7767,6673],{"class":62},[36,7769,7770,7773,7775],{"class":38,"line":156},[36,7771,7772],{"class":62},"    error:",[36,7774,1534],{"class":137},[36,7776,1340],{"class":62},[36,7778,7779,7782,7785],{"class":38,"line":174},[36,7780,7781],{"class":62},"    debug:",[36,7783,7784],{"class":137},"1",[36,7786,1340],{"class":62},[36,7788,7789,7792,7795],{"class":38,"line":184},[36,7790,7791],{"class":62},"    warn:",[36,7793,7794],{"class":137},"2",[36,7796,1340],{"class":62},[36,7798,7799,7802,7805],{"class":38,"line":189},[36,7800,7801],{"class":62},"    data:",[36,7803,7804],{"class":137},"3",[36,7806,1340],{"class":62},[36,7808,7809,7812,7815],{"class":38,"line":968},[36,7810,7811],{"class":62},"    infor:",[36,7813,7814],{"class":137},"4",[36,7816,1340],{"class":62},[36,7818,7819,7822],{"class":38,"line":974},[36,7820,7821],{"class":62},"    verbose:",[36,7823,7824],{"class":137},"5\n",[36,7826,7827],{"class":38,"line":979},[36,7828,702],{"class":62},[36,7830,7831],{"class":38,"line":1384},[36,7832,54],{"emptyLinePlaceholder":53},[36,7834,7835],{"class":38,"line":1392},[36,7836,7837],{"class":72},"\u002F\u002F导出类\n",[36,7839,7840,7842,7844,7847],{"class":38,"line":1406},[36,7841,672],{"class":42},[36,7843,1194],{"class":42},[36,7845,7846],{"class":144}," DefaultClass",[36,7848,6673],{"class":62},[36,7850,7851,7853,7855,7857],{"class":38,"line":1412},[36,7852,7024],{"class":42},[36,7854,165],{"class":62},[36,7856,748],{"class":3474},[36,7858,7059],{"class":62},[36,7860,7861,7863,7865,7867],{"class":38,"line":1420},[36,7862,7035],{"class":137},[36,7864,7038],{"class":62},[36,7866,661],{"class":42},[36,7868,7043],{"class":62},[36,7870,7871],{"class":38,"line":1434},[36,7872,965],{"class":62},[36,7874,7875,7877,7879,7881],{"class":38,"line":1439},[36,7876,7052],{"class":144},[36,7878,165],{"class":62},[36,7880,6814],{"class":3474},[36,7882,7059],{"class":62},[36,7884,7885,7887,7889,7891,7893,7895,7897,7899,7902,7904,7906],{"class":38,"line":1444},[36,7886,7064],{"class":62},[36,7888,2107],{"class":144},[36,7890,165],{"class":62},[36,7892,7071],{"class":46},[36,7894,1460],{"class":137},[36,7896,6437],{"class":46},[36,7898,748],{"class":62},[36,7900,7901],{"class":46},"}]:${",[36,7903,6814],{"class":62},[36,7905,6442],{"class":46},[36,7907,6445],{"class":62},[36,7909,7910],{"class":38,"line":1452},[36,7911,965],{"class":62},[36,7913,7914],{"class":38,"line":1466},[36,7915,702],{"class":62},[391,7917,7918],{},[394,7919,7920],{},"默认导出",[26,7922,7924],{"className":6402,"code":7923,"language":6404,"meta":31,"style":31},"\u002F\u002Fdefaultexport.js\n\u002F\u002F默认类导出\nexport default class Logger{\n    constructor(name){\n        this.name=name;\n    }\n    log(msg){\n        console.log(`[${this.name}]:${msg}`);\n    }\n}\n",[33,7925,7926,7931,7936,7948,7958,7968,7972,7982,8006,8010],{"__ignoreMap":31},[36,7927,7928],{"class":38,"line":39},[36,7929,7930],{"class":72},"\u002F\u002Fdefaultexport.js\n",[36,7932,7933],{"class":38,"line":50},[36,7934,7935],{"class":72},"\u002F\u002F默认类导出\n",[36,7937,7938,7940,7942,7944,7946],{"class":38,"line":57},[36,7939,672],{"class":42},[36,7941,675],{"class":42},[36,7943,1194],{"class":42},[36,7945,7017],{"class":144},[36,7947,6673],{"class":62},[36,7949,7950,7952,7954,7956],{"class":38,"line":76},[36,7951,7024],{"class":42},[36,7953,165],{"class":62},[36,7955,748],{"class":3474},[36,7957,7059],{"class":62},[36,7959,7960,7962,7964,7966],{"class":38,"line":92},[36,7961,7035],{"class":137},[36,7963,7038],{"class":62},[36,7965,661],{"class":42},[36,7967,7043],{"class":62},[36,7969,7970],{"class":38,"line":97},[36,7971,965],{"class":62},[36,7973,7974,7976,7978,7980],{"class":38,"line":113},[36,7975,7052],{"class":144},[36,7977,165],{"class":62},[36,7979,6814],{"class":3474},[36,7981,7059],{"class":62},[36,7983,7984,7986,7988,7990,7992,7994,7996,7998,8000,8002,8004],{"class":38,"line":126},[36,7985,7064],{"class":62},[36,7987,2107],{"class":144},[36,7989,165],{"class":62},[36,7991,7071],{"class":46},[36,7993,1460],{"class":137},[36,7995,6437],{"class":46},[36,7997,748],{"class":62},[36,7999,7901],{"class":46},[36,8001,6814],{"class":62},[36,8003,6442],{"class":46},[36,8005,6445],{"class":62},[36,8007,8008],{"class":38,"line":131},[36,8009,965],{"class":62},[36,8011,8012],{"class":38,"line":151},[36,8013,702],{"class":62},[391,8015,8016],{},[394,8017,8018],{},"模块导入示例",[26,8020,8022],{"className":6402,"code":8021,"language":6404,"meta":31,"style":31},"\u002F\u002F 导入整个模块\nimport * as loggerModule from '.\u002Fesmexport.js';\nconsole.log(loggerModule);\nconst defaultClass=new loggerModule.DefaultClass('ESMA');\ndefaultClass.log(`test info,DEFAULTVALUE is ${loggerModule.DEFAULT_VALUE}`);\n\n\u002F\u002F导入模块的某个对象\nimport { defaultlog } from '.\u002Fesmexport.js';\ndefaultlog('esma export example');\n\n\u002F\u002F导入默认的模块，自定义Logger2\nimport Logger2 from '.\u002Fdefaultexport.js';\nconst logger2 = new Logger2('default');\nlogger2.log('sample message');\n\n\u002F\u002F导入其他目录下的Commonjs模块（在同一个目录下会失败）\nimport { info as newinfo,verbose as newverbose } from '..\u002Fnamedexport.js';\nnewinfo('newinfo message');\nnewverbose('new verbose message');\n\n\u002F\u002F命名导出的模块导入方法示例\n\u002F\u002F将.js后缀改为.cjs，可以让node将该文件当作Commonjs解析，可以通过import进行导入\n\u002F\u002F类似地，如果要让Nodejs将一个文件当作ECMAScript，需要将.js后缀修改为.mjs\nimport logger1 from '.\u002Fnamedexport2.cjs';\nlogger1.info('This is a named export example');\nlogger1.verbose('With a verbose message');\n",[33,8023,8024,8029,8049,8058,8080,8104,8108,8113,8126,8138,8142,8147,8161,8182,8195,8199,8204,8229,8241,8253,8257,8261,8266,8271,8285,8297],{"__ignoreMap":31},[36,8025,8026],{"class":38,"line":39},[36,8027,8028],{"class":72},"\u002F\u002F 导入整个模块\n",[36,8030,8031,8033,8036,8039,8042,8044,8047],{"class":38,"line":50},[36,8032,43],{"class":42},[36,8034,8035],{"class":137}," *",[36,8037,8038],{"class":42}," as",[36,8040,8041],{"class":62}," loggerModule ",[36,8043,66],{"class":42},[36,8045,8046],{"class":46}," '.\u002Fesmexport.js'",[36,8048,1523],{"class":62},[36,8050,8051,8053,8055],{"class":38,"line":57},[36,8052,4351],{"class":62},[36,8054,2107],{"class":144},[36,8056,8057],{"class":62},"(loggerModule);\n",[36,8059,8060,8062,8065,8067,8070,8073,8075,8078],{"class":38,"line":76},[36,8061,134],{"class":42},[36,8063,8064],{"class":137}," defaultClass",[36,8066,7319],{"class":42},[36,8068,8069],{"class":62}," loggerModule.",[36,8071,8072],{"class":144},"DefaultClass",[36,8074,165],{"class":62},[36,8076,8077],{"class":46},"'ESMA'",[36,8079,6445],{"class":62},[36,8081,8082,8085,8087,8089,8092,8095,8097,8100,8102],{"class":38,"line":92},[36,8083,8084],{"class":62},"defaultClass.",[36,8086,2107],{"class":144},[36,8088,165],{"class":62},[36,8090,8091],{"class":46},"`test info,DEFAULTVALUE is ${",[36,8093,8094],{"class":62},"loggerModule",[36,8096,6437],{"class":46},[36,8098,8099],{"class":137},"DEFAULT_VALUE",[36,8101,6442],{"class":46},[36,8103,6445],{"class":62},[36,8105,8106],{"class":38,"line":97},[36,8107,54],{"emptyLinePlaceholder":53},[36,8109,8110],{"class":38,"line":113},[36,8111,8112],{"class":72},"\u002F\u002F导入模块的某个对象\n",[36,8114,8115,8117,8120,8122,8124],{"class":38,"line":126},[36,8116,43],{"class":42},[36,8118,8119],{"class":62}," { defaultlog } ",[36,8121,66],{"class":42},[36,8123,8046],{"class":46},[36,8125,1523],{"class":62},[36,8127,8128,8131,8133,8136],{"class":38,"line":131},[36,8129,8130],{"class":144},"defaultlog",[36,8132,165],{"class":62},[36,8134,8135],{"class":46},"'esma export example'",[36,8137,6445],{"class":62},[36,8139,8140],{"class":38,"line":151},[36,8141,54],{"emptyLinePlaceholder":53},[36,8143,8144],{"class":38,"line":156},[36,8145,8146],{"class":72},"\u002F\u002F导入默认的模块，自定义Logger2\n",[36,8148,8149,8151,8154,8156,8159],{"class":38,"line":174},[36,8150,43],{"class":42},[36,8152,8153],{"class":62}," Logger2 ",[36,8155,66],{"class":42},[36,8157,8158],{"class":46}," '.\u002Fdefaultexport.js'",[36,8160,1523],{"class":62},[36,8162,8163,8165,8167,8169,8172,8175,8177,8180],{"class":38,"line":184},[36,8164,134],{"class":42},[36,8166,7402],{"class":137},[36,8168,141],{"class":42},[36,8170,8171],{"class":42}," new",[36,8173,8174],{"class":144}," Logger2",[36,8176,165],{"class":62},[36,8178,8179],{"class":46},"'default'",[36,8181,6445],{"class":62},[36,8183,8184,8186,8188,8190,8193],{"class":38,"line":189},[36,8185,7430],{"class":62},[36,8187,2107],{"class":144},[36,8189,165],{"class":62},[36,8191,8192],{"class":46},"'sample message'",[36,8194,6445],{"class":62},[36,8196,8197],{"class":38,"line":968},[36,8198,54],{"emptyLinePlaceholder":53},[36,8200,8201],{"class":38,"line":974},[36,8202,8203],{"class":72},"\u002F\u002F导入其他目录下的Commonjs模块（在同一个目录下会失败）\n",[36,8205,8206,8208,8211,8214,8217,8219,8222,8224,8227],{"class":38,"line":979},[36,8207,43],{"class":42},[36,8209,8210],{"class":62}," { info ",[36,8212,8213],{"class":42},"as",[36,8215,8216],{"class":62}," newinfo,verbose ",[36,8218,8213],{"class":42},[36,8220,8221],{"class":62}," newverbose } ",[36,8223,66],{"class":42},[36,8225,8226],{"class":46}," '..\u002Fnamedexport.js'",[36,8228,1523],{"class":62},[36,8230,8231,8234,8236,8239],{"class":38,"line":1384},[36,8232,8233],{"class":144},"newinfo",[36,8235,165],{"class":62},[36,8237,8238],{"class":46},"'newinfo message'",[36,8240,6445],{"class":62},[36,8242,8243,8246,8248,8251],{"class":38,"line":1392},[36,8244,8245],{"class":144},"newverbose",[36,8247,165],{"class":62},[36,8249,8250],{"class":46},"'new verbose message'",[36,8252,6445],{"class":62},[36,8254,8255],{"class":38,"line":1406},[36,8256,54],{"emptyLinePlaceholder":53},[36,8258,8259],{"class":38,"line":1412},[36,8260,7341],{"class":72},[36,8262,8263],{"class":38,"line":1420},[36,8264,8265],{"class":72},"\u002F\u002F将.js后缀改为.cjs，可以让node将该文件当作Commonjs解析，可以通过import进行导入\n",[36,8267,8268],{"class":38,"line":1434},[36,8269,8270],{"class":72},"\u002F\u002F类似地，如果要让Nodejs将一个文件当作ECMAScript，需要将.js后缀修改为.mjs\n",[36,8272,8273,8275,8278,8280,8283],{"class":38,"line":1439},[36,8274,43],{"class":42},[36,8276,8277],{"class":62}," logger1 ",[36,8279,66],{"class":42},[36,8281,8282],{"class":46}," '.\u002Fnamedexport2.cjs'",[36,8284,1523],{"class":62},[36,8286,8287,8289,8291,8293,8295],{"class":38,"line":1444},[36,8288,7364],{"class":62},[36,8290,6807],{"class":144},[36,8292,165],{"class":62},[36,8294,7371],{"class":46},[36,8296,6445],{"class":62},[36,8298,8299,8301,8303,8305,8307],{"class":38,"line":1452},[36,8300,7364],{"class":62},[36,8302,6851],{"class":144},[36,8304,165],{"class":62},[36,8306,7384],{"class":46},[36,8308,6445],{"class":62},[367,8310,8312],{"id":8311},"_3-模块异步导入导出","3. 模块异步导入导出",[10,8314,8315,8316,8321,8322,2967,8325,8328],{},"​\tNodejs支持模块的异步导入与导出，本例通过一个根据",[6764,8317,8320],{"href":8318,"rel":8319},"https:\u002F\u002Fzhida.zhihu.com\u002Fsearch?content_id=217245956&content_type=Article&match_order=1&q=%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%8F%82%E6%95%B0&zhida_source=entity",[6768],"命令行参数","选择模块导入来进行说明。\n创建",[33,8323,8324],{},"el.js",[33,8326,8327],{},"en.js","等文件。",[26,8330,8332],{"className":6402,"code":8331,"language":6404,"meta":31,"style":31},"\u002F\u002Fel.js希腊语\nexport const HELLO='Γειά σου Κόσμε';\n\u002F\u002Fen.js英语\nexport const HELLO='Hello world';\n\u002F\u002Fes.js西班牙语\nexport const HELLO='Hola mundo';\n\u002F\u002Fit.js意大利语\nexport const HELLO='Ciao mondo';\n\u002F\u002Fpl.js波兰语\nexport const HELLO='Witaj świecie';\n",[33,8333,8334,8339,8355,8360,8375,8380,8395,8400,8415,8420],{"__ignoreMap":31},[36,8335,8336],{"class":38,"line":39},[36,8337,8338],{"class":72},"\u002F\u002Fel.js希腊语\n",[36,8340,8341,8343,8345,8348,8350,8353],{"class":38,"line":50},[36,8342,672],{"class":42},[36,8344,7740],{"class":42},[36,8346,8347],{"class":137}," HELLO",[36,8349,661],{"class":42},[36,8351,8352],{"class":46},"'Γειά σου Κόσμε'",[36,8354,1523],{"class":62},[36,8356,8357],{"class":38,"line":57},[36,8358,8359],{"class":72},"\u002F\u002Fen.js英语\n",[36,8361,8362,8364,8366,8368,8370,8373],{"class":38,"line":76},[36,8363,672],{"class":42},[36,8365,7740],{"class":42},[36,8367,8347],{"class":137},[36,8369,661],{"class":42},[36,8371,8372],{"class":46},"'Hello world'",[36,8374,1523],{"class":62},[36,8376,8377],{"class":38,"line":92},[36,8378,8379],{"class":72},"\u002F\u002Fes.js西班牙语\n",[36,8381,8382,8384,8386,8388,8390,8393],{"class":38,"line":97},[36,8383,672],{"class":42},[36,8385,7740],{"class":42},[36,8387,8347],{"class":137},[36,8389,661],{"class":42},[36,8391,8392],{"class":46},"'Hola mundo'",[36,8394,1523],{"class":62},[36,8396,8397],{"class":38,"line":113},[36,8398,8399],{"class":72},"\u002F\u002Fit.js意大利语\n",[36,8401,8402,8404,8406,8408,8410,8413],{"class":38,"line":126},[36,8403,672],{"class":42},[36,8405,7740],{"class":42},[36,8407,8347],{"class":137},[36,8409,661],{"class":42},[36,8411,8412],{"class":46},"'Ciao mondo'",[36,8414,1523],{"class":62},[36,8416,8417],{"class":38,"line":131},[36,8418,8419],{"class":72},"\u002F\u002Fpl.js波兰语\n",[36,8421,8422,8424,8426,8428,8430,8433],{"class":38,"line":151},[36,8423,672],{"class":42},[36,8425,7740],{"class":42},[36,8427,8347],{"class":137},[36,8429,661],{"class":42},[36,8431,8432],{"class":46},"'Witaj świecie'",[36,8434,1523],{"class":62},[10,8436,8437],{},"​\t异步导入模块",[26,8439,8441],{"className":6402,"code":8440,"language":6404,"meta":31,"style":31},"\u002F\u002F根据命令行参数选择解析的语言，例如\n\u002F\u002F node .\u002Fmain.js el\nconst SUPPORTED_LANGUAGES=['el','en','es','it','pl'];\nconst selectedLanguage=process.argv[2];\n\nif(!SUPPORTED_LANGUAGES.includes(selectedLanguage)){\n    console.error(`The selected language ${selectedLanguage} is not supported yet`);\n    process.exit(0);\n}\n\nconst translationModule=`.\u002F${selectedLanguage}.js`;\nimport(translationModule)\n.then((str)=>{ \u002F\u002Fstr是导入的模块\n    console.log(`Your selected language is ${selectedLanguage} \\n ${str.HELLO}`)\n})\n",[33,8442,8443,8448,8453,8491,8507,8511,8532,8552,8566,8570,8574,8593,8600,8623,8656],{"__ignoreMap":31},[36,8444,8445],{"class":38,"line":39},[36,8446,8447],{"class":72},"\u002F\u002F根据命令行参数选择解析的语言，例如\n",[36,8449,8450],{"class":38,"line":50},[36,8451,8452],{"class":72},"\u002F\u002F node .\u002Fmain.js el\n",[36,8454,8455,8457,8460,8462,8465,8468,8470,8473,8475,8478,8480,8483,8485,8488],{"class":38,"line":57},[36,8456,134],{"class":42},[36,8458,8459],{"class":137}," SUPPORTED_LANGUAGES",[36,8461,661],{"class":42},[36,8463,8464],{"class":62},"[",[36,8466,8467],{"class":46},"'el'",[36,8469,4510],{"class":62},[36,8471,8472],{"class":46},"'en'",[36,8474,4510],{"class":62},[36,8476,8477],{"class":46},"'es'",[36,8479,4510],{"class":62},[36,8481,8482],{"class":46},"'it'",[36,8484,4510],{"class":62},[36,8486,8487],{"class":46},"'pl'",[36,8489,8490],{"class":62},"];\n",[36,8492,8493,8495,8498,8500,8503,8505],{"class":38,"line":76},[36,8494,134],{"class":42},[36,8496,8497],{"class":137}," selectedLanguage",[36,8499,661],{"class":42},[36,8501,8502],{"class":62},"process.argv[",[36,8504,7794],{"class":137},[36,8506,8490],{"class":62},[36,8508,8509],{"class":38,"line":92},[36,8510,54],{"emptyLinePlaceholder":53},[36,8512,8513,8516,8518,8521,8524,8526,8529],{"class":38,"line":97},[36,8514,8515],{"class":42},"if",[36,8517,165],{"class":62},[36,8519,8520],{"class":42},"!",[36,8522,8523],{"class":137},"SUPPORTED_LANGUAGES",[36,8525,6437],{"class":62},[36,8527,8528],{"class":144},"includes",[36,8530,8531],{"class":62},"(selectedLanguage)){\n",[36,8533,8534,8536,8539,8541,8544,8547,8550],{"class":38,"line":113},[36,8535,2104],{"class":62},[36,8537,8538],{"class":144},"error",[36,8540,165],{"class":62},[36,8542,8543],{"class":46},"`The selected language ${",[36,8545,8546],{"class":62},"selectedLanguage",[36,8548,8549],{"class":46},"} is not supported yet`",[36,8551,6445],{"class":62},[36,8553,8554,8557,8560,8562,8564],{"class":38,"line":126},[36,8555,8556],{"class":62},"    process.",[36,8558,8559],{"class":144},"exit",[36,8561,165],{"class":62},[36,8563,1534],{"class":137},[36,8565,6445],{"class":62},[36,8567,8568],{"class":38,"line":131},[36,8569,702],{"class":62},[36,8571,8572],{"class":38,"line":151},[36,8573,54],{"emptyLinePlaceholder":53},[36,8575,8576,8578,8581,8583,8586,8588,8591],{"class":38,"line":156},[36,8577,134],{"class":42},[36,8579,8580],{"class":137}," translationModule",[36,8582,661],{"class":42},[36,8584,8585],{"class":46},"`.\u002F${",[36,8587,8546],{"class":62},[36,8589,8590],{"class":46},"}.js`",[36,8592,1523],{"class":62},[36,8594,8595,8597],{"class":38,"line":174},[36,8596,43],{"class":144},[36,8598,8599],{"class":62},"(translationModule)\n",[36,8601,8602,8604,8607,8610,8613,8615,8617,8620],{"class":38,"line":184},[36,8603,6437],{"class":62},[36,8605,8606],{"class":144},"then",[36,8608,8609],{"class":62},"((",[36,8611,8612],{"class":3474},"str",[36,8614,6817],{"class":62},[36,8616,3329],{"class":42},[36,8618,8619],{"class":62},"{ ",[36,8621,8622],{"class":72},"\u002F\u002Fstr是导入的模块\n",[36,8624,8625,8627,8629,8631,8634,8636,8639,8642,8645,8647,8649,8652,8654],{"class":38,"line":189},[36,8626,2104],{"class":62},[36,8628,2107],{"class":144},[36,8630,165],{"class":62},[36,8632,8633],{"class":46},"`Your selected language is ${",[36,8635,8546],{"class":62},[36,8637,8638],{"class":46},"} ",[36,8640,8641],{"class":137},"\\n",[36,8643,8644],{"class":46}," ${",[36,8646,8612],{"class":62},[36,8648,6437],{"class":46},[36,8650,8651],{"class":137},"HELLO",[36,8653,6442],{"class":46},[36,8655,202],{"class":62},[36,8657,8658],{"class":38,"line":968},[36,8659,3505],{"class":62},[367,8661,8663],{"id":8662},"commonjs和ecmascript部分区别","Commonjs和ECMAScript部分区别",[10,8665,8666,8667,8670,8671,8674,8675,486],{},"​\tECMAScript是在",[374,8668,8669],{},"严格模式下运行","的，他也",[374,8672,8673],{},"不支持Commonjs提供的一些引用","，例如require,exports,__filename,__dirname。如果要使用这些内容，",[374,8676,8677],{},"需要进行替换",[26,8679,8681],{"className":6402,"code":8680,"language":6404,"meta":31,"style":31},"import {fileURLToPath} from 'url';\nimport {dirname} from 'path';\nconst __filename=fileURLToPath(import.meta.url);\nconst __dirname=dirname(__filename);\n",[33,8682,8683,8697,8711,8735],{"__ignoreMap":31},[36,8684,8685,8687,8690,8692,8695],{"class":38,"line":39},[36,8686,43],{"class":42},[36,8688,8689],{"class":62}," {fileURLToPath} ",[36,8691,66],{"class":42},[36,8693,8694],{"class":46}," 'url'",[36,8696,1523],{"class":62},[36,8698,8699,8701,8704,8706,8709],{"class":38,"line":50},[36,8700,43],{"class":42},[36,8702,8703],{"class":62}," {dirname} ",[36,8705,66],{"class":42},[36,8707,8708],{"class":46}," 'path'",[36,8710,1523],{"class":62},[36,8712,8713,8715,8718,8720,8723,8725,8727,8729,8732],{"class":38,"line":57},[36,8714,134],{"class":42},[36,8716,8717],{"class":137}," __filename",[36,8719,661],{"class":42},[36,8721,8722],{"class":144},"fileURLToPath",[36,8724,165],{"class":62},[36,8726,43],{"class":42},[36,8728,6437],{"class":62},[36,8730,8731],{"class":137},"meta",[36,8733,8734],{"class":62},".url);\n",[36,8736,8737,8739,8742,8744,8747],{"class":38,"line":76},[36,8738,134],{"class":42},[36,8740,8741],{"class":137}," __dirname",[36,8743,661],{"class":42},[36,8745,8746],{"class":144},"dirname",[36,8748,8749],{"class":62},"(__filename);\n",[367,8751,8753],{"id":8752},"_5-typescript的情况","5. TypeScript的情况",[10,8755,8756,8757,798,8760,8763,8764,8766,8767,8769,8770,8773,8774,8777,8778,8783,8784,8788],{},"​\tTypeScript是",[374,8758,8759],{},"微软主导的基于JavaScript的语言",[374,8761,8762],{},"可用于更严谨完整的编写JavaScript程序。在TypeScript中主要使用两种导入导出的方式","，分别继承自ECMAScript和兼容Commonjs。使用",[33,8765,672],{},"关键词导出的模块，使用",[33,8768,43],{},"导入，而使用",[33,8771,8772],{},"export=","导出的模块则需要通过",[33,8775,8776],{},"import Module=require('module')","。在TypeScript",[6764,8779,8782],{"href":8780,"rel":8781},"https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fwww.tslang.cn\u002Fdocs\u002Fhandbook\u002Fmodules.html",[6768],"官方文档","（或",[6764,8785,8787],{"href":8780,"rel":8786},[6768],"中文文档","）可以看到关于导入导出的详细示例。",[367,8790,8792],{"id":8791},"vite-create-vite","vite-create .  vite",[10,8794,3291,8795,8798,8799,8802,8803,8806],{},[374,8796,8797],{},"Vite"," 是一个现代化的前端构建工具，提供",[374,8800,8801],{},"快速的开发服务器和高效的构建能力","。而 ",[374,8804,8805],{},"create-vite"," 是一个用于快速创建 Vite 项目的脚手架工具。",[3199,8808,8809,8827],{},[394,8810,8811,8814,8815,8818,8819,8822,8823,8826],{},[374,8812,8813],{},"Vite 是核心工具，create-vite 是辅助工具","\nVite ",[374,8816,8817],{},"本身是一个构建工具","，专注于",[374,8820,8821],{},"开发和构建的性能优化","。而 create-vite 是一个命令行工具，用于",[374,8824,8825],{},"快速生成基于 Vite 的项目模板","。它简化了项目初始化的过程，帮助开发者快速搭建一个 Vite 项目。",[394,8828,8829,8832,8833,8836,8837,8840],{},[374,8830,8831],{},"create-vite 的作用","\ncreate-vite ",[374,8834,8835],{},"提供了多种模板选项，支持不同的框架和语言，比如 Vue、React、Svelte、Solid 等","，以及它们的 TypeScript 版本。",[374,8838,8839],{},"通过 create-vite，开发者可以直接选择所需的模板并生成项目","，而无需手动配置。",[10,8842,8843],{},"# 使用 npm 创建一个 Vite + Vue 项目 npm create vite@latest my-vue-app -- --template vue",[10,8845,8846],{},[374,8847,8848],{},"如果使用vue-cli会创建wabpack的项目,会内置wabpack!",[10,8850,8851],{},[1166,8852],{"alt":8853,"src":8854},"image-20250313151428997",".\u002Fassets\u002Fimage-20250313151428997.png",[207,8856,8858],{"id":8857},"生产环境和开发环境","生产环境和开发环境：",[10,8860,8861],{},"vite会全权交给一个叫做rollup的库去完成生产环境的打包。",[207,8863,8865],{"id":8864},"依赖预构建","依赖预构建：",[10,8867,8868,8869,8872,8873,8876],{},"​\tvite会找到对应的依赖和调用esbuild(一个用",[374,8870,8871],{},"go语言","写的",[374,8874,8875],{},"对js语法进行处理的库",")，可以帮我们把其他规范比如cmj规范的代码全部转换为esmould规范的代码，让我们使用。这是 Vite 的一个重要功能，旨在解决现代开发中 CJS 和 ESM 模块混用的问题。",[10,8878,8879,8880,8883,8884,8886,8887,8890,8891,8893],{},"​\t在 ",[374,8881,8882],{},"CommonJS"," 模块规范中，",[33,8885,6779],{}," 是用来定",[374,8888,8889],{},"义当前模块对外暴露的接口的","。其他文件在加载这个模块时，实际上读取的就是 ",[33,8892,6779],{}," 中的内容。",[391,8895,8896],{},[394,8897,8898,8899,8901,8902,8904],{},"当其他模块通过 ",[33,8900,6604],{}," 加载这个模块时，返回的就是 ",[33,8903,6779],{}," 的值。",[10,8906,8907],{},"而Vite：",[391,8909,8910,8920],{},[394,8911,8912,8913,1690,8916,8919],{},"Vite 使用 ",[374,8914,8915],{},"esbuild",[374,8917,8918],{},"Rollup"," 作为底层工具。",[394,8921,8922,8923,8926,8927,8929,8930,8933],{},"当 Vite 发现",[374,8924,8925],{},"项目中引入了 CommonJS 模块时","，它会通过 ",[374,8928,8915],{}," 或 Rollup 的 ",[33,8931,8932],{},"@rollup\u002Fplugin-commonjs"," 插件，将 CommonJS 模块转换为 ESM 格式。",[26,8935,8937],{"className":6402,"code":8936,"language":6404,"meta":31,"style":31},"\u002F\u002F CommonJS 模块\nmodule.exports = {\n  foo: 'bar',\n  add: (a, b) => a + b,\n};\n",[33,8938,8939,8944,8956,8966,8992],{"__ignoreMap":31},[36,8940,8941],{"class":38,"line":39},[36,8942,8943],{"class":72},"\u002F\u002F CommonJS 模块\n",[36,8945,8946,8948,8950,8952,8954],{"class":38,"line":50},[36,8947,6907],{"class":137},[36,8949,6437],{"class":62},[36,8951,6773],{"class":137},[36,8953,141],{"class":42},[36,8955,925],{"class":62},[36,8957,8958,8961,8964],{"class":38,"line":57},[36,8959,8960],{"class":62},"  foo: ",[36,8962,8963],{"class":46},"'bar'",[36,8965,1340],{"class":62},[36,8967,8968,8971,8974,8976,8978,8981,8983,8985,8987,8989],{"class":38,"line":76},[36,8969,8970],{"class":144},"  add",[36,8972,8973],{"class":62},": (",[36,8975,6764],{"class":3474},[36,8977,694],{"class":62},[36,8979,8980],{"class":3474},"b",[36,8982,352],{"class":62},[36,8984,3329],{"class":42},[36,8986,6681],{"class":62},[36,8988,1827],{"class":42},[36,8990,8991],{"class":62}," b,\n",[36,8993,8994],{"class":38,"line":92},[36,8995,8996],{"class":62},"};\n",[391,8998,8999],{},[394,9000,9001],{},"转换后的模块会变成类似以下的 ESM 格式：",[26,9003,9005],{"className":6402,"code":9004,"language":6404,"meta":31,"style":31},"\u002F\u002F 转换后的 ESM 模块\nconst foo = 'bar';\nconst add = (a, b) => a + b;\n\nexport default {\n  foo,\n  add,\n};\n",[33,9006,9007,9012,9026,9055,9059,9067,9072,9077],{"__ignoreMap":31},[36,9008,9009],{"class":38,"line":39},[36,9010,9011],{"class":72},"\u002F\u002F 转换后的 ESM 模块\n",[36,9013,9014,9016,9019,9021,9024],{"class":38,"line":50},[36,9015,134],{"class":42},[36,9017,9018],{"class":137}," foo",[36,9020,141],{"class":42},[36,9022,9023],{"class":46}," 'bar'",[36,9025,1523],{"class":62},[36,9027,9028,9030,9033,9035,9038,9040,9042,9044,9046,9048,9050,9052],{"class":38,"line":57},[36,9029,134],{"class":42},[36,9031,9032],{"class":144}," add",[36,9034,141],{"class":42},[36,9036,9037],{"class":62}," (",[36,9039,6764],{"class":3474},[36,9041,694],{"class":62},[36,9043,8980],{"class":3474},[36,9045,352],{"class":62},[36,9047,3329],{"class":42},[36,9049,6681],{"class":62},[36,9051,1827],{"class":42},[36,9053,9054],{"class":62}," b;\n",[36,9056,9057],{"class":38,"line":76},[36,9058,54],{"emptyLinePlaceholder":53},[36,9060,9061,9063,9065],{"class":38,"line":92},[36,9062,672],{"class":42},[36,9064,675],{"class":42},[36,9066,925],{"class":62},[36,9068,9069],{"class":38,"line":97},[36,9070,9071],{"class":62},"  foo,\n",[36,9073,9074],{"class":38,"line":113},[36,9075,9076],{"class":62},"  add,\n",[36,9078,9079],{"class":38,"line":126},[36,9080,8996],{"class":62},[10,9082,9083],{},[1166,9084],{"alt":9085,"src":9086},"image-20250313161442778",".\u002Fassets\u002Fimage-20250313161442778.png",[10,9088,9089,9090,9093,9094,9097,9098,9101],{},"​\t同时会对",[374,9091,9092],{},"esmodules规范","的各个模块进行统一的集成。在生产环境中，Vite 使用 Rollup 作为打包工具。Rollup 会",[374,9095,9096],{},"根据动态导入的代码自动进行模块分割","，将每个动态导入的模块",[374,9099,9100],{},"打包成单独的文件（chunk）","。只有在需要时才会加载对应的模块文件，从而实现懒加载。",[207,9103,9105,417],{"id":9104},"vue-组件导出辅助函数",[374,9106,9107],{},"Vue 组件导出辅助函数",[26,9109,9111],{"className":6402,"code":9110,"language":6404,"meta":31,"style":31},"x var _export_sfc = (sfc, props) => { \u002F\u002Fsrc:Vue 组件对象（通常是 .vue 文件中定义的组件）。  \u002F\u002F一个包含键值对的数组，表示需要绑定到组件上的额外属性。  const target = sfc.__vccOpts || sfc; \u002F\u002F 获取组件的选项对象  for (const [key, val] of props) {   \u002F\u002F 遍历传入的属性    target[key] = val;                \u002F\u002F 将属性绑定到组件选项对象上  }  return target;                      \u002F\u002F 返回修改后的组件选项对象};export { _export_sfc as default };    \n",[33,9112,9113],{"__ignoreMap":31},[36,9114,9115,9118,9120,9123,9125,9127,9130,9132,9135,9137,9139,9142,9145,9148,9151,9154,9157],{"class":38,"line":39},[36,9116,9117],{"class":62},"x ",[36,9119,1693],{"class":42},[36,9121,9122],{"class":144}," _export_sfc",[36,9124,141],{"class":42},[36,9126,9037],{"class":62},[36,9128,9129],{"class":3474},"sfc",[36,9131,694],{"class":62},[36,9133,9134],{"class":3474},"props",[36,9136,352],{"class":62},[36,9138,3329],{"class":42},[36,9140,9141],{"class":62}," { ",[36,9143,9144],{"class":72},"\u002F\u002Fsrc:Vue 组件对象（通常是 .vue 文件中定义的组件）。",[36,9146,9147],{"class":72},"  \u002F\u002F一个包含键值对的数组，表示需要绑定到组件上的额外属性。  const target = sfc.__vccOpts || sfc;",[36,9149,9150],{"class":72}," \u002F\u002F 获取组件的选项对象  for (const [key, val] of props) {",[36,9152,9153],{"class":72},"   \u002F\u002F 遍历传入的属性    target[key] = val;",[36,9155,9156],{"class":72},"                \u002F\u002F 将属性绑定到组件选项对象上  }  return target;",[36,9158,9159],{"class":72},"                      \u002F\u002F 返回修改后的组件选项对象};export { _export_sfc as default };\n",[10,9161,9162,9163,9165],{},"​\t这段代码是一个 ",[374,9164,9107],{},"，通常由工具（如 Vite 或 Rollup）在打包 Vue 项目时自动生成，用于处理 Vue 组件的导出和属性绑定。以下是对代码的详细解析：",[10,9167,9168],{},[374,9169,9170,9173],{},[33,9171,9172],{},"_export_sfc"," 函数",[391,9175,9176,9190,9208],{},[394,9177,9178,9179],{},"作用：",[391,9180,9181,9187],{},[394,9182,9183,9184,9186],{},"这是一个辅助函数，用于将额外的属性（",[33,9185,9134],{},"）绑定到 Vue 组件的选项对象上。",[394,9188,9189],{},"它通常在 Vue 3 的单文件组件（SFC）中被使用，用于处理组件的导出。",[394,9191,9192,9193],{},"参数：",[391,9194,9195,9203],{},[394,9196,9197,9199,9200,9202],{},[33,9198,9129],{},"：Vue 组件对象（通常是 ",[33,9201,6253],{}," 文件中定义的组件）。",[394,9204,9205,9207],{},[33,9206,9134],{},"：一个包含键值对的数组，表示需要绑定到组件上的额外属性。",[394,9209,9210,9211],{},"返回值：",[391,9212,9213],{},[394,9214,9215],{},"返回修改后的组件对象。",[10,9217,9218],{},[374,9219,9220],{},[33,9221,9222],{},"sfc.__vccOpts || sfc",[391,9224,9225,9259],{},[394,9226,9227,3718,9230],{},[33,9228,9229],{},"sfc.__vccOpts",[391,9231,9232,9250],{},[394,9233,9234,9235,9238,9239,9242,9243,2967,9245,2967,9248,6039],{},"在 Vue 3 中，",[33,9236,9237],{},"__vccOpts"," 是",[374,9240,9241],{},"组件的内部选项对象","，包含组件的配置（如 ",[33,9244,9134],{},[33,9246,9247],{},"methods",[33,9249,1764],{},[394,9251,9252,9253,9255,9256,9258],{},"如果 ",[33,9254,9129],{}," 是一个经过编译的 Vue 组件对象，则会有 ",[33,9257,9237],{}," 属性。",[394,9260,9261,3718,9263],{},[33,9262,9129],{},[391,9264,9265],{},[394,9266,9252,9267,9269,9270,9272,9273,9276,9277,9279],{},[33,9268,9129],{}," 没有 ",[33,9271,9237],{}," 属性（例如",[374,9274,9275],{},"未经过编译的组件","），则直接使用 ",[33,9278,9129],{}," 本身。",[10,9281,9282],{},[374,9283,550,9284],{},[33,9285,9286],{},"for (const [key, val] of props)",[391,9288,9289,9295],{},[394,9290,9291,9292,9294],{},"遍历 ",[33,9293,9134],{}," 数组，将每个键值对绑定到组件的选项对象上。",[394,9296,9297,9299,9300],{},[33,9298,9134],{}," 的结构：\n",[391,9301,9302,9310],{},[394,9303,9304,9306,9307,486],{},[33,9305,9134],{}," 是一个数组，形如：",[33,9308,9309],{},"[['key1', value1], ['key2', value2]]",[394,9311,9312,9313,1690,9315,486],{},"每个键值对会被解构为 ",[33,9314,4657],{},[33,9316,9317],{},"val",[10,9319,9320],{},[374,9321,1131,9322],{},[33,9323,9324],{},"target[key] = val",[391,9326,9327,9332],{},[394,9328,6321,9329,9331],{},[33,9330,9134],{}," 中的每个键值对绑定到组件的选项对象上。",[394,9333,9334,9335,9337,9338,9341,9342,9345,9346,486],{},"例如，如果 ",[33,9336,9134],{}," 是 ",[33,9339,9340],{},"[['name', 'MyComponent']]","，那么 ",[33,9343,9344],{},"target.name"," 会被设置为 ",[33,9347,9348],{},"'MyComponent'",[10,9350,9351],{},[374,9352,9353,9354],{},"5. ",[33,9355,9356],{},"export { _export_sfc as default }",[391,9358,9359],{},[394,9360,6321,9361,9363],{},[33,9362,9172],{}," 函数作为默认导出，供其他模块使用。",[10,9365,9366,9367,417],{},"假设有一个 Vue 组件 ",[33,9368,9369],{},"MyComponent.vue",[26,9371,9373],{"className":642,"code":9372,"language":644,"meta":31,"style":31},"\u003Ctemplate>\n  \u003Cdiv>Hello, Vue!\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: 'MyComponent',\n};\n\u003C\u002Fscript>\n",[33,9374,9375,9383,9396,9404,9408,9416,9424,9432,9436],{"__ignoreMap":31},[36,9376,9377,9379,9381],{"class":38,"line":39},[36,9378,651],{"class":62},[36,9380,860],{"class":654},[36,9382,667],{"class":62},[36,9384,9385,9387,9389,9392,9394],{"class":38,"line":50},[36,9386,867],{"class":62},[36,9388,870],{"class":654},[36,9390,9391],{"class":62},">Hello, Vue!\u003C\u002F",[36,9393,870],{"class":654},[36,9395,667],{"class":62},[36,9397,9398,9400,9402],{"class":38,"line":57},[36,9399,707],{"class":62},[36,9401,860],{"class":654},[36,9403,667],{"class":62},[36,9405,9406],{"class":38,"line":76},[36,9407,54],{"emptyLinePlaceholder":53},[36,9409,9410,9412,9414],{"class":38,"line":92},[36,9411,651],{"class":62},[36,9413,655],{"class":654},[36,9415,667],{"class":62},[36,9417,9418,9420,9422],{"class":38,"line":97},[36,9419,672],{"class":42},[36,9421,675],{"class":42},[36,9423,925],{"class":62},[36,9425,9426,9428,9430],{"class":38,"line":113},[36,9427,688],{"class":62},[36,9429,9348],{"class":46},[36,9431,1340],{"class":62},[36,9433,9434],{"class":38,"line":126},[36,9435,8996],{"class":62},[36,9437,9438,9440,9442],{"class":38,"line":131},[36,9439,707],{"class":62},[36,9441,655],{"class":654},[36,9443,667],{"class":62},[10,9445,9446],{},"在打包时，工具可能会生成以下代码：",[26,9448,9450],{"className":6402,"code":9449,"language":6404,"meta":31,"style":31},"import { _export_sfc } from '.\u002Fplugin-vue_export-helper.mjs';\n\nconst MyComponent = {\n  name: 'MyComponent',\n  render() {\n    return h('div', 'Hello, Vue!');\n  },\n};\n\n\u002F\u002F 使用 _export_sfc 函数绑定额外属性\nexport default _export_sfc(MyComponent, [['name', 'MyComponent']]);\n",[33,9451,9452,9466,9470,9481,9489,9496,9513,9517,9521,9525,9530],{"__ignoreMap":31},[36,9453,9454,9456,9459,9461,9464],{"class":38,"line":39},[36,9455,43],{"class":42},[36,9457,9458],{"class":62}," { _export_sfc } ",[36,9460,66],{"class":42},[36,9462,9463],{"class":46}," '.\u002Fplugin-vue_export-helper.mjs'",[36,9465,1523],{"class":62},[36,9467,9468],{"class":38,"line":50},[36,9469,54],{"emptyLinePlaceholder":53},[36,9471,9472,9474,9477,9479],{"class":38,"line":57},[36,9473,134],{"class":42},[36,9475,9476],{"class":137}," MyComponent",[36,9478,141],{"class":42},[36,9480,925],{"class":62},[36,9482,9483,9485,9487],{"class":38,"line":76},[36,9484,688],{"class":62},[36,9486,9348],{"class":46},[36,9488,1340],{"class":62},[36,9490,9491,9494],{"class":38,"line":92},[36,9492,9493],{"class":144},"  render",[36,9495,945],{"class":62},[36,9497,9498,9500,9502,9504,9506,9508,9511],{"class":38,"line":97},[36,9499,950],{"class":42},[36,9501,6421],{"class":144},[36,9503,165],{"class":62},[36,9505,6426],{"class":46},[36,9507,694],{"class":62},[36,9509,9510],{"class":46},"'Hello, Vue!'",[36,9512,6445],{"class":62},[36,9514,9515],{"class":38,"line":113},[36,9516,1376],{"class":62},[36,9518,9519],{"class":38,"line":126},[36,9520,8996],{"class":62},[36,9522,9523],{"class":38,"line":131},[36,9524,54],{"emptyLinePlaceholder":53},[36,9526,9527],{"class":38,"line":151},[36,9528,9529],{"class":72},"\u002F\u002F 使用 _export_sfc 函数绑定额外属性\n",[36,9531,9532,9534,9536,9538,9541,9544,9546,9548],{"class":38,"line":156},[36,9533,672],{"class":42},[36,9535,675],{"class":42},[36,9537,9122],{"class":144},[36,9539,9540],{"class":62},"(MyComponent, [[",[36,9542,9543],{"class":46},"'name'",[36,9545,694],{"class":62},[36,9547,9348],{"class":46},[36,9549,9550],{"class":62},"]]);\n",[10,9552,9553,9554],{},"​\t以上的函数和代码都来自：",[374,9555,9556],{},[33,9557,9558],{},"plugin-vue_export-helper.mjs",[10,9560,9561],{},"是一个常见的辅助文件，用于处理 Vue 组件的导出。",[207,9563,9565,417],{"id":9564},"vue-3-插件安装辅助工具",[374,9566,9567],{},"Vue 3 插件安装辅助工具",[10,9569,9570],{},"代码：",[26,9572,9574],{"className":6402,"code":9573,"language":6404,"meta":31,"style":31},"\u002F\u002F 引入 Vue 的 NOOP（空函数），用于定义空的 install 方法\nimport { NOOP } from '@vue\u002Fshared';\n\n\u002F**\n * 为组件添加全局注册功能的辅助函数\n * @param {Object} main - 主组件对象，通常是 Vue 组件\n * @param {Object} [extra] - 可选的额外子组件对象，键为子组件名称，值为子组件对象\n * @returns {Object} - 返回增强后的主组件对象，带有 install 方法\n *\u002F\nconst withInstall = (main, extra) => {\n  \u002F\u002F 为主组件添加 install 方法，用于全局注册组件\n  main.install = (app) => {\n    \u002F\u002F 遍历主组件和额外子组件，将它们注册为全局组件\n    for (const comp of [main, ...Object.values(extra != null ? extra : {})]) {\n      app.component(comp.name, comp); \u002F\u002F 使用 Vue 的 app.component 方法注册组件\n    }\n  };\n\n  \u002F\u002F 如果存在额外子组件，将它们挂载到主组件上，便于通过主组件访问\n  if (extra) {\n    for (const [key, comp] of Object.entries(extra)) {\n      main[key] = comp; \u002F\u002F 将子组件作为主组件的属性\n    }\n  }\n\n  \u002F\u002F 返回增强后的主组件对象\n  return main;\n};\n\n\u002F**\n * 为函数添加全局注册功能的辅助函数\n * @param {Function} fn - 需要注册的函数\n * @param {string} name - 注册到 Vue 全局属性的名称（如 $myFunction）\n * @returns {Function} - 返回增强后的函数，带有 install 方法\n *\u002F\nconst withInstallFunction = (fn, name) => {\n  \u002F\u002F 为函数添加 install 方法，用于全局注册\n  fn.install = (app) => {\n    fn._context = app._context; \u002F\u002F 保存 Vue 应用的上下文\n    app.config.globalProperties[name] = fn; \u002F\u002F 将函数挂载到 Vue 的全局属性\n  };\n\n  \u002F\u002F 返回增强后的函数\n  return fn;\n};\n\n\u002F**\n * 为指令添加全局注册功能的辅助函数\n * @param {Object} directive - 需要注册的指令对象\n * @param {string} name - 指令的名称\n * @returns {Object} - 返回增强后的指令对象，带有 install 方法\n *\u002F\nconst withInstallDirective = (directive, name) => {\n  \u002F\u002F 为指令添加 install 方法，用于全局注册\n  directive.install = (app) => {\n    app.directive(name, directive); \u002F\u002F 使用 Vue 的 app.directive 方法注册指令\n  };\n\n  \u002F\u002F 返回增强后的指令对象\n  return directive;\n};\n\n\u002F**\n * 为组件添加一个空的 install 方法的辅助函数\n * @param {Object} component - 需要添加空 install 方法的组件\n * @returns {Object} - 返回增强后的组件，带有空的 install 方法\n *\u002F\nconst withNoopInstall = (component) => {\n  component.install = NOOP; \u002F\u002F 定义一个空的 install 方法\n  return component;\n};\n\n\u002F\u002F 导出所有辅助函数，供其他模块使用\nexport { withInstall, withInstallDirective, withInstallFunction, withNoopInstall };\n",[33,9575,9576,9581,9595,9599,9604,9609,9626,9640,9652,9657,9682,9687,9708,9713,9758,9772,9776,9781,9785,9790,9797,9830,9843,9847,9851,9855,9860,9867,9871,9875,9879,9884,9899,9914,9925,9929,9953,9958,9977,9990,10003,10007,10011,10016,10023,10027,10031,10035,10040,10054,10067,10079,10084,10109,10115,10135,10149,10154,10159,10165,10173,10178,10183,10188,10194,10209,10221,10226,10246,10263,10271,10276,10281,10287],{"__ignoreMap":31},[36,9577,9578],{"class":38,"line":39},[36,9579,9580],{"class":72},"\u002F\u002F 引入 Vue 的 NOOP（空函数），用于定义空的 install 方法\n",[36,9582,9583,9585,9588,9590,9593],{"class":38,"line":50},[36,9584,43],{"class":42},[36,9586,9587],{"class":62}," { NOOP } ",[36,9589,66],{"class":42},[36,9591,9592],{"class":46}," '@vue\u002Fshared'",[36,9594,1523],{"class":62},[36,9596,9597],{"class":38,"line":57},[36,9598,54],{"emptyLinePlaceholder":53},[36,9600,9601],{"class":38,"line":76},[36,9602,9603],{"class":72},"\u002F**\n",[36,9605,9606],{"class":38,"line":92},[36,9607,9608],{"class":72}," * 为组件添加全局注册功能的辅助函数\n",[36,9610,9611,9614,9617,9620,9623],{"class":38,"line":97},[36,9612,9613],{"class":72}," * ",[36,9615,9616],{"class":42},"@param",[36,9618,9619],{"class":144}," {Object}",[36,9621,9622],{"class":62}," main",[36,9624,9625],{"class":72}," - 主组件对象，通常是 Vue 组件\n",[36,9627,9628,9630,9632,9634,9637],{"class":38,"line":113},[36,9629,9613],{"class":72},[36,9631,9616],{"class":42},[36,9633,9619],{"class":144},[36,9635,9636],{"class":62}," [extra]",[36,9638,9639],{"class":72}," - 可选的额外子组件对象，键为子组件名称，值为子组件对象\n",[36,9641,9642,9644,9647,9649],{"class":38,"line":126},[36,9643,9613],{"class":72},[36,9645,9646],{"class":42},"@returns",[36,9648,9619],{"class":144},[36,9650,9651],{"class":72}," - 返回增强后的主组件对象，带有 install 方法\n",[36,9653,9654],{"class":38,"line":131},[36,9655,9656],{"class":72}," *\u002F\n",[36,9658,9659,9661,9664,9666,9668,9671,9673,9676,9678,9680],{"class":38,"line":151},[36,9660,134],{"class":42},[36,9662,9663],{"class":144}," withInstall",[36,9665,141],{"class":42},[36,9667,9037],{"class":62},[36,9669,9670],{"class":3474},"main",[36,9672,694],{"class":62},[36,9674,9675],{"class":3474},"extra",[36,9677,352],{"class":62},[36,9679,3329],{"class":42},[36,9681,925],{"class":62},[36,9683,9684],{"class":38,"line":156},[36,9685,9686],{"class":72},"  \u002F\u002F 为主组件添加 install 方法，用于全局注册组件\n",[36,9688,9689,9692,9695,9697,9699,9702,9704,9706],{"class":38,"line":174},[36,9690,9691],{"class":62},"  main.",[36,9693,9694],{"class":144},"install",[36,9696,141],{"class":42},[36,9698,9037],{"class":62},[36,9700,9701],{"class":3474},"app",[36,9703,352],{"class":62},[36,9705,3329],{"class":42},[36,9707,925],{"class":62},[36,9709,9710],{"class":38,"line":184},[36,9711,9712],{"class":72},"    \u002F\u002F 遍历主组件和额外子组件，将它们注册为全局组件\n",[36,9714,9715,9718,9720,9722,9725,9728,9731,9733,9736,9739,9742,9745,9747,9750,9753,9755],{"class":38,"line":189},[36,9716,9717],{"class":42},"    for",[36,9719,9037],{"class":62},[36,9721,134],{"class":42},[36,9723,9724],{"class":137}," comp",[36,9726,9727],{"class":42}," of",[36,9729,9730],{"class":62}," [main, ",[36,9732,4294],{"class":42},[36,9734,9735],{"class":62},"Object.",[36,9737,9738],{"class":144},"values",[36,9740,9741],{"class":62},"(extra ",[36,9743,9744],{"class":42},"!=",[36,9746,5922],{"class":137},[36,9748,9749],{"class":42}," ?",[36,9751,9752],{"class":62}," extra ",[36,9754,4433],{"class":42},[36,9756,9757],{"class":62}," {})]) {\n",[36,9759,9760,9763,9766,9769],{"class":38,"line":968},[36,9761,9762],{"class":62},"      app.",[36,9764,9765],{"class":144},"component",[36,9767,9768],{"class":62},"(comp.name, comp); ",[36,9770,9771],{"class":72},"\u002F\u002F 使用 Vue 的 app.component 方法注册组件\n",[36,9773,9774],{"class":38,"line":974},[36,9775,965],{"class":62},[36,9777,9778],{"class":38,"line":979},[36,9779,9780],{"class":62},"  };\n",[36,9782,9783],{"class":38,"line":1384},[36,9784,54],{"emptyLinePlaceholder":53},[36,9786,9787],{"class":38,"line":1392},[36,9788,9789],{"class":72},"  \u002F\u002F 如果存在额外子组件，将它们挂载到主组件上，便于通过主组件访问\n",[36,9791,9792,9794],{"class":38,"line":1406},[36,9793,3559],{"class":42},[36,9795,9796],{"class":62}," (extra) {\n",[36,9798,9799,9801,9803,9805,9808,9810,9812,9815,9818,9821,9824,9827],{"class":38,"line":1412},[36,9800,9717],{"class":42},[36,9802,9037],{"class":62},[36,9804,134],{"class":42},[36,9806,9807],{"class":62}," [",[36,9809,4657],{"class":137},[36,9811,694],{"class":62},[36,9813,9814],{"class":137},"comp",[36,9816,9817],{"class":62},"] ",[36,9819,9820],{"class":42},"of",[36,9822,9823],{"class":62}," Object.",[36,9825,9826],{"class":144},"entries",[36,9828,9829],{"class":62},"(extra)) {\n",[36,9831,9832,9835,9837,9840],{"class":38,"line":1420},[36,9833,9834],{"class":62},"      main[key] ",[36,9836,661],{"class":42},[36,9838,9839],{"class":62}," comp; ",[36,9841,9842],{"class":72},"\u002F\u002F 将子组件作为主组件的属性\n",[36,9844,9845],{"class":38,"line":1434},[36,9846,965],{"class":62},[36,9848,9849],{"class":38,"line":1439},[36,9850,971],{"class":62},[36,9852,9853],{"class":38,"line":1444},[36,9854,54],{"emptyLinePlaceholder":53},[36,9856,9857],{"class":38,"line":1452},[36,9858,9859],{"class":72},"  \u002F\u002F 返回增强后的主组件对象\n",[36,9861,9862,9864],{"class":38,"line":1466},[36,9863,3336],{"class":42},[36,9865,9866],{"class":62}," main;\n",[36,9868,9869],{"class":38,"line":1471},[36,9870,8996],{"class":62},[36,9872,9873],{"class":38,"line":1476},[36,9874,54],{"emptyLinePlaceholder":53},[36,9876,9877],{"class":38,"line":1481},[36,9878,9603],{"class":72},[36,9880,9881],{"class":38,"line":1490},[36,9882,9883],{"class":72}," * 为函数添加全局注册功能的辅助函数\n",[36,9885,9886,9888,9890,9893,9896],{"class":38,"line":1503},[36,9887,9613],{"class":72},[36,9889,9616],{"class":42},[36,9891,9892],{"class":144}," {Function}",[36,9894,9895],{"class":62}," fn",[36,9897,9898],{"class":72}," - 需要注册的函数\n",[36,9900,9901,9903,9905,9908,9911],{"class":38,"line":1511},[36,9902,9613],{"class":72},[36,9904,9616],{"class":42},[36,9906,9907],{"class":144}," {string}",[36,9909,9910],{"class":62}," name",[36,9912,9913],{"class":72}," - 注册到 Vue 全局属性的名称（如 $myFunction）\n",[36,9915,9916,9918,9920,9922],{"class":38,"line":1526},[36,9917,9613],{"class":72},[36,9919,9646],{"class":42},[36,9921,9892],{"class":144},[36,9923,9924],{"class":72}," - 返回增强后的函数，带有 install 方法\n",[36,9926,9927],{"class":38,"line":1548},[36,9928,9656],{"class":72},[36,9930,9931,9933,9936,9938,9940,9943,9945,9947,9949,9951],{"class":38,"line":1563},[36,9932,134],{"class":42},[36,9934,9935],{"class":144}," withInstallFunction",[36,9937,141],{"class":42},[36,9939,9037],{"class":62},[36,9941,9942],{"class":3474},"fn",[36,9944,694],{"class":62},[36,9946,748],{"class":3474},[36,9948,352],{"class":62},[36,9950,3329],{"class":42},[36,9952,925],{"class":62},[36,9954,9955],{"class":38,"line":1577},[36,9956,9957],{"class":72},"  \u002F\u002F 为函数添加 install 方法，用于全局注册\n",[36,9959,9960,9963,9965,9967,9969,9971,9973,9975],{"class":38,"line":1582},[36,9961,9962],{"class":62},"  fn.",[36,9964,9694],{"class":144},[36,9966,141],{"class":42},[36,9968,9037],{"class":62},[36,9970,9701],{"class":3474},[36,9972,352],{"class":62},[36,9974,3329],{"class":42},[36,9976,925],{"class":62},[36,9978,9979,9982,9984,9987],{"class":38,"line":2682},[36,9980,9981],{"class":62},"    fn._context ",[36,9983,661],{"class":42},[36,9985,9986],{"class":62}," app._context; ",[36,9988,9989],{"class":72},"\u002F\u002F 保存 Vue 应用的上下文\n",[36,9991,9992,9995,9997,10000],{"class":38,"line":2697},[36,9993,9994],{"class":62},"    app.config.globalProperties[name] ",[36,9996,661],{"class":42},[36,9998,9999],{"class":62}," fn; ",[36,10001,10002],{"class":72},"\u002F\u002F 将函数挂载到 Vue 的全局属性\n",[36,10004,10005],{"class":38,"line":2717},[36,10006,9780],{"class":62},[36,10008,10009],{"class":38,"line":2731},[36,10010,54],{"emptyLinePlaceholder":53},[36,10012,10013],{"class":38,"line":2739},[36,10014,10015],{"class":72},"  \u002F\u002F 返回增强后的函数\n",[36,10017,10018,10020],{"class":38,"line":2744},[36,10019,3336],{"class":42},[36,10021,10022],{"class":62}," fn;\n",[36,10024,10025],{"class":38,"line":5931},[36,10026,8996],{"class":62},[36,10028,10029],{"class":38,"line":5936},[36,10030,54],{"emptyLinePlaceholder":53},[36,10032,10033],{"class":38,"line":5948},[36,10034,9603],{"class":72},[36,10036,10037],{"class":38,"line":5954},[36,10038,10039],{"class":72}," * 为指令添加全局注册功能的辅助函数\n",[36,10041,10042,10044,10046,10048,10051],{"class":38,"line":5965},[36,10043,9613],{"class":72},[36,10045,9616],{"class":42},[36,10047,9619],{"class":144},[36,10049,10050],{"class":62}," directive",[36,10052,10053],{"class":72}," - 需要注册的指令对象\n",[36,10055,10056,10058,10060,10062,10064],{"class":38,"line":5971},[36,10057,9613],{"class":72},[36,10059,9616],{"class":42},[36,10061,9907],{"class":144},[36,10063,9910],{"class":62},[36,10065,10066],{"class":72}," - 指令的名称\n",[36,10068,10070,10072,10074,10076],{"class":38,"line":10069},51,[36,10071,9613],{"class":72},[36,10073,9646],{"class":42},[36,10075,9619],{"class":144},[36,10077,10078],{"class":72}," - 返回增强后的指令对象，带有 install 方法\n",[36,10080,10082],{"class":38,"line":10081},52,[36,10083,9656],{"class":72},[36,10085,10087,10089,10092,10094,10096,10099,10101,10103,10105,10107],{"class":38,"line":10086},53,[36,10088,134],{"class":42},[36,10090,10091],{"class":144}," withInstallDirective",[36,10093,141],{"class":42},[36,10095,9037],{"class":62},[36,10097,10098],{"class":3474},"directive",[36,10100,694],{"class":62},[36,10102,748],{"class":3474},[36,10104,352],{"class":62},[36,10106,3329],{"class":42},[36,10108,925],{"class":62},[36,10110,10112],{"class":38,"line":10111},54,[36,10113,10114],{"class":72},"  \u002F\u002F 为指令添加 install 方法，用于全局注册\n",[36,10116,10118,10121,10123,10125,10127,10129,10131,10133],{"class":38,"line":10117},55,[36,10119,10120],{"class":62},"  directive.",[36,10122,9694],{"class":144},[36,10124,141],{"class":42},[36,10126,9037],{"class":62},[36,10128,9701],{"class":3474},[36,10130,352],{"class":62},[36,10132,3329],{"class":42},[36,10134,925],{"class":62},[36,10136,10138,10141,10143,10146],{"class":38,"line":10137},56,[36,10139,10140],{"class":62},"    app.",[36,10142,10098],{"class":144},[36,10144,10145],{"class":62},"(name, directive); ",[36,10147,10148],{"class":72},"\u002F\u002F 使用 Vue 的 app.directive 方法注册指令\n",[36,10150,10152],{"class":38,"line":10151},57,[36,10153,9780],{"class":62},[36,10155,10157],{"class":38,"line":10156},58,[36,10158,54],{"emptyLinePlaceholder":53},[36,10160,10162],{"class":38,"line":10161},59,[36,10163,10164],{"class":72},"  \u002F\u002F 返回增强后的指令对象\n",[36,10166,10168,10170],{"class":38,"line":10167},60,[36,10169,3336],{"class":42},[36,10171,10172],{"class":62}," directive;\n",[36,10174,10176],{"class":38,"line":10175},61,[36,10177,8996],{"class":62},[36,10179,10181],{"class":38,"line":10180},62,[36,10182,54],{"emptyLinePlaceholder":53},[36,10184,10186],{"class":38,"line":10185},63,[36,10187,9603],{"class":72},[36,10189,10191],{"class":38,"line":10190},64,[36,10192,10193],{"class":72}," * 为组件添加一个空的 install 方法的辅助函数\n",[36,10195,10197,10199,10201,10203,10206],{"class":38,"line":10196},65,[36,10198,9613],{"class":72},[36,10200,9616],{"class":42},[36,10202,9619],{"class":144},[36,10204,10205],{"class":62}," component",[36,10207,10208],{"class":72}," - 需要添加空 install 方法的组件\n",[36,10210,10212,10214,10216,10218],{"class":38,"line":10211},66,[36,10213,9613],{"class":72},[36,10215,9646],{"class":42},[36,10217,9619],{"class":144},[36,10219,10220],{"class":72}," - 返回增强后的组件，带有空的 install 方法\n",[36,10222,10224],{"class":38,"line":10223},67,[36,10225,9656],{"class":72},[36,10227,10229,10231,10234,10236,10238,10240,10242,10244],{"class":38,"line":10228},68,[36,10230,134],{"class":42},[36,10232,10233],{"class":144}," withNoopInstall",[36,10235,141],{"class":42},[36,10237,9037],{"class":62},[36,10239,9765],{"class":3474},[36,10241,352],{"class":62},[36,10243,3329],{"class":42},[36,10245,925],{"class":62},[36,10247,10249,10252,10254,10257,10260],{"class":38,"line":10248},69,[36,10250,10251],{"class":62},"  component.install ",[36,10253,661],{"class":42},[36,10255,10256],{"class":137}," NOOP",[36,10258,10259],{"class":62},"; ",[36,10261,10262],{"class":72},"\u002F\u002F 定义一个空的 install 方法\n",[36,10264,10266,10268],{"class":38,"line":10265},70,[36,10267,3336],{"class":42},[36,10269,10270],{"class":62}," component;\n",[36,10272,10274],{"class":38,"line":10273},71,[36,10275,8996],{"class":62},[36,10277,10279],{"class":38,"line":10278},72,[36,10280,54],{"emptyLinePlaceholder":53},[36,10282,10284],{"class":38,"line":10283},73,[36,10285,10286],{"class":72},"\u002F\u002F 导出所有辅助函数，供其他模块使用\n",[36,10288,10290,10292],{"class":38,"line":10289},74,[36,10291,672],{"class":42},[36,10293,10294],{"class":62}," { withInstall, withInstallDirective, withInstallFunction, withNoopInstall };\n",[386,10296,10298],{"id":10297},"shallowref","shallowRef:",[10,10300,3291,10301,10304,10305,10308,10309,10311,10312,486],{},[33,10302,10303],{},"shallowRef"," 是 Vue 3 中的一个响应式 API，用于创建",[374,10306,10307],{},"浅层响应式引用","。它与 ",[33,10310,1750],{}," 类似，但有一个关键区别：",[374,10313,10314,10316],{},[33,10315,10303],{}," 只对其引用的值本身进行响应式处理，而不会递归地将对象内部的属性转为响应式",[3199,10318,10319,10335,10346],{},[394,10320,10321,10322],{},"浅层响应式：",[391,10323,10324,10329],{},[394,10325,10326,10328],{},[33,10327,10303],{}," 只追踪引用本身的变化，而不会递归地追踪对象内部的属性。",[394,10330,10331,10332,10334],{},"如果引用的值是一个对象，",[33,10333,10303],{}," 不会将对象的内部属性转为响应式。",[394,10336,10337,10338],{},"适用场景：",[391,10339,10340,10343],{},[394,10341,10342],{},"适用于需要存储大型不可变数据结构（如对象或数组），并且不希望 Vue 对其内部属性进行深度响应式处理的场景。",[394,10344,10345],{},"可以减少性能开销，尤其是在处理复杂数据时。",[394,10347,10348,10349,10351,10352],{},"与 ",[33,10350,1750],{}," 的区别：",[391,10353,10354,10359],{},[394,10355,10356,10358],{},[33,10357,1750],{}," 会递归地将对象的所有属性转为响应式。",[394,10360,10361,10363],{},[33,10362,10303],{}," 只处理引用本身的响应式，而不会递归处理对象内部的属性。",[10,10365,10366],{},"详细请看深度响应式的区别。",[367,10368,10370],{"id":10369},"tsconfigappjson","tsconfig.app.json:",[26,10372,10374],{"className":5218,"code":10373,"language":5220,"meta":31,"style":31},"{\n  \u002F\u002F 继承 Vue 官方提供的 TypeScript 配置文件\n  \u002F\u002F 该配置文件包含了 Vue 项目中常用的 DOM 类型定义和最佳实践\n  \"extends\": \"@vue\u002Ftsconfig\u002Ftsconfig.dom.json\",\n\n  \u002F\u002F TypeScript 编译器的选项配置\n  \"compilerOptions\": {\n    \u002F\u002F 指定 TypeScript 增量编译的缓存文件路径\n    \u002F\u002F 增量编译会将编译信息存储在这个文件中，以便下次编译时加快速度\n    \"tsBuildInfoFile\": \".\u002Fnode_modules\u002F.tmp\u002Ftsconfig.app.tsbuildinfo\",\n\n    \u002F\u002F 指定要包含的类型声明文件\n    \u002F\u002F 这里引入了 @element-plus\u002Ficons-vue 的类型定义，方便在项目中使用该库的类型\n    \"types\": [\"@element-plus\u002Ficons-vue\"],\n\n    \u002F* Linting 配置项，用于提高代码质量和可维护性 *\u002F\n\n    \u002F\u002F 启用 TypeScript 的严格模式\n    \u002F\u002F 严格模式会启用一系列严格的类型检查规则（如 noImplicitAny、strictNullChecks 等）\n    \"strict\": true,\n\n    \u002F\u002F 是否生成编译后的文件\n    \u002F\u002F 设置为 false，表示允许生成编译后的文件（如 .js 文件）\n    \"noEmit\": false,\n\n    \u002F\u002F 是否允许显式导入 .ts 文件\n    \u002F\u002F 设置为 false，表示不允许在导入模块时使用 .ts 扩展名（如 import '.\u002Ffile.ts'）\n    \"allowImportingTsExtensions\": false,\n\n    \u002F\u002F 启用 TypeScript 项目引用功能\n    \u002F\u002F 当一个项目被另一个项目引用时，composite 必须设置为 true\n    \u002F\u002F 它还要求 declaration 和 declarationMap 选项也被启用（通常在继承的配置中定义）\n    \"composite\": true,\n\n    \u002F\u002F 禁止在代码中声明未使用的局部变量\n    \u002F\u002F 如果有未使用的变量，编译器会报错，帮助保持代码整洁\n    \"noUnusedLocals\": true,\n\n    \u002F\u002F 禁止在函数中声明未使用的参数\n    \u002F\u002F 如果有未使用的参数，编译器会报错，帮助保持代码整洁\n    \"noUnusedParameters\": true,\n\n    \u002F\u002F 禁止 switch 语句中的 case 分支没有 break 或 return 导致意外执行下一个分支的情况\n    \u002F\u002F 如果没有明确的 break 或 return，编译器会报错\n    \"noFallthroughCasesInSwitch\": true,\n\n    \u002F\u002F 禁止导入模块时未显式使用的副作用\n    \u002F\u002F 例如，import '.\u002Ffile' 会被认为是有副作用的导入\n    \u002F\u002F 如果没有显式使用导入内容，编译器会报错\n    \"noUncheckedSideEffectImports\": true\n  },\n\n  \u002F\u002F 指定要包含在编译中的文件\n  \"include\": [\n    \u002F\u002F 包括 src 目录下的所有 TypeScript 文件\n    \"src\u002F**\u002F*.ts\",\n\n    \u002F\u002F 包括 src 目录下的所有带 JSX 的 TypeScript 文件\n    \"src\u002F**\u002F*.tsx\",\n\n    \u002F\u002F 包括 src 目录下的所有 Vue 单文件组件\n    \"src\u002F**\u002F*.vue\"\n  ]\n}\n",[33,10375,10376,10380,10385,10390,10402,10406,10411,10419,10424,10429,10441,10445,10450,10455,10469,10473,10478,10482,10487,10492,10503,10507,10512,10517,10529,10533,10538,10543,10554,10558,10563,10568,10573,10584,10588,10593,10598,10609,10613,10618,10623,10634,10638,10643,10648,10659,10663,10668,10673,10678,10688,10692,10696,10701,10709,10714,10721,10725,10730,10737,10741,10746,10751,10756],{"__ignoreMap":31},[36,10377,10378],{"class":38,"line":39},[36,10379,6673],{"class":62},[36,10381,10382],{"class":38,"line":50},[36,10383,10384],{"class":72},"  \u002F\u002F 继承 Vue 官方提供的 TypeScript 配置文件\n",[36,10386,10387],{"class":38,"line":57},[36,10388,10389],{"class":72},"  \u002F\u002F 该配置文件包含了 Vue 项目中常用的 DOM 类型定义和最佳实践\n",[36,10391,10392,10395,10397,10400],{"class":38,"line":76},[36,10393,10394],{"class":137},"  \"extends\"",[36,10396,1517],{"class":62},[36,10398,10399],{"class":46},"\"@vue\u002Ftsconfig\u002Ftsconfig.dom.json\"",[36,10401,1340],{"class":62},[36,10403,10404],{"class":38,"line":92},[36,10405,54],{"emptyLinePlaceholder":53},[36,10407,10408],{"class":38,"line":97},[36,10409,10410],{"class":72},"  \u002F\u002F TypeScript 编译器的选项配置\n",[36,10412,10413,10416],{"class":38,"line":113},[36,10414,10415],{"class":137},"  \"compilerOptions\"",[36,10417,10418],{"class":62},": {\n",[36,10420,10421],{"class":38,"line":126},[36,10422,10423],{"class":72},"    \u002F\u002F 指定 TypeScript 增量编译的缓存文件路径\n",[36,10425,10426],{"class":38,"line":131},[36,10427,10428],{"class":72},"    \u002F\u002F 增量编译会将编译信息存储在这个文件中，以便下次编译时加快速度\n",[36,10430,10431,10434,10436,10439],{"class":38,"line":151},[36,10432,10433],{"class":137},"    \"tsBuildInfoFile\"",[36,10435,1517],{"class":62},[36,10437,10438],{"class":46},"\".\u002Fnode_modules\u002F.tmp\u002Ftsconfig.app.tsbuildinfo\"",[36,10440,1340],{"class":62},[36,10442,10443],{"class":38,"line":156},[36,10444,54],{"emptyLinePlaceholder":53},[36,10446,10447],{"class":38,"line":174},[36,10448,10449],{"class":72},"    \u002F\u002F 指定要包含的类型声明文件\n",[36,10451,10452],{"class":38,"line":184},[36,10453,10454],{"class":72},"    \u002F\u002F 这里引入了 @element-plus\u002Ficons-vue 的类型定义，方便在项目中使用该库的类型\n",[36,10456,10457,10460,10463,10466],{"class":38,"line":189},[36,10458,10459],{"class":137},"    \"types\"",[36,10461,10462],{"class":62},": [",[36,10464,10465],{"class":46},"\"@element-plus\u002Ficons-vue\"",[36,10467,10468],{"class":62},"],\n",[36,10470,10471],{"class":38,"line":968},[36,10472,54],{"emptyLinePlaceholder":53},[36,10474,10475],{"class":38,"line":974},[36,10476,10477],{"class":72},"    \u002F* Linting 配置项，用于提高代码质量和可维护性 *\u002F\n",[36,10479,10480],{"class":38,"line":979},[36,10481,54],{"emptyLinePlaceholder":53},[36,10483,10484],{"class":38,"line":1384},[36,10485,10486],{"class":72},"    \u002F\u002F 启用 TypeScript 的严格模式\n",[36,10488,10489],{"class":38,"line":1392},[36,10490,10491],{"class":72},"    \u002F\u002F 严格模式会启用一系列严格的类型检查规则（如 noImplicitAny、strictNullChecks 等）\n",[36,10493,10494,10497,10499,10501],{"class":38,"line":1406},[36,10495,10496],{"class":137},"    \"strict\"",[36,10498,1517],{"class":62},[36,10500,3695],{"class":137},[36,10502,1340],{"class":62},[36,10504,10505],{"class":38,"line":1412},[36,10506,54],{"emptyLinePlaceholder":53},[36,10508,10509],{"class":38,"line":1420},[36,10510,10511],{"class":72},"    \u002F\u002F 是否生成编译后的文件\n",[36,10513,10514],{"class":38,"line":1434},[36,10515,10516],{"class":72},"    \u002F\u002F 设置为 false，表示允许生成编译后的文件（如 .js 文件）\n",[36,10518,10519,10522,10524,10527],{"class":38,"line":1439},[36,10520,10521],{"class":137},"    \"noEmit\"",[36,10523,1517],{"class":62},[36,10525,10526],{"class":137},"false",[36,10528,1340],{"class":62},[36,10530,10531],{"class":38,"line":1444},[36,10532,54],{"emptyLinePlaceholder":53},[36,10534,10535],{"class":38,"line":1452},[36,10536,10537],{"class":72},"    \u002F\u002F 是否允许显式导入 .ts 文件\n",[36,10539,10540],{"class":38,"line":1466},[36,10541,10542],{"class":72},"    \u002F\u002F 设置为 false，表示不允许在导入模块时使用 .ts 扩展名（如 import '.\u002Ffile.ts'）\n",[36,10544,10545,10548,10550,10552],{"class":38,"line":1471},[36,10546,10547],{"class":137},"    \"allowImportingTsExtensions\"",[36,10549,1517],{"class":62},[36,10551,10526],{"class":137},[36,10553,1340],{"class":62},[36,10555,10556],{"class":38,"line":1476},[36,10557,54],{"emptyLinePlaceholder":53},[36,10559,10560],{"class":38,"line":1481},[36,10561,10562],{"class":72},"    \u002F\u002F 启用 TypeScript 项目引用功能\n",[36,10564,10565],{"class":38,"line":1490},[36,10566,10567],{"class":72},"    \u002F\u002F 当一个项目被另一个项目引用时，composite 必须设置为 true\n",[36,10569,10570],{"class":38,"line":1503},[36,10571,10572],{"class":72},"    \u002F\u002F 它还要求 declaration 和 declarationMap 选项也被启用（通常在继承的配置中定义）\n",[36,10574,10575,10578,10580,10582],{"class":38,"line":1511},[36,10576,10577],{"class":137},"    \"composite\"",[36,10579,1517],{"class":62},[36,10581,3695],{"class":137},[36,10583,1340],{"class":62},[36,10585,10586],{"class":38,"line":1526},[36,10587,54],{"emptyLinePlaceholder":53},[36,10589,10590],{"class":38,"line":1548},[36,10591,10592],{"class":72},"    \u002F\u002F 禁止在代码中声明未使用的局部变量\n",[36,10594,10595],{"class":38,"line":1563},[36,10596,10597],{"class":72},"    \u002F\u002F 如果有未使用的变量，编译器会报错，帮助保持代码整洁\n",[36,10599,10600,10603,10605,10607],{"class":38,"line":1577},[36,10601,10602],{"class":137},"    \"noUnusedLocals\"",[36,10604,1517],{"class":62},[36,10606,3695],{"class":137},[36,10608,1340],{"class":62},[36,10610,10611],{"class":38,"line":1582},[36,10612,54],{"emptyLinePlaceholder":53},[36,10614,10615],{"class":38,"line":2682},[36,10616,10617],{"class":72},"    \u002F\u002F 禁止在函数中声明未使用的参数\n",[36,10619,10620],{"class":38,"line":2697},[36,10621,10622],{"class":72},"    \u002F\u002F 如果有未使用的参数，编译器会报错，帮助保持代码整洁\n",[36,10624,10625,10628,10630,10632],{"class":38,"line":2717},[36,10626,10627],{"class":137},"    \"noUnusedParameters\"",[36,10629,1517],{"class":62},[36,10631,3695],{"class":137},[36,10633,1340],{"class":62},[36,10635,10636],{"class":38,"line":2731},[36,10637,54],{"emptyLinePlaceholder":53},[36,10639,10640],{"class":38,"line":2739},[36,10641,10642],{"class":72},"    \u002F\u002F 禁止 switch 语句中的 case 分支没有 break 或 return 导致意外执行下一个分支的情况\n",[36,10644,10645],{"class":38,"line":2744},[36,10646,10647],{"class":72},"    \u002F\u002F 如果没有明确的 break 或 return，编译器会报错\n",[36,10649,10650,10653,10655,10657],{"class":38,"line":5931},[36,10651,10652],{"class":137},"    \"noFallthroughCasesInSwitch\"",[36,10654,1517],{"class":62},[36,10656,3695],{"class":137},[36,10658,1340],{"class":62},[36,10660,10661],{"class":38,"line":5936},[36,10662,54],{"emptyLinePlaceholder":53},[36,10664,10665],{"class":38,"line":5948},[36,10666,10667],{"class":72},"    \u002F\u002F 禁止导入模块时未显式使用的副作用\n",[36,10669,10670],{"class":38,"line":5954},[36,10671,10672],{"class":72},"    \u002F\u002F 例如，import '.\u002Ffile' 会被认为是有副作用的导入\n",[36,10674,10675],{"class":38,"line":5965},[36,10676,10677],{"class":72},"    \u002F\u002F 如果没有显式使用导入内容，编译器会报错\n",[36,10679,10680,10683,10685],{"class":38,"line":5971},[36,10681,10682],{"class":137},"    \"noUncheckedSideEffectImports\"",[36,10684,1517],{"class":62},[36,10686,10687],{"class":137},"true\n",[36,10689,10690],{"class":38,"line":10069},[36,10691,1376],{"class":62},[36,10693,10694],{"class":38,"line":10081},[36,10695,54],{"emptyLinePlaceholder":53},[36,10697,10698],{"class":38,"line":10086},[36,10699,10700],{"class":72},"  \u002F\u002F 指定要包含在编译中的文件\n",[36,10702,10703,10706],{"class":38,"line":10111},[36,10704,10705],{"class":137},"  \"include\"",[36,10707,10708],{"class":62},": [\n",[36,10710,10711],{"class":38,"line":10117},[36,10712,10713],{"class":72},"    \u002F\u002F 包括 src 目录下的所有 TypeScript 文件\n",[36,10715,10716,10719],{"class":38,"line":10137},[36,10717,10718],{"class":46},"    \"src\u002F**\u002F*.ts\"",[36,10720,1340],{"class":62},[36,10722,10723],{"class":38,"line":10151},[36,10724,54],{"emptyLinePlaceholder":53},[36,10726,10727],{"class":38,"line":10156},[36,10728,10729],{"class":72},"    \u002F\u002F 包括 src 目录下的所有带 JSX 的 TypeScript 文件\n",[36,10731,10732,10735],{"class":38,"line":10161},[36,10733,10734],{"class":46},"    \"src\u002F**\u002F*.tsx\"",[36,10736,1340],{"class":62},[36,10738,10739],{"class":38,"line":10167},[36,10740,54],{"emptyLinePlaceholder":53},[36,10742,10743],{"class":38,"line":10175},[36,10744,10745],{"class":72},"    \u002F\u002F 包括 src 目录下的所有 Vue 单文件组件\n",[36,10747,10748],{"class":38,"line":10180},[36,10749,10750],{"class":46},"    \"src\u002F**\u002F*.vue\"\n",[36,10752,10753],{"class":38,"line":10185},[36,10754,10755],{"class":62},"  ]\n",[36,10757,10758],{"class":38,"line":10190},[36,10759,702],{"class":62},[367,10761,10763],{"id":10762},"tsconfignodejson","tsconfig.node.json",[26,10765,10767],{"className":5218,"code":10766,"language":5220,"meta":31,"style":31},"{\n  \"compilerOptions\": {\n    \u002F\u002F 指定 TypeScript 增量编译的缓存文件路径\n    \u002F\u002F 增量编译会将编译信息存储在这个文件中，以便下次编译时加快速度\n    \"tsBuildInfoFile\": \".\u002Fnode_modules\u002F.tmp\u002Ftsconfig.node.tsbuildinfo\",\n\n    \u002F\u002F 指定 ECMAScript 的目标版本\n    \u002F\u002F 这里设置为 ES2022，表示编译后的代码将符合 ES2022 的规范\n    \"target\": \"ES2022\",\n\n    \u002F\u002F 指定要包含的库\n    \u002F\u002F \"ES2023\" 包含最新的 ECMAScript 特性\n    \u002F\u002F \"DOM\" 包含浏览器环境的 DOM 类型定义\n    \"lib\": [\"ES2023\", \"DOM\"],\n\n    \u002F\u002F 指定模块系统\n    \u002F\u002F \"ESNext\" 表示使用最新的 ECMAScript 模块系统\n    \"module\": \"ESNext\",\n\n    \u002F\u002F 跳过库文件的类型检查\n    \u002F\u002F 例如，跳过 node_modules 中的类型检查，以加快编译速度\n    \"skipLibCheck\": true,\n\n    \u002F\u002F 启用 TypeScript 项目引用功能\n    \u002F\u002F 当一个项目被另一个项目引用时，composite 必须设置为 true\n    \"composite\": true,\n\n    \u002F* Bundler mode 配置项 *\u002F\n\n    \u002F\u002F 指定模块解析策略\n    \u002F\u002F \"bundler\" 表示使用打包工具（如 Vite、Webpack）的模块解析方式\n    \"moduleResolution\": \"bundler\",\n\n    \u002F\u002F 强制每个文件都被视为独立的模块\n    \u002F\u002F 这是为了兼容打包工具的行为\n    \"isolatedModules\": true,\n\n    \u002F\u002F 强制模块检测\n    \u002F\u002F \"force\" 表示即使没有显式的导入或导出，也会将文件视为模块\n    \"moduleDetection\": \"force\",\n\n    \u002F\u002F 是否生成编译后的文件\n    \u002F\u002F 设置为 false，表示允许生成编译后的文件（如 .js 文件）\n    \"noEmit\": false,\n\n    \u002F* Linting 配置项，用于提高代码质量和可维护性 *\u002F\n\n    \u002F\u002F 启用 TypeScript 的严格模式\n    \u002F\u002F 严格模式会启用一系列严格的类型检查规则（如 noImplicitAny、strictNullChecks 等）\n    \"strict\": true,\n\n    \u002F\u002F 禁止在代码中声明未使用的局部变量\n    \u002F\u002F 如果有未使用的变量，编译器会报错，帮助保持代码整洁\n    \"noUnusedLocals\": true,\n\n    \u002F\u002F 禁止在函数中声明未使用的参数\n    \u002F\u002F 如果有未使用的参数，编译器会报错，帮助保持代码整洁\n    \"noUnusedParameters\": true,\n\n    \u002F\u002F 禁止 switch 语句中的 case 分支没有 break 或 return 导致意外执行下一个分支的情况\n    \u002F\u002F 如果没有明确的 break 或 return，编译器会报错\n    \"noFallthroughCasesInSwitch\": true,\n\n    \u002F\u002F 禁止导入模块时未显式使用的副作用\n    \u002F\u002F 例如，import '.\u002Ffile' 会被认为是有副作用的导入\n    \u002F\u002F 如果没有显式使用导入内容，编译器会报错\n    \"noUncheckedSideEffectImports\": true\n  },\n\n  \u002F\u002F 指定要包含在编译中的文件\n  \"include\": [\n    \u002F\u002F 包括 vite.config.ts 文件\n    \u002F\u002F 这是 Vite 的配置文件，通常需要单独编译\n    \"vite.config.ts\"\n  ]\n}\n",[33,10768,10769,10773,10779,10783,10787,10798,10802,10807,10812,10824,10828,10833,10838,10843,10860,10864,10869,10874,10886,10890,10895,10900,10911,10915,10919,10923,10933,10937,10942,10946,10951,10956,10968,10972,10977,10982,10993,10997,11002,11007,11019,11023,11027,11031,11041,11045,11049,11053,11057,11061,11071,11075,11079,11083,11093,11097,11101,11105,11115,11119,11123,11127,11137,11141,11145,11149,11153,11161,11165,11169,11173,11179,11184,11189,11194,11199],{"__ignoreMap":31},[36,10770,10771],{"class":38,"line":39},[36,10772,6673],{"class":62},[36,10774,10775,10777],{"class":38,"line":50},[36,10776,10415],{"class":137},[36,10778,10418],{"class":62},[36,10780,10781],{"class":38,"line":57},[36,10782,10423],{"class":72},[36,10784,10785],{"class":38,"line":76},[36,10786,10428],{"class":72},[36,10788,10789,10791,10793,10796],{"class":38,"line":92},[36,10790,10433],{"class":137},[36,10792,1517],{"class":62},[36,10794,10795],{"class":46},"\".\u002Fnode_modules\u002F.tmp\u002Ftsconfig.node.tsbuildinfo\"",[36,10797,1340],{"class":62},[36,10799,10800],{"class":38,"line":97},[36,10801,54],{"emptyLinePlaceholder":53},[36,10803,10804],{"class":38,"line":113},[36,10805,10806],{"class":72},"    \u002F\u002F 指定 ECMAScript 的目标版本\n",[36,10808,10809],{"class":38,"line":126},[36,10810,10811],{"class":72},"    \u002F\u002F 这里设置为 ES2022，表示编译后的代码将符合 ES2022 的规范\n",[36,10813,10814,10817,10819,10822],{"class":38,"line":131},[36,10815,10816],{"class":137},"    \"target\"",[36,10818,1517],{"class":62},[36,10820,10821],{"class":46},"\"ES2022\"",[36,10823,1340],{"class":62},[36,10825,10826],{"class":38,"line":151},[36,10827,54],{"emptyLinePlaceholder":53},[36,10829,10830],{"class":38,"line":156},[36,10831,10832],{"class":72},"    \u002F\u002F 指定要包含的库\n",[36,10834,10835],{"class":38,"line":174},[36,10836,10837],{"class":72},"    \u002F\u002F \"ES2023\" 包含最新的 ECMAScript 特性\n",[36,10839,10840],{"class":38,"line":184},[36,10841,10842],{"class":72},"    \u002F\u002F \"DOM\" 包含浏览器环境的 DOM 类型定义\n",[36,10844,10845,10848,10850,10853,10855,10858],{"class":38,"line":189},[36,10846,10847],{"class":137},"    \"lib\"",[36,10849,10462],{"class":62},[36,10851,10852],{"class":46},"\"ES2023\"",[36,10854,694],{"class":62},[36,10856,10857],{"class":46},"\"DOM\"",[36,10859,10468],{"class":62},[36,10861,10862],{"class":38,"line":968},[36,10863,54],{"emptyLinePlaceholder":53},[36,10865,10866],{"class":38,"line":974},[36,10867,10868],{"class":72},"    \u002F\u002F 指定模块系统\n",[36,10870,10871],{"class":38,"line":979},[36,10872,10873],{"class":72},"    \u002F\u002F \"ESNext\" 表示使用最新的 ECMAScript 模块系统\n",[36,10875,10876,10879,10881,10884],{"class":38,"line":1384},[36,10877,10878],{"class":137},"    \"module\"",[36,10880,1517],{"class":62},[36,10882,10883],{"class":46},"\"ESNext\"",[36,10885,1340],{"class":62},[36,10887,10888],{"class":38,"line":1392},[36,10889,54],{"emptyLinePlaceholder":53},[36,10891,10892],{"class":38,"line":1406},[36,10893,10894],{"class":72},"    \u002F\u002F 跳过库文件的类型检查\n",[36,10896,10897],{"class":38,"line":1412},[36,10898,10899],{"class":72},"    \u002F\u002F 例如，跳过 node_modules 中的类型检查，以加快编译速度\n",[36,10901,10902,10905,10907,10909],{"class":38,"line":1420},[36,10903,10904],{"class":137},"    \"skipLibCheck\"",[36,10906,1517],{"class":62},[36,10908,3695],{"class":137},[36,10910,1340],{"class":62},[36,10912,10913],{"class":38,"line":1434},[36,10914,54],{"emptyLinePlaceholder":53},[36,10916,10917],{"class":38,"line":1439},[36,10918,10562],{"class":72},[36,10920,10921],{"class":38,"line":1444},[36,10922,10567],{"class":72},[36,10924,10925,10927,10929,10931],{"class":38,"line":1452},[36,10926,10577],{"class":137},[36,10928,1517],{"class":62},[36,10930,3695],{"class":137},[36,10932,1340],{"class":62},[36,10934,10935],{"class":38,"line":1466},[36,10936,54],{"emptyLinePlaceholder":53},[36,10938,10939],{"class":38,"line":1471},[36,10940,10941],{"class":72},"    \u002F* Bundler mode 配置项 *\u002F\n",[36,10943,10944],{"class":38,"line":1476},[36,10945,54],{"emptyLinePlaceholder":53},[36,10947,10948],{"class":38,"line":1481},[36,10949,10950],{"class":72},"    \u002F\u002F 指定模块解析策略\n",[36,10952,10953],{"class":38,"line":1490},[36,10954,10955],{"class":72},"    \u002F\u002F \"bundler\" 表示使用打包工具（如 Vite、Webpack）的模块解析方式\n",[36,10957,10958,10961,10963,10966],{"class":38,"line":1503},[36,10959,10960],{"class":137},"    \"moduleResolution\"",[36,10962,1517],{"class":62},[36,10964,10965],{"class":46},"\"bundler\"",[36,10967,1340],{"class":62},[36,10969,10970],{"class":38,"line":1511},[36,10971,54],{"emptyLinePlaceholder":53},[36,10973,10974],{"class":38,"line":1526},[36,10975,10976],{"class":72},"    \u002F\u002F 强制每个文件都被视为独立的模块\n",[36,10978,10979],{"class":38,"line":1548},[36,10980,10981],{"class":72},"    \u002F\u002F 这是为了兼容打包工具的行为\n",[36,10983,10984,10987,10989,10991],{"class":38,"line":1563},[36,10985,10986],{"class":137},"    \"isolatedModules\"",[36,10988,1517],{"class":62},[36,10990,3695],{"class":137},[36,10992,1340],{"class":62},[36,10994,10995],{"class":38,"line":1577},[36,10996,54],{"emptyLinePlaceholder":53},[36,10998,10999],{"class":38,"line":1582},[36,11000,11001],{"class":72},"    \u002F\u002F 强制模块检测\n",[36,11003,11004],{"class":38,"line":2682},[36,11005,11006],{"class":72},"    \u002F\u002F \"force\" 表示即使没有显式的导入或导出，也会将文件视为模块\n",[36,11008,11009,11012,11014,11017],{"class":38,"line":2697},[36,11010,11011],{"class":137},"    \"moduleDetection\"",[36,11013,1517],{"class":62},[36,11015,11016],{"class":46},"\"force\"",[36,11018,1340],{"class":62},[36,11020,11021],{"class":38,"line":2717},[36,11022,54],{"emptyLinePlaceholder":53},[36,11024,11025],{"class":38,"line":2731},[36,11026,10511],{"class":72},[36,11028,11029],{"class":38,"line":2739},[36,11030,10516],{"class":72},[36,11032,11033,11035,11037,11039],{"class":38,"line":2744},[36,11034,10521],{"class":137},[36,11036,1517],{"class":62},[36,11038,10526],{"class":137},[36,11040,1340],{"class":62},[36,11042,11043],{"class":38,"line":5931},[36,11044,54],{"emptyLinePlaceholder":53},[36,11046,11047],{"class":38,"line":5936},[36,11048,10477],{"class":72},[36,11050,11051],{"class":38,"line":5948},[36,11052,54],{"emptyLinePlaceholder":53},[36,11054,11055],{"class":38,"line":5954},[36,11056,10486],{"class":72},[36,11058,11059],{"class":38,"line":5965},[36,11060,10491],{"class":72},[36,11062,11063,11065,11067,11069],{"class":38,"line":5971},[36,11064,10496],{"class":137},[36,11066,1517],{"class":62},[36,11068,3695],{"class":137},[36,11070,1340],{"class":62},[36,11072,11073],{"class":38,"line":10069},[36,11074,54],{"emptyLinePlaceholder":53},[36,11076,11077],{"class":38,"line":10081},[36,11078,10592],{"class":72},[36,11080,11081],{"class":38,"line":10086},[36,11082,10597],{"class":72},[36,11084,11085,11087,11089,11091],{"class":38,"line":10111},[36,11086,10602],{"class":137},[36,11088,1517],{"class":62},[36,11090,3695],{"class":137},[36,11092,1340],{"class":62},[36,11094,11095],{"class":38,"line":10117},[36,11096,54],{"emptyLinePlaceholder":53},[36,11098,11099],{"class":38,"line":10137},[36,11100,10617],{"class":72},[36,11102,11103],{"class":38,"line":10151},[36,11104,10622],{"class":72},[36,11106,11107,11109,11111,11113],{"class":38,"line":10156},[36,11108,10627],{"class":137},[36,11110,1517],{"class":62},[36,11112,3695],{"class":137},[36,11114,1340],{"class":62},[36,11116,11117],{"class":38,"line":10161},[36,11118,54],{"emptyLinePlaceholder":53},[36,11120,11121],{"class":38,"line":10167},[36,11122,10642],{"class":72},[36,11124,11125],{"class":38,"line":10175},[36,11126,10647],{"class":72},[36,11128,11129,11131,11133,11135],{"class":38,"line":10180},[36,11130,10652],{"class":137},[36,11132,1517],{"class":62},[36,11134,3695],{"class":137},[36,11136,1340],{"class":62},[36,11138,11139],{"class":38,"line":10185},[36,11140,54],{"emptyLinePlaceholder":53},[36,11142,11143],{"class":38,"line":10190},[36,11144,10667],{"class":72},[36,11146,11147],{"class":38,"line":10196},[36,11148,10672],{"class":72},[36,11150,11151],{"class":38,"line":10211},[36,11152,10677],{"class":72},[36,11154,11155,11157,11159],{"class":38,"line":10223},[36,11156,10682],{"class":137},[36,11158,1517],{"class":62},[36,11160,10687],{"class":137},[36,11162,11163],{"class":38,"line":10228},[36,11164,1376],{"class":62},[36,11166,11167],{"class":38,"line":10248},[36,11168,54],{"emptyLinePlaceholder":53},[36,11170,11171],{"class":38,"line":10265},[36,11172,10700],{"class":72},[36,11174,11175,11177],{"class":38,"line":10273},[36,11176,10705],{"class":137},[36,11178,10708],{"class":62},[36,11180,11181],{"class":38,"line":10278},[36,11182,11183],{"class":72},"    \u002F\u002F 包括 vite.config.ts 文件\n",[36,11185,11186],{"class":38,"line":10283},[36,11187,11188],{"class":72},"    \u002F\u002F 这是 Vite 的配置文件，通常需要单独编译\n",[36,11190,11191],{"class":38,"line":10289},[36,11192,11193],{"class":46},"    \"vite.config.ts\"\n",[36,11195,11197],{"class":38,"line":11196},75,[36,11198,10755],{"class":62},[36,11200,11202],{"class":38,"line":11201},76,[36,11203,702],{"class":62},[367,11205,11206],{"id":11206},"音频接入",[10,11208,11209,11210],{},"HTML5 ",[11211,11212,11213,11214],"audio",{},"或",[11215,11216,11217,11218,11223],"video",{},"元素生成的音频源,是",[6764,11219,11222],{"href":11220,"rel":11221},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FAPI\u002FAudioBufferSourceNode",[6768],"AudioBufferSourceNode","接口。",[10,11225,3291,11226,11230,11231,11238,11239,11242,11243,11250],{},[374,11227,11228],{},[33,11229,11222],{}," 接口继承自 ",[6764,11232,11235],{"href":11233,"rel":11234},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FAPI\u002FAudioScheduledSourceNode",[6768],[33,11236,11237],{},"AudioScheduledSourceNode","，表现为一个",[374,11240,11241],{},"音频源","，它包含了一些写在内存中的音频数据，通常储存在一个 ArrayBuffer 对象中。在处理有严格的时间精确度要求的回放的情形下它尤其有用。比如播放那些需要满足一个指定节奏的声音或者那些储存在内存而不是硬盘或者来自网络的声音。为了播放那些有时间精确度需求但来自网络的流文件或者来自硬盘，则使用 ",[6764,11244,11247],{"href":11245,"rel":11246},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FAPI\u002FAudioWorkletNode",[6768],[33,11248,11249],{},"AudioWorkletNode"," 来实现回放。",[10,11252,11253],{},"所有使用的变量：",[26,11255,11257],{"className":6402,"code":11256,"language":6404,"meta":31,"style":31},"\u002F\u002F 创建和管理音频上下文\nconst audiocontext = window.AudioContext\nconst audioctx = new audiocontext()\n\n\u002F\u002F 创建音量控制节点\nconst gain = audioctx.createGain()\n\n\u002F\u002F 音量值绑定\nconst gainvalue_before = ref(30)\nconst gainvalue = ref(gainvalue_before.value \u002F 100)\n\n\u002F\u002F 定义全局变量\nlet source: AudioBufferSourceNode | null = null \nlet isPlaying = ref(false)\nlet duration_isplaying = ref(0)\nlet audioBuffer: AudioBuffer | null = null\nlet currentTime = ref(0) \u002F\u002F 添加当前播放时间的引用\nlet pausedAt = 0 \u002F\u002F 记录暂停时的播放位置\n\u002F\u002F 添加一个变量来记录开始播放的时间\nlet startTime = 0\n\u002F\u002F 监听音量值变化\n",[33,11258,11259,11264,11276,11291,11295,11300,11317,11321,11326,11344,11365,11369,11374,11396,11413,11430,11451,11471,11485,11490,11502],{"__ignoreMap":31},[36,11260,11261],{"class":38,"line":39},[36,11262,11263],{"class":72},"\u002F\u002F 创建和管理音频上下文\n",[36,11265,11266,11268,11271,11273],{"class":38,"line":50},[36,11267,134],{"class":42},[36,11269,11270],{"class":137}," audiocontext",[36,11272,141],{"class":42},[36,11274,11275],{"class":62}," window.AudioContext\n",[36,11277,11278,11280,11283,11285,11287,11289],{"class":38,"line":57},[36,11279,134],{"class":42},[36,11281,11282],{"class":137}," audioctx",[36,11284,141],{"class":42},[36,11286,8171],{"class":42},[36,11288,11270],{"class":144},[36,11290,3577],{"class":62},[36,11292,11293],{"class":38,"line":76},[36,11294,54],{"emptyLinePlaceholder":53},[36,11296,11297],{"class":38,"line":92},[36,11298,11299],{"class":72},"\u002F\u002F 创建音量控制节点\n",[36,11301,11302,11304,11307,11309,11312,11315],{"class":38,"line":97},[36,11303,134],{"class":42},[36,11305,11306],{"class":137}," gain",[36,11308,141],{"class":42},[36,11310,11311],{"class":62}," audioctx.",[36,11313,11314],{"class":144},"createGain",[36,11316,3577],{"class":62},[36,11318,11319],{"class":38,"line":113},[36,11320,54],{"emptyLinePlaceholder":53},[36,11322,11323],{"class":38,"line":126},[36,11324,11325],{"class":72},"\u002F\u002F 音量值绑定\n",[36,11327,11328,11330,11333,11335,11337,11339,11342],{"class":38,"line":131},[36,11329,134],{"class":42},[36,11331,11332],{"class":137}," gainvalue_before",[36,11334,141],{"class":42},[36,11336,2179],{"class":144},[36,11338,165],{"class":62},[36,11340,11341],{"class":137},"30",[36,11343,202],{"class":62},[36,11345,11346,11348,11351,11353,11355,11358,11360,11363],{"class":38,"line":151},[36,11347,134],{"class":42},[36,11349,11350],{"class":137}," gainvalue",[36,11352,141],{"class":42},[36,11354,2179],{"class":144},[36,11356,11357],{"class":62},"(gainvalue_before.value ",[36,11359,3257],{"class":42},[36,11361,11362],{"class":137}," 100",[36,11364,202],{"class":62},[36,11366,11367],{"class":38,"line":156},[36,11368,54],{"emptyLinePlaceholder":53},[36,11370,11371],{"class":38,"line":174},[36,11372,11373],{"class":72},"\u002F\u002F 定义全局变量\n",[36,11375,11376,11378,11381,11383,11386,11388,11390,11392,11394],{"class":38,"line":184},[36,11377,1689],{"class":42},[36,11379,11380],{"class":62}," source",[36,11382,4433],{"class":42},[36,11384,11385],{"class":144}," AudioBufferSourceNode",[36,11387,5919],{"class":42},[36,11389,5922],{"class":137},[36,11391,141],{"class":42},[36,11393,5922],{"class":137},[36,11395,89],{"class":62},[36,11397,11398,11400,11403,11405,11407,11409,11411],{"class":38,"line":189},[36,11399,1689],{"class":42},[36,11401,11402],{"class":62}," isPlaying ",[36,11404,661],{"class":42},[36,11406,2179],{"class":144},[36,11408,165],{"class":62},[36,11410,10526],{"class":137},[36,11412,202],{"class":62},[36,11414,11415,11417,11420,11422,11424,11426,11428],{"class":38,"line":968},[36,11416,1689],{"class":42},[36,11418,11419],{"class":62}," duration_isplaying ",[36,11421,661],{"class":42},[36,11423,2179],{"class":144},[36,11425,165],{"class":62},[36,11427,1534],{"class":137},[36,11429,202],{"class":62},[36,11431,11432,11434,11437,11439,11442,11444,11446,11448],{"class":38,"line":974},[36,11433,1689],{"class":42},[36,11435,11436],{"class":62}," audioBuffer",[36,11438,4433],{"class":42},[36,11440,11441],{"class":144}," AudioBuffer",[36,11443,5919],{"class":42},[36,11445,5922],{"class":137},[36,11447,141],{"class":42},[36,11449,11450],{"class":137}," null\n",[36,11452,11453,11455,11458,11460,11462,11464,11466,11468],{"class":38,"line":979},[36,11454,1689],{"class":42},[36,11456,11457],{"class":62}," currentTime ",[36,11459,661],{"class":42},[36,11461,2179],{"class":144},[36,11463,165],{"class":62},[36,11465,1534],{"class":137},[36,11467,352],{"class":62},[36,11469,11470],{"class":72},"\u002F\u002F 添加当前播放时间的引用\n",[36,11472,11473,11475,11478,11480,11482],{"class":38,"line":1384},[36,11474,1689],{"class":42},[36,11476,11477],{"class":62}," pausedAt ",[36,11479,661],{"class":42},[36,11481,1537],{"class":137},[36,11483,11484],{"class":72}," \u002F\u002F 记录暂停时的播放位置\n",[36,11486,11487],{"class":38,"line":1392},[36,11488,11489],{"class":72},"\u002F\u002F 添加一个变量来记录开始播放的时间\n",[36,11491,11492,11494,11497,11499],{"class":38,"line":1406},[36,11493,1689],{"class":42},[36,11495,11496],{"class":62}," startTime ",[36,11498,661],{"class":42},[36,11500,11501],{"class":137}," 0\n",[36,11503,11504],{"class":38,"line":1412},[36,11505,11506],{"class":72},"\u002F\u002F 监听音量值变化\n",[10,11508,11509],{},"监听：",[26,11511,11513],{"className":6402,"code":11512,"language":6404,"meta":31,"style":31},"\u002F\u002F 监听音量值变化\nwatch(gainvalue, (newValue) => {\n    gain.gain.value = newValue \u002F\u002F 实时更新音量\n})\nwatch(gainvalue_before, (newValue) => {\n    gainvalue.value = newValue \u002F 100\n})\nwatch(() => music_store.mp3_data, (newData) => {\n    if (newData && newData.length > 0) {\n        music_meata.value = newData[music_store.music_index]\n        loadAudio()\n    }\n}, { immediate: true })\n\nwatch(() => music_store.music_index, (newIndex) => {\n    if (newIndex >= 0 && newIndex \u003C music_store.mp3_data.length+1) {\n        \u002F\u002F 直接使用新的索引获取对应的音乐数据\n        music_meata.value = music_store.mp3_data[newIndex]\n        \u002F\u002F 如果正在播放，先停止当前播放\n        if (isPlaying.value) {\n            source?.stop()\n            source?.disconnect()\n            isPlaying.value = false\n        }\n        \u002F\u002F 重置播放相关的状态\n        currentTime.value = 0\n        pausedAt = 0\n        \u002F\u002F 加载新的音频\n        loadAudio()\n    } else {\n        console.log(\"超出索引，重置为 0\")\n        music_store.music_index = 0\n    }\n})\n",[33,11514,11515,11519,11534,11547,11551,11566,11580,11584,11604,11628,11638,11645,11649,11658,11662,11682,11713,11718,11727,11732,11740,11750,11759,11769,11774,11779,11788,11797,11802,11808,11818,11831,11840,11844],{"__ignoreMap":31},[36,11516,11517],{"class":38,"line":39},[36,11518,11506],{"class":72},[36,11520,11521,11523,11526,11528,11530,11532],{"class":38,"line":50},[36,11522,3468],{"class":144},[36,11524,11525],{"class":62},"(gainvalue, (",[36,11527,3475],{"class":3474},[36,11529,352],{"class":62},[36,11531,3329],{"class":42},[36,11533,925],{"class":62},[36,11535,11536,11539,11541,11544],{"class":38,"line":57},[36,11537,11538],{"class":62},"    gain.gain.value ",[36,11540,661],{"class":42},[36,11542,11543],{"class":62}," newValue ",[36,11545,11546],{"class":72},"\u002F\u002F 实时更新音量\n",[36,11548,11549],{"class":38,"line":76},[36,11550,3505],{"class":62},[36,11552,11553,11555,11558,11560,11562,11564],{"class":38,"line":92},[36,11554,3468],{"class":144},[36,11556,11557],{"class":62},"(gainvalue_before, (",[36,11559,3475],{"class":3474},[36,11561,352],{"class":62},[36,11563,3329],{"class":42},[36,11565,925],{"class":62},[36,11567,11568,11571,11573,11575,11577],{"class":38,"line":97},[36,11569,11570],{"class":62},"    gainvalue.value ",[36,11572,661],{"class":42},[36,11574,11543],{"class":62},[36,11576,3257],{"class":42},[36,11578,11579],{"class":137}," 100\n",[36,11581,11582],{"class":38,"line":113},[36,11583,3505],{"class":62},[36,11585,11586,11588,11590,11592,11595,11598,11600,11602],{"class":38,"line":126},[36,11587,3468],{"class":144},[36,11589,3326],{"class":62},[36,11591,3329],{"class":42},[36,11593,11594],{"class":62}," music_store.mp3_data, (",[36,11596,11597],{"class":3474},"newData",[36,11599,352],{"class":62},[36,11601,3329],{"class":42},[36,11603,925],{"class":62},[36,11605,11606,11609,11612,11615,11618,11621,11624,11626],{"class":38,"line":131},[36,11607,11608],{"class":42},"    if",[36,11610,11611],{"class":62}," (newData ",[36,11613,11614],{"class":42},"&&",[36,11616,11617],{"class":62}," newData.",[36,11619,11620],{"class":137},"length",[36,11622,11623],{"class":42}," >",[36,11625,1537],{"class":137},[36,11627,3569],{"class":62},[36,11629,11630,11633,11635],{"class":38,"line":151},[36,11631,11632],{"class":62},"        music_meata.value ",[36,11634,661],{"class":42},[36,11636,11637],{"class":62}," newData[music_store.music_index]\n",[36,11639,11640,11643],{"class":38,"line":156},[36,11641,11642],{"class":144},"        loadAudio",[36,11644,3577],{"class":62},[36,11646,11647],{"class":38,"line":174},[36,11648,965],{"class":62},[36,11650,11651,11654,11656],{"class":38,"line":184},[36,11652,11653],{"class":62},"}, { immediate: ",[36,11655,3695],{"class":137},[36,11657,2290],{"class":62},[36,11659,11660],{"class":38,"line":189},[36,11661,54],{"emptyLinePlaceholder":53},[36,11663,11664,11666,11668,11670,11673,11676,11678,11680],{"class":38,"line":968},[36,11665,3468],{"class":144},[36,11667,3326],{"class":62},[36,11669,3329],{"class":42},[36,11671,11672],{"class":62}," music_store.music_index, (",[36,11674,11675],{"class":3474},"newIndex",[36,11677,352],{"class":62},[36,11679,3329],{"class":42},[36,11681,925],{"class":62},[36,11683,11684,11686,11689,11692,11694,11697,11700,11702,11705,11707,11709,11711],{"class":38,"line":974},[36,11685,11608],{"class":42},[36,11687,11688],{"class":62}," (newIndex ",[36,11690,11691],{"class":42},">=",[36,11693,1537],{"class":137},[36,11695,11696],{"class":42}," &&",[36,11698,11699],{"class":62}," newIndex ",[36,11701,651],{"class":42},[36,11703,11704],{"class":62}," music_store.mp3_data.",[36,11706,11620],{"class":137},[36,11708,1827],{"class":42},[36,11710,7784],{"class":137},[36,11712,3569],{"class":62},[36,11714,11715],{"class":38,"line":979},[36,11716,11717],{"class":72},"        \u002F\u002F 直接使用新的索引获取对应的音乐数据\n",[36,11719,11720,11722,11724],{"class":38,"line":1384},[36,11721,11632],{"class":62},[36,11723,661],{"class":42},[36,11725,11726],{"class":62}," music_store.mp3_data[newIndex]\n",[36,11728,11729],{"class":38,"line":1392},[36,11730,11731],{"class":72},"        \u002F\u002F 如果正在播放，先停止当前播放\n",[36,11733,11734,11737],{"class":38,"line":1406},[36,11735,11736],{"class":42},"        if",[36,11738,11739],{"class":62}," (isPlaying.value) {\n",[36,11741,11742,11745,11748],{"class":38,"line":1412},[36,11743,11744],{"class":62},"            source?.",[36,11746,11747],{"class":144},"stop",[36,11749,3577],{"class":62},[36,11751,11752,11754,11757],{"class":38,"line":1420},[36,11753,11744],{"class":62},[36,11755,11756],{"class":144},"disconnect",[36,11758,3577],{"class":62},[36,11760,11761,11764,11766],{"class":38,"line":1434},[36,11762,11763],{"class":62},"            isPlaying.value ",[36,11765,661],{"class":42},[36,11767,11768],{"class":137}," false\n",[36,11770,11771],{"class":38,"line":1439},[36,11772,11773],{"class":62},"        }\n",[36,11775,11776],{"class":38,"line":1444},[36,11777,11778],{"class":72},"        \u002F\u002F 重置播放相关的状态\n",[36,11780,11781,11784,11786],{"class":38,"line":1452},[36,11782,11783],{"class":62},"        currentTime.value ",[36,11785,661],{"class":42},[36,11787,11501],{"class":137},[36,11789,11790,11793,11795],{"class":38,"line":1466},[36,11791,11792],{"class":62},"        pausedAt ",[36,11794,661],{"class":42},[36,11796,11501],{"class":137},[36,11798,11799],{"class":38,"line":1471},[36,11800,11801],{"class":72},"        \u002F\u002F 加载新的音频\n",[36,11803,11804,11806],{"class":38,"line":1476},[36,11805,11642],{"class":144},[36,11807,3577],{"class":62},[36,11809,11810,11813,11816],{"class":38,"line":1481},[36,11811,11812],{"class":62},"    } ",[36,11814,11815],{"class":42},"else",[36,11817,925],{"class":62},[36,11819,11820,11822,11824,11826,11829],{"class":38,"line":1490},[36,11821,7064],{"class":62},[36,11823,2107],{"class":144},[36,11825,165],{"class":62},[36,11827,11828],{"class":46},"\"超出索引，重置为 0\"",[36,11830,202],{"class":62},[36,11832,11833,11836,11838],{"class":38,"line":1503},[36,11834,11835],{"class":62},"        music_store.music_index ",[36,11837,661],{"class":42},[36,11839,11501],{"class":137},[36,11841,11842],{"class":38,"line":1511},[36,11843,965],{"class":62},[36,11845,11846],{"class":38,"line":1526},[36,11847,3505],{"class":62},[10,11849,11850],{},"函数;",[26,11852,11854],{"className":6402,"code":11853,"language":6404,"meta":31,"style":31},"\u002F\u002F 切换歌曲 下一首 上一首可以同理写\nconst nextmusic = () => {\n    console.log(\"下一首\")\n    music_store.music_index += 1\n    console.log(\"当前序列:\",music_store.music_index)\n}\n\n\u002F\u002F 格式化时间 让秒->分和秒显示\nconst formatTime = (time: number) => {\n    const minutes = Math.floor(time \u002F 60)\n    const seconds = Math.floor(time % 60)\n    return `${minutes}:${seconds.toString().padStart(2, '0')}`\n}\n\n\u002F\u002F处理进度条拖动的函数\nconst handleTimeChange = (newTime: number) => {\n    currentTime.value = newTime\n    if (isPlaying.value) {\n        \u002F\u002F 如果正在播放，先停止当前播放\n        source?.stop()\n        source?.disconnect()\n        \n        \u002F\u002F 创建新的音源节点从新位置开始播放\n        source = audioctx.createBufferSource() \u002F\u002F让source获得缓冲区源\n        source.buffer = audioBuffer   \u002F\u002F将音乐的数据加载进缓冲区\n        source.connect(gain)\n        source.start(0, newTime)\n        \n        \u002F\u002F 更新开始时间和暂停位置\n        startTime = audioctx.currentTime\n        pausedAt = newTime\n    } else {\n        \u002F\u002F 如果暂停状态，只更新暂停位置\n        pausedAt = newTime\n    }\n}\n\n\u002F\u002F 播放音乐\nconst playfunction = () => {\n    if (!audioBuffer) {\n        console.error(\"音频未加载\")\n        return\n    }\n\n    if (isPlaying.value) {\n        console.log(\"音频已经在播放中\")\n        return\n    }\n\n    \u002F\u002F 创建新的音源节点\n    source = audioctx.createBufferSource()\n    source.buffer = audioBuffer\n    duration_isplaying.value = audioBuffer.duration\n    source.connect(gain)  \u002F\u002Fsource和增益器相连\n    gain.connect(audioctx.destination) \u002F\u002F增益器输出到接口处播放\n    gain.gain.value = gainvalue.value \u002F\u002Fgain的增益--（0-1）\n\n    \u002F\u002F 记录开始播放的时间\n    startTime = audioctx.currentTime\n\n    \u002F\u002F 从暂停位置开始播放\n    if (pausedAt > 0) {\n        source.start(0, pausedAt)\n        console.log(`从暂停位置 ${pausedAt} 秒继续播放`)\n    } else {\n        source.start(0)\n        console.log(\"从头开始播放\")\n    }\n\n    isPlaying.value = true\n    \n       \u002F\u002F 修改更新时间的计算方式\n       const updateTime = () => {\n        if (isPlaying.value && audioBuffer) {  \u002F\u002F 添加 audioBuffer 检查\n            \u002F\u002F 计算实际播放时间 = 暂停位置 + (当前时间 - 开始播放时间)\n            currentTime.value = pausedAt + (audioctx.currentTime - startTime)\n            requestAnimationFrame(updateTime)\n            \n            \u002F\u002F 添加空值检查\n            if(currentTime.value >= audioBuffer?.duration){\n                console.log(\"音频播放结束\")\n                currentTime.value = 0\n                pausedAt = 0\n                isPlaying.value = false\n                source = null\n            }\n        }\n    }\n    updateTime()\n}\n\n\u002F\u002F 暂停音乐\nconst pauseAudio = () => {\n    if (!source || !isPlaying.value) {\n        console.log(\"音频未在播放中\")\n        return\n    }\n\n    \u002F\u002F 使用计算后的实际播放时间\n    pausedAt = currentTime.value\n    console.log(\"暂停播放\")\n    console.log(\"暂停位置：\", pausedAt)\n    source.stop()\n    source.disconnect()\n    source = null\n    isPlaying.value = false\n}\n\n\u002F\u002F 加载音频数据\nconst loadAudio = async () => {\n    if (!music_meata.value) {\n        console.error(\"没有音乐数据\")\n        return\n    }\n    const response = await fetch(music_meata.value.filepath)\n    console.log(\"加载音频数据\", music_meata.value.filepath)\n    const arrayBuffer = await response.arrayBuffer() \u002F\u002F表示原始二进制数据的通用固定长度缓冲区\n    \u002F\u002F是 JavaScript 中处理二进制数据的基础类型，常用于文件读取、网络请求（如 fetch）、音频处理等场景。\n    audioBuffer = await audioctx.decodeAudioData(arrayBuffer) \u002F\u002FAudioBuffer 是 Web Audio API 提供的一种高级数据结构，用于表示解码后的音频数据。\n    duration_isplaying.value = audioBuffer.duration\n    console.log(\"音频加载完成\")\n}\n\n",[33,11855,11856,11861,11877,11890,11899,11913,11917,11921,11926,11951,11977,11999,12039,12043,12047,12052,12076,12086,12092,12096,12105,12113,12118,12123,12141,12154,12165,12179,12183,12188,12198,12206,12214,12219,12227,12231,12235,12239,12244,12259,12270,12283,12288,12292,12296,12302,12315,12319,12323,12327,12332,12345,12355,12365,12378,12391,12403,12407,12412,12421,12425,12430,12443,12456,12475,12483,12495,12508,12512,12516,12526,12531,12536,12552,12567,12572,12591,12600,12606,12612,12626,12641,12651,12661,12671,12681,12687,12692,12697,12705,12710,12715,12721,12737,12758,12772,12777,12782,12787,12793,12804,12818,12832,12841,12850,12859,12868,12873,12878,12884,12903,12915,12929,12934,12939,12957,12972,12995,13001,13022,13031,13045],{"__ignoreMap":31},[36,11857,11858],{"class":38,"line":39},[36,11859,11860],{"class":72},"\u002F\u002F 切换歌曲 下一首 上一首可以同理写\n",[36,11862,11863,11865,11868,11870,11873,11875],{"class":38,"line":50},[36,11864,134],{"class":42},[36,11866,11867],{"class":144}," nextmusic",[36,11869,141],{"class":42},[36,11871,11872],{"class":62}," () ",[36,11874,3329],{"class":42},[36,11876,925],{"class":62},[36,11878,11879,11881,11883,11885,11888],{"class":38,"line":57},[36,11880,2104],{"class":62},[36,11882,2107],{"class":144},[36,11884,165],{"class":62},[36,11886,11887],{"class":46},"\"下一首\"",[36,11889,202],{"class":62},[36,11891,11892,11895,11897],{"class":38,"line":76},[36,11893,11894],{"class":62},"    music_store.music_index ",[36,11896,1428],{"class":42},[36,11898,1431],{"class":137},[36,11900,11901,11903,11905,11907,11910],{"class":38,"line":92},[36,11902,2104],{"class":62},[36,11904,2107],{"class":144},[36,11906,165],{"class":62},[36,11908,11909],{"class":46},"\"当前序列:\"",[36,11911,11912],{"class":62},",music_store.music_index)\n",[36,11914,11915],{"class":38,"line":97},[36,11916,702],{"class":62},[36,11918,11919],{"class":38,"line":113},[36,11920,54],{"emptyLinePlaceholder":53},[36,11922,11923],{"class":38,"line":126},[36,11924,11925],{"class":72},"\u002F\u002F 格式化时间 让秒->分和秒显示\n",[36,11927,11928,11930,11933,11935,11937,11940,11942,11945,11947,11949],{"class":38,"line":131},[36,11929,134],{"class":42},[36,11931,11932],{"class":144}," formatTime",[36,11934,141],{"class":42},[36,11936,9037],{"class":62},[36,11938,11939],{"class":3474},"time",[36,11941,4433],{"class":42},[36,11943,11944],{"class":137}," number",[36,11946,352],{"class":62},[36,11948,3329],{"class":42},[36,11950,925],{"class":62},[36,11952,11953,11956,11959,11961,11964,11967,11970,11972,11975],{"class":38,"line":151},[36,11954,11955],{"class":42},"    const",[36,11957,11958],{"class":137}," minutes",[36,11960,141],{"class":42},[36,11962,11963],{"class":62}," Math.",[36,11965,11966],{"class":144},"floor",[36,11968,11969],{"class":62},"(time ",[36,11971,3257],{"class":42},[36,11973,11974],{"class":137}," 60",[36,11976,202],{"class":62},[36,11978,11979,11981,11984,11986,11988,11990,11992,11995,11997],{"class":38,"line":156},[36,11980,11955],{"class":42},[36,11982,11983],{"class":137}," seconds",[36,11985,141],{"class":42},[36,11987,11963],{"class":62},[36,11989,11966],{"class":144},[36,11991,11969],{"class":62},[36,11993,11994],{"class":42},"%",[36,11996,11974],{"class":137},[36,11998,202],{"class":62},[36,12000,12001,12003,12006,12009,12011,12014,12016,12019,12022,12025,12027,12029,12031,12034,12036],{"class":38,"line":174},[36,12002,950],{"class":42},[36,12004,12005],{"class":46}," `${",[36,12007,12008],{"class":62},"minutes",[36,12010,7290],{"class":46},[36,12012,12013],{"class":62},"seconds",[36,12015,6437],{"class":46},[36,12017,12018],{"class":144},"toString",[36,12020,12021],{"class":46},"().",[36,12023,12024],{"class":144},"padStart",[36,12026,165],{"class":46},[36,12028,7794],{"class":137},[36,12030,694],{"class":46},[36,12032,12033],{"class":46},"'0'",[36,12035,6817],{"class":46},[36,12037,12038],{"class":46},"}`\n",[36,12040,12041],{"class":38,"line":184},[36,12042,702],{"class":62},[36,12044,12045],{"class":38,"line":189},[36,12046,54],{"emptyLinePlaceholder":53},[36,12048,12049],{"class":38,"line":968},[36,12050,12051],{"class":72},"\u002F\u002F处理进度条拖动的函数\n",[36,12053,12054,12056,12059,12061,12063,12066,12068,12070,12072,12074],{"class":38,"line":974},[36,12055,134],{"class":42},[36,12057,12058],{"class":144}," handleTimeChange",[36,12060,141],{"class":42},[36,12062,9037],{"class":62},[36,12064,12065],{"class":3474},"newTime",[36,12067,4433],{"class":42},[36,12069,11944],{"class":137},[36,12071,352],{"class":62},[36,12073,3329],{"class":42},[36,12075,925],{"class":62},[36,12077,12078,12081,12083],{"class":38,"line":979},[36,12079,12080],{"class":62},"    currentTime.value ",[36,12082,661],{"class":42},[36,12084,12085],{"class":62}," newTime\n",[36,12087,12088,12090],{"class":38,"line":1384},[36,12089,11608],{"class":42},[36,12091,11739],{"class":62},[36,12093,12094],{"class":38,"line":1392},[36,12095,11731],{"class":72},[36,12097,12098,12101,12103],{"class":38,"line":1406},[36,12099,12100],{"class":62},"        source?.",[36,12102,11747],{"class":144},[36,12104,3577],{"class":62},[36,12106,12107,12109,12111],{"class":38,"line":1412},[36,12108,12100],{"class":62},[36,12110,11756],{"class":144},[36,12112,3577],{"class":62},[36,12114,12115],{"class":38,"line":1420},[36,12116,12117],{"class":62},"        \n",[36,12119,12120],{"class":38,"line":1434},[36,12121,12122],{"class":72},"        \u002F\u002F 创建新的音源节点从新位置开始播放\n",[36,12124,12125,12128,12130,12132,12135,12138],{"class":38,"line":1439},[36,12126,12127],{"class":62},"        source ",[36,12129,661],{"class":42},[36,12131,11311],{"class":62},[36,12133,12134],{"class":144},"createBufferSource",[36,12136,12137],{"class":62},"() ",[36,12139,12140],{"class":72},"\u002F\u002F让source获得缓冲区源\n",[36,12142,12143,12146,12148,12151],{"class":38,"line":1444},[36,12144,12145],{"class":62},"        source.buffer ",[36,12147,661],{"class":42},[36,12149,12150],{"class":62}," audioBuffer   ",[36,12152,12153],{"class":72},"\u002F\u002F将音乐的数据加载进缓冲区\n",[36,12155,12156,12159,12162],{"class":38,"line":1452},[36,12157,12158],{"class":62},"        source.",[36,12160,12161],{"class":144},"connect",[36,12163,12164],{"class":62},"(gain)\n",[36,12166,12167,12169,12172,12174,12176],{"class":38,"line":1466},[36,12168,12158],{"class":62},[36,12170,12171],{"class":144},"start",[36,12173,165],{"class":62},[36,12175,1534],{"class":137},[36,12177,12178],{"class":62},", newTime)\n",[36,12180,12181],{"class":38,"line":1471},[36,12182,12117],{"class":62},[36,12184,12185],{"class":38,"line":1476},[36,12186,12187],{"class":72},"        \u002F\u002F 更新开始时间和暂停位置\n",[36,12189,12190,12193,12195],{"class":38,"line":1481},[36,12191,12192],{"class":62},"        startTime ",[36,12194,661],{"class":42},[36,12196,12197],{"class":62}," audioctx.currentTime\n",[36,12199,12200,12202,12204],{"class":38,"line":1490},[36,12201,11792],{"class":62},[36,12203,661],{"class":42},[36,12205,12085],{"class":62},[36,12207,12208,12210,12212],{"class":38,"line":1503},[36,12209,11812],{"class":62},[36,12211,11815],{"class":42},[36,12213,925],{"class":62},[36,12215,12216],{"class":38,"line":1511},[36,12217,12218],{"class":72},"        \u002F\u002F 如果暂停状态，只更新暂停位置\n",[36,12220,12221,12223,12225],{"class":38,"line":1526},[36,12222,11792],{"class":62},[36,12224,661],{"class":42},[36,12226,12085],{"class":62},[36,12228,12229],{"class":38,"line":1548},[36,12230,965],{"class":62},[36,12232,12233],{"class":38,"line":1563},[36,12234,702],{"class":62},[36,12236,12237],{"class":38,"line":1577},[36,12238,54],{"emptyLinePlaceholder":53},[36,12240,12241],{"class":38,"line":1582},[36,12242,12243],{"class":72},"\u002F\u002F 播放音乐\n",[36,12245,12246,12248,12251,12253,12255,12257],{"class":38,"line":2682},[36,12247,134],{"class":42},[36,12249,12250],{"class":144}," playfunction",[36,12252,141],{"class":42},[36,12254,11872],{"class":62},[36,12256,3329],{"class":42},[36,12258,925],{"class":62},[36,12260,12261,12263,12265,12267],{"class":38,"line":2697},[36,12262,11608],{"class":42},[36,12264,9037],{"class":62},[36,12266,8520],{"class":42},[36,12268,12269],{"class":62},"audioBuffer) {\n",[36,12271,12272,12274,12276,12278,12281],{"class":38,"line":2717},[36,12273,7064],{"class":62},[36,12275,8538],{"class":144},[36,12277,165],{"class":62},[36,12279,12280],{"class":46},"\"音频未加载\"",[36,12282,202],{"class":62},[36,12284,12285],{"class":38,"line":2731},[36,12286,12287],{"class":42},"        return\n",[36,12289,12290],{"class":38,"line":2739},[36,12291,965],{"class":62},[36,12293,12294],{"class":38,"line":2744},[36,12295,54],{"emptyLinePlaceholder":53},[36,12297,12298,12300],{"class":38,"line":5931},[36,12299,11608],{"class":42},[36,12301,11739],{"class":62},[36,12303,12304,12306,12308,12310,12313],{"class":38,"line":5936},[36,12305,7064],{"class":62},[36,12307,2107],{"class":144},[36,12309,165],{"class":62},[36,12311,12312],{"class":46},"\"音频已经在播放中\"",[36,12314,202],{"class":62},[36,12316,12317],{"class":38,"line":5948},[36,12318,12287],{"class":42},[36,12320,12321],{"class":38,"line":5954},[36,12322,965],{"class":62},[36,12324,12325],{"class":38,"line":5965},[36,12326,54],{"emptyLinePlaceholder":53},[36,12328,12329],{"class":38,"line":5971},[36,12330,12331],{"class":72},"    \u002F\u002F 创建新的音源节点\n",[36,12333,12334,12337,12339,12341,12343],{"class":38,"line":10069},[36,12335,12336],{"class":62},"    source ",[36,12338,661],{"class":42},[36,12340,11311],{"class":62},[36,12342,12134],{"class":144},[36,12344,3577],{"class":62},[36,12346,12347,12350,12352],{"class":38,"line":10081},[36,12348,12349],{"class":62},"    source.buffer ",[36,12351,661],{"class":42},[36,12353,12354],{"class":62}," audioBuffer\n",[36,12356,12357,12360,12362],{"class":38,"line":10086},[36,12358,12359],{"class":62},"    duration_isplaying.value ",[36,12361,661],{"class":42},[36,12363,12364],{"class":62}," audioBuffer.duration\n",[36,12366,12367,12370,12372,12375],{"class":38,"line":10111},[36,12368,12369],{"class":62},"    source.",[36,12371,12161],{"class":144},[36,12373,12374],{"class":62},"(gain)  ",[36,12376,12377],{"class":72},"\u002F\u002Fsource和增益器相连\n",[36,12379,12380,12383,12385,12388],{"class":38,"line":10117},[36,12381,12382],{"class":62},"    gain.",[36,12384,12161],{"class":144},[36,12386,12387],{"class":62},"(audioctx.destination) ",[36,12389,12390],{"class":72},"\u002F\u002F增益器输出到接口处播放\n",[36,12392,12393,12395,12397,12400],{"class":38,"line":10137},[36,12394,11538],{"class":62},[36,12396,661],{"class":42},[36,12398,12399],{"class":62}," gainvalue.value ",[36,12401,12402],{"class":72},"\u002F\u002Fgain的增益--（0-1）\n",[36,12404,12405],{"class":38,"line":10151},[36,12406,54],{"emptyLinePlaceholder":53},[36,12408,12409],{"class":38,"line":10156},[36,12410,12411],{"class":72},"    \u002F\u002F 记录开始播放的时间\n",[36,12413,12414,12417,12419],{"class":38,"line":10161},[36,12415,12416],{"class":62},"    startTime ",[36,12418,661],{"class":42},[36,12420,12197],{"class":62},[36,12422,12423],{"class":38,"line":10167},[36,12424,54],{"emptyLinePlaceholder":53},[36,12426,12427],{"class":38,"line":10175},[36,12428,12429],{"class":72},"    \u002F\u002F 从暂停位置开始播放\n",[36,12431,12432,12434,12437,12439,12441],{"class":38,"line":10180},[36,12433,11608],{"class":42},[36,12435,12436],{"class":62}," (pausedAt ",[36,12438,2328],{"class":42},[36,12440,1537],{"class":137},[36,12442,3569],{"class":62},[36,12444,12445,12447,12449,12451,12453],{"class":38,"line":10185},[36,12446,12158],{"class":62},[36,12448,12171],{"class":144},[36,12450,165],{"class":62},[36,12452,1534],{"class":137},[36,12454,12455],{"class":62},", pausedAt)\n",[36,12457,12458,12460,12462,12464,12467,12470,12473],{"class":38,"line":10190},[36,12459,7064],{"class":62},[36,12461,2107],{"class":144},[36,12463,165],{"class":62},[36,12465,12466],{"class":46},"`从暂停位置 ${",[36,12468,12469],{"class":62},"pausedAt",[36,12471,12472],{"class":46},"} 秒继续播放`",[36,12474,202],{"class":62},[36,12476,12477,12479,12481],{"class":38,"line":10196},[36,12478,11812],{"class":62},[36,12480,11815],{"class":42},[36,12482,925],{"class":62},[36,12484,12485,12487,12489,12491,12493],{"class":38,"line":10211},[36,12486,12158],{"class":62},[36,12488,12171],{"class":144},[36,12490,165],{"class":62},[36,12492,1534],{"class":137},[36,12494,202],{"class":62},[36,12496,12497,12499,12501,12503,12506],{"class":38,"line":10223},[36,12498,7064],{"class":62},[36,12500,2107],{"class":144},[36,12502,165],{"class":62},[36,12504,12505],{"class":46},"\"从头开始播放\"",[36,12507,202],{"class":62},[36,12509,12510],{"class":38,"line":10228},[36,12511,965],{"class":62},[36,12513,12514],{"class":38,"line":10248},[36,12515,54],{"emptyLinePlaceholder":53},[36,12517,12518,12521,12523],{"class":38,"line":10265},[36,12519,12520],{"class":62},"    isPlaying.value ",[36,12522,661],{"class":42},[36,12524,12525],{"class":137}," true\n",[36,12527,12528],{"class":38,"line":10273},[36,12529,12530],{"class":62},"    \n",[36,12532,12533],{"class":38,"line":10278},[36,12534,12535],{"class":72},"       \u002F\u002F 修改更新时间的计算方式\n",[36,12537,12538,12541,12544,12546,12548,12550],{"class":38,"line":10283},[36,12539,12540],{"class":42},"       const",[36,12542,12543],{"class":144}," updateTime",[36,12545,141],{"class":42},[36,12547,11872],{"class":62},[36,12549,3329],{"class":42},[36,12551,925],{"class":62},[36,12553,12554,12556,12559,12561,12564],{"class":38,"line":10289},[36,12555,11736],{"class":42},[36,12557,12558],{"class":62}," (isPlaying.value ",[36,12560,11614],{"class":42},[36,12562,12563],{"class":62}," audioBuffer) {  ",[36,12565,12566],{"class":72},"\u002F\u002F 添加 audioBuffer 检查\n",[36,12568,12569],{"class":38,"line":11196},[36,12570,12571],{"class":72},"            \u002F\u002F 计算实际播放时间 = 暂停位置 + (当前时间 - 开始播放时间)\n",[36,12573,12574,12577,12579,12581,12583,12586,12588],{"class":38,"line":11201},[36,12575,12576],{"class":62},"            currentTime.value ",[36,12578,661],{"class":42},[36,12580,11477],{"class":62},[36,12582,1827],{"class":42},[36,12584,12585],{"class":62}," (audioctx.currentTime ",[36,12587,2688],{"class":42},[36,12589,12590],{"class":62}," startTime)\n",[36,12592,12594,12597],{"class":38,"line":12593},77,[36,12595,12596],{"class":144},"            requestAnimationFrame",[36,12598,12599],{"class":62},"(updateTime)\n",[36,12601,12603],{"class":38,"line":12602},78,[36,12604,12605],{"class":62},"            \n",[36,12607,12609],{"class":38,"line":12608},79,[36,12610,12611],{"class":72},"            \u002F\u002F 添加空值检查\n",[36,12613,12615,12618,12621,12623],{"class":38,"line":12614},80,[36,12616,12617],{"class":42},"            if",[36,12619,12620],{"class":62},"(currentTime.value ",[36,12622,11691],{"class":42},[36,12624,12625],{"class":62}," audioBuffer?.duration){\n",[36,12627,12629,12632,12634,12636,12639],{"class":38,"line":12628},81,[36,12630,12631],{"class":62},"                console.",[36,12633,2107],{"class":144},[36,12635,165],{"class":62},[36,12637,12638],{"class":46},"\"音频播放结束\"",[36,12640,202],{"class":62},[36,12642,12644,12647,12649],{"class":38,"line":12643},82,[36,12645,12646],{"class":62},"                currentTime.value ",[36,12648,661],{"class":42},[36,12650,11501],{"class":137},[36,12652,12654,12657,12659],{"class":38,"line":12653},83,[36,12655,12656],{"class":62},"                pausedAt ",[36,12658,661],{"class":42},[36,12660,11501],{"class":137},[36,12662,12664,12667,12669],{"class":38,"line":12663},84,[36,12665,12666],{"class":62},"                isPlaying.value ",[36,12668,661],{"class":42},[36,12670,11768],{"class":137},[36,12672,12674,12677,12679],{"class":38,"line":12673},85,[36,12675,12676],{"class":62},"                source ",[36,12678,661],{"class":42},[36,12680,11450],{"class":137},[36,12682,12684],{"class":38,"line":12683},86,[36,12685,12686],{"class":62},"            }\n",[36,12688,12690],{"class":38,"line":12689},87,[36,12691,11773],{"class":62},[36,12693,12695],{"class":38,"line":12694},88,[36,12696,965],{"class":62},[36,12698,12700,12703],{"class":38,"line":12699},89,[36,12701,12702],{"class":144},"    updateTime",[36,12704,3577],{"class":62},[36,12706,12708],{"class":38,"line":12707},90,[36,12709,702],{"class":62},[36,12711,12713],{"class":38,"line":12712},91,[36,12714,54],{"emptyLinePlaceholder":53},[36,12716,12718],{"class":38,"line":12717},92,[36,12719,12720],{"class":72},"\u002F\u002F 暂停音乐\n",[36,12722,12724,12726,12729,12731,12733,12735],{"class":38,"line":12723},93,[36,12725,134],{"class":42},[36,12727,12728],{"class":144}," pauseAudio",[36,12730,141],{"class":42},[36,12732,11872],{"class":62},[36,12734,3329],{"class":42},[36,12736,925],{"class":62},[36,12738,12740,12742,12744,12746,12749,12752,12755],{"class":38,"line":12739},94,[36,12741,11608],{"class":42},[36,12743,9037],{"class":62},[36,12745,8520],{"class":42},[36,12747,12748],{"class":62},"source ",[36,12750,12751],{"class":42},"||",[36,12753,12754],{"class":42}," !",[36,12756,12757],{"class":62},"isPlaying.value) {\n",[36,12759,12761,12763,12765,12767,12770],{"class":38,"line":12760},95,[36,12762,7064],{"class":62},[36,12764,2107],{"class":144},[36,12766,165],{"class":62},[36,12768,12769],{"class":46},"\"音频未在播放中\"",[36,12771,202],{"class":62},[36,12773,12775],{"class":38,"line":12774},96,[36,12776,12287],{"class":42},[36,12778,12780],{"class":38,"line":12779},97,[36,12781,965],{"class":62},[36,12783,12785],{"class":38,"line":12784},98,[36,12786,54],{"emptyLinePlaceholder":53},[36,12788,12790],{"class":38,"line":12789},99,[36,12791,12792],{"class":72},"    \u002F\u002F 使用计算后的实际播放时间\n",[36,12794,12796,12799,12801],{"class":38,"line":12795},100,[36,12797,12798],{"class":62},"    pausedAt ",[36,12800,661],{"class":42},[36,12802,12803],{"class":62}," currentTime.value\n",[36,12805,12807,12809,12811,12813,12816],{"class":38,"line":12806},101,[36,12808,2104],{"class":62},[36,12810,2107],{"class":144},[36,12812,165],{"class":62},[36,12814,12815],{"class":46},"\"暂停播放\"",[36,12817,202],{"class":62},[36,12819,12821,12823,12825,12827,12830],{"class":38,"line":12820},102,[36,12822,2104],{"class":62},[36,12824,2107],{"class":144},[36,12826,165],{"class":62},[36,12828,12829],{"class":46},"\"暂停位置：\"",[36,12831,12455],{"class":62},[36,12833,12835,12837,12839],{"class":38,"line":12834},103,[36,12836,12369],{"class":62},[36,12838,11747],{"class":144},[36,12840,3577],{"class":62},[36,12842,12844,12846,12848],{"class":38,"line":12843},104,[36,12845,12369],{"class":62},[36,12847,11756],{"class":144},[36,12849,3577],{"class":62},[36,12851,12853,12855,12857],{"class":38,"line":12852},105,[36,12854,12336],{"class":62},[36,12856,661],{"class":42},[36,12858,11450],{"class":137},[36,12860,12862,12864,12866],{"class":38,"line":12861},106,[36,12863,12520],{"class":62},[36,12865,661],{"class":42},[36,12867,11768],{"class":137},[36,12869,12871],{"class":38,"line":12870},107,[36,12872,702],{"class":62},[36,12874,12876],{"class":38,"line":12875},108,[36,12877,54],{"emptyLinePlaceholder":53},[36,12879,12881],{"class":38,"line":12880},109,[36,12882,12883],{"class":72},"\u002F\u002F 加载音频数据\n",[36,12885,12887,12889,12892,12894,12897,12899,12901],{"class":38,"line":12886},110,[36,12888,134],{"class":42},[36,12890,12891],{"class":144}," loadAudio",[36,12893,141],{"class":42},[36,12895,12896],{"class":42}," async",[36,12898,11872],{"class":62},[36,12900,3329],{"class":42},[36,12902,925],{"class":62},[36,12904,12906,12908,12910,12912],{"class":38,"line":12905},111,[36,12907,11608],{"class":42},[36,12909,9037],{"class":62},[36,12911,8520],{"class":42},[36,12913,12914],{"class":62},"music_meata.value) {\n",[36,12916,12918,12920,12922,12924,12927],{"class":38,"line":12917},112,[36,12919,7064],{"class":62},[36,12921,8538],{"class":144},[36,12923,165],{"class":62},[36,12925,12926],{"class":46},"\"没有音乐数据\"",[36,12928,202],{"class":62},[36,12930,12932],{"class":38,"line":12931},113,[36,12933,12287],{"class":42},[36,12935,12937],{"class":38,"line":12936},114,[36,12938,965],{"class":62},[36,12940,12942,12944,12947,12949,12951,12954],{"class":38,"line":12941},115,[36,12943,11955],{"class":42},[36,12945,12946],{"class":137}," response",[36,12948,141],{"class":42},[36,12950,2876],{"class":42},[36,12952,12953],{"class":144}," fetch",[36,12955,12956],{"class":62},"(music_meata.value.filepath)\n",[36,12958,12960,12962,12964,12966,12969],{"class":38,"line":12959},116,[36,12961,2104],{"class":62},[36,12963,2107],{"class":144},[36,12965,165],{"class":62},[36,12967,12968],{"class":46},"\"加载音频数据\"",[36,12970,12971],{"class":62},", music_meata.value.filepath)\n",[36,12973,12975,12977,12980,12982,12984,12987,12990,12992],{"class":38,"line":12974},117,[36,12976,11955],{"class":42},[36,12978,12979],{"class":137}," arrayBuffer",[36,12981,141],{"class":42},[36,12983,2876],{"class":42},[36,12985,12986],{"class":62}," response.",[36,12988,12989],{"class":144},"arrayBuffer",[36,12991,12137],{"class":62},[36,12993,12994],{"class":72},"\u002F\u002F表示原始二进制数据的通用固定长度缓冲区\n",[36,12996,12998],{"class":38,"line":12997},118,[36,12999,13000],{"class":72},"    \u002F\u002F是 JavaScript 中处理二进制数据的基础类型，常用于文件读取、网络请求（如 fetch）、音频处理等场景。\n",[36,13002,13004,13007,13009,13011,13013,13016,13019],{"class":38,"line":13003},119,[36,13005,13006],{"class":62},"    audioBuffer ",[36,13008,661],{"class":42},[36,13010,2876],{"class":42},[36,13012,11311],{"class":62},[36,13014,13015],{"class":144},"decodeAudioData",[36,13017,13018],{"class":62},"(arrayBuffer) ",[36,13020,13021],{"class":72},"\u002F\u002FAudioBuffer 是 Web Audio API 提供的一种高级数据结构，用于表示解码后的音频数据。\n",[36,13023,13025,13027,13029],{"class":38,"line":13024},120,[36,13026,12359],{"class":62},[36,13028,661],{"class":42},[36,13030,12364],{"class":62},[36,13032,13034,13036,13038,13040,13043],{"class":38,"line":13033},121,[36,13035,2104],{"class":62},[36,13037,2107],{"class":144},[36,13039,165],{"class":62},[36,13041,13042],{"class":46},"\"音频加载完成\"",[36,13044,202],{"class":62},[36,13046,13048],{"class":38,"line":13047},122,[36,13049,702],{"class":62},[367,13051,13053],{"id":13052},"element-plus-和-element-plus-icons接入方式","element-plus 和 element-plus-icons接入方式",[10,13055,13056],{},"引入element-plus需要引入ElementPlus组件库",[10,13058,13059],{},[374,13060,13061],{},"import ElementPlus from 'element-plus'",[10,13063,13064],{},"然后引入组件样式：",[10,13066,13067],{},[374,13068,13069],{},"import 'element-plus\u002Fdist\u002Findex.css';",[10,13071,13072],{},"icons引入方式：",[26,13074,13076],{"className":6402,"code":13075,"language":6404,"meta":31,"style":31},"import * as Icon from '@element-plus\u002Ficons'\n\nconst app = createApp(App)\n\nfor (let i in Icon){\n\n  console.log(i)\n\n  console.log((Icon as any)[i])\n\n}\n\n",[33,13077,13078,13094,13098,13110,13114,13131,13135,13144,13148,13165,13169],{"__ignoreMap":31},[36,13079,13080,13082,13084,13086,13089,13091],{"class":38,"line":39},[36,13081,43],{"class":42},[36,13083,8035],{"class":137},[36,13085,8038],{"class":42},[36,13087,13088],{"class":62}," Icon ",[36,13090,66],{"class":42},[36,13092,13093],{"class":46}," '@element-plus\u002Ficons'\n",[36,13095,13096],{"class":38,"line":50},[36,13097,54],{"emptyLinePlaceholder":53},[36,13099,13100,13102,13104,13106,13108],{"class":38,"line":57},[36,13101,134],{"class":42},[36,13103,138],{"class":137},[36,13105,141],{"class":42},[36,13107,145],{"class":144},[36,13109,148],{"class":62},[36,13111,13112],{"class":38,"line":76},[36,13113,54],{"emptyLinePlaceholder":53},[36,13115,13116,13119,13121,13123,13126,13128],{"class":38,"line":92},[36,13117,13118],{"class":42},"for",[36,13120,9037],{"class":62},[36,13122,1689],{"class":42},[36,13124,13125],{"class":62}," i ",[36,13127,4633],{"class":42},[36,13129,13130],{"class":62}," Icon){\n",[36,13132,13133],{"class":38,"line":97},[36,13134,54],{"emptyLinePlaceholder":53},[36,13136,13137,13139,13141],{"class":38,"line":113},[36,13138,2894],{"class":62},[36,13140,2107],{"class":144},[36,13142,13143],{"class":62},"(i)\n",[36,13145,13146],{"class":38,"line":126},[36,13147,54],{"emptyLinePlaceholder":53},[36,13149,13150,13152,13154,13157,13159,13162],{"class":38,"line":131},[36,13151,2894],{"class":62},[36,13153,2107],{"class":144},[36,13155,13156],{"class":62},"((Icon ",[36,13158,8213],{"class":42},[36,13160,13161],{"class":137}," any",[36,13163,13164],{"class":62},")[i])\n",[36,13166,13167],{"class":38,"line":151},[36,13168,54],{"emptyLinePlaceholder":53},[36,13170,13171],{"class":38,"line":156},[36,13172,702],{"class":62},[10,13174,13175],{},"这样就可以打印出所有的icons图标。",[10,13177,13178],{},[1166,13179],{"alt":13180,"src":13181},"image-20250327000845647",".\u002Fassets\u002Fimage-20250327000845647.png",[10,13183,13184,13185,13188,13189,13192],{},"​\t可以看到所有的icon都是大写字母开头。因此为了让我们不用跟个傻逼一样一个一个去导入，因此可以用遍历和正则化表达式去匹配和导入，我们需要把所有的图标都",[374,13186,13187],{},"注册为\u003Cel-icon-......的组件才行","，在utils里",[374,13190,13191],{},"新建index.ts","方法去正则表达式匹配首字符大写并且转换为全小写。",[26,13194,13196],{"className":6402,"code":13195,"language":6404,"meta":31,"style":31},"\u002F\u002F \u002Fsrc\u002Futils\u002Findex.ts\nexport const toline = (str: string) => {\n  return str.replace(\u002F(A-Z)g\u002F,'-$1').toLocaleLowerCase()\n};\n",[33,13197,13198,13203,13229,13261],{"__ignoreMap":31},[36,13199,13200],{"class":38,"line":39},[36,13201,13202],{"class":72},"\u002F\u002F \u002Fsrc\u002Futils\u002Findex.ts\n",[36,13204,13205,13207,13209,13212,13214,13216,13218,13220,13223,13225,13227],{"class":38,"line":50},[36,13206,672],{"class":42},[36,13208,7740],{"class":42},[36,13210,13211],{"class":144}," toline",[36,13213,141],{"class":42},[36,13215,9037],{"class":62},[36,13217,8612],{"class":3474},[36,13219,4433],{"class":42},[36,13221,13222],{"class":137}," string",[36,13224,352],{"class":62},[36,13226,3329],{"class":42},[36,13228,925],{"class":62},[36,13230,13231,13233,13236,13239,13241,13243,13247,13249,13251,13254,13256,13259],{"class":38,"line":57},[36,13232,3336],{"class":42},[36,13234,13235],{"class":62}," str.",[36,13237,13238],{"class":144},"replace",[36,13240,165],{"class":62},[36,13242,3257],{"class":46},[36,13244,13246],{"class":13245},"sA_wV","(A-Z)g",[36,13248,3257],{"class":46},[36,13250,4510],{"class":62},[36,13252,13253],{"class":46},"'-$1'",[36,13255,7600],{"class":62},[36,13257,13258],{"class":144},"toLocaleLowerCase",[36,13260,3577],{"class":62},[36,13262,13263],{"class":38,"line":76},[36,13264,8996],{"class":62},[26,13266,13268],{"className":6402,"code":13267,"language":6404,"meta":31,"style":31},"import { createApp } from 'vue'\nimport '.\u002Fstyle.css'\nimport router from '.\u002Frouter\u002Finedx'\nimport App from '.\u002FApp.vue'\nimport ElementPlus from 'element-plus'\nimport 'element-plus\u002Fdist\u002Findex.css';\nimport * as Icon from '@element-plus\u002Ficons'\nimport { toline } from '.\u002Futils'\nconst app = createApp(App)\n\u002F\u002F全局注册图标 加载较慢\nfor (let i in Icon){\n    app.component(`el-icon-${toline(i)}`,(Icon as any)[i]) \u002F\u002F注册全局组件\n    console.log(i)\n    console.log((Icon as any)[i])\n}\napp.use(ElementPlus)\napp.use(router)\napp.mount('#app')\n",[33,13269,13270,13280,13287,13298,13309,13321,13330,13344,13356,13368,13373,13387,13423,13431,13445,13449,13458,13466],{"__ignoreMap":31},[36,13271,13272,13274,13276,13278],{"class":38,"line":39},[36,13273,43],{"class":42},[36,13275,63],{"class":62},[36,13277,66],{"class":42},[36,13279,2469],{"class":46},[36,13281,13282,13284],{"class":38,"line":50},[36,13283,43],{"class":42},[36,13285,13286],{"class":46}," '.\u002Fstyle.css'\n",[36,13288,13289,13291,13293,13295],{"class":38,"line":57},[36,13290,43],{"class":42},[36,13292,118],{"class":62},[36,13294,66],{"class":42},[36,13296,13297],{"class":46}," '.\u002Frouter\u002Finedx'\n",[36,13299,13300,13302,13304,13306],{"class":38,"line":76},[36,13301,43],{"class":42},[36,13303,102],{"class":62},[36,13305,66],{"class":42},[36,13307,13308],{"class":46}," '.\u002FApp.vue'\n",[36,13310,13311,13313,13316,13318],{"class":38,"line":92},[36,13312,43],{"class":42},[36,13314,13315],{"class":62}," ElementPlus ",[36,13317,66],{"class":42},[36,13319,13320],{"class":46}," 'element-plus'\n",[36,13322,13323,13325,13328],{"class":38,"line":97},[36,13324,43],{"class":42},[36,13326,13327],{"class":46}," 'element-plus\u002Fdist\u002Findex.css'",[36,13329,1523],{"class":62},[36,13331,13332,13334,13336,13338,13340,13342],{"class":38,"line":113},[36,13333,43],{"class":42},[36,13335,8035],{"class":137},[36,13337,8038],{"class":42},[36,13339,13088],{"class":62},[36,13341,66],{"class":42},[36,13343,13093],{"class":46},[36,13345,13346,13348,13351,13353],{"class":38,"line":126},[36,13347,43],{"class":42},[36,13349,13350],{"class":62}," { toline } ",[36,13352,66],{"class":42},[36,13354,13355],{"class":46}," '.\u002Futils'\n",[36,13357,13358,13360,13362,13364,13366],{"class":38,"line":131},[36,13359,134],{"class":42},[36,13361,138],{"class":137},[36,13363,141],{"class":42},[36,13365,145],{"class":144},[36,13367,148],{"class":62},[36,13369,13370],{"class":38,"line":151},[36,13371,13372],{"class":72},"\u002F\u002F全局注册图标 加载较慢\n",[36,13374,13375,13377,13379,13381,13383,13385],{"class":38,"line":156},[36,13376,13118],{"class":42},[36,13378,9037],{"class":62},[36,13380,1689],{"class":42},[36,13382,13125],{"class":62},[36,13384,4633],{"class":42},[36,13386,13130],{"class":62},[36,13388,13389,13391,13393,13395,13398,13401,13403,13406,13408,13410,13413,13415,13417,13420],{"class":38,"line":174},[36,13390,10140],{"class":62},[36,13392,9765],{"class":144},[36,13394,165],{"class":62},[36,13396,13397],{"class":46},"`el-icon-${",[36,13399,13400],{"class":144},"toline",[36,13402,165],{"class":46},[36,13404,13405],{"class":62},"i",[36,13407,6817],{"class":46},[36,13409,6442],{"class":46},[36,13411,13412],{"class":62},",(Icon ",[36,13414,8213],{"class":42},[36,13416,13161],{"class":137},[36,13418,13419],{"class":62},")[i]) ",[36,13421,13422],{"class":72},"\u002F\u002F注册全局组件\n",[36,13424,13425,13427,13429],{"class":38,"line":184},[36,13426,2104],{"class":62},[36,13428,2107],{"class":144},[36,13430,13143],{"class":62},[36,13432,13433,13435,13437,13439,13441,13443],{"class":38,"line":189},[36,13434,2104],{"class":62},[36,13436,2107],{"class":144},[36,13438,13156],{"class":62},[36,13440,8213],{"class":42},[36,13442,13161],{"class":137},[36,13444,13164],{"class":62},[36,13446,13447],{"class":38,"line":968},[36,13448,702],{"class":62},[36,13450,13451,13453,13455],{"class":38,"line":974},[36,13452,159],{"class":62},[36,13454,162],{"class":144},[36,13456,13457],{"class":62},"(ElementPlus)\n",[36,13459,13460,13462,13464],{"class":38,"line":979},[36,13461,159],{"class":62},[36,13463,162],{"class":144},[36,13465,181],{"class":62},[36,13467,13468,13470,13472,13474,13476],{"class":38,"line":1384},[36,13469,159],{"class":62},[36,13471,194],{"class":144},[36,13473,165],{"class":62},[36,13475,199],{"class":46},[36,13477,202],{"class":62},[10,13479,13480],{},"这样就可以正常使用了，顺便一提，所有的图标都是svg格式。我们可以设置svg格式图标的大小。",[10,13482,13483],{},"另外还有通过class去导入的方法",[10,13485,13486],{},[1166,13487],{"alt":13488,"src":13489},"image-20250327004046730",".\u002Fassets\u002Fimage-20250327004046730.png",[367,13491,13492],{"id":13492},"element二次封装",[386,13494,13496],{"id":13495},"常用的单位","常用的单位：",[10,13498,13499,13502],{},[374,13500,13501],{},"px:","     px单位的特点是固定不变，一旦设置了就无法因为适应页面大小而改变。因此，px单位适用于需要精确控制元素尺寸和位置的场合，如设计图标、按钮等。",[10,13504,13505,13508,13509,13512,13513,13516,13517],{},[374,13506,13507],{},"rem和em是相对单位","   :",[374,13510,13511],{},"rem单位是相对于根元素的字体尺寸来定义的","，而",[374,13514,13515],{},"em单位则是相对于当前元素内文本的字体尺寸来定义的","。这意味着，如果我们改变了根元素或父元素的字体尺寸，rem和em单位的元素尺寸也会相应地改变。因此，",[374,13518,13519],{},"rem和em单位适用于需要自适应不同屏幕尺寸和分辨率的响应式布局。",[10,13521,13522,13525,13526,13529,13530,13533,13534,6732,13537,13540,13541,798,13544,486],{},[374,13523,13524],{},"%、vmin和vmax","   :%单位相对于",[374,13527,13528],{},"父元素的相关尺寸","，适用于",[374,13531,13532],{},"需要相对于父元素进行布局的场合","。vmin和vmax单位则是",[374,13535,13536],{},"vw",[374,13538,13539],{},"vh","中的",[374,13542,13543],{},"较小值和较大值",[374,13545,13546],{},"适用于需要根据视窗大小自适应调整元素尺寸的场合",[10,13548,3291,13549,13553],{},[13550,13551,13552],"em",{},"vw\u002Fvh 是一个相对单位","（类似em 和rem 相对单位） vw 是：viewport width 视口宽度单位 vh 是：viewport height 视口高度单位相对视口的尺寸",[1495,13555,13556],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":31,"searchDepth":50,"depth":50,"links":13558},[13559,13560,13561,13562,13563,13571,13581,13585,13591,13592,13599,13606,13607,13611,13616,13632,13636,13640,13645,13651,13654,13658,13659,13660,13661,13662,13663,13671,13672,13673,13674,13675],{"id":209,"depth":57,"text":209},{"id":218,"depth":57,"text":218},{"id":224,"depth":57,"text":225},{"id":361,"depth":57,"text":362},{"id":369,"depth":50,"text":369,"children":13564},[13565,13567,13569],{"id":380,"depth":57,"text":13566},"1. 暴露（Named Exports）",{"id":468,"depth":57,"text":13568},"2. 默认暴露（Default Export）",{"id":549,"depth":57,"text":13570},"3. 暴露与默认暴露的对比",{"id":639,"depth":50,"text":639,"children":13572},[13573,13575,13577,13579],{"id":721,"depth":57,"text":13574},"1. 定义组件：",{"id":742,"depth":57,"text":13576},"2. 组件的 name 属性：",{"id":807,"depth":57,"text":13578},"3. 暴露组件名：",{"id":1130,"depth":57,"text":13580},"4. TypeScript 的使用：",{"id":1145,"depth":50,"text":1145,"children":13582},[13583],{"id":1686,"depth":57,"text":13584},"let 和 var 的区别",{"id":2146,"depth":50,"text":2146,"children":13586},[13587,13588,13589,13590],{"id":1750,"depth":57,"text":1750},{"id":2263,"depth":57,"text":2263},{"id":2917,"depth":57,"text":2918},{"id":3232,"depth":57,"text":3233},{"id":3288,"depth":50,"text":3288},{"id":3438,"depth":50,"text":3438,"children":13593},[13594,13595,13596,13597,13598],{"id":3591,"depth":57,"text":3591},{"id":3765,"depth":57,"text":3765},{"id":3793,"depth":57,"text":3793},{"id":3894,"depth":57,"text":3894},{"id":3908,"depth":57,"text":3908},{"id":3956,"depth":50,"text":3957,"children":13600},[13601,13602,13603,13605],{"id":3992,"depth":57,"text":3993},{"id":990,"depth":57,"text":4174},{"id":4206,"depth":57,"text":13604},"使用 ref 的一些注意事项：",{"id":4384,"depth":57,"text":4385},{"id":4482,"depth":50,"text":4483},{"id":4592,"depth":50,"text":4592,"children":13608},[13609,13610],{"id":4241,"depth":57,"text":4595},{"id":4238,"depth":57,"text":4792},{"id":4804,"depth":50,"text":4804,"children":13612},[13613,13614,13615],{"id":4819,"depth":57,"text":4820},{"id":4856,"depth":57,"text":4857},{"id":4884,"depth":57,"text":4885},{"id":4912,"depth":50,"text":4912,"children":13617},[13618,13620,13622,13623,13624,13625,13626,13627,13628,13629,13630,13631],{"id":4934,"depth":57,"text":13619},"1. 历史模式（History Mode）",{"id":5019,"depth":57,"text":13621},"2. 哈希模式（Hash Mode）",{"id":5109,"depth":57,"text":5110},{"id":5261,"depth":57,"text":5262},{"id":5283,"depth":57,"text":5283},{"id":5310,"depth":57,"text":5310},{"id":5331,"depth":57,"text":5332},{"id":5389,"depth":57,"text":5389},{"id":5516,"depth":57,"text":5516},{"id":5540,"depth":57,"text":5540},{"id":5564,"depth":57,"text":5564},{"id":5582,"depth":57,"text":5582},{"id":5600,"depth":50,"text":5600,"children":13633},[13634,13635],{"id":5991,"depth":57,"text":5992},{"id":6098,"depth":57,"text":6099},{"id":6146,"depth":50,"text":6147,"children":13637},[13638,13639],{"id":6150,"depth":57,"text":6151},{"id":6159,"depth":57,"text":6160},{"id":6227,"depth":50,"text":6228,"children":13641},[13642,13643,13644],{"id":6231,"depth":57,"text":6232},{"id":6235,"depth":57,"text":6236},{"id":6239,"depth":57,"text":6240},{"id":6243,"depth":50,"text":6244,"children":13646},[13647,13649,13650],{"id":6247,"depth":57,"text":13648},"为什么需要 Vue Compiler 将 .vue 文件转换为 render 函数？",{"id":6338,"depth":57,"text":6341},{"id":6452,"depth":57,"text":6455},{"id":6522,"depth":50,"text":6525,"children":13652},[13653],{"id":6540,"depth":57,"text":6543},{"id":6577,"depth":50,"text":6578,"children":13655},[13656,13657],{"id":6581,"depth":57,"text":6582},{"id":6648,"depth":57,"text":6649},{"id":6747,"depth":50,"text":6748},{"id":7652,"depth":50,"text":7653},{"id":8311,"depth":50,"text":8312},{"id":8662,"depth":50,"text":8663},{"id":8752,"depth":50,"text":8753},{"id":8791,"depth":50,"text":8792,"children":13664},[13665,13666,13667,13669],{"id":8857,"depth":57,"text":8858},{"id":8864,"depth":57,"text":8865},{"id":9104,"depth":57,"text":13668},"Vue 组件导出辅助函数：",{"id":9564,"depth":57,"text":13670},"Vue 3 插件安装辅助工具：",{"id":10369,"depth":50,"text":10370},{"id":10762,"depth":50,"text":10763},{"id":11206,"depth":50,"text":11206},{"id":13052,"depth":50,"text":13053},{"id":13492,"depth":50,"text":13492},"md",{},"\u002Fvue\u002Fvue3",{"description":12},"Vue\u002Fvue3","smlG4Wk1B3mXgYhraNVV2TPcOPFwIK5ljnoaYQbAVBg",1791042468227]