[{"data":1,"prerenderedAt":5889},["ShallowReactive",2],{"note:code\u002Fvue\u002F01-js-from-zero":3},{"id":4,"title":5,"body":6,"description":5882,"extension":5883,"meta":5884,"navigation":99,"path":5885,"seo":5886,"stem":5887,"__hash__":5888},"notes\u002Fsource\u002Fcode\u002Fvue\u002F01-js-from-zero.md","01 JavaScript 必备基础",{"type":7,"value":8,"toc":5827},"minimark",[9,13,33,36,41,44,119,122,144,154,159,195,200,229,232,252,256,259,308,311,384,390,416,420,423,549,552,555,616,619,699,702,706,709,766,769,794,797,814,817,904,907,910,947,950,1014,1017,1020,1071,1081,1085,1088,1118,1121,1143,1146,1166,1169,1188,1192,1198,1236,1247,1253,1282,1288,1325,1331,1361,1367,1424,1431,1434,1437,1483,1486,1545,1548,1566,1570,1573,1651,1653,1680,1683,1686,1719,1722,1758,1761,1790,1793,1797,1940,1953,1957,2049,2052,2123,2126,2144,2148,2151,2216,2219,2248,2251,2299,2302,2320,2330,2334,2337,2341,2344,2503,2506,2520,2527,2530,2538,2552,2556,2562,2602,2607,2638,2653,2659,2662,2668,2690,2713,2716,2724,2732,2774,2777,2793,2799,2850,2859,2862,2900,2921,2930,2933,2936,2947,2956,2959,2996,3005,3079,3087,3090,3096,3103,3106,3158,3161,3188,3224,3227,3269,3305,3308,3375,3380,3384,3481,3484,3560,3563,3580,3587,3591,3597,3645,3656,3660,3663,3743,3746,3819,3822,3830,3837,3840,3884,3887,3929,3932,3940,3942,3985,3988,3992,3995,4035,4055,4058,4071,4074,4101,4119,4121,4132,4135,4166,4173,4189,4197,4200,4266,4276,4283,4300,4310,4314,4317,4360,4396,4406,4412,4415,4418,4422,4425,4427,4478,4535,4538,4572,4575,4579,4582,4585,4601,4604,4623,4626,4645,4648,4667,4670,4689,4696,4700,4703,4741,4761,4764,4800,4803,4843,4863,4865,4881,4884,4926,4946,4948,4965,4968,4989,4991,5007,5010,5028,5035,5039,5046,5049,5166,5172,5175,5242,5245,5534,5537,5555,5559,5562,5568,5571,5585,5588,5591,5595,5598,5682,5685,5711,5715,5718,5724,5729,5743,5748,5751,5779,5782,5786,5789,5823],[10,11,5],"h1",{"id":12},"_01-javascript-必备基础",[14,15,16,17,21,22,25,26,25,29,32],"p",{},"Vue 不是一门脱离 JavaScript 的新语言。Vue 组件里的 ",[18,19,20],"code",{},"\u003Cscript setup>"," 本质上就是 JavaScript，只是 Vue 提供了一些特殊函数，例如 ",[18,23,24],{},"ref","、",[18,27,28],{},"computed",[18,30,31],{},"watch","。所以学 Vue 前，你至少要能看懂变量、数组、对象、函数、模块和异步。",[14,34,35],{},"本章不追求讲完 JavaScript 的全部细节，而是讲 Vue 开发每天都会用到的部分，并且尽量回答“为什么要这么写”。",[37,38,40],"h2",{"id":39},"_1-变量给数据起名字","1. 变量：给数据起名字",[14,42,43],{},"变量就是给一个值起名字，后面可以通过这个名字使用它。",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-js shiki shiki-themes github-light github-dark","const courseName = \"Vue 完整课程\";\nlet progress = 0;\n\nprogress = progress + 1;\n","js","",[18,52,53,77,94,101],{"__ignoreMap":50},[54,55,58,62,66,69,73],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"szBVR","const",[54,63,65],{"class":64},"sj4cs"," courseName",[54,67,68],{"class":60}," =",[54,70,72],{"class":71},"sZZnC"," \"Vue 完整课程\"",[54,74,76],{"class":75},"sVt8B",";\n",[54,78,80,83,86,89,92],{"class":56,"line":79},2,[54,81,82],{"class":60},"let",[54,84,85],{"class":75}," progress ",[54,87,88],{"class":60},"=",[54,90,91],{"class":64}," 0",[54,93,76],{"class":75},[54,95,97],{"class":56,"line":96},3,[54,98,100],{"emptyLinePlaceholder":99},true,"\n",[54,102,104,107,109,111,114,117],{"class":56,"line":103},4,[54,105,106],{"class":75},"progress ",[54,108,88],{"class":60},[54,110,85],{"class":75},[54,112,113],{"class":60},"+",[54,115,116],{"class":64}," 1",[54,118,76],{"class":75},[14,120,121],{},"这段代码里：",[123,124,125,132,138],"ul",{},[126,127,128,131],"li",{},[18,129,130],{},"courseName"," 保存字符串。",[126,133,134,137],{},[18,135,136],{},"progress"," 保存数字。",[126,139,140,143],{},[18,141,142],{},"progress = progress + 1"," 表示取出原来的进度，加 1，再放回去。",[145,146,148,150,151,153],"h3",{"id":147},"const-和-let-的区别",[18,149,61],{}," 和 ",[18,152,82],{}," 的区别",[14,155,156,158],{},[18,157,61],{}," 表示这个变量名不能重新指向另一个值：",[45,160,162],{"className":47,"code":161,"language":49,"meta":50,"style":50},"const title = \"Vue\";\ntitle = \"React\"; \u002F\u002F 报错\n",[18,163,164,178],{"__ignoreMap":50},[54,165,166,168,171,173,176],{"class":56,"line":57},[54,167,61],{"class":60},[54,169,170],{"class":64}," title",[54,172,68],{"class":60},[54,174,175],{"class":71}," \"Vue\"",[54,177,76],{"class":75},[54,179,180,183,185,188,191],{"class":56,"line":79},[54,181,182],{"class":75},"title ",[54,184,88],{"class":60},[54,186,187],{"class":71}," \"React\"",[54,189,190],{"class":75},"; ",[54,192,194],{"class":193},"sJ8bj","\u002F\u002F 报错\n",[14,196,197,199],{},[18,198,82],{}," 表示这个变量名以后可以重新赋值：",[45,201,203],{"className":47,"code":202,"language":49,"meta":50,"style":50},"let count = 0;\ncount = 1;\n",[18,204,205,218],{"__ignoreMap":50},[54,206,207,209,212,214,216],{"class":56,"line":57},[54,208,82],{"class":60},[54,210,211],{"class":75}," count ",[54,213,88],{"class":60},[54,215,91],{"class":64},[54,217,76],{"class":75},[54,219,220,223,225,227],{"class":56,"line":79},[54,221,222],{"class":75},"count ",[54,224,88],{"class":60},[54,226,116],{"class":64},[54,228,76],{"class":75},[14,230,231],{},"初学时可以记住：",[123,233,234,240,245],{},[126,235,236,237,239],{},"不需要重新赋值：用 ",[18,238,61],{},"。",[126,241,242,243,239],{},"需要重新赋值：用 ",[18,244,82],{},[126,246,247,248,251],{},"不用 ",[18,249,250],{},"var","，因为它的作用域规则更容易制造困惑。",[145,253,255],{"id":254},"vue-里为什么普通变量不够用","Vue 里为什么普通变量不够用",[14,257,258],{},"普通变量变了，Vue 不知道界面需要更新：",[45,260,262],{"className":47,"code":261,"language":49,"meta":50,"style":50},"let count = 0;\n\nfunction increase() {\n  count++;\n}\n",[18,263,264,276,280,292,302],{"__ignoreMap":50},[54,265,266,268,270,272,274],{"class":56,"line":57},[54,267,82],{"class":60},[54,269,211],{"class":75},[54,271,88],{"class":60},[54,273,91],{"class":64},[54,275,76],{"class":75},[54,277,278],{"class":56,"line":79},[54,279,100],{"emptyLinePlaceholder":99},[54,281,282,285,289],{"class":56,"line":96},[54,283,284],{"class":60},"function",[54,286,288],{"class":287},"sScJk"," increase",[54,290,291],{"class":75},"() {\n",[54,293,294,297,300],{"class":56,"line":103},[54,295,296],{"class":75},"  count",[54,298,299],{"class":60},"++",[54,301,76],{"class":75},[54,303,305],{"class":56,"line":304},5,[54,306,307],{"class":75},"}\n",[14,309,310],{},"这只是 JavaScript 变量变化。Vue 要自动更新界面，需要响应式状态：",[45,312,314],{"className":47,"code":313,"language":49,"meta":50,"style":50},"import { ref } from \"vue\";\n\nconst count = ref(0);\n\nfunction increase() {\n  count.value++;\n}\n",[18,315,316,332,336,357,361,369,379],{"__ignoreMap":50},[54,317,318,321,324,327,330],{"class":56,"line":57},[54,319,320],{"class":60},"import",[54,322,323],{"class":75}," { ref } ",[54,325,326],{"class":60},"from",[54,328,329],{"class":71}," \"vue\"",[54,331,76],{"class":75},[54,333,334],{"class":56,"line":79},[54,335,100],{"emptyLinePlaceholder":99},[54,337,338,340,343,345,348,351,354],{"class":56,"line":96},[54,339,61],{"class":60},[54,341,342],{"class":64}," count",[54,344,68],{"class":60},[54,346,347],{"class":287}," ref",[54,349,350],{"class":75},"(",[54,352,353],{"class":64},"0",[54,355,356],{"class":75},");\n",[54,358,359],{"class":56,"line":103},[54,360,100],{"emptyLinePlaceholder":99},[54,362,363,365,367],{"class":56,"line":304},[54,364,284],{"class":60},[54,366,288],{"class":287},[54,368,291],{"class":75},[54,370,372,375,377],{"class":56,"line":371},6,[54,373,374],{"class":75},"  count.value",[54,376,299],{"class":60},[54,378,76],{"class":75},[54,380,382],{"class":56,"line":381},7,[54,383,307],{"class":75},[14,385,386,387,389],{},"先不用急着理解 ",[18,388,24],{}," 的全部原理，只要记住：",[123,391,392,398,404,407],{},[126,393,394,397],{},[18,395,396],{},"ref(0)"," 创建了一个响应式盒子。",[126,399,400,401,239],{},"盒子里的真实值在 ",[18,402,403],{},".value",[126,405,406],{},"Vue 能追踪这个盒子的变化，所以界面会更新。",[126,408,409,410,413,414,239],{},"模板中写 ",[18,411,412],{},"{{ count }}"," 时，Vue 会自动帮你取 ",[18,415,403],{},[37,417,419],{"id":418},"_2-数据类型页面数据长什么样","2. 数据类型：页面数据长什么样",[14,421,422],{},"常见数据类型：",[45,424,426],{"className":47,"code":425,"language":49,"meta":50,"style":50},"const title = \"任务列表\"; \u002F\u002F string 字符串\nconst total = 10; \u002F\u002F number 数字\nconst done = false; \u002F\u002F boolean 布尔值\nconst user = null; \u002F\u002F 暂时没有值\nconst tags = [\"Vue\", \"JavaScript\"]; \u002F\u002F array 数组\nconst task = { id: 1, text: \"学 ref\" }; \u002F\u002F object 对象\n",[18,427,428,444,461,478,495,522],{"__ignoreMap":50},[54,429,430,432,434,436,439,441],{"class":56,"line":57},[54,431,61],{"class":60},[54,433,170],{"class":64},[54,435,68],{"class":60},[54,437,438],{"class":71}," \"任务列表\"",[54,440,190],{"class":75},[54,442,443],{"class":193},"\u002F\u002F string 字符串\n",[54,445,446,448,451,453,456,458],{"class":56,"line":79},[54,447,61],{"class":60},[54,449,450],{"class":64}," total",[54,452,68],{"class":60},[54,454,455],{"class":64}," 10",[54,457,190],{"class":75},[54,459,460],{"class":193},"\u002F\u002F number 数字\n",[54,462,463,465,468,470,473,475],{"class":56,"line":96},[54,464,61],{"class":60},[54,466,467],{"class":64}," done",[54,469,68],{"class":60},[54,471,472],{"class":64}," false",[54,474,190],{"class":75},[54,476,477],{"class":193},"\u002F\u002F boolean 布尔值\n",[54,479,480,482,485,487,490,492],{"class":56,"line":103},[54,481,61],{"class":60},[54,483,484],{"class":64}," user",[54,486,68],{"class":60},[54,488,489],{"class":64}," null",[54,491,190],{"class":75},[54,493,494],{"class":193},"\u002F\u002F 暂时没有值\n",[54,496,497,499,502,504,507,510,513,516,519],{"class":56,"line":304},[54,498,61],{"class":60},[54,500,501],{"class":64}," tags",[54,503,68],{"class":60},[54,505,506],{"class":75}," [",[54,508,509],{"class":71},"\"Vue\"",[54,511,512],{"class":75},", ",[54,514,515],{"class":71},"\"JavaScript\"",[54,517,518],{"class":75},"]; ",[54,520,521],{"class":193},"\u002F\u002F array 数组\n",[54,523,524,526,529,531,534,537,540,543,546],{"class":56,"line":371},[54,525,61],{"class":60},[54,527,528],{"class":64}," task",[54,530,68],{"class":60},[54,532,533],{"class":75}," { id: ",[54,535,536],{"class":64},"1",[54,538,539],{"class":75},", text: ",[54,541,542],{"class":71},"\"学 ref\"",[54,544,545],{"class":75}," }; ",[54,547,548],{"class":193},"\u002F\u002F object 对象\n",[14,550,551],{},"Vue 页面里的绝大多数状态都可以用这些类型表示。",[14,553,554],{},"例如一个任务：",[45,556,558],{"className":47,"code":557,"language":49,"meta":50,"style":50},"const task = {\n  id: 1,\n  title: \"学习 v-for\",\n  done: false,\n  priority: \"normal\",\n};\n",[18,559,560,571,581,591,601,611],{"__ignoreMap":50},[54,561,562,564,566,568],{"class":56,"line":57},[54,563,61],{"class":60},[54,565,528],{"class":64},[54,567,68],{"class":60},[54,569,570],{"class":75}," {\n",[54,572,573,576,578],{"class":56,"line":79},[54,574,575],{"class":75},"  id: ",[54,577,536],{"class":64},[54,579,580],{"class":75},",\n",[54,582,583,586,589],{"class":56,"line":96},[54,584,585],{"class":75},"  title: ",[54,587,588],{"class":71},"\"学习 v-for\"",[54,590,580],{"class":75},[54,592,593,596,599],{"class":56,"line":103},[54,594,595],{"class":75},"  done: ",[54,597,598],{"class":64},"false",[54,600,580],{"class":75},[54,602,603,606,609],{"class":56,"line":304},[54,604,605],{"class":75},"  priority: ",[54,607,608],{"class":71},"\"normal\"",[54,610,580],{"class":75},[54,612,613],{"class":56,"line":371},[54,614,615],{"class":75},"};\n",[14,617,618],{},"例如一组任务：",[45,620,622],{"className":47,"code":621,"language":49,"meta":50,"style":50},"const tasks = [\n  { id: 1, title: \"学习 ref\", done: true },\n  { id: 2, title: \"学习 computed\", done: false },\n  { id: 3, title: \"学习组件通信\", done: false },\n];\n",[18,623,624,636,658,676,694],{"__ignoreMap":50},[54,625,626,628,631,633],{"class":56,"line":57},[54,627,61],{"class":60},[54,629,630],{"class":64}," tasks",[54,632,68],{"class":60},[54,634,635],{"class":75}," [\n",[54,637,638,641,643,646,649,652,655],{"class":56,"line":79},[54,639,640],{"class":75},"  { id: ",[54,642,536],{"class":64},[54,644,645],{"class":75},", title: ",[54,647,648],{"class":71},"\"学习 ref\"",[54,650,651],{"class":75},", done: ",[54,653,654],{"class":64},"true",[54,656,657],{"class":75}," },\n",[54,659,660,662,665,667,670,672,674],{"class":56,"line":96},[54,661,640],{"class":75},[54,663,664],{"class":64},"2",[54,666,645],{"class":75},[54,668,669],{"class":71},"\"学习 computed\"",[54,671,651],{"class":75},[54,673,598],{"class":64},[54,675,657],{"class":75},[54,677,678,680,683,685,688,690,692],{"class":56,"line":103},[54,679,640],{"class":75},[54,681,682],{"class":64},"3",[54,684,645],{"class":75},[54,686,687],{"class":71},"\"学习组件通信\"",[54,689,651],{"class":75},[54,691,598],{"class":64},[54,693,657],{"class":75},[54,695,696],{"class":56,"line":304},[54,697,698],{"class":75},"];\n",[14,700,701],{},"做前端时，你要经常问自己：这个界面背后的数据结构是什么？数据结构清晰，界面代码才会清晰。",[37,703,705],{"id":704},"_3-对象描述一个东西","3. 对象：描述一个东西",[14,707,708],{},"对象适合描述“一个有多个属性的东西”。",[45,710,712],{"className":47,"code":711,"language":49,"meta":50,"style":50},"const lesson = {\n  id: \"core\",\n  title: \"Vue 核心语法\",\n  minutes: 90,\n  completed: false,\n};\n",[18,713,714,725,734,743,753,762],{"__ignoreMap":50},[54,715,716,718,721,723],{"class":56,"line":57},[54,717,61],{"class":60},[54,719,720],{"class":64}," lesson",[54,722,68],{"class":60},[54,724,570],{"class":75},[54,726,727,729,732],{"class":56,"line":79},[54,728,575],{"class":75},[54,730,731],{"class":71},"\"core\"",[54,733,580],{"class":75},[54,735,736,738,741],{"class":56,"line":96},[54,737,585],{"class":75},[54,739,740],{"class":71},"\"Vue 核心语法\"",[54,742,580],{"class":75},[54,744,745,748,751],{"class":56,"line":103},[54,746,747],{"class":75},"  minutes: ",[54,749,750],{"class":64},"90",[54,752,580],{"class":75},[54,754,755,758,760],{"class":56,"line":304},[54,756,757],{"class":75},"  completed: ",[54,759,598],{"class":64},[54,761,580],{"class":75},[54,763,764],{"class":56,"line":371},[54,765,615],{"class":75},[14,767,768],{},"读取属性：",[45,770,772],{"className":47,"code":771,"language":49,"meta":50,"style":50},"console.log(lesson.title);\nconsole.log(lesson.minutes);\n",[18,773,774,785],{"__ignoreMap":50},[54,775,776,779,782],{"class":56,"line":57},[54,777,778],{"class":75},"console.",[54,780,781],{"class":287},"log",[54,783,784],{"class":75},"(lesson.title);\n",[54,786,787,789,791],{"class":56,"line":79},[54,788,778],{"class":75},[54,790,781],{"class":287},[54,792,793],{"class":75},"(lesson.minutes);\n",[14,795,796],{},"修改属性：",[45,798,800],{"className":47,"code":799,"language":49,"meta":50,"style":50},"lesson.completed = true;\n",[18,801,802],{"__ignoreMap":50},[54,803,804,807,809,812],{"class":56,"line":57},[54,805,806],{"class":75},"lesson.completed ",[54,808,88],{"class":60},[54,810,811],{"class":64}," true",[54,813,76],{"class":75},[14,815,816],{},"在 Vue 模板中显示：",[45,818,822],{"className":819,"code":820,"language":821,"meta":50,"style":50},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ lesson.title }}\u003C\u002Fh2>\n    \u003Cp>{{ lesson.minutes }} 分钟\u003C\u002Fp>\n    \u003Cp>{{ lesson.completed ? \"已完成\" : \"未完成\" }}\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","vue",[18,823,824,836,846,860,873,886,895],{"__ignoreMap":50},[54,825,826,829,833],{"class":56,"line":57},[54,827,828],{"class":75},"\u003C",[54,830,832],{"class":831},"s9eBZ","template",[54,834,835],{"class":75},">\n",[54,837,838,841,844],{"class":56,"line":79},[54,839,840],{"class":75},"  \u003C",[54,842,843],{"class":831},"article",[54,845,835],{"class":75},[54,847,848,851,853,856,858],{"class":56,"line":96},[54,849,850],{"class":75},"    \u003C",[54,852,37],{"class":831},[54,854,855],{"class":75},">{{ lesson.title }}\u003C\u002F",[54,857,37],{"class":831},[54,859,835],{"class":75},[54,861,862,864,866,869,871],{"class":56,"line":103},[54,863,850],{"class":75},[54,865,14],{"class":831},[54,867,868],{"class":75},">{{ lesson.minutes }} 分钟\u003C\u002F",[54,870,14],{"class":831},[54,872,835],{"class":75},[54,874,875,877,879,882,884],{"class":56,"line":304},[54,876,850],{"class":75},[54,878,14],{"class":831},[54,880,881],{"class":75},">{{ lesson.completed ? \"已完成\" : \"未完成\" }}\u003C\u002F",[54,883,14],{"class":831},[54,885,835],{"class":75},[54,887,888,891,893],{"class":56,"line":371},[54,889,890],{"class":75},"  \u003C\u002F",[54,892,843],{"class":831},[54,894,835],{"class":75},[54,896,897,900,902],{"class":56,"line":381},[54,898,899],{"class":75},"\u003C\u002F",[54,901,832],{"class":831},[54,903,835],{"class":75},[145,905,906],{"id":906},"对象的常见误区",[14,908,909],{},"误区一：属性名写错。",[45,911,913],{"className":47,"code":912,"language":49,"meta":50,"style":50},"const lesson = { title: \"Vue\" };\n\nconsole.log(lesson.titel); \u002F\u002F undefined，因为 title 拼错了\n",[18,914,915,931,935],{"__ignoreMap":50},[54,916,917,919,921,923,926,928],{"class":56,"line":57},[54,918,61],{"class":60},[54,920,720],{"class":64},[54,922,68],{"class":60},[54,924,925],{"class":75}," { title: ",[54,927,509],{"class":71},[54,929,930],{"class":75}," };\n",[54,932,933],{"class":56,"line":79},[54,934,100],{"emptyLinePlaceholder":99},[54,936,937,939,941,944],{"class":56,"line":96},[54,938,778],{"class":75},[54,940,781],{"class":287},[54,942,943],{"class":75},"(lesson.titel); ",[54,945,946],{"class":193},"\u002F\u002F undefined，因为 title 拼错了\n",[14,948,949],{},"误区二：以为对象会自动复制。",[45,951,953],{"className":47,"code":952,"language":49,"meta":50,"style":50},"const a = { title: \"Vue\" };\nconst b = a;\n\nb.title = \"JavaScript\";\n\nconsole.log(a.title); \u002F\u002F JavaScript\n",[18,954,955,970,982,986,998,1002],{"__ignoreMap":50},[54,956,957,959,962,964,966,968],{"class":56,"line":57},[54,958,61],{"class":60},[54,960,961],{"class":64}," a",[54,963,68],{"class":60},[54,965,925],{"class":75},[54,967,509],{"class":71},[54,969,930],{"class":75},[54,971,972,974,977,979],{"class":56,"line":79},[54,973,61],{"class":60},[54,975,976],{"class":64}," b",[54,978,68],{"class":60},[54,980,981],{"class":75}," a;\n",[54,983,984],{"class":56,"line":96},[54,985,100],{"emptyLinePlaceholder":99},[54,987,988,991,993,996],{"class":56,"line":103},[54,989,990],{"class":75},"b.title ",[54,992,88],{"class":60},[54,994,995],{"class":71}," \"JavaScript\"",[54,997,76],{"class":75},[54,999,1000],{"class":56,"line":304},[54,1001,100],{"emptyLinePlaceholder":99},[54,1003,1004,1006,1008,1011],{"class":56,"line":371},[54,1005,778],{"class":75},[54,1007,781],{"class":287},[54,1009,1010],{"class":75},"(a.title); ",[54,1012,1013],{"class":193},"\u002F\u002F JavaScript\n",[14,1015,1016],{},"对象赋值给另一个变量时，复制的是引用，不是完整复制一个新对象。这在组件 props 和状态修改中很重要。",[14,1018,1019],{},"如果你想创建一个新对象：",[45,1021,1023],{"className":47,"code":1022,"language":49,"meta":50,"style":50},"const oldTask = { id: 1, title: \"学习 Vue\", done: false };\nconst newTask = { ...oldTask, done: true };\n",[18,1024,1025,1049],{"__ignoreMap":50},[54,1026,1027,1029,1032,1034,1036,1038,1040,1043,1045,1047],{"class":56,"line":57},[54,1028,61],{"class":60},[54,1030,1031],{"class":64}," oldTask",[54,1033,68],{"class":60},[54,1035,533],{"class":75},[54,1037,536],{"class":64},[54,1039,645],{"class":75},[54,1041,1042],{"class":71},"\"学习 Vue\"",[54,1044,651],{"class":75},[54,1046,598],{"class":64},[54,1048,930],{"class":75},[54,1050,1051,1053,1056,1058,1061,1064,1067,1069],{"class":56,"line":79},[54,1052,61],{"class":60},[54,1054,1055],{"class":64}," newTask",[54,1057,68],{"class":60},[54,1059,1060],{"class":75}," { ",[54,1062,1063],{"class":60},"...",[54,1065,1066],{"class":75},"oldTask, done: ",[54,1068,654],{"class":64},[54,1070,930],{"class":75},[14,1072,1073,1076,1077,1080],{},[18,1074,1075],{},"...oldTask"," 表示把旧对象的属性展开，再用 ",[18,1078,1079],{},"done: true"," 覆盖旧的 done。",[37,1082,1084],{"id":1083},"_4-数组描述一组东西","4. 数组：描述一组东西",[14,1086,1087],{},"数组适合描述“多个同类东西”。",[45,1089,1091],{"className":47,"code":1090,"language":49,"meta":50,"style":50},"const lessons = [\"JS 基础\", \"DOM\", \"Vue\"];\n",[18,1092,1093],{"__ignoreMap":50},[54,1094,1095,1097,1100,1102,1104,1107,1109,1112,1114,1116],{"class":56,"line":57},[54,1096,61],{"class":60},[54,1098,1099],{"class":64}," lessons",[54,1101,68],{"class":60},[54,1103,506],{"class":75},[54,1105,1106],{"class":71},"\"JS 基础\"",[54,1108,512],{"class":75},[54,1110,1111],{"class":71},"\"DOM\"",[54,1113,512],{"class":75},[54,1115,509],{"class":71},[54,1117,698],{"class":75},[14,1119,1120],{},"读取第一项：",[45,1122,1124],{"className":47,"code":1123,"language":49,"meta":50,"style":50},"console.log(lessons[0]); \u002F\u002F JS 基础\n",[18,1125,1126],{"__ignoreMap":50},[54,1127,1128,1130,1132,1135,1137,1140],{"class":56,"line":57},[54,1129,778],{"class":75},[54,1131,781],{"class":287},[54,1133,1134],{"class":75},"(lessons[",[54,1136,353],{"class":64},[54,1138,1139],{"class":75},"]); ",[54,1141,1142],{"class":193},"\u002F\u002F JS 基础\n",[14,1144,1145],{},"追加一项：",[45,1147,1149],{"className":47,"code":1148,"language":49,"meta":50,"style":50},"lessons.push(\"Router\");\n",[18,1150,1151],{"__ignoreMap":50},[54,1152,1153,1156,1159,1161,1164],{"class":56,"line":57},[54,1154,1155],{"class":75},"lessons.",[54,1157,1158],{"class":287},"push",[54,1160,350],{"class":75},[54,1162,1163],{"class":71},"\"Router\"",[54,1165,356],{"class":75},[14,1167,1168],{},"数组长度：",[45,1170,1172],{"className":47,"code":1171,"language":49,"meta":50,"style":50},"console.log(lessons.length);\n",[18,1173,1174],{"__ignoreMap":50},[54,1175,1176,1178,1180,1183,1186],{"class":56,"line":57},[54,1177,778],{"class":75},[54,1179,781],{"class":287},[54,1181,1182],{"class":75},"(lessons.",[54,1184,1185],{"class":64},"length",[54,1187,356],{"class":75},[145,1189,1191],{"id":1190},"vue-中最常见的数组方法","Vue 中最常见的数组方法",[14,1193,1194,1197],{},[18,1195,1196],{},"filter","：筛选。",[45,1199,1201],{"className":47,"code":1200,"language":49,"meta":50,"style":50},"const unfinishedTasks = tasks.filter((task) => !task.done);\n",[18,1202,1203],{"__ignoreMap":50},[54,1204,1205,1207,1210,1212,1215,1217,1220,1224,1227,1230,1233],{"class":56,"line":57},[54,1206,61],{"class":60},[54,1208,1209],{"class":64}," unfinishedTasks",[54,1211,68],{"class":60},[54,1213,1214],{"class":75}," tasks.",[54,1216,1196],{"class":287},[54,1218,1219],{"class":75},"((",[54,1221,1223],{"class":1222},"s4XuR","task",[54,1225,1226],{"class":75},") ",[54,1228,1229],{"class":60},"=>",[54,1231,1232],{"class":60}," !",[54,1234,1235],{"class":75},"task.done);\n",[14,1237,1238,1239,1242,1243,1246],{},"意思是：遍历 ",[18,1240,1241],{},"tasks","，只留下 ",[18,1244,1245],{},"done"," 为 false 的任务。",[14,1248,1249,1252],{},[18,1250,1251],{},"map","：把每一项变成另一种样子。",[45,1254,1256],{"className":47,"code":1255,"language":49,"meta":50,"style":50},"const titles = tasks.map((task) => task.title);\n",[18,1257,1258],{"__ignoreMap":50},[54,1259,1260,1262,1265,1267,1269,1271,1273,1275,1277,1279],{"class":56,"line":57},[54,1261,61],{"class":60},[54,1263,1264],{"class":64}," titles",[54,1266,68],{"class":60},[54,1268,1214],{"class":75},[54,1270,1251],{"class":287},[54,1272,1219],{"class":75},[54,1274,1223],{"class":1222},[54,1276,1226],{"class":75},[54,1278,1229],{"class":60},[54,1280,1281],{"class":75}," task.title);\n",[14,1283,1284,1287],{},[18,1285,1286],{},"find","：找到第一个符合条件的项。",[45,1289,1291],{"className":47,"code":1290,"language":49,"meta":50,"style":50},"const target = tasks.find((task) => task.id === 2);\n",[18,1292,1293],{"__ignoreMap":50},[54,1294,1295,1297,1300,1302,1304,1306,1308,1310,1312,1314,1317,1320,1323],{"class":56,"line":57},[54,1296,61],{"class":60},[54,1298,1299],{"class":64}," target",[54,1301,68],{"class":60},[54,1303,1214],{"class":75},[54,1305,1286],{"class":287},[54,1307,1219],{"class":75},[54,1309,1223],{"class":1222},[54,1311,1226],{"class":75},[54,1313,1229],{"class":60},[54,1315,1316],{"class":75}," task.id ",[54,1318,1319],{"class":60},"===",[54,1321,1322],{"class":64}," 2",[54,1324,356],{"class":75},[14,1326,1327,1330],{},[18,1328,1329],{},"some","：判断有没有至少一项符合条件。",[45,1332,1334],{"className":47,"code":1333,"language":49,"meta":50,"style":50},"const hasUnfinished = tasks.some((task) => !task.done);\n",[18,1335,1336],{"__ignoreMap":50},[54,1337,1338,1340,1343,1345,1347,1349,1351,1353,1355,1357,1359],{"class":56,"line":57},[54,1339,61],{"class":60},[54,1341,1342],{"class":64}," hasUnfinished",[54,1344,68],{"class":60},[54,1346,1214],{"class":75},[54,1348,1329],{"class":287},[54,1350,1219],{"class":75},[54,1352,1223],{"class":1222},[54,1354,1226],{"class":75},[54,1356,1229],{"class":60},[54,1358,1232],{"class":60},[54,1360,1235],{"class":75},[14,1362,1363,1366],{},[18,1364,1365],{},"reduce","：累积统计。",[45,1368,1370],{"className":47,"code":1369,"language":49,"meta":50,"style":50},"const totalMinutes = lessons.reduce((sum, lesson) => {\n  return sum + lesson.minutes;\n}, 0);\n",[18,1371,1372,1402,1415],{"__ignoreMap":50},[54,1373,1374,1376,1379,1381,1384,1386,1388,1391,1393,1396,1398,1400],{"class":56,"line":57},[54,1375,61],{"class":60},[54,1377,1378],{"class":64}," totalMinutes",[54,1380,68],{"class":60},[54,1382,1383],{"class":75}," lessons.",[54,1385,1365],{"class":287},[54,1387,1219],{"class":75},[54,1389,1390],{"class":1222},"sum",[54,1392,512],{"class":75},[54,1394,1395],{"class":1222},"lesson",[54,1397,1226],{"class":75},[54,1399,1229],{"class":60},[54,1401,570],{"class":75},[54,1403,1404,1407,1410,1412],{"class":56,"line":79},[54,1405,1406],{"class":60},"  return",[54,1408,1409],{"class":75}," sum ",[54,1411,113],{"class":60},[54,1413,1414],{"class":75}," lesson.minutes;\n",[54,1416,1417,1420,1422],{"class":56,"line":96},[54,1418,1419],{"class":75},"}, ",[54,1421,353],{"class":64},[54,1423,356],{"class":75},[145,1425,1427,1428],{"id":1426},"为什么数组适合配合-v-for","为什么数组适合配合 ",[18,1429,1430],{},"v-for",[14,1432,1433],{},"页面上的列表，本质上经常就是数组的可视化。",[14,1435,1436],{},"数据：",[45,1438,1440],{"className":47,"code":1439,"language":49,"meta":50,"style":50},"const lessons = [\n  { id: \"js\", title: \"JS 基础\" },\n  { id: \"dom\", title: \"DOM 到 Vue\" },\n];\n",[18,1441,1442,1452,1465,1479],{"__ignoreMap":50},[54,1443,1444,1446,1448,1450],{"class":56,"line":57},[54,1445,61],{"class":60},[54,1447,1099],{"class":64},[54,1449,68],{"class":60},[54,1451,635],{"class":75},[54,1453,1454,1456,1459,1461,1463],{"class":56,"line":79},[54,1455,640],{"class":75},[54,1457,1458],{"class":71},"\"js\"",[54,1460,645],{"class":75},[54,1462,1106],{"class":71},[54,1464,657],{"class":75},[54,1466,1467,1469,1472,1474,1477],{"class":56,"line":96},[54,1468,640],{"class":75},[54,1470,1471],{"class":71},"\"dom\"",[54,1473,645],{"class":75},[54,1475,1476],{"class":71},"\"DOM 到 Vue\"",[54,1478,657],{"class":75},[54,1480,1481],{"class":56,"line":103},[54,1482,698],{"class":75},[14,1484,1485],{},"模板：",[45,1487,1489],{"className":819,"code":1488,"language":821,"meta":50,"style":50},"\u003Cli v-for=\"lesson in lessons\" :key=\"lesson.id\">\n  {{ lesson.title }}\n\u003C\u002Fli>\n",[18,1490,1491,1532,1537],{"__ignoreMap":50},[54,1492,1493,1495,1497,1500,1502,1505,1508,1511,1513,1515,1518,1521,1523,1525,1528,1530],{"class":56,"line":57},[54,1494,828],{"class":75},[54,1496,126],{"class":831},[54,1498,1499],{"class":60}," v-for",[54,1501,88],{"class":75},[54,1503,1504],{"class":71},"\"",[54,1506,1507],{"class":75},"lesson ",[54,1509,1510],{"class":60},"in",[54,1512,1099],{"class":75},[54,1514,1504],{"class":71},[54,1516,1517],{"class":75}," :",[54,1519,1520],{"class":287},"key",[54,1522,88],{"class":75},[54,1524,1504],{"class":71},[54,1526,1527],{"class":75},"lesson.id",[54,1529,1504],{"class":71},[54,1531,835],{"class":75},[54,1533,1534],{"class":56,"line":79},[54,1535,1536],{"class":75},"  {{ lesson.title }}\n",[54,1538,1539,1541,1543],{"class":56,"line":96},[54,1540,899],{"class":75},[54,1542,126],{"class":831},[54,1544,835],{"class":75},[14,1546,1547],{},"这里的关系是：",[123,1549,1550,1556,1563],{},[126,1551,1552,1553,239],{},"数组有几项，页面就渲染几个 ",[18,1554,1555],{},"\u003Cli>",[126,1557,1558,1559,1562],{},"每一项对象的 ",[18,1560,1561],{},"title"," 显示成列表文字。",[126,1564,1565],{},"数组变化后，Vue 自动更新列表。",[37,1567,1569],{"id":1568},"_5-函数把动作封装起来","5. 函数：把动作封装起来",[14,1571,1572],{},"函数就是一段可重复执行的代码。",[45,1574,1576],{"className":47,"code":1575,"language":49,"meta":50,"style":50},"function add(a, b) {\n  return a + b;\n}\n\nconst result = add(2, 3);\nconsole.log(result); \u002F\u002F 5\n",[18,1577,1578,1598,1610,1614,1618,1639],{"__ignoreMap":50},[54,1579,1580,1582,1585,1587,1590,1592,1595],{"class":56,"line":57},[54,1581,284],{"class":60},[54,1583,1584],{"class":287}," add",[54,1586,350],{"class":75},[54,1588,1589],{"class":1222},"a",[54,1591,512],{"class":75},[54,1593,1594],{"class":1222},"b",[54,1596,1597],{"class":75},") {\n",[54,1599,1600,1602,1605,1607],{"class":56,"line":79},[54,1601,1406],{"class":60},[54,1603,1604],{"class":75}," a ",[54,1606,113],{"class":60},[54,1608,1609],{"class":75}," b;\n",[54,1611,1612],{"class":56,"line":96},[54,1613,307],{"class":75},[54,1615,1616],{"class":56,"line":103},[54,1617,100],{"emptyLinePlaceholder":99},[54,1619,1620,1622,1625,1627,1629,1631,1633,1635,1637],{"class":56,"line":304},[54,1621,61],{"class":60},[54,1623,1624],{"class":64}," result",[54,1626,68],{"class":60},[54,1628,1584],{"class":287},[54,1630,350],{"class":75},[54,1632,664],{"class":64},[54,1634,512],{"class":75},[54,1636,682],{"class":64},[54,1638,356],{"class":75},[54,1640,1641,1643,1645,1648],{"class":56,"line":371},[54,1642,778],{"class":75},[54,1644,781],{"class":287},[54,1646,1647],{"class":75},"(result); ",[54,1649,1650],{"class":193},"\u002F\u002F 5\n",[14,1652,121],{},[123,1654,1655,1661,1668,1674],{},[126,1656,1657,1660],{},[18,1658,1659],{},"add"," 是函数名。",[126,1662,1663,150,1665,1667],{},[18,1664,1589],{},[18,1666,1594],{}," 是参数。",[126,1669,1670,1673],{},[18,1671,1672],{},"return"," 是返回结果。",[126,1675,1676,1679],{},[18,1677,1678],{},"add(2, 3)"," 是调用函数。",[145,1681,1682],{"id":1682},"普通函数和箭头函数",[14,1684,1685],{},"普通函数：",[45,1687,1689],{"className":47,"code":1688,"language":49,"meta":50,"style":50},"function toggleTask(id) {\n  console.log(id);\n}\n",[18,1690,1691,1705,1715],{"__ignoreMap":50},[54,1692,1693,1695,1698,1700,1703],{"class":56,"line":57},[54,1694,284],{"class":60},[54,1696,1697],{"class":287}," toggleTask",[54,1699,350],{"class":75},[54,1701,1702],{"class":1222},"id",[54,1704,1597],{"class":75},[54,1706,1707,1710,1712],{"class":56,"line":79},[54,1708,1709],{"class":75},"  console.",[54,1711,781],{"class":287},[54,1713,1714],{"class":75},"(id);\n",[54,1716,1717],{"class":56,"line":96},[54,1718,307],{"class":75},[14,1720,1721],{},"箭头函数：",[45,1723,1725],{"className":47,"code":1724,"language":49,"meta":50,"style":50},"const toggleTask = (id) => {\n  console.log(id);\n};\n",[18,1726,1727,1746,1754],{"__ignoreMap":50},[54,1728,1729,1731,1733,1735,1738,1740,1742,1744],{"class":56,"line":57},[54,1730,61],{"class":60},[54,1732,1697],{"class":287},[54,1734,68],{"class":60},[54,1736,1737],{"class":75}," (",[54,1739,1702],{"class":1222},[54,1741,1226],{"class":75},[54,1743,1229],{"class":60},[54,1745,570],{"class":75},[54,1747,1748,1750,1752],{"class":56,"line":79},[54,1749,1709],{"class":75},[54,1751,781],{"class":287},[54,1753,1714],{"class":75},[54,1755,1756],{"class":56,"line":96},[54,1757,615],{"class":75},[14,1759,1760],{},"数组方法里经常用箭头函数：",[45,1762,1764],{"className":47,"code":1763,"language":49,"meta":50,"style":50},"const completedTasks = tasks.filter((task) => task.done);\n",[18,1765,1766],{"__ignoreMap":50},[54,1767,1768,1770,1773,1775,1777,1779,1781,1783,1785,1787],{"class":56,"line":57},[54,1769,61],{"class":60},[54,1771,1772],{"class":64}," completedTasks",[54,1774,68],{"class":60},[54,1776,1214],{"class":75},[54,1778,1196],{"class":287},[54,1780,1219],{"class":75},[54,1782,1223],{"class":1222},[54,1784,1226],{"class":75},[54,1786,1229],{"class":60},[54,1788,1789],{"class":75}," task.done);\n",[14,1791,1792],{},"你可以读成：“对每个 task，返回它的 done 是否为真。”",[145,1794,1796],{"id":1795},"vue-中函数通常用来处理事件","Vue 中函数通常用来处理事件",[45,1798,1800],{"className":819,"code":1799,"language":821,"meta":50,"style":50},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst count = ref(0);\n\nfunction increase() {\n  count.value++;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"increase\">增加\u003C\u002Fbutton>\n  \u003Cp>{{ count }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[18,1801,1802,1814,1826,1830,1846,1850,1858,1866,1871,1880,1885,1894,1917,1931],{"__ignoreMap":50},[54,1803,1804,1806,1809,1812],{"class":56,"line":57},[54,1805,828],{"class":75},[54,1807,1808],{"class":831},"script",[54,1810,1811],{"class":287}," setup",[54,1813,835],{"class":75},[54,1815,1816,1818,1820,1822,1824],{"class":56,"line":79},[54,1817,320],{"class":60},[54,1819,323],{"class":75},[54,1821,326],{"class":60},[54,1823,329],{"class":71},[54,1825,76],{"class":75},[54,1827,1828],{"class":56,"line":96},[54,1829,100],{"emptyLinePlaceholder":99},[54,1831,1832,1834,1836,1838,1840,1842,1844],{"class":56,"line":103},[54,1833,61],{"class":60},[54,1835,342],{"class":64},[54,1837,68],{"class":60},[54,1839,347],{"class":287},[54,1841,350],{"class":75},[54,1843,353],{"class":64},[54,1845,356],{"class":75},[54,1847,1848],{"class":56,"line":304},[54,1849,100],{"emptyLinePlaceholder":99},[54,1851,1852,1854,1856],{"class":56,"line":371},[54,1853,284],{"class":60},[54,1855,288],{"class":287},[54,1857,291],{"class":75},[54,1859,1860,1862,1864],{"class":56,"line":381},[54,1861,374],{"class":75},[54,1863,299],{"class":60},[54,1865,76],{"class":75},[54,1867,1869],{"class":56,"line":1868},8,[54,1870,307],{"class":75},[54,1872,1874,1876,1878],{"class":56,"line":1873},9,[54,1875,899],{"class":75},[54,1877,1808],{"class":831},[54,1879,835],{"class":75},[54,1881,1883],{"class":56,"line":1882},10,[54,1884,100],{"emptyLinePlaceholder":99},[54,1886,1888,1890,1892],{"class":56,"line":1887},11,[54,1889,828],{"class":75},[54,1891,832],{"class":831},[54,1893,835],{"class":75},[54,1895,1897,1899,1902,1905,1907,1910,1913,1915],{"class":56,"line":1896},12,[54,1898,840],{"class":75},[54,1900,1901],{"class":831},"button",[54,1903,1904],{"class":287}," @click",[54,1906,88],{"class":75},[54,1908,1909],{"class":71},"\"increase\"",[54,1911,1912],{"class":75},">增加\u003C\u002F",[54,1914,1901],{"class":831},[54,1916,835],{"class":75},[54,1918,1920,1922,1924,1927,1929],{"class":56,"line":1919},13,[54,1921,840],{"class":75},[54,1923,14],{"class":831},[54,1925,1926],{"class":75},">{{ count }}\u003C\u002F",[54,1928,14],{"class":831},[54,1930,835],{"class":75},[54,1932,1934,1936,1938],{"class":56,"line":1933},14,[54,1935,899],{"class":75},[54,1937,832],{"class":831},[54,1939,835],{"class":75},[14,1941,1942,1943,239,1946,1948,1949,1952],{},"点击按钮时，Vue 会调用 ",[18,1944,1945],{},"increase",[18,1947,1945],{}," 改变 ",[18,1950,1951],{},"count.value","，Vue 发现响应式状态变了，于是更新页面。",[37,1954,1956],{"id":1955},"_6-条件判断根据情况走不同逻辑","6. 条件判断：根据情况走不同逻辑",[45,1958,1960],{"className":47,"code":1959,"language":49,"meta":50,"style":50},"if (score >= 90) {\n  console.log(\"优秀\");\n} else if (score >= 60) {\n  console.log(\"及格\");\n} else {\n  console.log(\"继续练习\");\n}\n",[18,1961,1962,1978,1991,2011,2024,2032,2045],{"__ignoreMap":50},[54,1963,1964,1967,1970,1973,1976],{"class":56,"line":57},[54,1965,1966],{"class":60},"if",[54,1968,1969],{"class":75}," (score ",[54,1971,1972],{"class":60},">=",[54,1974,1975],{"class":64}," 90",[54,1977,1597],{"class":75},[54,1979,1980,1982,1984,1986,1989],{"class":56,"line":79},[54,1981,1709],{"class":75},[54,1983,781],{"class":287},[54,1985,350],{"class":75},[54,1987,1988],{"class":71},"\"优秀\"",[54,1990,356],{"class":75},[54,1992,1993,1996,1999,2002,2004,2006,2009],{"class":56,"line":96},[54,1994,1995],{"class":75},"} ",[54,1997,1998],{"class":60},"else",[54,2000,2001],{"class":60}," if",[54,2003,1969],{"class":75},[54,2005,1972],{"class":60},[54,2007,2008],{"class":64}," 60",[54,2010,1597],{"class":75},[54,2012,2013,2015,2017,2019,2022],{"class":56,"line":103},[54,2014,1709],{"class":75},[54,2016,781],{"class":287},[54,2018,350],{"class":75},[54,2020,2021],{"class":71},"\"及格\"",[54,2023,356],{"class":75},[54,2025,2026,2028,2030],{"class":56,"line":304},[54,2027,1995],{"class":75},[54,2029,1998],{"class":60},[54,2031,570],{"class":75},[54,2033,2034,2036,2038,2040,2043],{"class":56,"line":371},[54,2035,1709],{"class":75},[54,2037,781],{"class":287},[54,2039,350],{"class":75},[54,2041,2042],{"class":71},"\"继续练习\"",[54,2044,356],{"class":75},[54,2046,2047],{"class":56,"line":381},[54,2048,307],{"class":75},[14,2050,2051],{},"Vue 模板中的条件渲染：",[45,2053,2055],{"className":819,"code":2054,"language":821,"meta":50,"style":50},"\u003Cp v-if=\"loading\">加载中...\u003C\u002Fp>\n\u003Cp v-else-if=\"error\">{{ error }}\u003C\u002Fp>\n\u003Cp v-else>加载完成\u003C\u002Fp>\n",[18,2056,2057,2082,2107],{"__ignoreMap":50},[54,2058,2059,2061,2063,2066,2068,2070,2073,2075,2078,2080],{"class":56,"line":57},[54,2060,828],{"class":75},[54,2062,14],{"class":831},[54,2064,2065],{"class":60}," v-if",[54,2067,88],{"class":75},[54,2069,1504],{"class":71},[54,2071,2072],{"class":75},"loading",[54,2074,1504],{"class":71},[54,2076,2077],{"class":75},">加载中...\u003C\u002F",[54,2079,14],{"class":831},[54,2081,835],{"class":75},[54,2083,2084,2086,2088,2091,2093,2095,2098,2100,2103,2105],{"class":56,"line":79},[54,2085,828],{"class":75},[54,2087,14],{"class":831},[54,2089,2090],{"class":60}," v-else-if",[54,2092,88],{"class":75},[54,2094,1504],{"class":71},[54,2096,2097],{"class":75},"error",[54,2099,1504],{"class":71},[54,2101,2102],{"class":75},">{{ error }}\u003C\u002F",[54,2104,14],{"class":831},[54,2106,835],{"class":75},[54,2108,2109,2111,2113,2116,2119,2121],{"class":56,"line":96},[54,2110,828],{"class":75},[54,2112,14],{"class":831},[54,2114,2115],{"class":60}," v-else",[54,2117,2118],{"class":75},">加载完成\u003C\u002F",[54,2120,14],{"class":831},[54,2122,835],{"class":75},[14,2124,2125],{},"这不是三段都显示，而是按顺序判断：",[2127,2128,2129,2135,2141],"ol",{},[126,2130,2131,2132,2134],{},"如果 ",[18,2133,2072],{}," 为 true，显示加载中。",[126,2136,2137,2138,2140],{},"否则如果 ",[18,2139,2097],{}," 有值，显示错误。",[126,2142,2143],{},"否则显示加载完成。",[37,2145,2147],{"id":2146},"_7-解构从对象或模块里取东西","7. 解构：从对象或模块里取东西",[14,2149,2150],{},"对象解构：",[45,2152,2154],{"className":47,"code":2153,"language":49,"meta":50,"style":50},"const user = {\n  name: \"Ada\",\n  role: \"student\",\n};\n\nconst { name, role } = user;\n",[18,2155,2156,2166,2176,2186,2190,2194],{"__ignoreMap":50},[54,2157,2158,2160,2162,2164],{"class":56,"line":57},[54,2159,61],{"class":60},[54,2161,484],{"class":64},[54,2163,68],{"class":60},[54,2165,570],{"class":75},[54,2167,2168,2171,2174],{"class":56,"line":79},[54,2169,2170],{"class":75},"  name: ",[54,2172,2173],{"class":71},"\"Ada\"",[54,2175,580],{"class":75},[54,2177,2178,2181,2184],{"class":56,"line":96},[54,2179,2180],{"class":75},"  role: ",[54,2182,2183],{"class":71},"\"student\"",[54,2185,580],{"class":75},[54,2187,2188],{"class":56,"line":103},[54,2189,615],{"class":75},[54,2191,2192],{"class":56,"line":304},[54,2193,100],{"emptyLinePlaceholder":99},[54,2195,2196,2198,2200,2203,2205,2208,2211,2213],{"class":56,"line":371},[54,2197,61],{"class":60},[54,2199,1060],{"class":75},[54,2201,2202],{"class":64},"name",[54,2204,512],{"class":75},[54,2206,2207],{"class":64},"role",[54,2209,2210],{"class":75}," } ",[54,2212,88],{"class":60},[54,2214,2215],{"class":75}," user;\n",[14,2217,2218],{},"等价于：",[45,2220,2222],{"className":47,"code":2221,"language":49,"meta":50,"style":50},"const name = user.name;\nconst role = user.role;\n",[18,2223,2224,2236],{"__ignoreMap":50},[54,2225,2226,2228,2231,2233],{"class":56,"line":57},[54,2227,61],{"class":60},[54,2229,2230],{"class":64}," name",[54,2232,68],{"class":60},[54,2234,2235],{"class":75}," user.name;\n",[54,2237,2238,2240,2243,2245],{"class":56,"line":79},[54,2239,61],{"class":60},[54,2241,2242],{"class":64}," role",[54,2244,68],{"class":60},[54,2246,2247],{"class":75}," user.role;\n",[14,2249,2250],{},"数组解构：",[45,2252,2254],{"className":47,"code":2253,"language":49,"meta":50,"style":50},"const colors = [\"red\", \"green\"];\nconst [firstColor, secondColor] = colors;\n",[18,2255,2256,2277],{"__ignoreMap":50},[54,2257,2258,2260,2263,2265,2267,2270,2272,2275],{"class":56,"line":57},[54,2259,61],{"class":60},[54,2261,2262],{"class":64}," colors",[54,2264,68],{"class":60},[54,2266,506],{"class":75},[54,2268,2269],{"class":71},"\"red\"",[54,2271,512],{"class":75},[54,2273,2274],{"class":71},"\"green\"",[54,2276,698],{"class":75},[54,2278,2279,2281,2283,2286,2288,2291,2294,2296],{"class":56,"line":79},[54,2280,61],{"class":60},[54,2282,506],{"class":75},[54,2284,2285],{"class":64},"firstColor",[54,2287,512],{"class":75},[54,2289,2290],{"class":64},"secondColor",[54,2292,2293],{"class":75},"] ",[54,2295,88],{"class":60},[54,2297,2298],{"class":75}," colors;\n",[14,2300,2301],{},"Vue 中经常看到：",[45,2303,2305],{"className":47,"code":2304,"language":49,"meta":50,"style":50},"import { ref, computed } from \"vue\";\n",[18,2306,2307],{"__ignoreMap":50},[54,2308,2309,2311,2314,2316,2318],{"class":56,"line":57},[54,2310,320],{"class":60},[54,2312,2313],{"class":75}," { ref, computed } ",[54,2315,326],{"class":60},[54,2317,329],{"class":71},[54,2319,76],{"class":75},[14,2321,2322,2323,2325,2326,150,2328,239],{},"这也是一种“按名字取出”的感觉：从 ",[18,2324,821],{}," 这个包导出的内容里，取出 ",[18,2327,24],{},[18,2329,28],{},[37,2331,2333],{"id":2332},"_8-模块为什么要导出和导入","8. 模块：为什么要导出和导入",[14,2335,2336],{},"这是很多初学者会卡住的地方。我们慢慢讲。",[145,2338,2340],{"id":2339},"_81-为什么需要模块","8.1 为什么需要模块",[14,2342,2343],{},"如果所有代码都写在一个文件里，文件会越来越长：",[45,2345,2347],{"className":47,"code":2346,"language":49,"meta":50,"style":50},"function add(a, b) {\n  return a + b;\n}\n\nfunction subtract(a, b) {\n  return a - b;\n}\n\nfunction formatMoney(value) {\n  return `¥${value.toFixed(2)}`;\n}\n\nfunction createTask(title) {\n  return { id: Date.now(), title, done: false };\n}\n",[18,2348,2349,2365,2375,2379,2383,2400,2411,2415,2419,2433,2460,2464,2468,2481,2498],{"__ignoreMap":50},[54,2350,2351,2353,2355,2357,2359,2361,2363],{"class":56,"line":57},[54,2352,284],{"class":60},[54,2354,1584],{"class":287},[54,2356,350],{"class":75},[54,2358,1589],{"class":1222},[54,2360,512],{"class":75},[54,2362,1594],{"class":1222},[54,2364,1597],{"class":75},[54,2366,2367,2369,2371,2373],{"class":56,"line":79},[54,2368,1406],{"class":60},[54,2370,1604],{"class":75},[54,2372,113],{"class":60},[54,2374,1609],{"class":75},[54,2376,2377],{"class":56,"line":96},[54,2378,307],{"class":75},[54,2380,2381],{"class":56,"line":103},[54,2382,100],{"emptyLinePlaceholder":99},[54,2384,2385,2387,2390,2392,2394,2396,2398],{"class":56,"line":304},[54,2386,284],{"class":60},[54,2388,2389],{"class":287}," subtract",[54,2391,350],{"class":75},[54,2393,1589],{"class":1222},[54,2395,512],{"class":75},[54,2397,1594],{"class":1222},[54,2399,1597],{"class":75},[54,2401,2402,2404,2406,2409],{"class":56,"line":371},[54,2403,1406],{"class":60},[54,2405,1604],{"class":75},[54,2407,2408],{"class":60},"-",[54,2410,1609],{"class":75},[54,2412,2413],{"class":56,"line":381},[54,2414,307],{"class":75},[54,2416,2417],{"class":56,"line":1868},[54,2418,100],{"emptyLinePlaceholder":99},[54,2420,2421,2423,2426,2428,2431],{"class":56,"line":1873},[54,2422,284],{"class":60},[54,2424,2425],{"class":287}," formatMoney",[54,2427,350],{"class":75},[54,2429,2430],{"class":1222},"value",[54,2432,1597],{"class":75},[54,2434,2435,2437,2440,2442,2445,2448,2450,2452,2455,2458],{"class":56,"line":1882},[54,2436,1406],{"class":60},[54,2438,2439],{"class":71}," `¥${",[54,2441,2430],{"class":75},[54,2443,2444],{"class":71},".",[54,2446,2447],{"class":287},"toFixed",[54,2449,350],{"class":71},[54,2451,664],{"class":64},[54,2453,2454],{"class":71},")",[54,2456,2457],{"class":71},"}`",[54,2459,76],{"class":75},[54,2461,2462],{"class":56,"line":1887},[54,2463,307],{"class":75},[54,2465,2466],{"class":56,"line":1896},[54,2467,100],{"emptyLinePlaceholder":99},[54,2469,2470,2472,2475,2477,2479],{"class":56,"line":1919},[54,2471,284],{"class":60},[54,2473,2474],{"class":287}," createTask",[54,2476,350],{"class":75},[54,2478,1561],{"class":1222},[54,2480,1597],{"class":75},[54,2482,2483,2485,2488,2491,2494,2496],{"class":56,"line":1933},[54,2484,1406],{"class":60},[54,2486,2487],{"class":75}," { id: Date.",[54,2489,2490],{"class":287},"now",[54,2492,2493],{"class":75},"(), title, done: ",[54,2495,598],{"class":64},[54,2497,930],{"class":75},[54,2499,2501],{"class":56,"line":2500},15,[54,2502,307],{"class":75},[14,2504,2505],{},"一开始没问题，但项目变大后会出现几个问题：",[123,2507,2508,2511,2514,2517],{},[126,2509,2510],{},"文件太长，找代码困难。",[126,2512,2513],{},"工具函数、组件、请求逻辑混在一起。",[126,2515,2516],{},"不知道哪些函数是给外部用的，哪些只是当前文件内部用的。",[126,2518,2519],{},"多个页面都想用同一个函数，只能复制粘贴。",[14,2521,2522,2523],{},"模块的作用就是：",[2524,2525,2526],"strong",{},"把代码拆成多个文件，并明确哪些内容可以给别的文件使用。",[14,2528,2529],{},"例如：",[45,2531,2536],{"className":2532,"code":2534,"language":2535,"meta":50},[2533],"language-text","src\u002F\n  math.js\n  format.js\n  main.js\n","text",[18,2537,2534],{"__ignoreMap":50},[14,2539,2540,2543,2544,2547,2548,2551],{},[18,2541,2542],{},"math.js"," 放数学函数，",[18,2545,2546],{},"format.js"," 放格式化函数，",[18,2549,2550],{},"main.js"," 使用它们。",[145,2553,2555],{"id":2554},"_82-每个模块都有自己的作用域","8.2 每个模块都有自己的作用域",[14,2557,2558,2559,2561],{},"假设有一个文件 ",[18,2560,2542],{},"：",[45,2563,2565],{"className":47,"code":2564,"language":49,"meta":50,"style":50},"\u002F\u002F math.js\nfunction add(a, b) {\n  return a + b;\n}\n",[18,2566,2567,2572,2588,2598],{"__ignoreMap":50},[54,2568,2569],{"class":56,"line":57},[54,2570,2571],{"class":193},"\u002F\u002F math.js\n",[54,2573,2574,2576,2578,2580,2582,2584,2586],{"class":56,"line":79},[54,2575,284],{"class":60},[54,2577,1584],{"class":287},[54,2579,350],{"class":75},[54,2581,1589],{"class":1222},[54,2583,512],{"class":75},[54,2585,1594],{"class":1222},[54,2587,1597],{"class":75},[54,2589,2590,2592,2594,2596],{"class":56,"line":96},[54,2591,1406],{"class":60},[54,2593,1604],{"class":75},[54,2595,113],{"class":60},[54,2597,1609],{"class":75},[54,2599,2600],{"class":56,"line":103},[54,2601,307],{"class":75},[14,2603,2604,2605,2561],{},"再有一个文件 ",[18,2606,2550],{},[45,2608,2610],{"className":47,"code":2609,"language":49,"meta":50,"style":50},"\u002F\u002F main.js\nconsole.log(add(1, 2));\n",[18,2611,2612,2617],{"__ignoreMap":50},[54,2613,2614],{"class":56,"line":57},[54,2615,2616],{"class":193},"\u002F\u002F main.js\n",[54,2618,2619,2621,2623,2625,2627,2629,2631,2633,2635],{"class":56,"line":79},[54,2620,778],{"class":75},[54,2622,781],{"class":287},[54,2624,350],{"class":75},[54,2626,1659],{"class":287},[54,2628,350],{"class":75},[54,2630,536],{"class":64},[54,2632,512],{"class":75},[54,2634,664],{"class":64},[54,2636,2637],{"class":75},"));\n",[14,2639,2640,2641,2643,2644,2646,2647,2649,2650,2652],{},"这通常不能工作，因为 ",[18,2642,1659],{}," 只存在于 ",[18,2645,2542],{}," 这个文件内部。",[18,2648,2550],{}," 不会自动知道 ",[18,2651,2542],{}," 里有什么。",[14,2654,2655,2656],{},"模块的默认规则是：",[2524,2657,2658],{},"一个文件里的变量和函数，不会自动暴露给另一个文件。",[14,2660,2661],{},"这很好，因为它避免了名字互相污染。",[14,2663,2664,2665,2561],{},"例如两个文件里都可以有自己的 ",[18,2666,2667],{},"count",[45,2669,2671],{"className":47,"code":2670,"language":49,"meta":50,"style":50},"\u002F\u002F a.js\nconst count = 1;\n",[18,2672,2673,2678],{"__ignoreMap":50},[54,2674,2675],{"class":56,"line":57},[54,2676,2677],{"class":193},"\u002F\u002F a.js\n",[54,2679,2680,2682,2684,2686,2688],{"class":56,"line":79},[54,2681,61],{"class":60},[54,2683,342],{"class":64},[54,2685,68],{"class":60},[54,2687,116],{"class":64},[54,2689,76],{"class":75},[45,2691,2693],{"className":47,"code":2692,"language":49,"meta":50,"style":50},"\u002F\u002F b.js\nconst count = 100;\n",[18,2694,2695,2700],{"__ignoreMap":50},[54,2696,2697],{"class":56,"line":57},[54,2698,2699],{"class":193},"\u002F\u002F b.js\n",[54,2701,2702,2704,2706,2708,2711],{"class":56,"line":79},[54,2703,61],{"class":60},[54,2705,342],{"class":64},[54,2707,68],{"class":60},[54,2709,2710],{"class":64}," 100",[54,2712,76],{"class":75},[14,2714,2715],{},"它们互不影响。",[145,2717,2719,2720,2723],{"id":2718},"_83-export-是什么意思","8.3 ",[18,2721,2722],{},"export"," 是什么意思",[14,2725,2726,2728,2729],{},[18,2727,2722],{}," 的意思是：",[2524,2730,2731],{},"我允许别的模块导入这个东西。",[45,2733,2735],{"className":47,"code":2734,"language":49,"meta":50,"style":50},"\u002F\u002F math.js\nexport function add(a, b) {\n  return a + b;\n}\n",[18,2736,2737,2741,2760,2770],{"__ignoreMap":50},[54,2738,2739],{"class":56,"line":57},[54,2740,2571],{"class":193},[54,2742,2743,2745,2748,2750,2752,2754,2756,2758],{"class":56,"line":79},[54,2744,2722],{"class":60},[54,2746,2747],{"class":60}," function",[54,2749,1584],{"class":287},[54,2751,350],{"class":75},[54,2753,1589],{"class":1222},[54,2755,512],{"class":75},[54,2757,1594],{"class":1222},[54,2759,1597],{"class":75},[54,2761,2762,2764,2766,2768],{"class":56,"line":96},[54,2763,1406],{"class":60},[54,2765,1604],{"class":75},[54,2767,113],{"class":60},[54,2769,1609],{"class":75},[54,2771,2772],{"class":56,"line":103},[54,2773,307],{"class":75},[14,2775,2776],{},"这句话做了两件事：",[2127,2778,2779,2787],{},[126,2780,2781,2782,2784,2785,239],{},"在 ",[18,2783,2542],{}," 里声明一个函数 ",[18,2786,1659],{},[126,2788,2789,2790,2792],{},"把 ",[18,2791,1659],{}," 标记为“可以被别的文件导入”。",[14,2794,2795,2796,2798],{},"然后 ",[18,2797,2550],{}," 才能写：",[45,2800,2802],{"className":47,"code":2801,"language":49,"meta":50,"style":50},"\u002F\u002F main.js\nimport { add } from \".\u002Fmath.js\";\n\nconsole.log(add(1, 2)); \u002F\u002F 3\n",[18,2803,2804,2808,2822,2826],{"__ignoreMap":50},[54,2805,2806],{"class":56,"line":57},[54,2807,2616],{"class":193},[54,2809,2810,2812,2815,2817,2820],{"class":56,"line":79},[54,2811,320],{"class":60},[54,2813,2814],{"class":75}," { add } ",[54,2816,326],{"class":60},[54,2818,2819],{"class":71}," \".\u002Fmath.js\"",[54,2821,76],{"class":75},[54,2823,2824],{"class":56,"line":96},[54,2825,100],{"emptyLinePlaceholder":99},[54,2827,2828,2830,2832,2834,2836,2838,2840,2842,2844,2847],{"class":56,"line":103},[54,2829,778],{"class":75},[54,2831,781],{"class":287},[54,2833,350],{"class":75},[54,2835,1659],{"class":287},[54,2837,350],{"class":75},[54,2839,536],{"class":64},[54,2841,512],{"class":75},[54,2843,664],{"class":64},[54,2845,2846],{"class":75},")); ",[54,2848,2849],{"class":193},"\u002F\u002F 3\n",[145,2851,2853,2854,2856,2857],{"id":2852},"_84-不写-export-能不能-import","8.4 不写 ",[18,2855,2722],{}," 能不能 ",[18,2858,320],{},[14,2860,2861],{},"不能按这种方式导入。",[45,2863,2864],{"className":47,"code":2564,"language":49,"meta":50,"style":50},[18,2865,2866,2870,2886,2896],{"__ignoreMap":50},[54,2867,2868],{"class":56,"line":57},[54,2869,2571],{"class":193},[54,2871,2872,2874,2876,2878,2880,2882,2884],{"class":56,"line":79},[54,2873,284],{"class":60},[54,2875,1584],{"class":287},[54,2877,350],{"class":75},[54,2879,1589],{"class":1222},[54,2881,512],{"class":75},[54,2883,1594],{"class":1222},[54,2885,1597],{"class":75},[54,2887,2888,2890,2892,2894],{"class":56,"line":96},[54,2889,1406],{"class":60},[54,2891,1604],{"class":75},[54,2893,113],{"class":60},[54,2895,1609],{"class":75},[54,2897,2898],{"class":56,"line":103},[54,2899,307],{"class":75},[45,2901,2903],{"className":47,"code":2902,"language":49,"meta":50,"style":50},"\u002F\u002F main.js\nimport { add } from \".\u002Fmath.js\";\n",[18,2904,2905,2909],{"__ignoreMap":50},[54,2906,2907],{"class":56,"line":57},[54,2908,2616],{"class":193},[54,2910,2911,2913,2915,2917,2919],{"class":56,"line":79},[54,2912,320],{"class":60},[54,2914,2814],{"class":75},[54,2916,326],{"class":60},[54,2918,2819],{"class":71},[54,2920,76],{"class":75},[14,2922,2923,2924,2926,2927,2929],{},"这会报错，意思大概是：",[18,2925,2542],{}," 没有导出名为 ",[18,2928,1659],{}," 的内容。",[14,2931,2932],{},"为什么？因为模块系统只允许你导入对方明确导出的内容。它不会偷偷把对方文件里的所有变量都拿出来。",[14,2934,2935],{},"这是一种保护：",[123,2937,2938,2941,2944],{},[126,2939,2940],{},"文件内部的临时变量不会暴露。",[126,2942,2943],{},"外部文件只能使用公开 API。",[126,2945,2946],{},"改内部实现时，不容易影响外部。",[145,2948,2950,2951,2953,2954],{"id":2949},"_85-export-会不会影响原来的-mathjs","8.5 ",[18,2952,2722],{}," 会不会影响原来的 ",[18,2955,2542],{},[14,2957,2958],{},"会有影响，但不是“改变函数功能”的影响。",[45,2960,2962],{"className":47,"code":2961,"language":49,"meta":50,"style":50},"export function add(a, b) {\n  return a + b;\n}\n",[18,2963,2964,2982,2992],{"__ignoreMap":50},[54,2965,2966,2968,2970,2972,2974,2976,2978,2980],{"class":56,"line":57},[54,2967,2722],{"class":60},[54,2969,2747],{"class":60},[54,2971,1584],{"class":287},[54,2973,350],{"class":75},[54,2975,1589],{"class":1222},[54,2977,512],{"class":75},[54,2979,1594],{"class":1222},[54,2981,1597],{"class":75},[54,2983,2984,2986,2988,2990],{"class":56,"line":79},[54,2985,1406],{"class":60},[54,2987,1604],{"class":75},[54,2989,113],{"class":60},[54,2991,1609],{"class":75},[54,2993,2994],{"class":56,"line":96},[54,2995,307],{"class":75},[14,2997,2998,2999,3001,3002,3004],{},"对 ",[18,3000,2542],{}," 自己来说，",[18,3003,1659],{}," 仍然可以正常使用：",[45,3006,3008],{"className":47,"code":3007,"language":49,"meta":50,"style":50},"\u002F\u002F math.js\nexport function add(a, b) {\n  return a + b;\n}\n\nconst result = add(1, 2);\nconsole.log(result);\n",[18,3009,3010,3014,3032,3042,3046,3050,3070],{"__ignoreMap":50},[54,3011,3012],{"class":56,"line":57},[54,3013,2571],{"class":193},[54,3015,3016,3018,3020,3022,3024,3026,3028,3030],{"class":56,"line":79},[54,3017,2722],{"class":60},[54,3019,2747],{"class":60},[54,3021,1584],{"class":287},[54,3023,350],{"class":75},[54,3025,1589],{"class":1222},[54,3027,512],{"class":75},[54,3029,1594],{"class":1222},[54,3031,1597],{"class":75},[54,3033,3034,3036,3038,3040],{"class":56,"line":96},[54,3035,1406],{"class":60},[54,3037,1604],{"class":75},[54,3039,113],{"class":60},[54,3041,1609],{"class":75},[54,3043,3044],{"class":56,"line":103},[54,3045,307],{"class":75},[54,3047,3048],{"class":56,"line":304},[54,3049,100],{"emptyLinePlaceholder":99},[54,3051,3052,3054,3056,3058,3060,3062,3064,3066,3068],{"class":56,"line":371},[54,3053,61],{"class":60},[54,3055,1624],{"class":64},[54,3057,68],{"class":60},[54,3059,1584],{"class":287},[54,3061,350],{"class":75},[54,3063,536],{"class":64},[54,3065,512],{"class":75},[54,3067,664],{"class":64},[54,3069,356],{"class":75},[54,3071,3072,3074,3076],{"class":56,"line":381},[54,3073,778],{"class":75},[54,3075,781],{"class":287},[54,3077,3078],{"class":75},"(result);\n",[14,3080,3081,3083,3084,3086],{},[18,3082,2722],{}," 不会改变 ",[18,3085,1659],{}," 的计算逻辑。它只是多加了一个身份：这个函数可以被别的模块导入。",[14,3088,3089],{},"你可以把它想成：",[45,3091,3094],{"className":3092,"code":3093,"language":2535,"meta":50},[2533],"没有 export：这是当前文件自己的函数。\n有 export：这是当前文件自己的函数，同时也公开给外部使用。\n",[18,3095,3093],{"__ignoreMap":50},[145,3097,3099,3100,3102],{"id":3098},"_86-import-之后怎么调用","8.6 ",[18,3101,320],{}," 之后怎么调用",[14,3104,3105],{},"导入后，就像使用当前文件里的普通函数一样调用。",[45,3107,3109],{"className":47,"code":3108,"language":49,"meta":50,"style":50},"import { add } from \".\u002Fmath.js\";\n\nconst total = add(10, 20);\nconsole.log(total);\n",[18,3110,3111,3123,3127,3149],{"__ignoreMap":50},[54,3112,3113,3115,3117,3119,3121],{"class":56,"line":57},[54,3114,320],{"class":60},[54,3116,2814],{"class":75},[54,3118,326],{"class":60},[54,3120,2819],{"class":71},[54,3122,76],{"class":75},[54,3124,3125],{"class":56,"line":79},[54,3126,100],{"emptyLinePlaceholder":99},[54,3128,3129,3131,3133,3135,3137,3139,3142,3144,3147],{"class":56,"line":96},[54,3130,61],{"class":60},[54,3132,450],{"class":64},[54,3134,68],{"class":60},[54,3136,1584],{"class":287},[54,3138,350],{"class":75},[54,3140,3141],{"class":64},"10",[54,3143,512],{"class":75},[54,3145,3146],{"class":64},"20",[54,3148,356],{"class":75},[54,3150,3151,3153,3155],{"class":56,"line":103},[54,3152,778],{"class":75},[54,3154,781],{"class":287},[54,3156,3157],{"class":75},"(total);\n",[14,3159,3160],{},"如果导入的是变量：",[45,3162,3164],{"className":47,"code":3163,"language":49,"meta":50,"style":50},"\u002F\u002F config.js\nexport const appName = \"Vue Tutorial\";\n",[18,3165,3166,3171],{"__ignoreMap":50},[54,3167,3168],{"class":56,"line":57},[54,3169,3170],{"class":193},"\u002F\u002F config.js\n",[54,3172,3173,3175,3178,3181,3183,3186],{"class":56,"line":79},[54,3174,2722],{"class":60},[54,3176,3177],{"class":60}," const",[54,3179,3180],{"class":64}," appName",[54,3182,68],{"class":60},[54,3184,3185],{"class":71}," \"Vue Tutorial\"",[54,3187,76],{"class":75},[45,3189,3191],{"className":47,"code":3190,"language":49,"meta":50,"style":50},"\u002F\u002F main.js\nimport { appName } from \".\u002Fconfig.js\";\n\nconsole.log(appName);\n",[18,3192,3193,3197,3211,3215],{"__ignoreMap":50},[54,3194,3195],{"class":56,"line":57},[54,3196,2616],{"class":193},[54,3198,3199,3201,3204,3206,3209],{"class":56,"line":79},[54,3200,320],{"class":60},[54,3202,3203],{"class":75}," { appName } ",[54,3205,326],{"class":60},[54,3207,3208],{"class":71}," \".\u002Fconfig.js\"",[54,3210,76],{"class":75},[54,3212,3213],{"class":56,"line":96},[54,3214,100],{"emptyLinePlaceholder":99},[54,3216,3217,3219,3221],{"class":56,"line":103},[54,3218,778],{"class":75},[54,3220,781],{"class":287},[54,3222,3223],{"class":75},"(appName);\n",[14,3225,3226],{},"如果导入的是对象：",[45,3228,3230],{"className":47,"code":3229,"language":49,"meta":50,"style":50},"\u002F\u002F user.js\nexport const user = {\n  name: \"Ada\",\n  role: \"student\",\n};\n",[18,3231,3232,3237,3249,3257,3265],{"__ignoreMap":50},[54,3233,3234],{"class":56,"line":57},[54,3235,3236],{"class":193},"\u002F\u002F user.js\n",[54,3238,3239,3241,3243,3245,3247],{"class":56,"line":79},[54,3240,2722],{"class":60},[54,3242,3177],{"class":60},[54,3244,484],{"class":64},[54,3246,68],{"class":60},[54,3248,570],{"class":75},[54,3250,3251,3253,3255],{"class":56,"line":96},[54,3252,2170],{"class":75},[54,3254,2173],{"class":71},[54,3256,580],{"class":75},[54,3258,3259,3261,3263],{"class":56,"line":103},[54,3260,2180],{"class":75},[54,3262,2183],{"class":71},[54,3264,580],{"class":75},[54,3266,3267],{"class":56,"line":304},[54,3268,615],{"class":75},[45,3270,3272],{"className":47,"code":3271,"language":49,"meta":50,"style":50},"\u002F\u002F main.js\nimport { user } from \".\u002Fuser.js\";\n\nconsole.log(user.name);\n",[18,3273,3274,3278,3292,3296],{"__ignoreMap":50},[54,3275,3276],{"class":56,"line":57},[54,3277,2616],{"class":193},[54,3279,3280,3282,3285,3287,3290],{"class":56,"line":79},[54,3281,320],{"class":60},[54,3283,3284],{"class":75}," { user } ",[54,3286,326],{"class":60},[54,3288,3289],{"class":71}," \".\u002Fuser.js\"",[54,3291,76],{"class":75},[54,3293,3294],{"class":56,"line":96},[54,3295,100],{"emptyLinePlaceholder":99},[54,3297,3298,3300,3302],{"class":56,"line":103},[54,3299,778],{"class":75},[54,3301,781],{"class":287},[54,3303,3304],{"class":75},"(user.name);\n",[14,3306,3307],{},"如果导入的是 Vue 组件：",[45,3309,3311],{"className":819,"code":3310,"language":821,"meta":50,"style":50},"\u003Cscript setup>\nimport LessonCard from \".\u002Fcomponents\u002FLessonCard.vue\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLessonCard \u002F>\n\u003C\u002Ftemplate>\n",[18,3312,3313,3323,3337,3345,3349,3357,3367],{"__ignoreMap":50},[54,3314,3315,3317,3319,3321],{"class":56,"line":57},[54,3316,828],{"class":75},[54,3318,1808],{"class":831},[54,3320,1811],{"class":287},[54,3322,835],{"class":75},[54,3324,3325,3327,3330,3332,3335],{"class":56,"line":79},[54,3326,320],{"class":60},[54,3328,3329],{"class":75}," LessonCard ",[54,3331,326],{"class":60},[54,3333,3334],{"class":71}," \".\u002Fcomponents\u002FLessonCard.vue\"",[54,3336,76],{"class":75},[54,3338,3339,3341,3343],{"class":56,"line":96},[54,3340,899],{"class":75},[54,3342,1808],{"class":831},[54,3344,835],{"class":75},[54,3346,3347],{"class":56,"line":103},[54,3348,100],{"emptyLinePlaceholder":99},[54,3350,3351,3353,3355],{"class":56,"line":304},[54,3352,828],{"class":75},[54,3354,832],{"class":831},[54,3356,835],{"class":75},[54,3358,3359,3361,3364],{"class":56,"line":371},[54,3360,840],{"class":75},[54,3362,3363],{"class":831},"LessonCard",[54,3365,3366],{"class":75}," \u002F>\n",[54,3368,3369,3371,3373],{"class":56,"line":381},[54,3370,899],{"class":75},[54,3372,832],{"class":831},[54,3374,835],{"class":75},[14,3376,2781,3377,3379],{},[18,3378,20],{}," 中，导入的组件可以直接在模板中使用。",[145,3381,3383],{"id":3382},"_87-命名导出一个文件导出多个东西","8.7 命名导出：一个文件导出多个东西",[45,3385,3387],{"className":47,"code":3386,"language":49,"meta":50,"style":50},"\u002F\u002F math.js\nexport function add(a, b) {\n  return a + b;\n}\n\nexport function subtract(a, b) {\n  return a - b;\n}\n\nexport const PI = 3.14159;\n",[18,3388,3389,3393,3411,3421,3425,3429,3447,3457,3461,3465],{"__ignoreMap":50},[54,3390,3391],{"class":56,"line":57},[54,3392,2571],{"class":193},[54,3394,3395,3397,3399,3401,3403,3405,3407,3409],{"class":56,"line":79},[54,3396,2722],{"class":60},[54,3398,2747],{"class":60},[54,3400,1584],{"class":287},[54,3402,350],{"class":75},[54,3404,1589],{"class":1222},[54,3406,512],{"class":75},[54,3408,1594],{"class":1222},[54,3410,1597],{"class":75},[54,3412,3413,3415,3417,3419],{"class":56,"line":96},[54,3414,1406],{"class":60},[54,3416,1604],{"class":75},[54,3418,113],{"class":60},[54,3420,1609],{"class":75},[54,3422,3423],{"class":56,"line":103},[54,3424,307],{"class":75},[54,3426,3427],{"class":56,"line":304},[54,3428,100],{"emptyLinePlaceholder":99},[54,3430,3431,3433,3435,3437,3439,3441,3443,3445],{"class":56,"line":371},[54,3432,2722],{"class":60},[54,3434,2747],{"class":60},[54,3436,2389],{"class":287},[54,3438,350],{"class":75},[54,3440,1589],{"class":1222},[54,3442,512],{"class":75},[54,3444,1594],{"class":1222},[54,3446,1597],{"class":75},[54,3448,3449,3451,3453,3455],{"class":56,"line":381},[54,3450,1406],{"class":60},[54,3452,1604],{"class":75},[54,3454,2408],{"class":60},[54,3456,1609],{"class":75},[54,3458,3459],{"class":56,"line":1868},[54,3460,307],{"class":75},[54,3462,3463],{"class":56,"line":1873},[54,3464,100],{"emptyLinePlaceholder":99},[54,3466,3467,3469,3471,3474,3476,3479],{"class":56,"line":1882},[54,3468,2722],{"class":60},[54,3470,3177],{"class":60},[54,3472,3473],{"class":64}," PI",[54,3475,68],{"class":60},[54,3477,3478],{"class":64}," 3.14159",[54,3480,76],{"class":75},[14,3482,3483],{},"导入：",[45,3485,3487],{"className":47,"code":3486,"language":49,"meta":50,"style":50},"import { add, subtract, PI } from \".\u002Fmath.js\";\n\nconsole.log(add(3, 2));\nconsole.log(subtract(3, 2));\nconsole.log(PI);\n",[18,3488,3489,3502,3506,3526,3547],{"__ignoreMap":50},[54,3490,3491,3493,3496,3498,3500],{"class":56,"line":57},[54,3492,320],{"class":60},[54,3494,3495],{"class":75}," { add, subtract, PI } ",[54,3497,326],{"class":60},[54,3499,2819],{"class":71},[54,3501,76],{"class":75},[54,3503,3504],{"class":56,"line":79},[54,3505,100],{"emptyLinePlaceholder":99},[54,3507,3508,3510,3512,3514,3516,3518,3520,3522,3524],{"class":56,"line":96},[54,3509,778],{"class":75},[54,3511,781],{"class":287},[54,3513,350],{"class":75},[54,3515,1659],{"class":287},[54,3517,350],{"class":75},[54,3519,682],{"class":64},[54,3521,512],{"class":75},[54,3523,664],{"class":64},[54,3525,2637],{"class":75},[54,3527,3528,3530,3532,3534,3537,3539,3541,3543,3545],{"class":56,"line":103},[54,3529,778],{"class":75},[54,3531,781],{"class":287},[54,3533,350],{"class":75},[54,3535,3536],{"class":287},"subtract",[54,3538,350],{"class":75},[54,3540,682],{"class":64},[54,3542,512],{"class":75},[54,3544,664],{"class":64},[54,3546,2637],{"class":75},[54,3548,3549,3551,3553,3555,3558],{"class":56,"line":304},[54,3550,778],{"class":75},[54,3552,781],{"class":287},[54,3554,350],{"class":75},[54,3556,3557],{"class":64},"PI",[54,3559,356],{"class":75},[14,3561,3562],{},"命名导出必须使用花括号，并且名字要对应。",[45,3564,3566],{"className":47,"code":3565,"language":49,"meta":50,"style":50},"import { add } from \".\u002Fmath.js\";\n",[18,3567,3568],{"__ignoreMap":50},[54,3569,3570,3572,3574,3576,3578],{"class":56,"line":57},[54,3571,320],{"class":60},[54,3573,2814],{"class":75},[54,3575,326],{"class":60},[54,3577,2819],{"class":71},[54,3579,76],{"class":75},[14,3581,3582,3583,3586],{},"这里的 ",[18,3584,3585],{},"{ add }"," 不是对象字面量，而是“我要导入名为 add 的导出”。",[145,3588,3590],{"id":3589},"_88-导入时可以改名","8.8 导入时可以改名",[14,3592,3593,3594,239],{},"如果名字冲突，或者你想让名字更清楚，可以用 ",[18,3595,3596],{},"as",[45,3598,3600],{"className":47,"code":3599,"language":49,"meta":50,"style":50},"import { add as addNumbers } from \".\u002Fmath.js\";\n\nconsole.log(addNumbers(1, 2));\n",[18,3601,3602,3620,3624],{"__ignoreMap":50},[54,3603,3604,3606,3609,3611,3614,3616,3618],{"class":56,"line":57},[54,3605,320],{"class":60},[54,3607,3608],{"class":75}," { add ",[54,3610,3596],{"class":60},[54,3612,3613],{"class":75}," addNumbers } ",[54,3615,326],{"class":60},[54,3617,2819],{"class":71},[54,3619,76],{"class":75},[54,3621,3622],{"class":56,"line":79},[54,3623,100],{"emptyLinePlaceholder":99},[54,3625,3626,3628,3630,3632,3635,3637,3639,3641,3643],{"class":56,"line":96},[54,3627,778],{"class":75},[54,3629,781],{"class":287},[54,3631,350],{"class":75},[54,3633,3634],{"class":287},"addNumbers",[54,3636,350],{"class":75},[54,3638,536],{"class":64},[54,3640,512],{"class":75},[54,3642,664],{"class":64},[54,3644,2637],{"class":75},[14,3646,3647,3648,3650,3651,3653,3654,239],{},"这表示：从 ",[18,3649,2542],{}," 导入 ",[18,3652,1659],{},"，但在当前文件叫 ",[18,3655,3634],{},[145,3657,3659],{"id":3658},"_89-统一导出写法","8.9 统一导出写法",[14,3661,3662],{},"有时你会看到这种写法：",[45,3664,3666],{"className":47,"code":3665,"language":49,"meta":50,"style":50},"function add(a, b) {\n  return a + b;\n}\n\nfunction subtract(a, b) {\n  return a - b;\n}\n\nexport { add, subtract };\n",[18,3667,3668,3684,3694,3698,3702,3718,3728,3732,3736],{"__ignoreMap":50},[54,3669,3670,3672,3674,3676,3678,3680,3682],{"class":56,"line":57},[54,3671,284],{"class":60},[54,3673,1584],{"class":287},[54,3675,350],{"class":75},[54,3677,1589],{"class":1222},[54,3679,512],{"class":75},[54,3681,1594],{"class":1222},[54,3683,1597],{"class":75},[54,3685,3686,3688,3690,3692],{"class":56,"line":79},[54,3687,1406],{"class":60},[54,3689,1604],{"class":75},[54,3691,113],{"class":60},[54,3693,1609],{"class":75},[54,3695,3696],{"class":56,"line":96},[54,3697,307],{"class":75},[54,3699,3700],{"class":56,"line":103},[54,3701,100],{"emptyLinePlaceholder":99},[54,3703,3704,3706,3708,3710,3712,3714,3716],{"class":56,"line":304},[54,3705,284],{"class":60},[54,3707,2389],{"class":287},[54,3709,350],{"class":75},[54,3711,1589],{"class":1222},[54,3713,512],{"class":75},[54,3715,1594],{"class":1222},[54,3717,1597],{"class":75},[54,3719,3720,3722,3724,3726],{"class":56,"line":371},[54,3721,1406],{"class":60},[54,3723,1604],{"class":75},[54,3725,2408],{"class":60},[54,3727,1609],{"class":75},[54,3729,3730],{"class":56,"line":381},[54,3731,307],{"class":75},[54,3733,3734],{"class":56,"line":1868},[54,3735,100],{"emptyLinePlaceholder":99},[54,3737,3738,3740],{"class":56,"line":1873},[54,3739,2722],{"class":60},[54,3741,3742],{"class":75}," { add, subtract };\n",[14,3744,3745],{},"它和下面这种效果一样：",[45,3747,3749],{"className":47,"code":3748,"language":49,"meta":50,"style":50},"export function add(a, b) {\n  return a + b;\n}\n\nexport function subtract(a, b) {\n  return a - b;\n}\n",[18,3750,3751,3769,3779,3783,3787,3805,3815],{"__ignoreMap":50},[54,3752,3753,3755,3757,3759,3761,3763,3765,3767],{"class":56,"line":57},[54,3754,2722],{"class":60},[54,3756,2747],{"class":60},[54,3758,1584],{"class":287},[54,3760,350],{"class":75},[54,3762,1589],{"class":1222},[54,3764,512],{"class":75},[54,3766,1594],{"class":1222},[54,3768,1597],{"class":75},[54,3770,3771,3773,3775,3777],{"class":56,"line":79},[54,3772,1406],{"class":60},[54,3774,1604],{"class":75},[54,3776,113],{"class":60},[54,3778,1609],{"class":75},[54,3780,3781],{"class":56,"line":96},[54,3782,307],{"class":75},[54,3784,3785],{"class":56,"line":103},[54,3786,100],{"emptyLinePlaceholder":99},[54,3788,3789,3791,3793,3795,3797,3799,3801,3803],{"class":56,"line":304},[54,3790,2722],{"class":60},[54,3792,2747],{"class":60},[54,3794,2389],{"class":287},[54,3796,350],{"class":75},[54,3798,1589],{"class":1222},[54,3800,512],{"class":75},[54,3802,1594],{"class":1222},[54,3804,1597],{"class":75},[54,3806,3807,3809,3811,3813],{"class":56,"line":371},[54,3808,1406],{"class":60},[54,3810,1604],{"class":75},[54,3812,2408],{"class":60},[54,3814,1609],{"class":75},[54,3816,3817],{"class":56,"line":381},[54,3818,307],{"class":75},[14,3820,3821],{},"区别只是风格：",[123,3823,3824,3827],{},[126,3825,3826],{},"写在声明前：看到函数时就知道它被导出。",[126,3828,3829],{},"统一写在末尾：文件底部集中列出公开内容。",[145,3831,3833,3834],{"id":3832},"_810-默认导出-export-default","8.10 默认导出 ",[18,3835,3836],{},"export default",[14,3838,3839],{},"一个模块可以有一个默认导出。",[45,3841,3843],{"className":47,"code":3842,"language":49,"meta":50,"style":50},"\u002F\u002F math.js\nexport default function add(a, b) {\n  return a + b;\n}\n",[18,3844,3845,3849,3870,3880],{"__ignoreMap":50},[54,3846,3847],{"class":56,"line":57},[54,3848,2571],{"class":193},[54,3850,3851,3853,3856,3858,3860,3862,3864,3866,3868],{"class":56,"line":79},[54,3852,2722],{"class":60},[54,3854,3855],{"class":60}," default",[54,3857,2747],{"class":60},[54,3859,1584],{"class":287},[54,3861,350],{"class":75},[54,3863,1589],{"class":1222},[54,3865,512],{"class":75},[54,3867,1594],{"class":1222},[54,3869,1597],{"class":75},[54,3871,3872,3874,3876,3878],{"class":56,"line":96},[54,3873,1406],{"class":60},[54,3875,1604],{"class":75},[54,3877,113],{"class":60},[54,3879,1609],{"class":75},[54,3881,3882],{"class":56,"line":103},[54,3883,307],{"class":75},[14,3885,3886],{},"导入时不需要花括号：",[45,3888,3890],{"className":47,"code":3889,"language":49,"meta":50,"style":50},"import add from \".\u002Fmath.js\";\n\nconsole.log(add(1, 2));\n",[18,3891,3892,3905,3909],{"__ignoreMap":50},[54,3893,3894,3896,3899,3901,3903],{"class":56,"line":57},[54,3895,320],{"class":60},[54,3897,3898],{"class":75}," add ",[54,3900,326],{"class":60},[54,3902,2819],{"class":71},[54,3904,76],{"class":75},[54,3906,3907],{"class":56,"line":79},[54,3908,100],{"emptyLinePlaceholder":99},[54,3910,3911,3913,3915,3917,3919,3921,3923,3925,3927],{"class":56,"line":96},[54,3912,778],{"class":75},[54,3914,781],{"class":287},[54,3916,350],{"class":75},[54,3918,1659],{"class":287},[54,3920,350],{"class":75},[54,3922,536],{"class":64},[54,3924,512],{"class":75},[54,3926,664],{"class":64},[54,3928,2637],{"class":75},[14,3930,3931],{},"默认导出的特点：",[123,3933,3934,3937],{},[126,3935,3936],{},"一个文件最多只能有一个默认导出。",[126,3938,3939],{},"导入时名字可以自己取。",[14,3941,2529],{},[45,3943,3945],{"className":47,"code":3944,"language":49,"meta":50,"style":50},"import whateverName from \".\u002Fmath.js\";\n\nconsole.log(whateverName(1, 2));\n",[18,3946,3947,3960,3964],{"__ignoreMap":50},[54,3948,3949,3951,3954,3956,3958],{"class":56,"line":57},[54,3950,320],{"class":60},[54,3952,3953],{"class":75}," whateverName ",[54,3955,326],{"class":60},[54,3957,2819],{"class":71},[54,3959,76],{"class":75},[54,3961,3962],{"class":56,"line":79},[54,3963,100],{"emptyLinePlaceholder":99},[54,3965,3966,3968,3970,3972,3975,3977,3979,3981,3983],{"class":56,"line":96},[54,3967,778],{"class":75},[54,3969,781],{"class":287},[54,3971,350],{"class":75},[54,3973,3974],{"class":287},"whateverName",[54,3976,350],{"class":75},[54,3978,536],{"class":64},[54,3980,512],{"class":75},[54,3982,664],{"class":64},[54,3984,2637],{"class":75},[14,3986,3987],{},"因为默认导出没有强制使用原名。",[145,3989,3991],{"id":3990},"_811-命名导出和默认导出的区别","8.11 命名导出和默认导出的区别",[14,3993,3994],{},"命名导出：",[45,3996,3997],{"className":47,"code":2734,"language":49,"meta":50,"style":50},[18,3998,3999,4003,4021,4031],{"__ignoreMap":50},[54,4000,4001],{"class":56,"line":57},[54,4002,2571],{"class":193},[54,4004,4005,4007,4009,4011,4013,4015,4017,4019],{"class":56,"line":79},[54,4006,2722],{"class":60},[54,4008,2747],{"class":60},[54,4010,1584],{"class":287},[54,4012,350],{"class":75},[54,4014,1589],{"class":1222},[54,4016,512],{"class":75},[54,4018,1594],{"class":1222},[54,4020,1597],{"class":75},[54,4022,4023,4025,4027,4029],{"class":56,"line":96},[54,4024,1406],{"class":60},[54,4026,1604],{"class":75},[54,4028,113],{"class":60},[54,4030,1609],{"class":75},[54,4032,4033],{"class":56,"line":103},[54,4034,307],{"class":75},[45,4036,4037],{"className":47,"code":2902,"language":49,"meta":50,"style":50},[18,4038,4039,4043],{"__ignoreMap":50},[54,4040,4041],{"class":56,"line":57},[54,4042,2616],{"class":193},[54,4044,4045,4047,4049,4051,4053],{"class":56,"line":79},[54,4046,320],{"class":60},[54,4048,2814],{"class":75},[54,4050,326],{"class":60},[54,4052,2819],{"class":71},[54,4054,76],{"class":75},[14,4056,4057],{},"特点：",[123,4059,4060,4063,4068],{},[126,4061,4062],{},"导入时需要花括号。",[126,4064,4065,4066,239],{},"名字必须和导出名一致，除非用 ",[18,4067,3596],{},[126,4069,4070],{},"一个文件可以有多个命名导出。",[14,4072,4073],{},"默认导出：",[45,4075,4077],{"className":47,"code":4076,"language":49,"meta":50,"style":50},"\u002F\u002F LessonCard.vue\nexport default {\n  \u002F\u002F 组件配置\n};\n",[18,4078,4079,4084,4092,4097],{"__ignoreMap":50},[54,4080,4081],{"class":56,"line":57},[54,4082,4083],{"class":193},"\u002F\u002F LessonCard.vue\n",[54,4085,4086,4088,4090],{"class":56,"line":79},[54,4087,2722],{"class":60},[54,4089,3855],{"class":60},[54,4091,570],{"class":75},[54,4093,4094],{"class":56,"line":96},[54,4095,4096],{"class":193},"  \u002F\u002F 组件配置\n",[54,4098,4099],{"class":56,"line":103},[54,4100,615],{"class":75},[45,4102,4104],{"className":47,"code":4103,"language":49,"meta":50,"style":50},"import LessonCard from \".\u002FLessonCard.vue\";\n",[18,4105,4106],{"__ignoreMap":50},[54,4107,4108,4110,4112,4114,4117],{"class":56,"line":57},[54,4109,320],{"class":60},[54,4111,3329],{"class":75},[54,4113,326],{"class":60},[54,4115,4116],{"class":71}," \".\u002FLessonCard.vue\"",[54,4118,76],{"class":75},[14,4120,4057],{},[123,4122,4123,4126,4129],{},[126,4124,4125],{},"导入时不用花括号。",[126,4127,4128],{},"名字可以自己取。",[126,4130,4131],{},"一个文件只能有一个默认导出。",[14,4133,4134],{},"Vue 单文件组件在构建后本质上会提供默认导出，所以你常看到：",[45,4136,4138],{"className":47,"code":4137,"language":49,"meta":50,"style":50},"import App from \".\u002FApp.vue\";\nimport LessonCard from \".\u002Fcomponents\u002FLessonCard.vue\";\n",[18,4139,4140,4154],{"__ignoreMap":50},[54,4141,4142,4144,4147,4149,4152],{"class":56,"line":57},[54,4143,320],{"class":60},[54,4145,4146],{"class":75}," App ",[54,4148,326],{"class":60},[54,4150,4151],{"class":71}," \".\u002FApp.vue\"",[54,4153,76],{"class":75},[54,4155,4156,4158,4160,4162,4164],{"class":56,"line":79},[54,4157,320],{"class":60},[54,4159,3329],{"class":75},[54,4161,326],{"class":60},[54,4163,3334],{"class":71},[54,4165,76],{"class":75},[145,4167,4169,4170],{"id":4168},"_812-导入路径为什么要写","8.12 导入路径为什么要写 ",[18,4171,4172],{},".\u002F",[45,4174,4175],{"className":47,"code":3565,"language":49,"meta":50,"style":50},[18,4176,4177],{"__ignoreMap":50},[54,4178,4179,4181,4183,4185,4187],{"class":56,"line":57},[54,4180,320],{"class":60},[54,4182,2814],{"class":75},[54,4184,326],{"class":60},[54,4186,2819],{"class":71},[54,4188,76],{"class":75},[14,4190,4191,4194,4195,239],{},[18,4192,4193],{},".\u002Fmath.js"," 的意思是：从当前文件所在目录找 ",[18,4196,2542],{},[14,4198,4199],{},"常见路径：",[45,4201,4203],{"className":47,"code":4202,"language":49,"meta":50,"style":50},"import { add } from \".\u002Fmath.js\"; \u002F\u002F 当前目录\nimport { add } from \"..\u002Fmath.js\"; \u002F\u002F 上一级目录\nimport App from \".\u002FApp.vue\"; \u002F\u002F 当前目录里的 App.vue\nimport { ref } from \"vue\"; \u002F\u002F 从 node_modules 包导入\n",[18,4204,4205,4220,4236,4251],{"__ignoreMap":50},[54,4206,4207,4209,4211,4213,4215,4217],{"class":56,"line":57},[54,4208,320],{"class":60},[54,4210,2814],{"class":75},[54,4212,326],{"class":60},[54,4214,2819],{"class":71},[54,4216,190],{"class":75},[54,4218,4219],{"class":193},"\u002F\u002F 当前目录\n",[54,4221,4222,4224,4226,4228,4231,4233],{"class":56,"line":79},[54,4223,320],{"class":60},[54,4225,2814],{"class":75},[54,4227,326],{"class":60},[54,4229,4230],{"class":71}," \"..\u002Fmath.js\"",[54,4232,190],{"class":75},[54,4234,4235],{"class":193},"\u002F\u002F 上一级目录\n",[54,4237,4238,4240,4242,4244,4246,4248],{"class":56,"line":96},[54,4239,320],{"class":60},[54,4241,4146],{"class":75},[54,4243,326],{"class":60},[54,4245,4151],{"class":71},[54,4247,190],{"class":75},[54,4249,4250],{"class":193},"\u002F\u002F 当前目录里的 App.vue\n",[54,4252,4253,4255,4257,4259,4261,4263],{"class":56,"line":103},[54,4254,320],{"class":60},[54,4256,323],{"class":75},[54,4258,326],{"class":60},[54,4260,329],{"class":71},[54,4262,190],{"class":75},[54,4264,4265],{"class":193},"\u002F\u002F 从 node_modules 包导入\n",[14,4267,4268,4269,4271,4272,4275],{},"有 ",[18,4270,4172],{}," 或 ",[18,4273,4274],{},"..\u002F","：相对路径，找你项目里的文件。",[14,4277,4278,4279,4271,4281,2561],{},"没有 ",[18,4280,4172],{},[18,4282,4274],{},[45,4284,4286],{"className":47,"code":4285,"language":49,"meta":50,"style":50},"import { ref } from \"vue\";\n",[18,4287,4288],{"__ignoreMap":50},[54,4289,4290,4292,4294,4296,4298],{"class":56,"line":57},[54,4291,320],{"class":60},[54,4293,323],{"class":75},[54,4295,326],{"class":60},[54,4297,329],{"class":71},[54,4299,76],{"class":75},[14,4301,4302,4303,4305,4306,4309],{},"这通常表示从安装的包里导入。",[18,4304,821],{}," 会在 ",[18,4307,4308],{},"node_modules"," 中找到。",[145,4311,4313],{"id":4312},"_813-模块会在什么时候执行","8.13 模块会在什么时候执行",[14,4315,4316],{},"当一个模块第一次被导入时，它会执行一次。",[45,4318,4320],{"className":47,"code":4319,"language":49,"meta":50,"style":50},"\u002F\u002F log.js\nconsole.log(\"log.js 执行了\");\n\nexport const message = \"hello\";\n",[18,4321,4322,4327,4340,4344],{"__ignoreMap":50},[54,4323,4324],{"class":56,"line":57},[54,4325,4326],{"class":193},"\u002F\u002F log.js\n",[54,4328,4329,4331,4333,4335,4338],{"class":56,"line":79},[54,4330,778],{"class":75},[54,4332,781],{"class":287},[54,4334,350],{"class":75},[54,4336,4337],{"class":71},"\"log.js 执行了\"",[54,4339,356],{"class":75},[54,4341,4342],{"class":56,"line":96},[54,4343,100],{"emptyLinePlaceholder":99},[54,4345,4346,4348,4350,4353,4355,4358],{"class":56,"line":103},[54,4347,2722],{"class":60},[54,4349,3177],{"class":60},[54,4351,4352],{"class":64}," message",[54,4354,68],{"class":60},[54,4356,4357],{"class":71}," \"hello\"",[54,4359,76],{"class":75},[45,4361,4363],{"className":47,"code":4362,"language":49,"meta":50,"style":50},"\u002F\u002F main.js\nimport { message } from \".\u002Flog.js\";\n\nconsole.log(message);\n",[18,4364,4365,4369,4383,4387],{"__ignoreMap":50},[54,4366,4367],{"class":56,"line":57},[54,4368,2616],{"class":193},[54,4370,4371,4373,4376,4378,4381],{"class":56,"line":79},[54,4372,320],{"class":60},[54,4374,4375],{"class":75}," { message } ",[54,4377,326],{"class":60},[54,4379,4380],{"class":71}," \".\u002Flog.js\"",[54,4382,76],{"class":75},[54,4384,4385],{"class":56,"line":96},[54,4386,100],{"emptyLinePlaceholder":99},[54,4388,4389,4391,4393],{"class":56,"line":103},[54,4390,778],{"class":75},[54,4392,781],{"class":287},[54,4394,4395],{"class":75},"(message);\n",[14,4397,4398,4399,4401,4402,4405],{},"运行 ",[18,4400,2550],{}," 时，",[18,4403,4404],{},"log.js"," 会先执行，所以会打印：",[45,4407,4410],{"className":4408,"code":4409,"language":2535,"meta":50},[2533],"log.js 执行了\nhello\n",[18,4411,4409],{"__ignoreMap":50},[14,4413,4414],{},"这说明模块不只是“拿函数”，导入时也会执行模块顶层代码。",[14,4416,4417],{},"所以不要在模块顶层写太多副作用代码，例如随便发请求、改 DOM。更好的方式是导出函数，由需要的地方调用。",[145,4419,4421],{"id":4420},"_814-导入的是活的绑定","8.14 导入的是“活的绑定”",[14,4423,4424],{},"命名导入不是简单复制一份值，它和原模块的导出绑定有关。初学阶段不必深挖规范，但要知道：模块系统比普通对象拷贝更严格。",[14,4426,2529],{},[45,4428,4430],{"className":47,"code":4429,"language":49,"meta":50,"style":50},"\u002F\u002F counter.js\nexport let count = 0;\n\nexport function increase() {\n  count++;\n}\n",[18,4431,4432,4437,4452,4456,4466,4474],{"__ignoreMap":50},[54,4433,4434],{"class":56,"line":57},[54,4435,4436],{"class":193},"\u002F\u002F counter.js\n",[54,4438,4439,4441,4444,4446,4448,4450],{"class":56,"line":79},[54,4440,2722],{"class":60},[54,4442,4443],{"class":60}," let",[54,4445,211],{"class":75},[54,4447,88],{"class":60},[54,4449,91],{"class":64},[54,4451,76],{"class":75},[54,4453,4454],{"class":56,"line":96},[54,4455,100],{"emptyLinePlaceholder":99},[54,4457,4458,4460,4462,4464],{"class":56,"line":103},[54,4459,2722],{"class":60},[54,4461,2747],{"class":60},[54,4463,288],{"class":287},[54,4465,291],{"class":75},[54,4467,4468,4470,4472],{"class":56,"line":304},[54,4469,296],{"class":75},[54,4471,299],{"class":60},[54,4473,76],{"class":75},[54,4475,4476],{"class":56,"line":371},[54,4477,307],{"class":75},[45,4479,4481],{"className":47,"code":4480,"language":49,"meta":50,"style":50},"\u002F\u002F main.js\nimport { count, increase } from \".\u002Fcounter.js\";\n\nconsole.log(count); \u002F\u002F 0\nincrease();\nconsole.log(count); \u002F\u002F 1\n",[18,4482,4483,4487,4501,4505,4517,4524],{"__ignoreMap":50},[54,4484,4485],{"class":56,"line":57},[54,4486,2616],{"class":193},[54,4488,4489,4491,4494,4496,4499],{"class":56,"line":79},[54,4490,320],{"class":60},[54,4492,4493],{"class":75}," { count, increase } ",[54,4495,326],{"class":60},[54,4497,4498],{"class":71}," \".\u002Fcounter.js\"",[54,4500,76],{"class":75},[54,4502,4503],{"class":56,"line":96},[54,4504,100],{"emptyLinePlaceholder":99},[54,4506,4507,4509,4511,4514],{"class":56,"line":103},[54,4508,778],{"class":75},[54,4510,781],{"class":287},[54,4512,4513],{"class":75},"(count); ",[54,4515,4516],{"class":193},"\u002F\u002F 0\n",[54,4518,4519,4521],{"class":56,"line":304},[54,4520,1945],{"class":287},[54,4522,4523],{"class":75},"();\n",[54,4525,4526,4528,4530,4532],{"class":56,"line":371},[54,4527,778],{"class":75},[54,4529,781],{"class":287},[54,4531,4513],{"class":75},[54,4533,4534],{"class":193},"\u002F\u002F 1\n",[14,4536,4537],{},"但导入的变量不能在导入方直接重新赋值：",[45,4539,4541],{"className":47,"code":4540,"language":49,"meta":50,"style":50},"import { count } from \".\u002Fcounter.js\";\n\ncount = 10; \u002F\u002F 报错\n",[18,4542,4543,4556,4560],{"__ignoreMap":50},[54,4544,4545,4547,4550,4552,4554],{"class":56,"line":57},[54,4546,320],{"class":60},[54,4548,4549],{"class":75}," { count } ",[54,4551,326],{"class":60},[54,4553,4498],{"class":71},[54,4555,76],{"class":75},[54,4557,4558],{"class":56,"line":79},[54,4559,100],{"emptyLinePlaceholder":99},[54,4561,4562,4564,4566,4568,4570],{"class":56,"line":96},[54,4563,222],{"class":75},[54,4565,88],{"class":60},[54,4567,455],{"class":64},[54,4569,190],{"class":75},[54,4571,194],{"class":193},[14,4573,4574],{},"如果要修改，应该通过导出方提供的函数修改。",[145,4576,4578],{"id":4577},"_815-vue-项目中模块怎么用","8.15 Vue 项目中模块怎么用",[14,4580,4581],{},"Vue 项目里到处都是模块：",[14,4583,4584],{},"导入 Vue API：",[45,4586,4587],{"className":47,"code":2304,"language":49,"meta":50,"style":50},[18,4588,4589],{"__ignoreMap":50},[54,4590,4591,4593,4595,4597,4599],{"class":56,"line":57},[54,4592,320],{"class":60},[54,4594,2313],{"class":75},[54,4596,326],{"class":60},[54,4598,329],{"class":71},[54,4600,76],{"class":75},[14,4602,4603],{},"导入组件：",[45,4605,4607],{"className":47,"code":4606,"language":49,"meta":50,"style":50},"import TodoItem from \"..\u002Fcomponents\u002FTodoItem.vue\";\n",[18,4608,4609],{"__ignoreMap":50},[54,4610,4611,4613,4616,4618,4621],{"class":56,"line":57},[54,4612,320],{"class":60},[54,4614,4615],{"class":75}," TodoItem ",[54,4617,326],{"class":60},[54,4619,4620],{"class":71}," \"..\u002Fcomponents\u002FTodoItem.vue\"",[54,4622,76],{"class":75},[14,4624,4625],{},"导入组合式函数：",[45,4627,4629],{"className":47,"code":4628,"language":49,"meta":50,"style":50},"import { useCounter } from \"..\u002Fcomposables\u002FuseCounter\";\n",[18,4630,4631],{"__ignoreMap":50},[54,4632,4633,4635,4638,4640,4643],{"class":56,"line":57},[54,4634,320],{"class":60},[54,4636,4637],{"class":75}," { useCounter } ",[54,4639,326],{"class":60},[54,4641,4642],{"class":71}," \"..\u002Fcomposables\u002FuseCounter\"",[54,4644,76],{"class":75},[14,4646,4647],{},"导入 Pinia store：",[45,4649,4651],{"className":47,"code":4650,"language":49,"meta":50,"style":50},"import { useTodoStore } from \"..\u002Fstores\u002FuseTodoStore\";\n",[18,4652,4653],{"__ignoreMap":50},[54,4654,4655,4657,4660,4662,4665],{"class":56,"line":57},[54,4656,320],{"class":60},[54,4658,4659],{"class":75}," { useTodoStore } ",[54,4661,326],{"class":60},[54,4663,4664],{"class":71}," \"..\u002Fstores\u002FuseTodoStore\"",[54,4666,76],{"class":75},[14,4668,4669],{},"导入本地数据：",[45,4671,4673],{"className":47,"code":4672,"language":49,"meta":50,"style":50},"import { lessons } from \"..\u002Fdata\u002Flessons\";\n",[18,4674,4675],{"__ignoreMap":50},[54,4676,4677,4679,4682,4684,4687],{"class":56,"line":57},[54,4678,320],{"class":60},[54,4680,4681],{"class":75}," { lessons } ",[54,4683,326],{"class":60},[54,4685,4686],{"class":71}," \"..\u002Fdata\u002Flessons\"",[54,4688,76],{"class":75},[14,4690,4691,4692,4695],{},"你可以把 ",[18,4693,4694],{},"src\u002F"," 看成很多模块拼起来的应用。",[145,4697,4699],{"id":4698},"_816-常见模块错误","8.16 常见模块错误",[14,4701,4702],{},"错误一：忘记导出。",[45,4704,4705],{"className":47,"code":2564,"language":49,"meta":50,"style":50},[18,4706,4707,4711,4727,4737],{"__ignoreMap":50},[54,4708,4709],{"class":56,"line":57},[54,4710,2571],{"class":193},[54,4712,4713,4715,4717,4719,4721,4723,4725],{"class":56,"line":79},[54,4714,284],{"class":60},[54,4716,1584],{"class":287},[54,4718,350],{"class":75},[54,4720,1589],{"class":1222},[54,4722,512],{"class":75},[54,4724,1594],{"class":1222},[54,4726,1597],{"class":75},[54,4728,4729,4731,4733,4735],{"class":56,"line":96},[54,4730,1406],{"class":60},[54,4732,1604],{"class":75},[54,4734,113],{"class":60},[54,4736,1609],{"class":75},[54,4738,4739],{"class":56,"line":103},[54,4740,307],{"class":75},[45,4742,4744],{"className":47,"code":4743,"language":49,"meta":50,"style":50},"import { add } from \".\u002Fmath.js\"; \u002F\u002F 报错：没有导出 add\n",[18,4745,4746],{"__ignoreMap":50},[54,4747,4748,4750,4752,4754,4756,4758],{"class":56,"line":57},[54,4749,320],{"class":60},[54,4751,2814],{"class":75},[54,4753,326],{"class":60},[54,4755,2819],{"class":71},[54,4757,190],{"class":75},[54,4759,4760],{"class":193},"\u002F\u002F 报错：没有导出 add\n",[14,4762,4763],{},"修复：",[45,4765,4766],{"className":47,"code":2961,"language":49,"meta":50,"style":50},[18,4767,4768,4786,4796],{"__ignoreMap":50},[54,4769,4770,4772,4774,4776,4778,4780,4782,4784],{"class":56,"line":57},[54,4771,2722],{"class":60},[54,4773,2747],{"class":60},[54,4775,1584],{"class":287},[54,4777,350],{"class":75},[54,4779,1589],{"class":1222},[54,4781,512],{"class":75},[54,4783,1594],{"class":1222},[54,4785,1597],{"class":75},[54,4787,4788,4790,4792,4794],{"class":56,"line":79},[54,4789,1406],{"class":60},[54,4791,1604],{"class":75},[54,4793,113],{"class":60},[54,4795,1609],{"class":75},[54,4797,4798],{"class":56,"line":96},[54,4799,307],{"class":75},[14,4801,4802],{},"错误二：命名导出却不用花括号。",[45,4804,4805],{"className":47,"code":2734,"language":49,"meta":50,"style":50},[18,4806,4807,4811,4829,4839],{"__ignoreMap":50},[54,4808,4809],{"class":56,"line":57},[54,4810,2571],{"class":193},[54,4812,4813,4815,4817,4819,4821,4823,4825,4827],{"class":56,"line":79},[54,4814,2722],{"class":60},[54,4816,2747],{"class":60},[54,4818,1584],{"class":287},[54,4820,350],{"class":75},[54,4822,1589],{"class":1222},[54,4824,512],{"class":75},[54,4826,1594],{"class":1222},[54,4828,1597],{"class":75},[54,4830,4831,4833,4835,4837],{"class":56,"line":96},[54,4832,1406],{"class":60},[54,4834,1604],{"class":75},[54,4836,113],{"class":60},[54,4838,1609],{"class":75},[54,4840,4841],{"class":56,"line":103},[54,4842,307],{"class":75},[45,4844,4846],{"className":47,"code":4845,"language":49,"meta":50,"style":50},"import add from \".\u002Fmath.js\"; \u002F\u002F 错误，add 不是默认导出\n",[18,4847,4848],{"__ignoreMap":50},[54,4849,4850,4852,4854,4856,4858,4860],{"class":56,"line":57},[54,4851,320],{"class":60},[54,4853,3898],{"class":75},[54,4855,326],{"class":60},[54,4857,2819],{"class":71},[54,4859,190],{"class":75},[54,4861,4862],{"class":193},"\u002F\u002F 错误，add 不是默认导出\n",[14,4864,4763],{},[45,4866,4867],{"className":47,"code":3565,"language":49,"meta":50,"style":50},[18,4868,4869],{"__ignoreMap":50},[54,4870,4871,4873,4875,4877,4879],{"class":56,"line":57},[54,4872,320],{"class":60},[54,4874,2814],{"class":75},[54,4876,326],{"class":60},[54,4878,2819],{"class":71},[54,4880,76],{"class":75},[14,4882,4883],{},"错误三：默认导出却用了花括号。",[45,4885,4886],{"className":47,"code":3842,"language":49,"meta":50,"style":50},[18,4887,4888,4892,4912,4922],{"__ignoreMap":50},[54,4889,4890],{"class":56,"line":57},[54,4891,2571],{"class":193},[54,4893,4894,4896,4898,4900,4902,4904,4906,4908,4910],{"class":56,"line":79},[54,4895,2722],{"class":60},[54,4897,3855],{"class":60},[54,4899,2747],{"class":60},[54,4901,1584],{"class":287},[54,4903,350],{"class":75},[54,4905,1589],{"class":1222},[54,4907,512],{"class":75},[54,4909,1594],{"class":1222},[54,4911,1597],{"class":75},[54,4913,4914,4916,4918,4920],{"class":56,"line":96},[54,4915,1406],{"class":60},[54,4917,1604],{"class":75},[54,4919,113],{"class":60},[54,4921,1609],{"class":75},[54,4923,4924],{"class":56,"line":103},[54,4925,307],{"class":75},[45,4927,4929],{"className":47,"code":4928,"language":49,"meta":50,"style":50},"import { add } from \".\u002Fmath.js\"; \u002F\u002F 错误\n",[18,4930,4931],{"__ignoreMap":50},[54,4932,4933,4935,4937,4939,4941,4943],{"class":56,"line":57},[54,4934,320],{"class":60},[54,4936,2814],{"class":75},[54,4938,326],{"class":60},[54,4940,2819],{"class":71},[54,4942,190],{"class":75},[54,4944,4945],{"class":193},"\u002F\u002F 错误\n",[14,4947,4763],{},[45,4949,4951],{"className":47,"code":4950,"language":49,"meta":50,"style":50},"import add from \".\u002Fmath.js\";\n",[18,4952,4953],{"__ignoreMap":50},[54,4954,4955,4957,4959,4961,4963],{"class":56,"line":57},[54,4956,320],{"class":60},[54,4958,3898],{"class":75},[54,4960,326],{"class":60},[54,4962,2819],{"class":71},[54,4964,76],{"class":75},[14,4966,4967],{},"错误四：路径写错。",[45,4969,4971],{"className":47,"code":4970,"language":49,"meta":50,"style":50},"import { add } from \"math.js\"; \u002F\u002F 这会被当成包名\n",[18,4972,4973],{"__ignoreMap":50},[54,4974,4975,4977,4979,4981,4984,4986],{"class":56,"line":57},[54,4976,320],{"class":60},[54,4978,2814],{"class":75},[54,4980,326],{"class":60},[54,4982,4983],{"class":71}," \"math.js\"",[54,4985,190],{"class":75},[54,4987,4988],{"class":193},"\u002F\u002F 这会被当成包名\n",[14,4990,4763],{},[45,4992,4993],{"className":47,"code":3565,"language":49,"meta":50,"style":50},[18,4994,4995],{"__ignoreMap":50},[54,4996,4997,4999,5001,5003,5005],{"class":56,"line":57},[54,4998,320],{"class":60},[54,5000,2814],{"class":75},[54,5002,326],{"class":60},[54,5004,2819],{"class":71},[54,5006,76],{"class":75},[14,5008,5009],{},"错误五：大小写不一致。",[45,5011,5013],{"className":47,"code":5012,"language":49,"meta":50,"style":50},"import LessonCard from \".\u002Fcomponents\u002FlessonCard.vue\";\n",[18,5014,5015],{"__ignoreMap":50},[54,5016,5017,5019,5021,5023,5026],{"class":56,"line":57},[54,5018,320],{"class":60},[54,5020,3329],{"class":75},[54,5022,326],{"class":60},[54,5024,5025],{"class":71}," \".\u002Fcomponents\u002FlessonCard.vue\"",[54,5027,76],{"class":75},[14,5029,5030,5031,5034],{},"如果文件实际叫 ",[18,5032,5033],{},"LessonCard.vue","，在某些系统或部署环境会失败。建议文件名和导入路径大小写完全一致。",[37,5036,5038],{"id":5037},"_9-异步等待未来的结果","9. 异步：等待未来的结果",[14,5040,5041,5042,5045],{},"浏览器请求接口、读取文件、等待定时器，都不是立刻得到结果。JavaScript 用 Promise 和 ",[18,5043,5044],{},"async\u002Fawait"," 处理异步。",[14,5047,5048],{},"最小例子：",[45,5050,5052],{"className":47,"code":5051,"language":49,"meta":50,"style":50},"function wait(ms) {\n  return new Promise((resolve) => {\n    setTimeout(resolve, ms);\n  });\n}\n\nasync function run() {\n  console.log(\"开始\");\n  await wait(1000);\n  console.log(\"1 秒后\");\n}\n",[18,5053,5054,5068,5089,5097,5102,5106,5110,5122,5135,5149,5162],{"__ignoreMap":50},[54,5055,5056,5058,5061,5063,5066],{"class":56,"line":57},[54,5057,284],{"class":60},[54,5059,5060],{"class":287}," wait",[54,5062,350],{"class":75},[54,5064,5065],{"class":1222},"ms",[54,5067,1597],{"class":75},[54,5069,5070,5072,5075,5078,5080,5083,5085,5087],{"class":56,"line":79},[54,5071,1406],{"class":60},[54,5073,5074],{"class":60}," new",[54,5076,5077],{"class":64}," Promise",[54,5079,1219],{"class":75},[54,5081,5082],{"class":1222},"resolve",[54,5084,1226],{"class":75},[54,5086,1229],{"class":60},[54,5088,570],{"class":75},[54,5090,5091,5094],{"class":56,"line":96},[54,5092,5093],{"class":287},"    setTimeout",[54,5095,5096],{"class":75},"(resolve, ms);\n",[54,5098,5099],{"class":56,"line":103},[54,5100,5101],{"class":75},"  });\n",[54,5103,5104],{"class":56,"line":304},[54,5105,307],{"class":75},[54,5107,5108],{"class":56,"line":371},[54,5109,100],{"emptyLinePlaceholder":99},[54,5111,5112,5115,5117,5120],{"class":56,"line":381},[54,5113,5114],{"class":60},"async",[54,5116,2747],{"class":60},[54,5118,5119],{"class":287}," run",[54,5121,291],{"class":75},[54,5123,5124,5126,5128,5130,5133],{"class":56,"line":1868},[54,5125,1709],{"class":75},[54,5127,781],{"class":287},[54,5129,350],{"class":75},[54,5131,5132],{"class":71},"\"开始\"",[54,5134,356],{"class":75},[54,5136,5137,5140,5142,5144,5147],{"class":56,"line":1873},[54,5138,5139],{"class":60},"  await",[54,5141,5060],{"class":287},[54,5143,350],{"class":75},[54,5145,5146],{"class":64},"1000",[54,5148,356],{"class":75},[54,5150,5151,5153,5155,5157,5160],{"class":56,"line":1882},[54,5152,1709],{"class":75},[54,5154,781],{"class":287},[54,5156,350],{"class":75},[54,5158,5159],{"class":71},"\"1 秒后\"",[54,5161,356],{"class":75},[54,5163,5164],{"class":56,"line":1887},[54,5165,307],{"class":75},[14,5167,5168,5171],{},[18,5169,5170],{},"await"," 的意思是：等 Promise 完成后，再继续往下执行。",[145,5173,5174],{"id":5174},"请求数据",[45,5176,5178],{"className":47,"code":5177,"language":49,"meta":50,"style":50},"async function loadUser() {\n  const response = await fetch(\"\u002Fapi\u002Fuser\");\n  const user = await response.json();\n  return user;\n}\n",[18,5179,5180,5191,5214,5232,5238],{"__ignoreMap":50},[54,5181,5182,5184,5186,5189],{"class":56,"line":57},[54,5183,5114],{"class":60},[54,5185,2747],{"class":60},[54,5187,5188],{"class":287}," loadUser",[54,5190,291],{"class":75},[54,5192,5193,5196,5199,5201,5204,5207,5209,5212],{"class":56,"line":79},[54,5194,5195],{"class":60},"  const",[54,5197,5198],{"class":64}," response",[54,5200,68],{"class":60},[54,5202,5203],{"class":60}," await",[54,5205,5206],{"class":287}," fetch",[54,5208,350],{"class":75},[54,5210,5211],{"class":71},"\"\u002Fapi\u002Fuser\"",[54,5213,356],{"class":75},[54,5215,5216,5218,5220,5222,5224,5227,5230],{"class":56,"line":96},[54,5217,5195],{"class":60},[54,5219,484],{"class":64},[54,5221,68],{"class":60},[54,5223,5203],{"class":60},[54,5225,5226],{"class":75}," response.",[54,5228,5229],{"class":287},"json",[54,5231,4523],{"class":75},[54,5233,5234,5236],{"class":56,"line":103},[54,5235,1406],{"class":60},[54,5237,2215],{"class":75},[54,5239,5240],{"class":56,"line":304},[54,5241,307],{"class":75},[14,5243,5244],{},"真实项目不能只写成功路径，还要写失败和加载状态：",[45,5246,5248],{"className":47,"code":5247,"language":49,"meta":50,"style":50},"import { ref } from \"vue\";\n\nconst loading = ref(false);\nconst error = ref(\"\");\nconst data = ref(null);\n\nasync function loadData() {\n  loading.value = true;\n  error.value = \"\";\n\n  try {\n    const response = await fetch(\"\u002Fapi\u002Fitems\");\n\n    if (!response.ok) {\n      throw new Error(`请求失败：${response.status}`);\n    }\n\n    data.value = await response.json();\n  } catch (err) {\n    error.value = err instanceof Error ? err.message : \"未知错误\";\n  } finally {\n    loading.value = false;\n  }\n}\n",[18,5249,5250,5262,5266,5283,5301,5319,5323,5334,5345,5357,5361,5368,5388,5392,5405,5432,5438,5443,5459,5471,5501,5511,5523,5529],{"__ignoreMap":50},[54,5251,5252,5254,5256,5258,5260],{"class":56,"line":57},[54,5253,320],{"class":60},[54,5255,323],{"class":75},[54,5257,326],{"class":60},[54,5259,329],{"class":71},[54,5261,76],{"class":75},[54,5263,5264],{"class":56,"line":79},[54,5265,100],{"emptyLinePlaceholder":99},[54,5267,5268,5270,5273,5275,5277,5279,5281],{"class":56,"line":96},[54,5269,61],{"class":60},[54,5271,5272],{"class":64}," loading",[54,5274,68],{"class":60},[54,5276,347],{"class":287},[54,5278,350],{"class":75},[54,5280,598],{"class":64},[54,5282,356],{"class":75},[54,5284,5285,5287,5290,5292,5294,5296,5299],{"class":56,"line":103},[54,5286,61],{"class":60},[54,5288,5289],{"class":64}," error",[54,5291,68],{"class":60},[54,5293,347],{"class":287},[54,5295,350],{"class":75},[54,5297,5298],{"class":71},"\"\"",[54,5300,356],{"class":75},[54,5302,5303,5305,5308,5310,5312,5314,5317],{"class":56,"line":304},[54,5304,61],{"class":60},[54,5306,5307],{"class":64}," data",[54,5309,68],{"class":60},[54,5311,347],{"class":287},[54,5313,350],{"class":75},[54,5315,5316],{"class":64},"null",[54,5318,356],{"class":75},[54,5320,5321],{"class":56,"line":371},[54,5322,100],{"emptyLinePlaceholder":99},[54,5324,5325,5327,5329,5332],{"class":56,"line":381},[54,5326,5114],{"class":60},[54,5328,2747],{"class":60},[54,5330,5331],{"class":287}," loadData",[54,5333,291],{"class":75},[54,5335,5336,5339,5341,5343],{"class":56,"line":1868},[54,5337,5338],{"class":75},"  loading.value ",[54,5340,88],{"class":60},[54,5342,811],{"class":64},[54,5344,76],{"class":75},[54,5346,5347,5350,5352,5355],{"class":56,"line":1873},[54,5348,5349],{"class":75},"  error.value ",[54,5351,88],{"class":60},[54,5353,5354],{"class":71}," \"\"",[54,5356,76],{"class":75},[54,5358,5359],{"class":56,"line":1882},[54,5360,100],{"emptyLinePlaceholder":99},[54,5362,5363,5366],{"class":56,"line":1887},[54,5364,5365],{"class":60},"  try",[54,5367,570],{"class":75},[54,5369,5370,5373,5375,5377,5379,5381,5383,5386],{"class":56,"line":1896},[54,5371,5372],{"class":60},"    const",[54,5374,5198],{"class":64},[54,5376,68],{"class":60},[54,5378,5203],{"class":60},[54,5380,5206],{"class":287},[54,5382,350],{"class":75},[54,5384,5385],{"class":71},"\"\u002Fapi\u002Fitems\"",[54,5387,356],{"class":75},[54,5389,5390],{"class":56,"line":1919},[54,5391,100],{"emptyLinePlaceholder":99},[54,5393,5394,5397,5399,5402],{"class":56,"line":1933},[54,5395,5396],{"class":60},"    if",[54,5398,1737],{"class":75},[54,5400,5401],{"class":60},"!",[54,5403,5404],{"class":75},"response.ok) {\n",[54,5406,5407,5410,5412,5415,5417,5420,5423,5425,5428,5430],{"class":56,"line":2500},[54,5408,5409],{"class":60},"      throw",[54,5411,5074],{"class":60},[54,5413,5414],{"class":287}," Error",[54,5416,350],{"class":75},[54,5418,5419],{"class":71},"`请求失败：${",[54,5421,5422],{"class":75},"response",[54,5424,2444],{"class":71},[54,5426,5427],{"class":75},"status",[54,5429,2457],{"class":71},[54,5431,356],{"class":75},[54,5433,5435],{"class":56,"line":5434},16,[54,5436,5437],{"class":75},"    }\n",[54,5439,5441],{"class":56,"line":5440},17,[54,5442,100],{"emptyLinePlaceholder":99},[54,5444,5446,5449,5451,5453,5455,5457],{"class":56,"line":5445},18,[54,5447,5448],{"class":75},"    data.value ",[54,5450,88],{"class":60},[54,5452,5203],{"class":60},[54,5454,5226],{"class":75},[54,5456,5229],{"class":287},[54,5458,4523],{"class":75},[54,5460,5462,5465,5468],{"class":56,"line":5461},19,[54,5463,5464],{"class":75},"  } ",[54,5466,5467],{"class":60},"catch",[54,5469,5470],{"class":75}," (err) {\n",[54,5472,5474,5477,5479,5482,5485,5487,5490,5493,5496,5499],{"class":56,"line":5473},20,[54,5475,5476],{"class":75},"    error.value ",[54,5478,88],{"class":60},[54,5480,5481],{"class":75}," err ",[54,5483,5484],{"class":60},"instanceof",[54,5486,5414],{"class":287},[54,5488,5489],{"class":60}," ?",[54,5491,5492],{"class":75}," err.message ",[54,5494,5495],{"class":60},":",[54,5497,5498],{"class":71}," \"未知错误\"",[54,5500,76],{"class":75},[54,5502,5504,5506,5509],{"class":56,"line":5503},21,[54,5505,5464],{"class":75},[54,5507,5508],{"class":60},"finally",[54,5510,570],{"class":75},[54,5512,5514,5517,5519,5521],{"class":56,"line":5513},22,[54,5515,5516],{"class":75},"    loading.value ",[54,5518,88],{"class":60},[54,5520,472],{"class":64},[54,5522,76],{"class":75},[54,5524,5526],{"class":56,"line":5525},23,[54,5527,5528],{"class":75},"  }\n",[54,5530,5532],{"class":56,"line":5531},24,[54,5533,307],{"class":75},[14,5535,5536],{},"你要记住三件事：",[123,5538,5539,5545,5550],{},[126,5540,5541,5544],{},[18,5542,5543],{},"try"," 里放可能失败的代码。",[126,5546,5547,5549],{},[18,5548,5467],{}," 里处理失败。",[126,5551,5552,5554],{},[18,5553,5508],{}," 里放无论成功失败都要执行的代码，比如关闭 loading。",[37,5556,5558],{"id":5557},"_10-学-vue-前必须形成的观念","10. 学 Vue 前必须形成的观念",[14,5560,5561],{},"页面开发的核心不是“把 HTML 写出来”，而是这条链路：",[45,5563,5566],{"className":5564,"code":5565,"language":2535,"meta":50},[2533],"数据 -> 根据数据渲染界面 -> 用户操作 -> 修改数据 -> 界面更新\n",[18,5567,5565],{"__ignoreMap":50},[14,5569,5570],{},"Vue 做的事情就是让这条链路更稳定：",[123,5572,5573,5576,5579,5582],{},[126,5574,5575],{},"你声明数据。",[126,5577,5578],{},"你写模板描述界面。",[126,5580,5581],{},"你写函数响应用户操作。",[126,5583,5584],{},"Vue 负责把状态变化同步到 DOM。",[14,5586,5587],{},"如果你能一直围绕“数据是什么、数据在哪里变、界面如何从数据得到”思考，Vue 会越来越清晰。",[37,5589,5590],{"id":5590},"本章练习",[145,5592,5594],{"id":5593},"练习-1课程数组","练习 1：课程数组",[14,5596,5597],{},"创建下面数组：",[45,5599,5601],{"className":47,"code":5600,"language":49,"meta":50,"style":50},"const lessons = [\n  { id: 1, title: \"JS 基础\", minutes: 40, done: false },\n  { id: 2, title: \"DOM\", minutes: 35, done: true },\n  { id: 3, title: \"Vue 响应式\", minutes: 50, done: false },\n];\n",[18,5602,5603,5613,5635,5656,5678],{"__ignoreMap":50},[54,5604,5605,5607,5609,5611],{"class":56,"line":57},[54,5606,61],{"class":60},[54,5608,1099],{"class":64},[54,5610,68],{"class":60},[54,5612,635],{"class":75},[54,5614,5615,5617,5619,5621,5623,5626,5629,5631,5633],{"class":56,"line":79},[54,5616,640],{"class":75},[54,5618,536],{"class":64},[54,5620,645],{"class":75},[54,5622,1106],{"class":71},[54,5624,5625],{"class":75},", minutes: ",[54,5627,5628],{"class":64},"40",[54,5630,651],{"class":75},[54,5632,598],{"class":64},[54,5634,657],{"class":75},[54,5636,5637,5639,5641,5643,5645,5647,5650,5652,5654],{"class":56,"line":96},[54,5638,640],{"class":75},[54,5640,664],{"class":64},[54,5642,645],{"class":75},[54,5644,1111],{"class":71},[54,5646,5625],{"class":75},[54,5648,5649],{"class":64},"35",[54,5651,651],{"class":75},[54,5653,654],{"class":64},[54,5655,657],{"class":75},[54,5657,5658,5660,5662,5664,5667,5669,5672,5674,5676],{"class":56,"line":103},[54,5659,640],{"class":75},[54,5661,682],{"class":64},[54,5663,645],{"class":75},[54,5665,5666],{"class":71},"\"Vue 响应式\"",[54,5668,5625],{"class":75},[54,5670,5671],{"class":64},"50",[54,5673,651],{"class":75},[54,5675,598],{"class":64},[54,5677,657],{"class":75},[54,5679,5680],{"class":56,"line":304},[54,5681,698],{"class":75},[14,5683,5684],{},"要求：",[2127,5686,5687,5693,5698,5705],{},[126,5688,5689,5690,5692],{},"用 ",[18,5691,1196],{}," 找出未完成课程。",[126,5694,5689,5695,5697],{},[18,5696,1365],{}," 统计总时长。",[126,5699,5700,5701,5704],{},"写 ",[18,5702,5703],{},"toggleDone(id)"," 切换课程完成状态。",[126,5706,5700,5707,5710],{},[18,5708,5709],{},"addLesson(title, minutes)"," 新增课程。",[145,5712,5714],{"id":5713},"练习-2模块导入导出","练习 2：模块导入导出",[14,5716,5717],{},"创建两个文件：",[45,5719,5722],{"className":5720,"code":5721,"language":2535,"meta":50},[2533],"math.js\nmain.js\n",[18,5723,5721],{"__ignoreMap":50},[14,5725,2781,5726,5728],{},[18,5727,2542],{}," 中导出：",[123,5730,5731,5735,5739],{},[126,5732,5733],{},[18,5734,1659],{},[126,5736,5737],{},[18,5738,3536],{},[126,5740,5741],{},[18,5742,3557],{},[14,5744,2781,5745,5747],{},[18,5746,2550],{}," 中导入并调用它们。",[14,5749,5750],{},"然后故意做下面实验：",[2127,5752,5753,5762,5772],{},[126,5754,5755,5756,5758,5759,5761],{},"去掉 ",[18,5757,2722],{},"，看看 ",[18,5760,320],{}," 报什么错。",[126,5763,2789,5764,5767,5768,5771],{},[18,5765,5766],{},"import { add }"," 改成 ",[18,5769,5770],{},"import add","，看看报什么错。",[126,5773,5774,5775,5767,5777,5771],{},"把路径 ",[18,5776,4193],{},[18,5778,2542],{},[14,5780,5781],{},"这些错误都很有价值，因为它们能帮你理解模块系统。",[145,5783,5785],{"id":5784},"练习-3用自己的话回答","练习 3：用自己的话回答",[14,5787,5788],{},"请写出下面问题的答案：",[2127,5790,5791,5796,5802,5807,5814],{},[126,5792,5793,5795],{},[18,5794,2722],{}," 是干嘛的？",[126,5797,5798,5799,5801],{},"不加 ",[18,5800,2722],{}," 能不能被别的文件按名字导入？",[126,5803,5804,5806],{},[18,5805,2722],{}," 会不会改变原函数自己的功能？",[126,5808,5809,5810,5813],{},"命名导出为什么导入时要加 ",[18,5811,5812],{},"{}","？",[126,5815,5816,150,5819,5822],{},[18,5817,5818],{},"import { ref } from 'vue'",[18,5820,5821],{},"import App from '.\u002FApp.vue'"," 的区别是什么？",[5824,5825,5826],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .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 .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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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}",{"title":50,"searchDepth":79,"depth":79,"links":5828},[5829,5834,5835,5838,5843,5847,5848,5849,5873,5876,5877],{"id":39,"depth":79,"text":40,"children":5830},[5831,5833],{"id":147,"depth":96,"text":5832},"const 和 let 的区别",{"id":254,"depth":96,"text":255},{"id":418,"depth":79,"text":419},{"id":704,"depth":79,"text":705,"children":5836},[5837],{"id":906,"depth":96,"text":906},{"id":1083,"depth":79,"text":1084,"children":5839},[5840,5841],{"id":1190,"depth":96,"text":1191},{"id":1426,"depth":96,"text":5842},"为什么数组适合配合 v-for",{"id":1568,"depth":79,"text":1569,"children":5844},[5845,5846],{"id":1682,"depth":96,"text":1682},{"id":1795,"depth":96,"text":1796},{"id":1955,"depth":79,"text":1956},{"id":2146,"depth":79,"text":2147},{"id":2332,"depth":79,"text":2333,"children":5850},[5851,5852,5853,5855,5857,5859,5861,5862,5863,5864,5866,5867,5869,5870,5871,5872],{"id":2339,"depth":96,"text":2340},{"id":2554,"depth":96,"text":2555},{"id":2718,"depth":96,"text":5854},"8.3 export 是什么意思",{"id":2852,"depth":96,"text":5856},"8.4 不写 export 能不能 import",{"id":2949,"depth":96,"text":5858},"8.5 export 会不会影响原来的 math.js",{"id":3098,"depth":96,"text":5860},"8.6 import 之后怎么调用",{"id":3382,"depth":96,"text":3383},{"id":3589,"depth":96,"text":3590},{"id":3658,"depth":96,"text":3659},{"id":3832,"depth":96,"text":5865},"8.10 默认导出 export default",{"id":3990,"depth":96,"text":3991},{"id":4168,"depth":96,"text":5868},"8.12 导入路径为什么要写 .\u002F",{"id":4312,"depth":96,"text":4313},{"id":4420,"depth":96,"text":4421},{"id":4577,"depth":96,"text":4578},{"id":4698,"depth":96,"text":4699},{"id":5037,"depth":79,"text":5038,"children":5874},[5875],{"id":5174,"depth":96,"text":5174},{"id":5557,"depth":79,"text":5558},{"id":5590,"depth":79,"text":5590,"children":5878},[5879,5880,5881],{"id":5593,"depth":96,"text":5594},{"id":5713,"depth":96,"text":5714},{"id":5784,"depth":96,"text":5785},"Vue 不是一门脱离 JavaScript 的新语言。Vue 组件里的 \u003Cscript setup> 本质上就是 JavaScript，只是 Vue 提供了一些特殊函数，例如 ref、computed、watch。所以学 Vue 前，你至少要能看懂变量、数组、对象、函数、模块和异步。","md",{"order":57},"\u002Fsource\u002Fcode\u002Fvue\u002F01-js-from-zero",{"title":5,"description":5882},"source\u002Fcode\u002Fvue\u002F01-js-from-zero","tZtUg_yX3zClDfoiUzYDKiS_tHFJhohENckcpDAcr6g",1784032889391]