[{"data":1,"prerenderedAt":19137},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue3快速上手":3},{"id":4,"title":5,"body":6,"description":283,"extension":19131,"meta":19132,"navigation":305,"path":19133,"seo":19134,"stem":19135,"__hash__":19136},"content\u002FVue\u002FVue3快速上手.md","1. Vue3简介",{"type":7,"value":8,"toc":19040},"minimark",[9,13,80,85,110,114,137,141,152,156,246,250,254,263,277,388,391,395,410,454,464,583,586,813,820,825,830,833,869,873,885,1212,1216,1220,1244,1249,1272,1283,1287,1290,1301,1306,1310,1314,1339,1342,1368,1712,1716,1731,1763,1767,1812,1816,1824,2173,2184,2198,2262,2270,2274,2345,2677,2681,2715,3189,3193,3216,3647,3651,3654,3676,3681,3718,3723,3745,3749,3773,4120,4124,4133,4137,4566,4570,4592,4615,4624,4628,4637,4902,4906,4911,4942,5317,5321,5326,5803,5807,5818,5834,5837,6340,6344,6347,6804,6808,7352,7356,7359,7375,7380,7756,7759,8040,8044,8625,8629,9141,9145,9175,9177,9867,9869,9873,9877,9882,9886,10058,10112,10382,10386,10415,10419,10547,10551,10634,10638,10641,10644,10755,10758,10826,10830,11266,11270,11273,11459,11462,11626,11650,11654,11661,11762,11766,11819,11823,11836,11920,11924,11966,11970,11974,11979,11983,11988,11994,12114,12121,12125,12129,12698,12702,12998,13002,13034,13199,13203,13443,13447,13457,13530,13534,13778,13782,13792,13801,13838,13843,13848,13852,13861,13881,13884,14139,14142,14340,14344,14521,14524,14531,14537,14540,14546,14552,14555,14561,14564,14570,14573,14584,14639,14727,14731,14741,14744,14747,14753,14756,14762,14773,14779,14924,14927,15052,15055,15088,15093,15097,15759,15763,15800,15802,16108,16111,16231,16234,16465,16469,16540,16544,17107,17111,17117,17121,17125,17130,17259,17263,17425,17429,17716,17720,17724,17730,17761,17767,17803,17806,17829,17833,17840,17905,17913,17968,17972,17978,18236,18242,18361,18365,18371,18377,18586,18589,18593,18597,18606,18712,18716,18741,18786,18923,18927,18959,18963,19037],[10,11,5],"h1",{"id":12},"_1-vue3简介",[14,15,16,33,59,67],"ul",{},[17,18,19,20,24,25,28,29,32],"li",{},"2020年9月18日，",[21,22,23],"code",{},"Vue.js","发布版",[21,26,27],{},"3.0","版本，代号：",[21,30,31],{},"One Piece","（n",[17,34,35,36,43,44,43,49,43,54],{},"经历了：",[37,38,42],"a",{"href":39,"rel":40},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Fcommits\u002Fmain",[41],"nofollow","4800+次提交","、",[37,45,48],{"href":46,"rel":47},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Frfcs\u002Ftree\u002Fmaster\u002Factive-rfcs",[41],"40+个RFC",[37,50,53],{"href":51,"rel":52},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue-next\u002Fpulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview+",[41],"600+次PR",[37,55,58],{"href":56,"rel":57},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Fgraphs\u002Fcontributors",[41],"300+贡献者",[17,60,61,62],{},"官方发版地址：",[37,63,66],{"href":64,"rel":65},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Freleases\u002Ftag\u002Fv3.0.0",[41],"Release v3.0.0 One Piece · vuejs\u002Fcore",[17,68,69,70,73,79],{},"截止2023年10月，最新的公开版本为：",[21,71,72],{},"3.3.4",[74,75],"img",{"src":76,"alt":77,"style":78},"images\u002F1695089947298-161c1b47-eb86-42fb-b1f8-d6a4fcab8ee2.png","image.png","zoom:30%;"," \n",[81,82,84],"h2",{"id":83},"_11-性能的提升","1.1. 【性能的提升】",[14,86,87,94,104],{},[17,88,89,90,93],{},"打包大小减少",[21,91,92],{},"41%","。",[17,95,96,97,100,101,93],{},"初次渲染快",[21,98,99],{},"55%",", 更新渲染快",[21,102,103],{},"133%",[17,105,106,107,93],{},"内存减少",[21,108,109],{},"54%",[81,111,113],{"id":112},"_12-源码的升级","1.2.【 源码的升级】",[14,115,116,127],{},[17,117,118,119,122,123,126],{},"使用",[21,120,121],{},"Proxy","代替",[21,124,125],{},"defineProperty","实现响应式。",[17,128,129,130,133,134,93],{},"重写虚拟",[21,131,132],{},"DOM","的实现和",[21,135,136],{},"Tree-Shaking",[81,138,140],{"id":139},"_13-拥抱typescript","1.3. 【拥抱TypeScript】",[14,142,143],{},[17,144,145,148,149,93],{},[21,146,147],{},"Vue3","可以更好的支持",[21,150,151],{},"TypeScript",[81,153,155],{"id":154},"_14-新的特性","1.4. 【新的特性】",[157,158,159,197,219],"ol",{},[17,160,161,164,165,168,169],{},[21,162,163],{},"Composition API","（组合",[21,166,167],{},"API","）：",[14,170,171,176,185],{},[17,172,173],{},[21,174,175],{},"setup",[17,177,178,181,182],{},[21,179,180],{},"ref","与",[21,183,184],{},"reactive",[17,186,187,181,190,193,196],{},[21,188,189],{},"computed",[21,191,192],{},"watch",[194,195],"br",{},"......",[17,198,199,200],{},"新的内置组件：",[14,201,202,207,212],{},[17,203,204],{},[21,205,206],{},"Fragment",[17,208,209],{},[21,210,211],{},"Teleport",[17,213,214,217,196],{},[21,215,216],{},"Suspense",[194,218],{},[17,220,221,222],{},"其他改变：",[14,223,224,227,233],{},[17,225,226],{},"新的生命周期钩子",[17,228,229,232],{},[21,230,231],{},"data"," 选项应始终被声明为一个函数",[17,234,235,236,239,240,243,244,196],{},"移除",[21,237,238],{},"keyCode","支持作为",[21,241,242],{}," v-on"," 的修饰符",[194,245],{},[10,247,249],{"id":248},"_2-创建vue3工程","2. 创建Vue3工程",[81,251,253],{"id":252},"_21-基于-vue-cli-创建","2.1. 【基于 vue-cli 创建】",[255,256,257,258],"p",{},"点击查看",[37,259,262],{"href":260,"rel":261},"https:\u002F\u002Fcli.vuejs.org\u002Fzh\u002Fguide\u002Fcreating-a-project.html#vue-create",[41],"官方文档",[264,265,266],"blockquote",{},[255,267,268,269,272,273,276],{},"备注：目前",[21,270,271],{},"vue-cli","已处于维护模式，官方推荐基于 ",[21,274,275],{},"Vite"," 创建项目。",[278,279,284],"pre",{"className":280,"code":281,"language":282,"meta":283,"style":283},"language-powershell shiki shiki-themes github-light github-dark","## 查看@vue\u002Fcli版本，确保@vue\u002Fcli版本在4.5.0以上\nvue --version\n\n## 安装或者升级你的@vue\u002Fcli \nnpm install -g @vue\u002Fcli\n\n## 执行创建命令\nvue create vue_test\n\n## 随后选择3.x\n## Choose a version of Vue.js that you want to start the project with (Use arrow keys)\n## > 3.x\n## 2.x\n\n## 启动\ncd vue_test\nnpm run serve\n","powershell","",[21,285,286,294,300,307,313,319,324,330,336,341,347,353,359,365,370,376,382],{"__ignoreMap":283},[287,288,291],"span",{"class":289,"line":290},"line",1,[287,292,293],{},"## 查看@vue\u002Fcli版本，确保@vue\u002Fcli版本在4.5.0以上\n",[287,295,297],{"class":289,"line":296},2,[287,298,299],{},"vue --version\n",[287,301,303],{"class":289,"line":302},3,[287,304,306],{"emptyLinePlaceholder":305},true,"\n",[287,308,310],{"class":289,"line":309},4,[287,311,312],{},"## 安装或者升级你的@vue\u002Fcli \n",[287,314,316],{"class":289,"line":315},5,[287,317,318],{},"npm install -g @vue\u002Fcli\n",[287,320,322],{"class":289,"line":321},6,[287,323,306],{"emptyLinePlaceholder":305},[287,325,327],{"class":289,"line":326},7,[287,328,329],{},"## 执行创建命令\n",[287,331,333],{"class":289,"line":332},8,[287,334,335],{},"vue create vue_test\n",[287,337,339],{"class":289,"line":338},9,[287,340,306],{"emptyLinePlaceholder":305},[287,342,344],{"class":289,"line":343},10,[287,345,346],{},"## 随后选择3.x\n",[287,348,350],{"class":289,"line":349},11,[287,351,352],{},"## Choose a version of Vue.js that you want to start the project with (Use arrow keys)\n",[287,354,356],{"class":289,"line":355},12,[287,357,358],{},"## > 3.x\n",[287,360,362],{"class":289,"line":361},13,[287,363,364],{},"## 2.x\n",[287,366,368],{"class":289,"line":367},14,[287,369,306],{"emptyLinePlaceholder":305},[287,371,373],{"class":289,"line":372},15,[287,374,375],{},"## 启动\n",[287,377,379],{"class":289,"line":378},16,[287,380,381],{},"cd vue_test\n",[287,383,385],{"class":289,"line":384},17,[287,386,387],{},"npm run serve\n",[389,390],"hr",{},[81,392,394],{"id":393},"_22-基于-vite-创建推荐","2.2. 【基于 vite 创建】(推荐)",[255,396,397,400,401,406,407,409],{},[21,398,399],{},"vite"," 是新一代前端构建工具，官网地址：",[37,402,405],{"href":403,"rel":404},"https:\u002F\u002Fvitejs.cn\u002F",[41],"https:\u002F\u002Fvitejs.cn","，",[21,408,399],{},"的优势如下：",[14,411,412,419,431,434],{},[17,413,414,415,418],{},"轻量快速的热重载（",[21,416,417],{},"HMR","），能实现极速的服务启动。",[17,420,421,422,43,424,43,427,430],{},"对 ",[21,423,151],{},[21,425,426],{},"JSX",[21,428,429],{},"CSS"," 等支持开箱即用。",[17,432,433],{},"真正的按需编译，不再等待整个应用编译完成。",[17,435,436,439,440,442,443,448,449],{},[21,437,438],{},"webpack","构建 与 ",[21,441,399],{},"构建对比图如下：\n",[74,444],{"src":445,"alt":446,"title":446,"style":447},"images\u002F1683167182037-71c78210-8217-4e7d-9a83-e463035efbbe.png","webpack构建","zoom:20%;box-shadow:0 0 10px black","\t",[74,450],{"src":451,"alt":452,"title":452,"style":453},"images\u002F1683167204081-582dc237-72bc-499e-9589-2cdfd452e62f.png","vite构建","zoom: 20%;box-shadow:0 0 10px black",[14,455,456],{},[17,457,458,459,463],{},"具体操作如下（点击查看",[37,460,262],{"href":461,"rel":462},"https:\u002F\u002Fcn.vuejs.org\u002Fguide\u002Fquick-start.html#creating-a-vue-application",[41],"）",[278,465,467],{"className":280,"code":466,"language":282,"meta":283,"style":283},"## 1.创建命令\nnpm create vue@latest\n\n## 2.具体配置\n## 配置项目名称\n√ Project name: vue3_test\n## 是否添加TypeScript支持\n√ Add TypeScript? Yes\n## 是否添加JSX支持\n√ Add JSX Support? No\n## 是否添加路由环境\n√ Add Vue Router for Single Page Application development? No\n## 是否添加pinia环境\n√ Add Pinia for state management? No\n## 是否添加单元测试\n√ Add Vitest for Unit Testing? No\n## 是否添加端到端测试方案\n√ Add an End-to-End Testing Solution? » No\n## 是否添加ESLint语法检查\n√ Add ESLint for code quality? Yes\n## 是否添加Prettiert代码格式化\n√ Add Prettier for code formatting? No\n",[21,468,469,474,479,483,488,493,498,503,508,513,518,523,528,533,538,543,548,553,559,565,571,577],{"__ignoreMap":283},[287,470,471],{"class":289,"line":290},[287,472,473],{},"## 1.创建命令\n",[287,475,476],{"class":289,"line":296},[287,477,478],{},"npm create vue@latest\n",[287,480,481],{"class":289,"line":302},[287,482,306],{"emptyLinePlaceholder":305},[287,484,485],{"class":289,"line":309},[287,486,487],{},"## 2.具体配置\n",[287,489,490],{"class":289,"line":315},[287,491,492],{},"## 配置项目名称\n",[287,494,495],{"class":289,"line":321},[287,496,497],{},"√ Project name: vue3_test\n",[287,499,500],{"class":289,"line":326},[287,501,502],{},"## 是否添加TypeScript支持\n",[287,504,505],{"class":289,"line":332},[287,506,507],{},"√ Add TypeScript? Yes\n",[287,509,510],{"class":289,"line":338},[287,511,512],{},"## 是否添加JSX支持\n",[287,514,515],{"class":289,"line":343},[287,516,517],{},"√ Add JSX Support? No\n",[287,519,520],{"class":289,"line":349},[287,521,522],{},"## 是否添加路由环境\n",[287,524,525],{"class":289,"line":355},[287,526,527],{},"√ Add Vue Router for Single Page Application development? No\n",[287,529,530],{"class":289,"line":361},[287,531,532],{},"## 是否添加pinia环境\n",[287,534,535],{"class":289,"line":367},[287,536,537],{},"√ Add Pinia for state management? No\n",[287,539,540],{"class":289,"line":372},[287,541,542],{},"## 是否添加单元测试\n",[287,544,545],{"class":289,"line":378},[287,546,547],{},"√ Add Vitest for Unit Testing? No\n",[287,549,550],{"class":289,"line":384},[287,551,552],{},"## 是否添加端到端测试方案\n",[287,554,556],{"class":289,"line":555},18,[287,557,558],{},"√ Add an End-to-End Testing Solution? » No\n",[287,560,562],{"class":289,"line":561},19,[287,563,564],{},"## 是否添加ESLint语法检查\n",[287,566,568],{"class":289,"line":567},20,[287,569,570],{},"√ Add ESLint for code quality? Yes\n",[287,572,574],{"class":289,"line":573},21,[287,575,576],{},"## 是否添加Prettiert代码格式化\n",[287,578,580],{"class":289,"line":579},22,[287,581,582],{},"√ Add Prettier for code formatting? No\n",[255,584,585],{},"自己动手编写一个App组件",[278,587,591],{"className":588,"code":589,"language":590,"meta":283,"style":283},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n \u003Cdiv class=\"app\">\n \u003Ch1>你好啊！\u003C\u002Fh1>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\">\n export default {\n name:'App' \u002F\u002F组件名\n }\n\u003C\u002Fscript>\n\n\u003Cstyle>\n .app {\n background-color: #ddd;\n box-shadow: 0 0 10px;\n border-radius: 10px;\n padding: 20px;\n }\n\u003C\u002Fstyle>\n","vue",[21,592,593,606,627,641,650,659,663,680,692,704,709,717,721,730,737,752,773,787,801,805],{"__ignoreMap":283},[287,594,595,599,603],{"class":289,"line":290},[287,596,598],{"class":597},"sVt8B","\u003C",[287,600,602],{"class":601},"s9eBZ","template",[287,604,605],{"class":597},">\n",[287,607,608,611,614,618,621,625],{"class":289,"line":296},[287,609,610],{"class":597}," \u003C",[287,612,613],{"class":601},"div",[287,615,617],{"class":616},"sScJk"," class",[287,619,620],{"class":597},"=",[287,622,624],{"class":623},"sZZnC","\"app\"",[287,626,605],{"class":597},[287,628,629,632,634,637,639],{"class":289,"line":302},[287,630,631],{"class":597}," \u003C",[287,633,10],{"class":601},[287,635,636],{"class":597},">你好啊！\u003C\u002F",[287,638,10],{"class":601},[287,640,605],{"class":597},[287,642,643,646,648],{"class":289,"line":309},[287,644,645],{"class":597}," \u003C\u002F",[287,647,613],{"class":601},[287,649,605],{"class":597},[287,651,652,655,657],{"class":289,"line":315},[287,653,654],{"class":597},"\u003C\u002F",[287,656,602],{"class":601},[287,658,605],{"class":597},[287,660,661],{"class":289,"line":321},[287,662,306],{"emptyLinePlaceholder":305},[287,664,665,667,670,673,675,678],{"class":289,"line":326},[287,666,598],{"class":597},[287,668,669],{"class":601},"script",[287,671,672],{"class":616}," lang",[287,674,620],{"class":597},[287,676,677],{"class":623},"\"ts\"",[287,679,605],{"class":597},[287,681,682,686,689],{"class":289,"line":332},[287,683,685],{"class":684},"szBVR"," export",[287,687,688],{"class":684}," default",[287,690,691],{"class":597}," {\n",[287,693,694,697,700],{"class":289,"line":338},[287,695,696],{"class":597}," name:",[287,698,699],{"class":623},"'App'",[287,701,703],{"class":702},"sJ8bj"," \u002F\u002F组件名\n",[287,705,706],{"class":289,"line":343},[287,707,708],{"class":597}," }\n",[287,710,711,713,715],{"class":289,"line":349},[287,712,654],{"class":597},[287,714,669],{"class":601},[287,716,605],{"class":597},[287,718,719],{"class":289,"line":355},[287,720,306],{"emptyLinePlaceholder":305},[287,722,723,725,728],{"class":289,"line":361},[287,724,598],{"class":597},[287,726,727],{"class":601},"style",[287,729,605],{"class":597},[287,731,732,735],{"class":289,"line":367},[287,733,734],{"class":616}," .app",[287,736,691],{"class":597},[287,738,739,743,746,749],{"class":289,"line":372},[287,740,742],{"class":741},"sj4cs"," background-color",[287,744,745],{"class":597},": ",[287,747,748],{"class":741},"#ddd",[287,750,751],{"class":597},";\n",[287,753,754,757,759,762,765,768,771],{"class":289,"line":378},[287,755,756],{"class":741}," box-shadow",[287,758,745],{"class":597},[287,760,761],{"class":741},"0",[287,763,764],{"class":741}," 0",[287,766,767],{"class":741}," 10",[287,769,770],{"class":684},"px",[287,772,751],{"class":597},[287,774,775,778,780,783,785],{"class":289,"line":384},[287,776,777],{"class":741}," border-radius",[287,779,745],{"class":597},[287,781,782],{"class":741},"10",[287,784,770],{"class":684},[287,786,751],{"class":597},[287,788,789,792,794,797,799],{"class":289,"line":555},[287,790,791],{"class":741}," padding",[287,793,745],{"class":597},[287,795,796],{"class":741},"20",[287,798,770],{"class":684},[287,800,751],{"class":597},[287,802,803],{"class":289,"line":561},[287,804,708],{"class":597},[287,806,807,809,811],{"class":289,"line":567},[287,808,654],{"class":597},[287,810,727],{"class":601},[287,812,605],{"class":597},[255,814,815,816,819],{},"安装官方推荐的",[21,817,818],{},"vscode","插件：",[74,821],{"src":822,"alt":823,"style":824},"images\u002Fvolar.png","Snipaste_2023-10-08_20-46-34","zoom:50%;",[74,826],{"src":827,"alt":828,"style":829},"images\u002Fimage-20231218085906380.png","image-20231218085906380","zoom:42%;",[255,831,832],{},"总结：",[14,834,835,844,860],{},[17,836,837,839,840,843],{},[21,838,275],{}," 项目中，",[21,841,842],{},"index.html"," 是项目的入口文件，在项目最外层。",[17,845,846,847,849,850,852,853,856,857,93],{},"加载",[21,848,842],{},"后，",[21,851,275],{}," 解析 ",[21,854,855],{},"\u003Cscript type=\"module\" src=\"xxx\">"," 指向的",[21,858,859],{},"JavaScript",[17,861,862,864,865,868],{},[21,863,147],{},"**中是通过 **",[21,866,867],{},"createApp"," 函数创建一个应用实例。",[81,870,872],{"id":871},"_23-一个简单的效果","2.3. 【一个简单的效果】",[255,874,875,877,878,881,882,884],{},[21,876,147],{},"向下兼容",[21,879,880],{},"Vue2","语法，且",[21,883,147],{},"中的模板中可以没有根标签",[278,886,888],{"className":588,"code":887,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch2>姓名：{{name}}\u003C\u002Fh2>\n \u003Ch2>年龄：{{age}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeAge\">年龄+1\u003C\u002Fbutton>\n \u003Cbutton @click=\"showTel\">点我查看联系方式\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\">\n export default {\n name:'App',\n data() {\n return {\n name:'张三',\n age:18,\n tel:'13888888888'\n }\n },\n methods:{\n changeName(){\n this.name = 'zhang-san'\n },\n changeAge(){\n this.age += 1\n },\n showTel(){\n alert(this.tel)\n }\n },\n }\n\u003C\u002Fscript>\n",[21,889,890,898,913,926,939,961,981,1001,1009,1017,1021,1035,1043,1052,1060,1067,1077,1087,1095,1100,1105,1110,1118,1132,1138,1146,1160,1165,1173,1188,1193,1198,1203],{"__ignoreMap":283},[287,891,892,894,896],{"class":289,"line":290},[287,893,598],{"class":597},[287,895,602],{"class":601},[287,897,605],{"class":597},[287,899,900,902,904,906,908,911],{"class":289,"line":296},[287,901,610],{"class":597},[287,903,613],{"class":601},[287,905,617],{"class":616},[287,907,620],{"class":597},[287,909,910],{"class":623},"\"person\"",[287,912,605],{"class":597},[287,914,915,917,919,922,924],{"class":289,"line":302},[287,916,631],{"class":597},[287,918,81],{"class":601},[287,920,921],{"class":597},">姓名：{{name}}\u003C\u002F",[287,923,81],{"class":601},[287,925,605],{"class":597},[287,927,928,930,932,935,937],{"class":289,"line":309},[287,929,631],{"class":597},[287,931,81],{"class":601},[287,933,934],{"class":597},">年龄：{{age}}\u003C\u002F",[287,936,81],{"class":601},[287,938,605],{"class":597},[287,940,941,943,946,949,951,954,957,959],{"class":289,"line":315},[287,942,631],{"class":597},[287,944,945],{"class":601},"button",[287,947,948],{"class":616}," @click",[287,950,620],{"class":597},[287,952,953],{"class":623},"\"changeName\"",[287,955,956],{"class":597},">修改名字\u003C\u002F",[287,958,945],{"class":601},[287,960,605],{"class":597},[287,962,963,965,967,969,971,974,977,979],{"class":289,"line":321},[287,964,631],{"class":597},[287,966,945],{"class":601},[287,968,948],{"class":616},[287,970,620],{"class":597},[287,972,973],{"class":623},"\"changeAge\"",[287,975,976],{"class":597},">年龄+1\u003C\u002F",[287,978,945],{"class":601},[287,980,605],{"class":597},[287,982,983,985,987,989,991,994,997,999],{"class":289,"line":326},[287,984,631],{"class":597},[287,986,945],{"class":601},[287,988,948],{"class":616},[287,990,620],{"class":597},[287,992,993],{"class":623},"\"showTel\"",[287,995,996],{"class":597},">点我查看联系方式\u003C\u002F",[287,998,945],{"class":601},[287,1000,605],{"class":597},[287,1002,1003,1005,1007],{"class":289,"line":332},[287,1004,645],{"class":597},[287,1006,613],{"class":601},[287,1008,605],{"class":597},[287,1010,1011,1013,1015],{"class":289,"line":338},[287,1012,654],{"class":597},[287,1014,602],{"class":601},[287,1016,605],{"class":597},[287,1018,1019],{"class":289,"line":343},[287,1020,306],{"emptyLinePlaceholder":305},[287,1022,1023,1025,1027,1029,1031,1033],{"class":289,"line":349},[287,1024,598],{"class":597},[287,1026,669],{"class":601},[287,1028,672],{"class":616},[287,1030,620],{"class":597},[287,1032,677],{"class":623},[287,1034,605],{"class":597},[287,1036,1037,1039,1041],{"class":289,"line":355},[287,1038,685],{"class":684},[287,1040,688],{"class":684},[287,1042,691],{"class":597},[287,1044,1045,1047,1049],{"class":289,"line":361},[287,1046,696],{"class":597},[287,1048,699],{"class":623},[287,1050,1051],{"class":597},",\n",[287,1053,1054,1057],{"class":289,"line":367},[287,1055,1056],{"class":616}," data",[287,1058,1059],{"class":597},"() {\n",[287,1061,1062,1065],{"class":289,"line":372},[287,1063,1064],{"class":684}," return",[287,1066,691],{"class":597},[287,1068,1069,1072,1075],{"class":289,"line":378},[287,1070,1071],{"class":597}," name:",[287,1073,1074],{"class":623},"'张三'",[287,1076,1051],{"class":597},[287,1078,1079,1082,1085],{"class":289,"line":384},[287,1080,1081],{"class":597}," age:",[287,1083,1084],{"class":741},"18",[287,1086,1051],{"class":597},[287,1088,1089,1092],{"class":289,"line":555},[287,1090,1091],{"class":597}," tel:",[287,1093,1094],{"class":623},"'13888888888'\n",[287,1096,1097],{"class":289,"line":561},[287,1098,1099],{"class":597}," }\n",[287,1101,1102],{"class":289,"line":567},[287,1103,1104],{"class":597}," },\n",[287,1106,1107],{"class":289,"line":573},[287,1108,1109],{"class":597}," methods:{\n",[287,1111,1112,1115],{"class":289,"line":579},[287,1113,1114],{"class":616}," changeName",[287,1116,1117],{"class":597},"(){\n",[287,1119,1121,1124,1127,1129],{"class":289,"line":1120},23,[287,1122,1123],{"class":741}," this",[287,1125,1126],{"class":597},".name ",[287,1128,620],{"class":684},[287,1130,1131],{"class":623}," 'zhang-san'\n",[287,1133,1135],{"class":289,"line":1134},24,[287,1136,1137],{"class":597}," },\n",[287,1139,1141,1144],{"class":289,"line":1140},25,[287,1142,1143],{"class":616}," changeAge",[287,1145,1117],{"class":597},[287,1147,1149,1151,1154,1157],{"class":289,"line":1148},26,[287,1150,1123],{"class":741},[287,1152,1153],{"class":597},".age ",[287,1155,1156],{"class":684},"+=",[287,1158,1159],{"class":741}," 1\n",[287,1161,1163],{"class":289,"line":1162},27,[287,1164,1137],{"class":597},[287,1166,1168,1171],{"class":289,"line":1167},28,[287,1169,1170],{"class":616}," showTel",[287,1172,1117],{"class":597},[287,1174,1176,1179,1182,1185],{"class":289,"line":1175},29,[287,1177,1178],{"class":616}," alert",[287,1180,1181],{"class":597},"(",[287,1183,1184],{"class":741},"this",[287,1186,1187],{"class":597},".tel)\n",[287,1189,1191],{"class":289,"line":1190},30,[287,1192,1099],{"class":597},[287,1194,1196],{"class":289,"line":1195},31,[287,1197,1104],{"class":597},[287,1199,1201],{"class":289,"line":1200},32,[287,1202,708],{"class":597},[287,1204,1206,1208,1210],{"class":289,"line":1205},33,[287,1207,654],{"class":597},[287,1209,669],{"class":601},[287,1211,605],{"class":597},[10,1213,1215],{"id":1214},"_3-vue3核心语法","3. Vue3核心语法",[81,1217,1219],{"id":1218},"_31-optionsapi-与-compositionapi","3.1. 【OptionsAPI 与 CompositionAPI】",[14,1221,1222,1234],{},[17,1223,1224,1226,1227,1229,1230,1233],{},[21,1225,880],{},"的",[21,1228,167],{},"设计是",[21,1231,1232],{},"Options","（配置）风格的。",[17,1235,1236,1226,1238,1229,1240,1243],{},[21,1237,147],{},[21,1239,167],{},[21,1241,1242],{},"Composition","（组合）风格的。",[1245,1246,1248],"h3",{"id":1247},"options-api-的弊端","Options API 的弊端",[255,1250,1251,1253,1254,1256,1257,43,1259,43,1262,1264,1265,43,1267,43,1269,1271],{},[21,1252,1232],{},"类型的 ",[21,1255,167],{},"，数据、方法、计算属性等，是分散在：",[21,1258,231],{},[21,1260,1261],{},"methods",[21,1263,189],{},"中的，若想新增或者修改一个需求，就需要分别修改：",[21,1266,231],{},[21,1268,1261],{},[21,1270,189],{},"，不便于维护和复用。",[255,1273,1274,1279],{},[74,1275],{"src":1276,"alt":1277,"style":1278},"images\u002F1696662197101-55d2b251-f6e5-47f4-b3f1-d8531bbf9279.gif","1.gif","zoom:70%;border-radius:20px",[74,1280],{"src":1281,"alt":1282,"style":1278},"images\u002F1696662200734-1bad8249-d7a2-423e-a3c3-ab4c110628be.gif","2.gif",[1245,1284,1286],{"id":1285},"composition-api-的优势","Composition API 的优势",[255,1288,1289],{},"可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。",[255,1291,1292,1297],{},[74,1293],{"src":1294,"alt":1295,"style":1296},"images\u002F1696662249851-db6403a1-acb5-481a-88e0-e1e34d2ef53a.gif","3.gif","height:300px;border-radius:10px",[74,1298],{"src":1299,"alt":1300,"style":1296},"images\u002F1696662256560-7239b9f9-a770-43c1-9386-6cc12ef1e9c0.gif","4.gif",[264,1302,1303],{},[255,1304,1305],{},"说明：以上四张动图原创作者：大帅老猿",[81,1307,1309],{"id":1308},"_32-拉开序幕的-setup","3.2. 【拉开序幕的 setup】",[1245,1311,1313],{"id":1312},"setup-概述","setup 概述",[255,1315,1316,1318,1319,1321,1322,1324,1325,1329,1335,1336,1338],{},[21,1317,175],{},"是",[21,1320,147],{},"中一个新的配置项，值是一个函数，它是 ",[21,1323,163],{}," ",[1326,1327,1328],"strong",{},"“表演的舞台",[1330,1331,1332],"em",{},[1326,1333,1334],{},"”","，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在",[21,1337,175],{},"中。",[255,1340,1341],{},"特点如下：",[14,1343,1344,1349,1359],{},[17,1345,1346,1348],{},[21,1347,175],{},"函数返回的对象中的内容，可直接在模板中使用。",[17,1350,1351,1353,1354,1318,1356,93],{},[21,1352,175],{},"中访问",[21,1355,1184],{},[21,1357,1358],{},"undefined",[17,1360,1361,1363,1364,1367],{},[21,1362,175],{},"函数会在",[21,1365,1366],{},"beforeCreate","之前调用，它是“领先”所有钩子执行的。",[278,1369,1371],{"className":588,"code":1370,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch2>姓名：{{name}}\u003C\u002Fh2>\n \u003Ch2>年龄：{{age}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeAge\">年龄+1\u003C\u002Fbutton>\n \u003Cbutton @click=\"showTel\">点我查看联系方式\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\">\n export default {\n name:'Person',\n setup(){\n \u002F\u002F 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）\n let name = '张三'\n let age = 18\n let tel = '13888888888'\n\n \u002F\u002F 方法，原来写在methods中\n function changeName(){\n name = 'zhang-san' \u002F\u002F注意：此时这么修改name页面是不变化的\n console.log(name)\n }\n function changeAge(){\n age += 1 \u002F\u002F注意：此时这么修改age页面是不变化的\n console.log(age)\n }\n function showTel(){\n alert(tel)\n }\n\n \u002F\u002F 返回一个对象，对象中的内容，模板中可以直接使用\n return {name,age,tel,changeName,changeAge,showTel}\n }\n }\n\u003C\u002Fscript>\n",[21,1372,1373,1381,1395,1407,1419,1437,1455,1473,1481,1489,1493,1507,1515,1524,1531,1536,1549,1561,1573,1577,1582,1592,1605,1616,1620,1629,1642,1651,1655,1664,1671,1675,1679,1684,1692,1698,1703],{"__ignoreMap":283},[287,1374,1375,1377,1379],{"class":289,"line":290},[287,1376,598],{"class":597},[287,1378,602],{"class":601},[287,1380,605],{"class":597},[287,1382,1383,1385,1387,1389,1391,1393],{"class":289,"line":296},[287,1384,610],{"class":597},[287,1386,613],{"class":601},[287,1388,617],{"class":616},[287,1390,620],{"class":597},[287,1392,910],{"class":623},[287,1394,605],{"class":597},[287,1396,1397,1399,1401,1403,1405],{"class":289,"line":302},[287,1398,631],{"class":597},[287,1400,81],{"class":601},[287,1402,921],{"class":597},[287,1404,81],{"class":601},[287,1406,605],{"class":597},[287,1408,1409,1411,1413,1415,1417],{"class":289,"line":309},[287,1410,631],{"class":597},[287,1412,81],{"class":601},[287,1414,934],{"class":597},[287,1416,81],{"class":601},[287,1418,605],{"class":597},[287,1420,1421,1423,1425,1427,1429,1431,1433,1435],{"class":289,"line":315},[287,1422,631],{"class":597},[287,1424,945],{"class":601},[287,1426,948],{"class":616},[287,1428,620],{"class":597},[287,1430,953],{"class":623},[287,1432,956],{"class":597},[287,1434,945],{"class":601},[287,1436,605],{"class":597},[287,1438,1439,1441,1443,1445,1447,1449,1451,1453],{"class":289,"line":321},[287,1440,631],{"class":597},[287,1442,945],{"class":601},[287,1444,948],{"class":616},[287,1446,620],{"class":597},[287,1448,973],{"class":623},[287,1450,976],{"class":597},[287,1452,945],{"class":601},[287,1454,605],{"class":597},[287,1456,1457,1459,1461,1463,1465,1467,1469,1471],{"class":289,"line":326},[287,1458,631],{"class":597},[287,1460,945],{"class":601},[287,1462,948],{"class":616},[287,1464,620],{"class":597},[287,1466,993],{"class":623},[287,1468,996],{"class":597},[287,1470,945],{"class":601},[287,1472,605],{"class":597},[287,1474,1475,1477,1479],{"class":289,"line":332},[287,1476,645],{"class":597},[287,1478,613],{"class":601},[287,1480,605],{"class":597},[287,1482,1483,1485,1487],{"class":289,"line":338},[287,1484,654],{"class":597},[287,1486,602],{"class":601},[287,1488,605],{"class":597},[287,1490,1491],{"class":289,"line":343},[287,1492,306],{"emptyLinePlaceholder":305},[287,1494,1495,1497,1499,1501,1503,1505],{"class":289,"line":349},[287,1496,598],{"class":597},[287,1498,669],{"class":601},[287,1500,672],{"class":616},[287,1502,620],{"class":597},[287,1504,677],{"class":623},[287,1506,605],{"class":597},[287,1508,1509,1511,1513],{"class":289,"line":355},[287,1510,685],{"class":684},[287,1512,688],{"class":684},[287,1514,691],{"class":597},[287,1516,1517,1519,1522],{"class":289,"line":361},[287,1518,696],{"class":597},[287,1520,1521],{"class":623},"'Person'",[287,1523,1051],{"class":597},[287,1525,1526,1529],{"class":289,"line":367},[287,1527,1528],{"class":616}," setup",[287,1530,1117],{"class":597},[287,1532,1533],{"class":289,"line":372},[287,1534,1535],{"class":702}," \u002F\u002F 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）\n",[287,1537,1538,1541,1544,1546],{"class":289,"line":378},[287,1539,1540],{"class":684}," let",[287,1542,1543],{"class":597}," name ",[287,1545,620],{"class":684},[287,1547,1548],{"class":623}," '张三'\n",[287,1550,1551,1553,1556,1558],{"class":289,"line":384},[287,1552,1540],{"class":684},[287,1554,1555],{"class":597}," age ",[287,1557,620],{"class":684},[287,1559,1560],{"class":741}," 18\n",[287,1562,1563,1565,1568,1570],{"class":289,"line":555},[287,1564,1540],{"class":684},[287,1566,1567],{"class":597}," tel ",[287,1569,620],{"class":684},[287,1571,1572],{"class":623}," '13888888888'\n",[287,1574,1575],{"class":289,"line":561},[287,1576,306],{"emptyLinePlaceholder":305},[287,1578,1579],{"class":289,"line":567},[287,1580,1581],{"class":702}," \u002F\u002F 方法，原来写在methods中\n",[287,1583,1584,1587,1590],{"class":289,"line":573},[287,1585,1586],{"class":684}," function",[287,1588,1589],{"class":616}," changeName",[287,1591,1117],{"class":597},[287,1593,1594,1597,1599,1602],{"class":289,"line":579},[287,1595,1596],{"class":597}," name ",[287,1598,620],{"class":684},[287,1600,1601],{"class":623}," 'zhang-san'",[287,1603,1604],{"class":702}," \u002F\u002F注意：此时这么修改name页面是不变化的\n",[287,1606,1607,1610,1613],{"class":289,"line":1120},[287,1608,1609],{"class":597}," console.",[287,1611,1612],{"class":616},"log",[287,1614,1615],{"class":597},"(name)\n",[287,1617,1618],{"class":289,"line":1134},[287,1619,1099],{"class":597},[287,1621,1622,1624,1627],{"class":289,"line":1140},[287,1623,1586],{"class":684},[287,1625,1626],{"class":616}," changeAge",[287,1628,1117],{"class":597},[287,1630,1631,1634,1636,1639],{"class":289,"line":1148},[287,1632,1633],{"class":597}," age ",[287,1635,1156],{"class":684},[287,1637,1638],{"class":741}," 1",[287,1640,1641],{"class":702}," \u002F\u002F注意：此时这么修改age页面是不变化的\n",[287,1643,1644,1646,1648],{"class":289,"line":1162},[287,1645,1609],{"class":597},[287,1647,1612],{"class":616},[287,1649,1650],{"class":597},"(age)\n",[287,1652,1653],{"class":289,"line":1167},[287,1654,1099],{"class":597},[287,1656,1657,1659,1662],{"class":289,"line":1175},[287,1658,1586],{"class":684},[287,1660,1661],{"class":616}," showTel",[287,1663,1117],{"class":597},[287,1665,1666,1668],{"class":289,"line":1190},[287,1667,1178],{"class":616},[287,1669,1670],{"class":597},"(tel)\n",[287,1672,1673],{"class":289,"line":1195},[287,1674,1099],{"class":597},[287,1676,1677],{"class":289,"line":1200},[287,1678,306],{"emptyLinePlaceholder":305},[287,1680,1681],{"class":289,"line":1205},[287,1682,1683],{"class":702}," \u002F\u002F 返回一个对象，对象中的内容，模板中可以直接使用\n",[287,1685,1687,1689],{"class":289,"line":1686},34,[287,1688,1064],{"class":684},[287,1690,1691],{"class":597}," {name,age,tel,changeName,changeAge,showTel}\n",[287,1693,1695],{"class":289,"line":1694},35,[287,1696,1697],{"class":597}," }\n",[287,1699,1701],{"class":289,"line":1700},36,[287,1702,708],{"class":597},[287,1704,1706,1708,1710],{"class":289,"line":1705},37,[287,1707,654],{"class":597},[287,1709,669],{"class":601},[287,1711,605],{"class":597},[1245,1713,1715],{"id":1714},"setup-的返回值","setup 的返回值",[14,1717,1718,1725],{},[17,1719,1720,1721,1724],{},"若返回一个",[1326,1722,1723],{},"对象","：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**",[17,1726,1720,1727,1730],{},[1326,1728,1729],{},"函数","：则可以自定义渲染内容，代码如下：",[278,1732,1736],{"className":1733,"code":1734,"language":1735,"meta":283,"style":283},"language-jsx shiki shiki-themes github-light github-dark","setup(){\n return ()=> '你好啊！'\n}\n","jsx",[21,1737,1738,1744,1758],{"__ignoreMap":283},[287,1739,1740,1742],{"class":289,"line":290},[287,1741,175],{"class":616},[287,1743,1117],{"class":597},[287,1745,1746,1749,1752,1755],{"class":289,"line":296},[287,1747,1748],{"class":684}," return",[287,1750,1751],{"class":597}," ()",[287,1753,1754],{"class":684},"=>",[287,1756,1757],{"class":623}," '你好啊！'\n",[287,1759,1760],{"class":289,"line":302},[287,1761,1762],{"class":597},"}\n",[1245,1764,1766],{"id":1765},"setup-与-options-api-的关系","setup 与 Options API 的关系",[14,1768,1769,1786,1803],{},[17,1770,1771,1773,1774,43,1776,1779,1780,1324,1783,1785],{},[21,1772,880],{}," 的配置（",[21,1775,231],{},[21,1777,1778],{},"methos","......）中",[1326,1781,1782],{},"可以访问到",[21,1784,175],{},"中的属性、方法。",[17,1787,1788,1789,1791,1792,1795,1797,1798,43,1800,1802],{},"但在",[21,1790,175],{},"中",[1326,1793,1794],{},"不能访问到",[21,1796,880],{},"的配置（",[21,1799,231],{},[21,1801,1778],{},"......）。",[17,1804,1805,1806,1808,1809,1811],{},"如果与",[21,1807,880],{},"冲突，则",[21,1810,175],{},"优先。",[1245,1813,1815],{"id":1814},"setup-语法糖","setup 语法糖",[255,1817,1818,1820,1821,1823],{},[21,1819,175],{},"函数有一个语法糖，这个语法糖，可以让我们把",[21,1822,175],{},"独立出去，代码如下：",[278,1825,1827],{"className":588,"code":1826,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch2>姓名：{{name}}\u003C\u002Fh2>\n \u003Ch2>年龄：{{age}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changAge\">年龄+1\u003C\u002Fbutton>\n \u003Cbutton @click=\"showTel\">点我查看联系方式\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\">\n export default {\n name:'Person',\n }\n\u003C\u002Fscript>\n\n\u003C!-- 下面的写法是setup语法糖 -->\n\u003Cscript setup lang=\"ts\">\n console.log(this) \u002F\u002Fundefined\n \n \u002F\u002F 数据（注意：此时的name、age、tel都不是响应式数据）\n let name = '张三'\n let age = 18\n let tel = '13888888888'\n\n \u002F\u002F 方法\n function changName(){\n name = '李四'\u002F\u002F注意：此时这么修改name页面是不变化的\n }\n function changAge(){\n console.log(age)\n age += 1 \u002F\u002F注意：此时这么修改age页面是不变化的\n }\n function showTel(){\n alert(tel)\n }\n\u003C\u002Fscript>\n",[21,1828,1829,1837,1851,1863,1875,1894,1913,1931,1939,1947,1951,1965,1973,1981,1985,1993,1997,2002,2019,2036,2041,2046,2057,2067,2077,2081,2086,2096,2109,2113,2122,2131,2142,2146,2154,2161,2165],{"__ignoreMap":283},[287,1830,1831,1833,1835],{"class":289,"line":290},[287,1832,598],{"class":597},[287,1834,602],{"class":601},[287,1836,605],{"class":597},[287,1838,1839,1841,1843,1845,1847,1849],{"class":289,"line":296},[287,1840,610],{"class":597},[287,1842,613],{"class":601},[287,1844,617],{"class":616},[287,1846,620],{"class":597},[287,1848,910],{"class":623},[287,1850,605],{"class":597},[287,1852,1853,1855,1857,1859,1861],{"class":289,"line":302},[287,1854,631],{"class":597},[287,1856,81],{"class":601},[287,1858,921],{"class":597},[287,1860,81],{"class":601},[287,1862,605],{"class":597},[287,1864,1865,1867,1869,1871,1873],{"class":289,"line":309},[287,1866,631],{"class":597},[287,1868,81],{"class":601},[287,1870,934],{"class":597},[287,1872,81],{"class":601},[287,1874,605],{"class":597},[287,1876,1877,1879,1881,1883,1885,1888,1890,1892],{"class":289,"line":315},[287,1878,631],{"class":597},[287,1880,945],{"class":601},[287,1882,948],{"class":616},[287,1884,620],{"class":597},[287,1886,1887],{"class":623},"\"changName\"",[287,1889,956],{"class":597},[287,1891,945],{"class":601},[287,1893,605],{"class":597},[287,1895,1896,1898,1900,1902,1904,1907,1909,1911],{"class":289,"line":321},[287,1897,631],{"class":597},[287,1899,945],{"class":601},[287,1901,948],{"class":616},[287,1903,620],{"class":597},[287,1905,1906],{"class":623},"\"changAge\"",[287,1908,976],{"class":597},[287,1910,945],{"class":601},[287,1912,605],{"class":597},[287,1914,1915,1917,1919,1921,1923,1925,1927,1929],{"class":289,"line":326},[287,1916,631],{"class":597},[287,1918,945],{"class":601},[287,1920,948],{"class":616},[287,1922,620],{"class":597},[287,1924,993],{"class":623},[287,1926,996],{"class":597},[287,1928,945],{"class":601},[287,1930,605],{"class":597},[287,1932,1933,1935,1937],{"class":289,"line":332},[287,1934,645],{"class":597},[287,1936,613],{"class":601},[287,1938,605],{"class":597},[287,1940,1941,1943,1945],{"class":289,"line":338},[287,1942,654],{"class":597},[287,1944,602],{"class":601},[287,1946,605],{"class":597},[287,1948,1949],{"class":289,"line":343},[287,1950,306],{"emptyLinePlaceholder":305},[287,1952,1953,1955,1957,1959,1961,1963],{"class":289,"line":349},[287,1954,598],{"class":597},[287,1956,669],{"class":601},[287,1958,672],{"class":616},[287,1960,620],{"class":597},[287,1962,677],{"class":623},[287,1964,605],{"class":597},[287,1966,1967,1969,1971],{"class":289,"line":355},[287,1968,685],{"class":684},[287,1970,688],{"class":684},[287,1972,691],{"class":597},[287,1974,1975,1977,1979],{"class":289,"line":361},[287,1976,696],{"class":597},[287,1978,1521],{"class":623},[287,1980,1051],{"class":597},[287,1982,1983],{"class":289,"line":367},[287,1984,708],{"class":597},[287,1986,1987,1989,1991],{"class":289,"line":372},[287,1988,654],{"class":597},[287,1990,669],{"class":601},[287,1992,605],{"class":597},[287,1994,1995],{"class":289,"line":378},[287,1996,306],{"emptyLinePlaceholder":305},[287,1998,1999],{"class":289,"line":384},[287,2000,2001],{"class":702},"\u003C!-- 下面的写法是setup语法糖 -->\n",[287,2003,2004,2006,2008,2011,2013,2015,2017],{"class":289,"line":555},[287,2005,598],{"class":597},[287,2007,669],{"class":601},[287,2009,2010],{"class":616}," setup",[287,2012,672],{"class":616},[287,2014,620],{"class":597},[287,2016,677],{"class":623},[287,2018,605],{"class":597},[287,2020,2021,2024,2026,2028,2030,2033],{"class":289,"line":561},[287,2022,2023],{"class":597}," console.",[287,2025,1612],{"class":616},[287,2027,1181],{"class":597},[287,2029,1184],{"class":741},[287,2031,2032],{"class":597},") ",[287,2034,2035],{"class":702},"\u002F\u002Fundefined\n",[287,2037,2038],{"class":289,"line":567},[287,2039,2040],{"class":597}," \n",[287,2042,2043],{"class":289,"line":573},[287,2044,2045],{"class":702}," \u002F\u002F 数据（注意：此时的name、age、tel都不是响应式数据）\n",[287,2047,2048,2051,2053,2055],{"class":289,"line":579},[287,2049,2050],{"class":684}," let",[287,2052,1543],{"class":597},[287,2054,620],{"class":684},[287,2056,1548],{"class":623},[287,2058,2059,2061,2063,2065],{"class":289,"line":1120},[287,2060,2050],{"class":684},[287,2062,1555],{"class":597},[287,2064,620],{"class":684},[287,2066,1560],{"class":741},[287,2068,2069,2071,2073,2075],{"class":289,"line":1134},[287,2070,2050],{"class":684},[287,2072,1567],{"class":597},[287,2074,620],{"class":684},[287,2076,1572],{"class":623},[287,2078,2079],{"class":289,"line":1140},[287,2080,306],{"emptyLinePlaceholder":305},[287,2082,2083],{"class":289,"line":1148},[287,2084,2085],{"class":702}," \u002F\u002F 方法\n",[287,2087,2088,2091,2094],{"class":289,"line":1162},[287,2089,2090],{"class":684}," function",[287,2092,2093],{"class":616}," changName",[287,2095,1117],{"class":597},[287,2097,2098,2101,2103,2106],{"class":289,"line":1167},[287,2099,2100],{"class":597}," name ",[287,2102,620],{"class":684},[287,2104,2105],{"class":623}," '李四'",[287,2107,2108],{"class":702},"\u002F\u002F注意：此时这么修改name页面是不变化的\n",[287,2110,2111],{"class":289,"line":1175},[287,2112,708],{"class":597},[287,2114,2115,2117,2120],{"class":289,"line":1190},[287,2116,2090],{"class":684},[287,2118,2119],{"class":616}," changAge",[287,2121,1117],{"class":597},[287,2123,2124,2127,2129],{"class":289,"line":1195},[287,2125,2126],{"class":597}," console.",[287,2128,1612],{"class":616},[287,2130,1650],{"class":597},[287,2132,2133,2136,2138,2140],{"class":289,"line":1200},[287,2134,2135],{"class":597}," age ",[287,2137,1156],{"class":684},[287,2139,1638],{"class":741},[287,2141,1641],{"class":702},[287,2143,2144],{"class":289,"line":1205},[287,2145,708],{"class":597},[287,2147,2148,2150,2152],{"class":289,"line":1686},[287,2149,2090],{"class":684},[287,2151,1661],{"class":616},[287,2153,1117],{"class":597},[287,2155,2156,2159],{"class":289,"line":1694},[287,2157,2158],{"class":616}," alert",[287,2160,1670],{"class":597},[287,2162,2163],{"class":289,"line":1700},[287,2164,708],{"class":597},[287,2166,2167,2169,2171],{"class":289,"line":1705},[287,2168,654],{"class":597},[287,2170,669],{"class":601},[287,2172,605],{"class":597},[255,2174,2175,2176,1226,2178,2180,2181,2183],{},"扩展：上述代码，还需要编写一个不写",[21,2177,175],{},[21,2179,669],{},"标签，去指定组件名字，比较麻烦，我们可以借助",[21,2182,399],{},"中的插件简化",[157,2185,2186,2192],{},[17,2187,2188,2189],{},"第一步：",[21,2190,2191],{},"npm i vite-plugin-vue-setup-extend -D",[17,2193,2194,2195],{},"第二步：",[21,2196,2197],{},"vite.config.ts",[278,2199,2201],{"className":1733,"code":2200,"language":1735,"meta":283,"style":283},"import { defineConfig } from 'vite'\nimport VueSetupExtend from 'vite-plugin-vue-setup-extend'\n\nexport default defineConfig({\n plugins: [ VueSetupExtend() ]\n})\n",[21,2202,2203,2217,2229,2233,2246,2257],{"__ignoreMap":283},[287,2204,2205,2208,2211,2214],{"class":289,"line":290},[287,2206,2207],{"class":684},"import",[287,2209,2210],{"class":597}," { defineConfig } ",[287,2212,2213],{"class":684},"from",[287,2215,2216],{"class":623}," 'vite'\n",[287,2218,2219,2221,2224,2226],{"class":289,"line":296},[287,2220,2207],{"class":684},[287,2222,2223],{"class":597}," VueSetupExtend ",[287,2225,2213],{"class":684},[287,2227,2228],{"class":623}," 'vite-plugin-vue-setup-extend'\n",[287,2230,2231],{"class":289,"line":302},[287,2232,306],{"emptyLinePlaceholder":305},[287,2234,2235,2238,2240,2243],{"class":289,"line":309},[287,2236,2237],{"class":684},"export",[287,2239,688],{"class":684},[287,2241,2242],{"class":616}," defineConfig",[287,2244,2245],{"class":597},"({\n",[287,2247,2248,2251,2254],{"class":289,"line":315},[287,2249,2250],{"class":597}," plugins: [ ",[287,2252,2253],{"class":616},"VueSetupExtend",[287,2255,2256],{"class":597},"() ]\n",[287,2258,2259],{"class":289,"line":321},[287,2260,2261],{"class":597},"})\n",[157,2263,2264],{"start":302},[17,2265,2266,2267],{},"第三步：",[21,2268,2269],{},"\u003Cscript setup lang=\"ts\" name=\"Person\">",[81,2271,2273],{"id":2272},"_33-ref-创建基本类型的响应式数据","3.3. 【ref 创建：基本类型的响应式数据】",[14,2275,2276,2279,2287,2309],{},[17,2277,2278],{},"**作用：**定义响应式变量。",[17,2280,2281,2284,93],{},[1326,2282,2283],{},"语法：",[21,2285,2286],{},"let xxx = ref(初始值)",[17,2288,2289,2290,2293,2294,2297,2298,406,2300,2302,2303,2306,93],{},"**返回值：**一个",[21,2291,2292],{},"RefImpl","的实例对象，简称",[21,2295,2296],{},"ref对象","或",[21,2299,180],{},[21,2301,180],{},"对象的",[21,2304,2305],{},"value",[1326,2307,2308],{},"属性是响应式的",[17,2310,2311,2314],{},[1326,2312,2313],{},"注意点：",[14,2315,2316,2330],{},[17,2317,2318,2321,2322,2325,2326,2329],{},[21,2319,2320],{},"JS","中操作数据需要：",[21,2323,2324],{},"xxx.value","，但模板中不需要",[21,2327,2328],{},".value","，直接使用即可。",[17,2331,2332,2333,2336,2337,2340,2341,2344],{},"对于",[21,2334,2335],{},"let name = ref('张三')","来说，",[21,2338,2339],{},"name","不是响应式的，",[21,2342,2343],{},"name.value","是响应式的。",[278,2346,2348],{"className":588,"code":2347,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch2>姓名：{{name}}\u003C\u002Fh2>\n \u003Ch2>年龄：{{age}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeAge\">年龄+1\u003C\u002Fbutton>\n \u003Cbutton @click=\"showTel\">点我查看联系方式\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Person\">\n import {ref} from 'vue'\n \u002F\u002F name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。\n let name = ref('张三')\n let age = ref(18)\n \u002F\u002F tel就是一个普通的字符串，不是响应式的\n let tel = '13888888888'\n\n function changeName(){\n \u002F\u002F JS中操作ref对象时候需要.value\n name.value = '李四'\n console.log(name.value)\n\n \u002F\u002F 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。\n \u002F\u002F name = ref('zhang-san')\n }\n function changeAge(){\n \u002F\u002F JS中操作ref对象时候需要.value\n age.value += 1 \n console.log(age.value)\n }\n function showTel(){\n alert(tel)\n }\n\u003C\u002Fscript>\n",[21,2349,2350,2358,2372,2384,2396,2414,2432,2450,2458,2466,2470,2494,2507,2512,2530,2546,2551,2561,2565,2573,2578,2588,2597,2601,2606,2611,2615,2623,2627,2638,2647,2651,2659,2665,2669],{"__ignoreMap":283},[287,2351,2352,2354,2356],{"class":289,"line":290},[287,2353,598],{"class":597},[287,2355,602],{"class":601},[287,2357,605],{"class":597},[287,2359,2360,2362,2364,2366,2368,2370],{"class":289,"line":296},[287,2361,610],{"class":597},[287,2363,613],{"class":601},[287,2365,617],{"class":616},[287,2367,620],{"class":597},[287,2369,910],{"class":623},[287,2371,605],{"class":597},[287,2373,2374,2376,2378,2380,2382],{"class":289,"line":302},[287,2375,631],{"class":597},[287,2377,81],{"class":601},[287,2379,921],{"class":597},[287,2381,81],{"class":601},[287,2383,605],{"class":597},[287,2385,2386,2388,2390,2392,2394],{"class":289,"line":309},[287,2387,631],{"class":597},[287,2389,81],{"class":601},[287,2391,934],{"class":597},[287,2393,81],{"class":601},[287,2395,605],{"class":597},[287,2397,2398,2400,2402,2404,2406,2408,2410,2412],{"class":289,"line":315},[287,2399,631],{"class":597},[287,2401,945],{"class":601},[287,2403,948],{"class":616},[287,2405,620],{"class":597},[287,2407,953],{"class":623},[287,2409,956],{"class":597},[287,2411,945],{"class":601},[287,2413,605],{"class":597},[287,2415,2416,2418,2420,2422,2424,2426,2428,2430],{"class":289,"line":321},[287,2417,631],{"class":597},[287,2419,945],{"class":601},[287,2421,948],{"class":616},[287,2423,620],{"class":597},[287,2425,973],{"class":623},[287,2427,976],{"class":597},[287,2429,945],{"class":601},[287,2431,605],{"class":597},[287,2433,2434,2436,2438,2440,2442,2444,2446,2448],{"class":289,"line":326},[287,2435,631],{"class":597},[287,2437,945],{"class":601},[287,2439,948],{"class":616},[287,2441,620],{"class":597},[287,2443,993],{"class":623},[287,2445,996],{"class":597},[287,2447,945],{"class":601},[287,2449,605],{"class":597},[287,2451,2452,2454,2456],{"class":289,"line":332},[287,2453,645],{"class":597},[287,2455,613],{"class":601},[287,2457,605],{"class":597},[287,2459,2460,2462,2464],{"class":289,"line":338},[287,2461,654],{"class":597},[287,2463,602],{"class":601},[287,2465,605],{"class":597},[287,2467,2468],{"class":289,"line":343},[287,2469,306],{"emptyLinePlaceholder":305},[287,2471,2472,2474,2476,2478,2480,2482,2484,2487,2489,2492],{"class":289,"line":349},[287,2473,598],{"class":597},[287,2475,669],{"class":601},[287,2477,2010],{"class":616},[287,2479,672],{"class":616},[287,2481,620],{"class":597},[287,2483,677],{"class":623},[287,2485,2486],{"class":616}," name",[287,2488,620],{"class":597},[287,2490,2491],{"class":623},"\"Person\"",[287,2493,605],{"class":597},[287,2495,2496,2499,2502,2504],{"class":289,"line":355},[287,2497,2498],{"class":684}," import",[287,2500,2501],{"class":597}," {ref} ",[287,2503,2213],{"class":684},[287,2505,2506],{"class":623}," 'vue'\n",[287,2508,2509],{"class":289,"line":361},[287,2510,2511],{"class":702}," \u002F\u002F name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。\n",[287,2513,2514,2516,2518,2520,2523,2525,2527],{"class":289,"line":367},[287,2515,2050],{"class":684},[287,2517,1543],{"class":597},[287,2519,620],{"class":684},[287,2521,2522],{"class":616}," ref",[287,2524,1181],{"class":597},[287,2526,1074],{"class":623},[287,2528,2529],{"class":597},")\n",[287,2531,2532,2534,2536,2538,2540,2542,2544],{"class":289,"line":372},[287,2533,2050],{"class":684},[287,2535,1555],{"class":597},[287,2537,620],{"class":684},[287,2539,2522],{"class":616},[287,2541,1181],{"class":597},[287,2543,1084],{"class":741},[287,2545,2529],{"class":597},[287,2547,2548],{"class":289,"line":378},[287,2549,2550],{"class":702}," \u002F\u002F tel就是一个普通的字符串，不是响应式的\n",[287,2552,2553,2555,2557,2559],{"class":289,"line":384},[287,2554,2050],{"class":684},[287,2556,1567],{"class":597},[287,2558,620],{"class":684},[287,2560,1572],{"class":623},[287,2562,2563],{"class":289,"line":555},[287,2564,306],{"emptyLinePlaceholder":305},[287,2566,2567,2569,2571],{"class":289,"line":561},[287,2568,2090],{"class":684},[287,2570,1589],{"class":616},[287,2572,1117],{"class":597},[287,2574,2575],{"class":289,"line":567},[287,2576,2577],{"class":702}," \u002F\u002F JS中操作ref对象时候需要.value\n",[287,2579,2580,2583,2585],{"class":289,"line":573},[287,2581,2582],{"class":597}," name.value ",[287,2584,620],{"class":684},[287,2586,2587],{"class":623}," '李四'\n",[287,2589,2590,2592,2594],{"class":289,"line":579},[287,2591,2126],{"class":597},[287,2593,1612],{"class":616},[287,2595,2596],{"class":597},"(name.value)\n",[287,2598,2599],{"class":289,"line":1120},[287,2600,306],{"emptyLinePlaceholder":305},[287,2602,2603],{"class":289,"line":1134},[287,2604,2605],{"class":702}," \u002F\u002F 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。\n",[287,2607,2608],{"class":289,"line":1140},[287,2609,2610],{"class":702}," \u002F\u002F name = ref('zhang-san')\n",[287,2612,2613],{"class":289,"line":1148},[287,2614,708],{"class":597},[287,2616,2617,2619,2621],{"class":289,"line":1162},[287,2618,2090],{"class":684},[287,2620,1626],{"class":616},[287,2622,1117],{"class":597},[287,2624,2625],{"class":289,"line":1167},[287,2626,2577],{"class":702},[287,2628,2629,2632,2634,2636],{"class":289,"line":1175},[287,2630,2631],{"class":597}," age.value ",[287,2633,1156],{"class":684},[287,2635,1638],{"class":741},[287,2637,79],{"class":597},[287,2639,2640,2642,2644],{"class":289,"line":1190},[287,2641,2126],{"class":597},[287,2643,1612],{"class":616},[287,2645,2646],{"class":597},"(age.value)\n",[287,2648,2649],{"class":289,"line":1195},[287,2650,708],{"class":597},[287,2652,2653,2655,2657],{"class":289,"line":1200},[287,2654,2090],{"class":684},[287,2656,1661],{"class":616},[287,2658,1117],{"class":597},[287,2660,2661,2663],{"class":289,"line":1205},[287,2662,2158],{"class":616},[287,2664,1670],{"class":597},[287,2666,2667],{"class":289,"line":1686},[287,2668,708],{"class":597},[287,2670,2671,2673,2675],{"class":289,"line":1694},[287,2672,654],{"class":597},[287,2674,669],{"class":601},[287,2676,605],{"class":597},[81,2678,2680],{"id":2679},"_34-reactive-创建对象类型的响应式数据","3.4. 【reactive 创建：对象类型的响应式数据】",[14,2682,2683,2696,2703,2708],{},[17,2684,2685,2692,2693,2695],{},[1326,2686,2687,2688,2691],{},"作用：",[1326,2689,2690],{},"定义一个","响应式对象","（基本类型不要用它，要用",[21,2694,180],{},"，否则报错）",[17,2697,2698,2700,93],{},[1326,2699,2283],{},[21,2701,2702],{},"let 响应式对象= reactive(源对象)",[17,2704,2289,2705,2707],{},[21,2706,121],{},"的实例对象，简称：响应式对象。",[17,2709,2710,2712,2714],{},[1326,2711,2313],{},[21,2713,184],{},"定义的响应式数据是“深层次”的。",[278,2716,2718],{"className":588,"code":2717,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万\u003C\u002Fh2>\n \u003Ch2>游戏列表：\u003C\u002Fh2>\n \u003Cul>\n \u003Cli v-for=\"g in games\" :key=\"g.id\">{{ g.name }}\u003C\u002Fli>\n \u003C\u002Ful>\n \u003Ch2>测试：{{obj.a.b.c.d}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeCarPrice\">修改汽车价格\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeFirstGame\">修改第一游戏\u003C\u002Fbutton>\n \u003Cbutton @click=\"test\">测试\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\nimport { reactive } from 'vue'\n\n\u002F\u002F 数据\nlet car = reactive({ brand: '奔驰', price: 100 })\nlet games = reactive([\n { id: 'ahsgdyfa01', name: '英雄联盟' },\n { id: 'ahsgdyfa02', name: '王者荣耀' },\n { id: 'ahsgdyfa03', name: '原神' }\n])\nlet obj = reactive({\n a:{\n b:{\n c:{\n d:666\n }\n }\n }\n})\n\nfunction changeCarPrice() {\n car.price += 10\n}\nfunction changeFirstGame() {\n games[0].name = '流星蝴蝶剑'\n}\nfunction test(){\n obj.a.b.c.d = 999\n}\n\u003C\u002Fscript>\n",[21,2719,2720,2728,2742,2755,2768,2776,2806,2815,2828,2848,2868,2888,2896,2904,2908,2930,2941,2945,2950,2978,2992,3009,3023,3038,3043,3056,3061,3066,3071,3079,3083,3087,3091,3095,3099,3109,3119,3123,3133,3149,3154,3164,3175,3180],{"__ignoreMap":283},[287,2721,2722,2724,2726],{"class":289,"line":290},[287,2723,598],{"class":597},[287,2725,602],{"class":601},[287,2727,605],{"class":597},[287,2729,2730,2732,2734,2736,2738,2740],{"class":289,"line":296},[287,2731,610],{"class":597},[287,2733,613],{"class":601},[287,2735,617],{"class":616},[287,2737,620],{"class":597},[287,2739,910],{"class":623},[287,2741,605],{"class":597},[287,2743,2744,2746,2748,2751,2753],{"class":289,"line":302},[287,2745,631],{"class":597},[287,2747,81],{"class":601},[287,2749,2750],{"class":597},">汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万\u003C\u002F",[287,2752,81],{"class":601},[287,2754,605],{"class":597},[287,2756,2757,2759,2761,2764,2766],{"class":289,"line":309},[287,2758,631],{"class":597},[287,2760,81],{"class":601},[287,2762,2763],{"class":597},">游戏列表：\u003C\u002F",[287,2765,81],{"class":601},[287,2767,605],{"class":597},[287,2769,2770,2772,2774],{"class":289,"line":315},[287,2771,631],{"class":597},[287,2773,14],{"class":601},[287,2775,605],{"class":597},[287,2777,2778,2781,2783,2786,2788,2791,2794,2796,2799,2802,2804],{"class":289,"line":321},[287,2779,2780],{"class":597}," \u003C",[287,2782,17],{"class":601},[287,2784,2785],{"class":616}," v-for",[287,2787,620],{"class":597},[287,2789,2790],{"class":623},"\"g in games\"",[287,2792,2793],{"class":616}," :key",[287,2795,620],{"class":597},[287,2797,2798],{"class":623},"\"g.id\"",[287,2800,2801],{"class":597},">{{ g.name }}\u003C\u002F",[287,2803,17],{"class":601},[287,2805,605],{"class":597},[287,2807,2808,2811,2813],{"class":289,"line":326},[287,2809,2810],{"class":597}," \u003C\u002F",[287,2812,14],{"class":601},[287,2814,605],{"class":597},[287,2816,2817,2819,2821,2824,2826],{"class":289,"line":332},[287,2818,631],{"class":597},[287,2820,81],{"class":601},[287,2822,2823],{"class":597},">测试：{{obj.a.b.c.d}}\u003C\u002F",[287,2825,81],{"class":601},[287,2827,605],{"class":597},[287,2829,2830,2832,2834,2836,2838,2841,2844,2846],{"class":289,"line":338},[287,2831,631],{"class":597},[287,2833,945],{"class":601},[287,2835,948],{"class":616},[287,2837,620],{"class":597},[287,2839,2840],{"class":623},"\"changeCarPrice\"",[287,2842,2843],{"class":597},">修改汽车价格\u003C\u002F",[287,2845,945],{"class":601},[287,2847,605],{"class":597},[287,2849,2850,2852,2854,2856,2858,2861,2864,2866],{"class":289,"line":343},[287,2851,631],{"class":597},[287,2853,945],{"class":601},[287,2855,948],{"class":616},[287,2857,620],{"class":597},[287,2859,2860],{"class":623},"\"changeFirstGame\"",[287,2862,2863],{"class":597},">修改第一游戏\u003C\u002F",[287,2865,945],{"class":601},[287,2867,605],{"class":597},[287,2869,2870,2872,2874,2876,2878,2881,2884,2886],{"class":289,"line":349},[287,2871,631],{"class":597},[287,2873,945],{"class":601},[287,2875,948],{"class":616},[287,2877,620],{"class":597},[287,2879,2880],{"class":623},"\"test\"",[287,2882,2883],{"class":597},">测试\u003C\u002F",[287,2885,945],{"class":601},[287,2887,605],{"class":597},[287,2889,2890,2892,2894],{"class":289,"line":355},[287,2891,645],{"class":597},[287,2893,613],{"class":601},[287,2895,605],{"class":597},[287,2897,2898,2900,2902],{"class":289,"line":361},[287,2899,654],{"class":597},[287,2901,602],{"class":601},[287,2903,605],{"class":597},[287,2905,2906],{"class":289,"line":367},[287,2907,306],{"emptyLinePlaceholder":305},[287,2909,2910,2912,2914,2916,2918,2920,2922,2924,2926,2928],{"class":289,"line":372},[287,2911,598],{"class":597},[287,2913,669],{"class":601},[287,2915,672],{"class":616},[287,2917,620],{"class":597},[287,2919,677],{"class":623},[287,2921,2010],{"class":616},[287,2923,2486],{"class":616},[287,2925,620],{"class":597},[287,2927,2491],{"class":623},[287,2929,605],{"class":597},[287,2931,2932,2934,2937,2939],{"class":289,"line":378},[287,2933,2207],{"class":684},[287,2935,2936],{"class":597}," { reactive } ",[287,2938,2213],{"class":684},[287,2940,2506],{"class":623},[287,2942,2943],{"class":289,"line":384},[287,2944,306],{"emptyLinePlaceholder":305},[287,2946,2947],{"class":289,"line":555},[287,2948,2949],{"class":702},"\u002F\u002F 数据\n",[287,2951,2952,2955,2958,2960,2963,2966,2969,2972,2975],{"class":289,"line":561},[287,2953,2954],{"class":684},"let",[287,2956,2957],{"class":597}," car ",[287,2959,620],{"class":684},[287,2961,2962],{"class":616}," reactive",[287,2964,2965],{"class":597},"({ brand: ",[287,2967,2968],{"class":623},"'奔驰'",[287,2970,2971],{"class":597},", price: ",[287,2973,2974],{"class":741},"100",[287,2976,2977],{"class":597}," })\n",[287,2979,2980,2982,2985,2987,2989],{"class":289,"line":567},[287,2981,2954],{"class":684},[287,2983,2984],{"class":597}," games ",[287,2986,620],{"class":684},[287,2988,2962],{"class":616},[287,2990,2991],{"class":597},"([\n",[287,2993,2994,2997,3000,3003,3006],{"class":289,"line":573},[287,2995,2996],{"class":597}," { id: ",[287,2998,2999],{"class":623},"'ahsgdyfa01'",[287,3001,3002],{"class":597},", name: ",[287,3004,3005],{"class":623},"'英雄联盟'",[287,3007,3008],{"class":597}," },\n",[287,3010,3011,3013,3016,3018,3021],{"class":289,"line":579},[287,3012,2996],{"class":597},[287,3014,3015],{"class":623},"'ahsgdyfa02'",[287,3017,3002],{"class":597},[287,3019,3020],{"class":623},"'王者荣耀'",[287,3022,3008],{"class":597},[287,3024,3025,3027,3030,3032,3035],{"class":289,"line":1120},[287,3026,2996],{"class":597},[287,3028,3029],{"class":623},"'ahsgdyfa03'",[287,3031,3002],{"class":597},[287,3033,3034],{"class":623},"'原神'",[287,3036,3037],{"class":597}," }\n",[287,3039,3040],{"class":289,"line":1134},[287,3041,3042],{"class":597},"])\n",[287,3044,3045,3047,3050,3052,3054],{"class":289,"line":1140},[287,3046,2954],{"class":684},[287,3048,3049],{"class":597}," obj ",[287,3051,620],{"class":684},[287,3053,2962],{"class":616},[287,3055,2245],{"class":597},[287,3057,3058],{"class":289,"line":1148},[287,3059,3060],{"class":597}," a:{\n",[287,3062,3063],{"class":289,"line":1162},[287,3064,3065],{"class":597}," b:{\n",[287,3067,3068],{"class":289,"line":1167},[287,3069,3070],{"class":597}," c:{\n",[287,3072,3073,3076],{"class":289,"line":1175},[287,3074,3075],{"class":597}," d:",[287,3077,3078],{"class":741},"666\n",[287,3080,3081],{"class":289,"line":1190},[287,3082,1099],{"class":597},[287,3084,3085],{"class":289,"line":1195},[287,3086,1697],{"class":597},[287,3088,3089],{"class":289,"line":1200},[287,3090,708],{"class":597},[287,3092,3093],{"class":289,"line":1205},[287,3094,2261],{"class":597},[287,3096,3097],{"class":289,"line":1686},[287,3098,306],{"emptyLinePlaceholder":305},[287,3100,3101,3104,3107],{"class":289,"line":1694},[287,3102,3103],{"class":684},"function",[287,3105,3106],{"class":616}," changeCarPrice",[287,3108,1059],{"class":597},[287,3110,3111,3114,3116],{"class":289,"line":1700},[287,3112,3113],{"class":597}," car.price ",[287,3115,1156],{"class":684},[287,3117,3118],{"class":741}," 10\n",[287,3120,3121],{"class":289,"line":1705},[287,3122,1762],{"class":597},[287,3124,3126,3128,3131],{"class":289,"line":3125},38,[287,3127,3103],{"class":684},[287,3129,3130],{"class":616}," changeFirstGame",[287,3132,1059],{"class":597},[287,3134,3136,3139,3141,3144,3146],{"class":289,"line":3135},39,[287,3137,3138],{"class":597}," games[",[287,3140,761],{"class":741},[287,3142,3143],{"class":597},"].name ",[287,3145,620],{"class":684},[287,3147,3148],{"class":623}," '流星蝴蝶剑'\n",[287,3150,3152],{"class":289,"line":3151},40,[287,3153,1762],{"class":597},[287,3155,3157,3159,3162],{"class":289,"line":3156},41,[287,3158,3103],{"class":684},[287,3160,3161],{"class":616}," test",[287,3163,1117],{"class":597},[287,3165,3167,3170,3172],{"class":289,"line":3166},42,[287,3168,3169],{"class":597}," obj.a.b.c.d ",[287,3171,620],{"class":684},[287,3173,3174],{"class":741}," 999\n",[287,3176,3178],{"class":289,"line":3177},43,[287,3179,1762],{"class":597},[287,3181,3183,3185,3187],{"class":289,"line":3182},44,[287,3184,654],{"class":597},[287,3186,669],{"class":601},[287,3188,605],{"class":597},[81,3190,3192],{"id":3191},"_35-ref-创建对象类型的响应式数据","3.5. 【ref 创建：对象类型的响应式数据】",[14,3194,3195,3207],{},[17,3196,3197,3198,3200,3201,43,3204,93],{},"其实",[21,3199,180],{},"接收的数据可以是：",[1326,3202,3203],{},"基本类型",[1326,3205,3206],{},"对象类型",[17,3208,3209,3210,3212,3213,3215],{},"若",[21,3211,180],{},"接收的是对象类型，内部其实也是调用了",[21,3214,184],{},"函数。",[278,3217,3219],{"className":588,"code":3218,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万\u003C\u002Fh2>\n \u003Ch2>游戏列表：\u003C\u002Fh2>\n \u003Cul>\n \u003Cli v-for=\"g in games\" :key=\"g.id\">{{ g.name }}\u003C\u002Fli>\n \u003C\u002Ful>\n \u003Ch2>测试：{{obj.a.b.c.d}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeCarPrice\">修改汽车价格\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeFirstGame\">修改第一游戏\u003C\u002Fbutton>\n \u003Cbutton @click=\"test\">测试\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\nimport { ref } from 'vue'\n\n\u002F\u002F 数据\nlet car = ref({ brand: '奔驰', price: 100 })\nlet games = ref([\n { id: 'ahsgdyfa01', name: '英雄联盟' },\n { id: 'ahsgdyfa02', name: '王者荣耀' },\n { id: 'ahsgdyfa03', name: '原神' }\n])\nlet obj = ref({\n a:{\n b:{\n c:{\n d:666\n }\n }\n }\n})\n\nconsole.log(car)\n\nfunction changeCarPrice() {\n car.value.price += 10\n}\nfunction changeFirstGame() {\n games.value[0].name = '流星蝴蝶剑'\n}\nfunction test(){\n obj.value.a.b.c.d = 999\n}\n\u003C\u002Fscript>\n",[21,3220,3221,3229,3243,3255,3267,3275,3299,3307,3319,3337,3355,3373,3381,3389,3393,3415,3426,3430,3434,3454,3466,3478,3490,3502,3506,3518,3522,3526,3530,3536,3540,3544,3548,3552,3556,3566,3570,3578,3587,3591,3599,3612,3616,3624,3633,3638],{"__ignoreMap":283},[287,3222,3223,3225,3227],{"class":289,"line":290},[287,3224,598],{"class":597},[287,3226,602],{"class":601},[287,3228,605],{"class":597},[287,3230,3231,3233,3235,3237,3239,3241],{"class":289,"line":296},[287,3232,610],{"class":597},[287,3234,613],{"class":601},[287,3236,617],{"class":616},[287,3238,620],{"class":597},[287,3240,910],{"class":623},[287,3242,605],{"class":597},[287,3244,3245,3247,3249,3251,3253],{"class":289,"line":302},[287,3246,631],{"class":597},[287,3248,81],{"class":601},[287,3250,2750],{"class":597},[287,3252,81],{"class":601},[287,3254,605],{"class":597},[287,3256,3257,3259,3261,3263,3265],{"class":289,"line":309},[287,3258,631],{"class":597},[287,3260,81],{"class":601},[287,3262,2763],{"class":597},[287,3264,81],{"class":601},[287,3266,605],{"class":597},[287,3268,3269,3271,3273],{"class":289,"line":315},[287,3270,631],{"class":597},[287,3272,14],{"class":601},[287,3274,605],{"class":597},[287,3276,3277,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297],{"class":289,"line":321},[287,3278,2780],{"class":597},[287,3280,17],{"class":601},[287,3282,2785],{"class":616},[287,3284,620],{"class":597},[287,3286,2790],{"class":623},[287,3288,2793],{"class":616},[287,3290,620],{"class":597},[287,3292,2798],{"class":623},[287,3294,2801],{"class":597},[287,3296,17],{"class":601},[287,3298,605],{"class":597},[287,3300,3301,3303,3305],{"class":289,"line":326},[287,3302,2810],{"class":597},[287,3304,14],{"class":601},[287,3306,605],{"class":597},[287,3308,3309,3311,3313,3315,3317],{"class":289,"line":332},[287,3310,631],{"class":597},[287,3312,81],{"class":601},[287,3314,2823],{"class":597},[287,3316,81],{"class":601},[287,3318,605],{"class":597},[287,3320,3321,3323,3325,3327,3329,3331,3333,3335],{"class":289,"line":338},[287,3322,631],{"class":597},[287,3324,945],{"class":601},[287,3326,948],{"class":616},[287,3328,620],{"class":597},[287,3330,2840],{"class":623},[287,3332,2843],{"class":597},[287,3334,945],{"class":601},[287,3336,605],{"class":597},[287,3338,3339,3341,3343,3345,3347,3349,3351,3353],{"class":289,"line":343},[287,3340,631],{"class":597},[287,3342,945],{"class":601},[287,3344,948],{"class":616},[287,3346,620],{"class":597},[287,3348,2860],{"class":623},[287,3350,2863],{"class":597},[287,3352,945],{"class":601},[287,3354,605],{"class":597},[287,3356,3357,3359,3361,3363,3365,3367,3369,3371],{"class":289,"line":349},[287,3358,631],{"class":597},[287,3360,945],{"class":601},[287,3362,948],{"class":616},[287,3364,620],{"class":597},[287,3366,2880],{"class":623},[287,3368,2883],{"class":597},[287,3370,945],{"class":601},[287,3372,605],{"class":597},[287,3374,3375,3377,3379],{"class":289,"line":355},[287,3376,645],{"class":597},[287,3378,613],{"class":601},[287,3380,605],{"class":597},[287,3382,3383,3385,3387],{"class":289,"line":361},[287,3384,654],{"class":597},[287,3386,602],{"class":601},[287,3388,605],{"class":597},[287,3390,3391],{"class":289,"line":367},[287,3392,306],{"emptyLinePlaceholder":305},[287,3394,3395,3397,3399,3401,3403,3405,3407,3409,3411,3413],{"class":289,"line":372},[287,3396,598],{"class":597},[287,3398,669],{"class":601},[287,3400,672],{"class":616},[287,3402,620],{"class":597},[287,3404,677],{"class":623},[287,3406,2010],{"class":616},[287,3408,2486],{"class":616},[287,3410,620],{"class":597},[287,3412,2491],{"class":623},[287,3414,605],{"class":597},[287,3416,3417,3419,3422,3424],{"class":289,"line":378},[287,3418,2207],{"class":684},[287,3420,3421],{"class":597}," { ref } ",[287,3423,2213],{"class":684},[287,3425,2506],{"class":623},[287,3427,3428],{"class":289,"line":384},[287,3429,306],{"emptyLinePlaceholder":305},[287,3431,3432],{"class":289,"line":555},[287,3433,2949],{"class":702},[287,3435,3436,3438,3440,3442,3444,3446,3448,3450,3452],{"class":289,"line":561},[287,3437,2954],{"class":684},[287,3439,2957],{"class":597},[287,3441,620],{"class":684},[287,3443,2522],{"class":616},[287,3445,2965],{"class":597},[287,3447,2968],{"class":623},[287,3449,2971],{"class":597},[287,3451,2974],{"class":741},[287,3453,2977],{"class":597},[287,3455,3456,3458,3460,3462,3464],{"class":289,"line":567},[287,3457,2954],{"class":684},[287,3459,2984],{"class":597},[287,3461,620],{"class":684},[287,3463,2522],{"class":616},[287,3465,2991],{"class":597},[287,3467,3468,3470,3472,3474,3476],{"class":289,"line":573},[287,3469,2996],{"class":597},[287,3471,2999],{"class":623},[287,3473,3002],{"class":597},[287,3475,3005],{"class":623},[287,3477,3008],{"class":597},[287,3479,3480,3482,3484,3486,3488],{"class":289,"line":579},[287,3481,2996],{"class":597},[287,3483,3015],{"class":623},[287,3485,3002],{"class":597},[287,3487,3020],{"class":623},[287,3489,3008],{"class":597},[287,3491,3492,3494,3496,3498,3500],{"class":289,"line":1120},[287,3493,2996],{"class":597},[287,3495,3029],{"class":623},[287,3497,3002],{"class":597},[287,3499,3034],{"class":623},[287,3501,3037],{"class":597},[287,3503,3504],{"class":289,"line":1134},[287,3505,3042],{"class":597},[287,3507,3508,3510,3512,3514,3516],{"class":289,"line":1140},[287,3509,2954],{"class":684},[287,3511,3049],{"class":597},[287,3513,620],{"class":684},[287,3515,2522],{"class":616},[287,3517,2245],{"class":597},[287,3519,3520],{"class":289,"line":1148},[287,3521,3060],{"class":597},[287,3523,3524],{"class":289,"line":1162},[287,3525,3065],{"class":597},[287,3527,3528],{"class":289,"line":1167},[287,3529,3070],{"class":597},[287,3531,3532,3534],{"class":289,"line":1175},[287,3533,3075],{"class":597},[287,3535,3078],{"class":741},[287,3537,3538],{"class":289,"line":1190},[287,3539,1099],{"class":597},[287,3541,3542],{"class":289,"line":1195},[287,3543,1697],{"class":597},[287,3545,3546],{"class":289,"line":1200},[287,3547,708],{"class":597},[287,3549,3550],{"class":289,"line":1205},[287,3551,2261],{"class":597},[287,3553,3554],{"class":289,"line":1686},[287,3555,306],{"emptyLinePlaceholder":305},[287,3557,3558,3561,3563],{"class":289,"line":1694},[287,3559,3560],{"class":597},"console.",[287,3562,1612],{"class":616},[287,3564,3565],{"class":597},"(car)\n",[287,3567,3568],{"class":289,"line":1700},[287,3569,306],{"emptyLinePlaceholder":305},[287,3571,3572,3574,3576],{"class":289,"line":1705},[287,3573,3103],{"class":684},[287,3575,3106],{"class":616},[287,3577,1059],{"class":597},[287,3579,3580,3583,3585],{"class":289,"line":3125},[287,3581,3582],{"class":597}," car.value.price ",[287,3584,1156],{"class":684},[287,3586,3118],{"class":741},[287,3588,3589],{"class":289,"line":3135},[287,3590,1762],{"class":597},[287,3592,3593,3595,3597],{"class":289,"line":3151},[287,3594,3103],{"class":684},[287,3596,3130],{"class":616},[287,3598,1059],{"class":597},[287,3600,3601,3604,3606,3608,3610],{"class":289,"line":3156},[287,3602,3603],{"class":597}," games.value[",[287,3605,761],{"class":741},[287,3607,3143],{"class":597},[287,3609,620],{"class":684},[287,3611,3148],{"class":623},[287,3613,3614],{"class":289,"line":3166},[287,3615,1762],{"class":597},[287,3617,3618,3620,3622],{"class":289,"line":3177},[287,3619,3103],{"class":684},[287,3621,3161],{"class":616},[287,3623,1117],{"class":597},[287,3625,3626,3629,3631],{"class":289,"line":3182},[287,3627,3628],{"class":597}," obj.value.a.b.c.d ",[287,3630,620],{"class":684},[287,3632,3174],{"class":741},[287,3634,3636],{"class":289,"line":3635},45,[287,3637,1762],{"class":597},[287,3639,3641,3643,3645],{"class":289,"line":3640},46,[287,3642,654],{"class":597},[287,3644,669],{"class":601},[287,3646,605],{"class":597},[81,3648,3650],{"id":3649},"_36-ref-对比-reactive","3.6. 【ref 对比 reactive】",[255,3652,3653],{},"宏观角度看：",[264,3655,3656],{},[157,3657,3658,3670],{},[17,3659,3660,3662,3663,43,3666,3669],{},[21,3661,180],{},"用来定义：",[1326,3664,3665],{},"基本类型数据",[1326,3667,3668],{},"对象类型数据","；",[17,3671,3672,3662,3674,93],{},[21,3673,184],{},[1326,3675,3668],{},[14,3677,3678],{},[17,3679,3680],{},"区别：",[264,3682,3683],{},[157,3684,3685,3705],{},[17,3686,3687,3689,3690,3692,3693,3696,3697,3699,3700,79],{},[21,3688,180],{},"创建的变量必须使用",[21,3691,2328],{},"（可以使用",[21,3694,3695],{},"volar","插件自动添加",[21,3698,2328],{},"）。",[74,3701],{"src":3702,"alt":3703,"style":3704},"images\u002F自动补充value.png","自动补充value","zoom:50%;border-radius:20px",[17,3706,3707,3709,3710,3713,3714,3717],{},[21,3708,184],{},"重新分配一个新对象，会",[1326,3711,3712],{},"失去","响应式（可以使用",[21,3715,3716],{},"Object.assign","去整体替换）。",[14,3719,3720],{},[17,3721,3722],{},"使用原则：",[264,3724,3725],{},[157,3726,3727,3732,3740],{},[17,3728,3729,3730,93],{},"若需要一个基本类型的响应式数据，必须使用",[21,3731,180],{},[17,3733,3734,3735,43,3737,3739],{},"若需要一个响应式对象，层级不深，",[21,3736,180],{},[21,3738,184],{},"都可以。",[17,3741,3742,3743,93],{},"若需要一个响应式对象，且层级较深，推荐使用",[21,3744,184],{},[81,3746,3748],{"id":3747},"_37-torefs-与-toref","3.7. 【toRefs 与 toRef】",[14,3750,3751,3757,3770],{},[17,3752,3753,3754,3756],{},"作用：将一个响应式对象中的每一个属性，转换为",[21,3755,180],{},"对象。",[17,3758,3759,3760,181,3763,3766,3767,3769],{},"备注：",[21,3761,3762],{},"toRefs",[21,3764,3765],{},"toRef","功能一致，但",[21,3768,3762],{},"可以批量转换。",[17,3771,3772],{},"语法如下：",[278,3774,3776],{"className":588,"code":3775,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch2>姓名：{{person.name}}\u003C\u002Fh2>\n \u003Ch2>年龄：{{person.age}}\u003C\u002Fh2>\n \u003Ch2>性别：{{person.gender}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeAge\">修改年龄\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeGender\">修改性别\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {ref,reactive,toRefs,toRef} from 'vue'\n\n \u002F\u002F 数据\n let person = reactive({name:'张三', age:18, gender:'男'})\n \n \u002F\u002F 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力\n let {name,gender} = toRefs(person)\n \n \u002F\u002F 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力\n let age = toRef(person,'age')\n\n \u002F\u002F 方法\n function changeName(){\n name.value += '~'\n }\n function changeAge(){\n age.value += 1\n }\n function changeGender(){\n gender.value = '女'\n }\n\u003C\u002Fscript>\n",[21,3777,3778,3786,3800,3813,3826,3839,3857,3876,3896,3904,3912,3916,3938,3949,3953,3958,3987,3992,3997,4012,4016,4021,4040,4044,4048,4056,4065,4069,4077,4085,4089,4098,4108,4112],{"__ignoreMap":283},[287,3779,3780,3782,3784],{"class":289,"line":290},[287,3781,598],{"class":597},[287,3783,602],{"class":601},[287,3785,605],{"class":597},[287,3787,3788,3790,3792,3794,3796,3798],{"class":289,"line":296},[287,3789,610],{"class":597},[287,3791,613],{"class":601},[287,3793,617],{"class":616},[287,3795,620],{"class":597},[287,3797,910],{"class":623},[287,3799,605],{"class":597},[287,3801,3802,3804,3806,3809,3811],{"class":289,"line":302},[287,3803,631],{"class":597},[287,3805,81],{"class":601},[287,3807,3808],{"class":597},">姓名：{{person.name}}\u003C\u002F",[287,3810,81],{"class":601},[287,3812,605],{"class":597},[287,3814,3815,3817,3819,3822,3824],{"class":289,"line":309},[287,3816,631],{"class":597},[287,3818,81],{"class":601},[287,3820,3821],{"class":597},">年龄：{{person.age}}\u003C\u002F",[287,3823,81],{"class":601},[287,3825,605],{"class":597},[287,3827,3828,3830,3832,3835,3837],{"class":289,"line":315},[287,3829,631],{"class":597},[287,3831,81],{"class":601},[287,3833,3834],{"class":597},">性别：{{person.gender}}\u003C\u002F",[287,3836,81],{"class":601},[287,3838,605],{"class":597},[287,3840,3841,3843,3845,3847,3849,3851,3853,3855],{"class":289,"line":321},[287,3842,631],{"class":597},[287,3844,945],{"class":601},[287,3846,948],{"class":616},[287,3848,620],{"class":597},[287,3850,953],{"class":623},[287,3852,956],{"class":597},[287,3854,945],{"class":601},[287,3856,605],{"class":597},[287,3858,3859,3861,3863,3865,3867,3869,3872,3874],{"class":289,"line":326},[287,3860,631],{"class":597},[287,3862,945],{"class":601},[287,3864,948],{"class":616},[287,3866,620],{"class":597},[287,3868,973],{"class":623},[287,3870,3871],{"class":597},">修改年龄\u003C\u002F",[287,3873,945],{"class":601},[287,3875,605],{"class":597},[287,3877,3878,3880,3882,3884,3886,3889,3892,3894],{"class":289,"line":332},[287,3879,631],{"class":597},[287,3881,945],{"class":601},[287,3883,948],{"class":616},[287,3885,620],{"class":597},[287,3887,3888],{"class":623},"\"changeGender\"",[287,3890,3891],{"class":597},">修改性别\u003C\u002F",[287,3893,945],{"class":601},[287,3895,605],{"class":597},[287,3897,3898,3900,3902],{"class":289,"line":338},[287,3899,645],{"class":597},[287,3901,613],{"class":601},[287,3903,605],{"class":597},[287,3905,3906,3908,3910],{"class":289,"line":343},[287,3907,654],{"class":597},[287,3909,602],{"class":601},[287,3911,605],{"class":597},[287,3913,3914],{"class":289,"line":349},[287,3915,306],{"emptyLinePlaceholder":305},[287,3917,3918,3920,3922,3924,3926,3928,3930,3932,3934,3936],{"class":289,"line":355},[287,3919,598],{"class":597},[287,3921,669],{"class":601},[287,3923,672],{"class":616},[287,3925,620],{"class":597},[287,3927,677],{"class":623},[287,3929,2010],{"class":616},[287,3931,2486],{"class":616},[287,3933,620],{"class":597},[287,3935,2491],{"class":623},[287,3937,605],{"class":597},[287,3939,3940,3942,3945,3947],{"class":289,"line":361},[287,3941,2498],{"class":684},[287,3943,3944],{"class":597}," {ref,reactive,toRefs,toRef} ",[287,3946,2213],{"class":684},[287,3948,2506],{"class":623},[287,3950,3951],{"class":289,"line":367},[287,3952,306],{"emptyLinePlaceholder":305},[287,3954,3955],{"class":289,"line":372},[287,3956,3957],{"class":702}," \u002F\u002F 数据\n",[287,3959,3960,3962,3965,3967,3969,3972,3974,3977,3979,3982,3985],{"class":289,"line":378},[287,3961,2050],{"class":684},[287,3963,3964],{"class":597}," person ",[287,3966,620],{"class":684},[287,3968,2962],{"class":616},[287,3970,3971],{"class":597},"({name:",[287,3973,1074],{"class":623},[287,3975,3976],{"class":597},", age:",[287,3978,1084],{"class":741},[287,3980,3981],{"class":597},", gender:",[287,3983,3984],{"class":623},"'男'",[287,3986,2261],{"class":597},[287,3988,3989],{"class":289,"line":384},[287,3990,3991],{"class":597}," \n",[287,3993,3994],{"class":289,"line":555},[287,3995,3996],{"class":702}," \u002F\u002F 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力\n",[287,3998,3999,4001,4004,4006,4009],{"class":289,"line":561},[287,4000,2050],{"class":684},[287,4002,4003],{"class":597}," {name,gender} ",[287,4005,620],{"class":684},[287,4007,4008],{"class":616}," toRefs",[287,4010,4011],{"class":597},"(person)\n",[287,4013,4014],{"class":289,"line":567},[287,4015,3991],{"class":597},[287,4017,4018],{"class":289,"line":573},[287,4019,4020],{"class":702}," \u002F\u002F 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力\n",[287,4022,4023,4025,4027,4029,4032,4035,4038],{"class":289,"line":579},[287,4024,2050],{"class":684},[287,4026,1555],{"class":597},[287,4028,620],{"class":684},[287,4030,4031],{"class":616}," toRef",[287,4033,4034],{"class":597},"(person,",[287,4036,4037],{"class":623},"'age'",[287,4039,2529],{"class":597},[287,4041,4042],{"class":289,"line":1120},[287,4043,306],{"emptyLinePlaceholder":305},[287,4045,4046],{"class":289,"line":1134},[287,4047,2085],{"class":702},[287,4049,4050,4052,4054],{"class":289,"line":1140},[287,4051,2090],{"class":684},[287,4053,1589],{"class":616},[287,4055,1117],{"class":597},[287,4057,4058,4060,4062],{"class":289,"line":1148},[287,4059,2582],{"class":597},[287,4061,1156],{"class":684},[287,4063,4064],{"class":623}," '~'\n",[287,4066,4067],{"class":289,"line":1162},[287,4068,708],{"class":597},[287,4070,4071,4073,4075],{"class":289,"line":1167},[287,4072,2090],{"class":684},[287,4074,1626],{"class":616},[287,4076,1117],{"class":597},[287,4078,4079,4081,4083],{"class":289,"line":1175},[287,4080,2631],{"class":597},[287,4082,1156],{"class":684},[287,4084,1159],{"class":741},[287,4086,4087],{"class":289,"line":1190},[287,4088,708],{"class":597},[287,4090,4091,4093,4096],{"class":289,"line":1195},[287,4092,2090],{"class":684},[287,4094,4095],{"class":616}," changeGender",[287,4097,1117],{"class":597},[287,4099,4100,4103,4105],{"class":289,"line":1200},[287,4101,4102],{"class":597}," gender.value ",[287,4104,620],{"class":684},[287,4106,4107],{"class":623}," '女'\n",[287,4109,4110],{"class":289,"line":1205},[287,4111,708],{"class":597},[287,4113,4114,4116,4118],{"class":289,"line":1686},[287,4115,654],{"class":597},[287,4117,669],{"class":601},[287,4119,605],{"class":597},[81,4121,4123],{"id":4122},"_38-computed","3.8. 【computed】",[255,4125,4126,4127,4129,4130,4132],{},"作用：根据已有数据计算出新数据（和",[21,4128,880],{},"中的",[21,4131,189],{},"作用一致）。",[74,4134],{"src":4135,"style":4136},"images\u002Fcomputed.gif","zoom:20%;",[278,4138,4140],{"className":588,"code":4139,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n 姓：\u003Cinput type=\"text\" v-model=\"firstName\"> \u003Cbr>\n 名：\u003Cinput type=\"text\" v-model=\"lastName\"> \u003Cbr>\n 全名：\u003Cspan>{{fullName}}\u003C\u002Fspan> \u003Cbr>\n \u003Cbutton @click=\"changeFullName\">全名改为：li-si\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"App\">\n import {ref,computed} from 'vue'\n\n let firstName = ref('zhang')\n let lastName = ref('san')\n\n \u002F\u002F 计算属性——只读取，不修改\n \u002F* let fullName = computed(()=>{\n return firstName.value + '-' + lastName.value\n }) *\u002F\n\n\n \u002F\u002F 计算属性——既读取又修改\n let fullName = computed({\n \u002F\u002F 读取\n get(){\n return firstName.value + '-' + lastName.value\n },\n \u002F\u002F 修改\n set(val){\n console.log('有人修改了fullName',val)\n firstName.value = val.split('-')[0]\n lastName.value = val.split('-')[1]\n }\n })\n\n function changeFullName(){\n fullName.value = 'li-si'\n } \n\u003C\u002Fscript>\n",[21,4141,4142,4150,4164,4195,4221,4239,4259,4267,4275,4279,4302,4313,4317,4335,4353,4357,4362,4367,4372,4377,4381,4385,4390,4404,4409,4416,4435,4439,4444,4458,4473,4499,4521,4525,4530,4534,4543,4553,4558],{"__ignoreMap":283},[287,4143,4144,4146,4148],{"class":289,"line":290},[287,4145,598],{"class":597},[287,4147,602],{"class":601},[287,4149,605],{"class":597},[287,4151,4152,4154,4156,4158,4160,4162],{"class":289,"line":296},[287,4153,610],{"class":597},[287,4155,613],{"class":601},[287,4157,617],{"class":616},[287,4159,620],{"class":597},[287,4161,910],{"class":623},[287,4163,605],{"class":597},[287,4165,4166,4169,4172,4175,4177,4180,4183,4185,4188,4191,4193],{"class":289,"line":302},[287,4167,4168],{"class":597}," 姓：\u003C",[287,4170,4171],{"class":601},"input",[287,4173,4174],{"class":616}," type",[287,4176,620],{"class":597},[287,4178,4179],{"class":623},"\"text\"",[287,4181,4182],{"class":616}," v-model",[287,4184,620],{"class":597},[287,4186,4187],{"class":623},"\"firstName\"",[287,4189,4190],{"class":597},"> \u003C",[287,4192,194],{"class":601},[287,4194,605],{"class":597},[287,4196,4197,4200,4202,4204,4206,4208,4210,4212,4215,4217,4219],{"class":289,"line":309},[287,4198,4199],{"class":597}," 名：\u003C",[287,4201,4171],{"class":601},[287,4203,4174],{"class":616},[287,4205,620],{"class":597},[287,4207,4179],{"class":623},[287,4209,4182],{"class":616},[287,4211,620],{"class":597},[287,4213,4214],{"class":623},"\"lastName\"",[287,4216,4190],{"class":597},[287,4218,194],{"class":601},[287,4220,605],{"class":597},[287,4222,4223,4226,4228,4231,4233,4235,4237],{"class":289,"line":315},[287,4224,4225],{"class":597}," 全名：\u003C",[287,4227,287],{"class":601},[287,4229,4230],{"class":597},">{{fullName}}\u003C\u002F",[287,4232,287],{"class":601},[287,4234,4190],{"class":597},[287,4236,194],{"class":601},[287,4238,605],{"class":597},[287,4240,4241,4243,4245,4247,4249,4252,4255,4257],{"class":289,"line":321},[287,4242,631],{"class":597},[287,4244,945],{"class":601},[287,4246,948],{"class":616},[287,4248,620],{"class":597},[287,4250,4251],{"class":623},"\"changeFullName\"",[287,4253,4254],{"class":597},">全名改为：li-si\u003C\u002F",[287,4256,945],{"class":601},[287,4258,605],{"class":597},[287,4260,4261,4263,4265],{"class":289,"line":326},[287,4262,645],{"class":597},[287,4264,613],{"class":601},[287,4266,605],{"class":597},[287,4268,4269,4271,4273],{"class":289,"line":332},[287,4270,654],{"class":597},[287,4272,602],{"class":601},[287,4274,605],{"class":597},[287,4276,4277],{"class":289,"line":338},[287,4278,306],{"emptyLinePlaceholder":305},[287,4280,4281,4283,4285,4287,4289,4291,4293,4295,4297,4300],{"class":289,"line":343},[287,4282,598],{"class":597},[287,4284,669],{"class":601},[287,4286,2010],{"class":616},[287,4288,672],{"class":616},[287,4290,620],{"class":597},[287,4292,677],{"class":623},[287,4294,2486],{"class":616},[287,4296,620],{"class":597},[287,4298,4299],{"class":623},"\"App\"",[287,4301,605],{"class":597},[287,4303,4304,4306,4309,4311],{"class":289,"line":349},[287,4305,2498],{"class":684},[287,4307,4308],{"class":597}," {ref,computed} ",[287,4310,2213],{"class":684},[287,4312,2506],{"class":623},[287,4314,4315],{"class":289,"line":355},[287,4316,306],{"emptyLinePlaceholder":305},[287,4318,4319,4321,4324,4326,4328,4330,4333],{"class":289,"line":361},[287,4320,2050],{"class":684},[287,4322,4323],{"class":597}," firstName ",[287,4325,620],{"class":684},[287,4327,2522],{"class":616},[287,4329,1181],{"class":597},[287,4331,4332],{"class":623},"'zhang'",[287,4334,2529],{"class":597},[287,4336,4337,4339,4342,4344,4346,4348,4351],{"class":289,"line":367},[287,4338,2050],{"class":684},[287,4340,4341],{"class":597}," lastName ",[287,4343,620],{"class":684},[287,4345,2522],{"class":616},[287,4347,1181],{"class":597},[287,4349,4350],{"class":623},"'san'",[287,4352,2529],{"class":597},[287,4354,4355],{"class":289,"line":372},[287,4356,306],{"emptyLinePlaceholder":305},[287,4358,4359],{"class":289,"line":378},[287,4360,4361],{"class":702}," \u002F\u002F 计算属性——只读取，不修改\n",[287,4363,4364],{"class":289,"line":384},[287,4365,4366],{"class":702}," \u002F* let fullName = computed(()=>{\n",[287,4368,4369],{"class":289,"line":555},[287,4370,4371],{"class":702}," return firstName.value + '-' + lastName.value\n",[287,4373,4374],{"class":289,"line":561},[287,4375,4376],{"class":702}," }) *\u002F\n",[287,4378,4379],{"class":289,"line":567},[287,4380,306],{"emptyLinePlaceholder":305},[287,4382,4383],{"class":289,"line":573},[287,4384,306],{"emptyLinePlaceholder":305},[287,4386,4387],{"class":289,"line":579},[287,4388,4389],{"class":702}," \u002F\u002F 计算属性——既读取又修改\n",[287,4391,4392,4394,4397,4399,4402],{"class":289,"line":1120},[287,4393,2050],{"class":684},[287,4395,4396],{"class":597}," fullName ",[287,4398,620],{"class":684},[287,4400,4401],{"class":616}," computed",[287,4403,2245],{"class":597},[287,4405,4406],{"class":289,"line":1134},[287,4407,4408],{"class":702}," \u002F\u002F 读取\n",[287,4410,4411,4414],{"class":289,"line":1140},[287,4412,4413],{"class":616}," get",[287,4415,1117],{"class":597},[287,4417,4418,4420,4423,4426,4429,4432],{"class":289,"line":1148},[287,4419,1064],{"class":684},[287,4421,4422],{"class":597}," firstName.value ",[287,4424,4425],{"class":684},"+",[287,4427,4428],{"class":623}," '-'",[287,4430,4431],{"class":684}," +",[287,4433,4434],{"class":597}," lastName.value\n",[287,4436,4437],{"class":289,"line":1162},[287,4438,1104],{"class":597},[287,4440,4441],{"class":289,"line":1167},[287,4442,4443],{"class":702}," \u002F\u002F 修改\n",[287,4445,4446,4449,4451,4455],{"class":289,"line":1175},[287,4447,4448],{"class":616}," set",[287,4450,1181],{"class":597},[287,4452,4454],{"class":4453},"s4XuR","val",[287,4456,4457],{"class":597},"){\n",[287,4459,4460,4463,4465,4467,4470],{"class":289,"line":1190},[287,4461,4462],{"class":597}," console.",[287,4464,1612],{"class":616},[287,4466,1181],{"class":597},[287,4468,4469],{"class":623},"'有人修改了fullName'",[287,4471,4472],{"class":597},",val)\n",[287,4474,4475,4478,4480,4483,4486,4488,4491,4494,4496],{"class":289,"line":1195},[287,4476,4477],{"class":597}," firstName.value ",[287,4479,620],{"class":684},[287,4481,4482],{"class":597}," val.",[287,4484,4485],{"class":616},"split",[287,4487,1181],{"class":597},[287,4489,4490],{"class":623},"'-'",[287,4492,4493],{"class":597},")[",[287,4495,761],{"class":741},[287,4497,4498],{"class":597},"]\n",[287,4500,4501,4504,4506,4508,4510,4512,4514,4516,4519],{"class":289,"line":1200},[287,4502,4503],{"class":597}," lastName.value ",[287,4505,620],{"class":684},[287,4507,4482],{"class":597},[287,4509,4485],{"class":616},[287,4511,1181],{"class":597},[287,4513,4490],{"class":623},[287,4515,4493],{"class":597},[287,4517,4518],{"class":741},"1",[287,4520,4498],{"class":597},[287,4522,4523],{"class":289,"line":1205},[287,4524,1697],{"class":597},[287,4526,4527],{"class":289,"line":1686},[287,4528,4529],{"class":597}," })\n",[287,4531,4532],{"class":289,"line":1694},[287,4533,306],{"emptyLinePlaceholder":305},[287,4535,4536,4538,4541],{"class":289,"line":1700},[287,4537,2090],{"class":684},[287,4539,4540],{"class":616}," changeFullName",[287,4542,1117],{"class":597},[287,4544,4545,4548,4550],{"class":289,"line":1705},[287,4546,4547],{"class":597}," fullName.value ",[287,4549,620],{"class":684},[287,4551,4552],{"class":623}," 'li-si'\n",[287,4554,4555],{"class":289,"line":3125},[287,4556,4557],{"class":597}," } \n",[287,4559,4560,4562,4564],{"class":289,"line":3135},[287,4561,654],{"class":597},[287,4563,669],{"class":601},[287,4565,605],{"class":597},[81,4567,4569],{"id":4568},"_39watch","3.9.【watch】",[14,4571,4572,4580],{},[17,4573,4574,4575,4129,4577,4579],{},"作用：监视数据的变化（和",[21,4576,880],{},[21,4578,192],{},"作用一致）",[17,4581,4582,4583,4129,4585,4587,4588,4591],{},"特点：",[21,4584,147],{},[21,4586,192],{},"只能监视以下",[1326,4589,4590],{},"四种数据","：",[264,4593,4594],{},[157,4595,4596,4601,4605,4612],{},[17,4597,4598,4600],{},[21,4599,180],{},"定义的数据。",[17,4602,4603,4600],{},[21,4604,184],{},[17,4606,4607,4608,4611],{},"函数返回一个值（",[21,4609,4610],{},"getter","函数）。",[17,4613,4614],{},"一个包含上述内容的数组。",[255,4616,4617,4618,4620,4621,4623],{},"我们在",[21,4619,147],{},"中使用",[21,4622,192],{},"的时候，通常会遇到以下几种情况：",[1245,4625,4627],{"id":4626},"情况一","* 情况一",[255,4629,4630,4631,4633,4634,4636],{},"监视",[21,4632,180],{},"定义的【基本类型】数据：直接写数据名即可，监视的是其",[21,4635,2305],{},"值的改变。",[278,4638,4640],{"className":588,"code":4639,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch1>情况一：监视【ref】定义的【基本类型】数据\u003C\u002Fh1>\n \u003Ch2>当前求和为：{{sum}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeSum\">点我sum+1\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {ref,watch} from 'vue'\n \u002F\u002F 数据\n let sum = ref(0)\n \u002F\u002F 方法\n function changeSum(){\n sum.value += 1\n }\n \u002F\u002F 监视，情况一：监视【ref】定义的【基本类型】数据\n const stopWatch = watch(sum,(newValue,oldValue)=>{\n console.log('sum变化了',newValue,oldValue)\n if(newValue >= 10){\n stopWatch()\n }\n })\n\u003C\u002Fscript>\n",[21,4641,4642,4650,4664,4677,4690,4710,4718,4726,4730,4752,4763,4767,4784,4788,4797,4806,4810,4815,4849,4863,4878,4886,4890,4894],{"__ignoreMap":283},[287,4643,4644,4646,4648],{"class":289,"line":290},[287,4645,598],{"class":597},[287,4647,602],{"class":601},[287,4649,605],{"class":597},[287,4651,4652,4654,4656,4658,4660,4662],{"class":289,"line":296},[287,4653,610],{"class":597},[287,4655,613],{"class":601},[287,4657,617],{"class":616},[287,4659,620],{"class":597},[287,4661,910],{"class":623},[287,4663,605],{"class":597},[287,4665,4666,4668,4670,4673,4675],{"class":289,"line":302},[287,4667,631],{"class":597},[287,4669,10],{"class":601},[287,4671,4672],{"class":597},">情况一：监视【ref】定义的【基本类型】数据\u003C\u002F",[287,4674,10],{"class":601},[287,4676,605],{"class":597},[287,4678,4679,4681,4683,4686,4688],{"class":289,"line":309},[287,4680,631],{"class":597},[287,4682,81],{"class":601},[287,4684,4685],{"class":597},">当前求和为：{{sum}}\u003C\u002F",[287,4687,81],{"class":601},[287,4689,605],{"class":597},[287,4691,4692,4694,4696,4698,4700,4703,4706,4708],{"class":289,"line":315},[287,4693,631],{"class":597},[287,4695,945],{"class":601},[287,4697,948],{"class":616},[287,4699,620],{"class":597},[287,4701,4702],{"class":623},"\"changeSum\"",[287,4704,4705],{"class":597},">点我sum+1\u003C\u002F",[287,4707,945],{"class":601},[287,4709,605],{"class":597},[287,4711,4712,4714,4716],{"class":289,"line":321},[287,4713,645],{"class":597},[287,4715,613],{"class":601},[287,4717,605],{"class":597},[287,4719,4720,4722,4724],{"class":289,"line":326},[287,4721,654],{"class":597},[287,4723,602],{"class":601},[287,4725,605],{"class":597},[287,4727,4728],{"class":289,"line":332},[287,4729,306],{"emptyLinePlaceholder":305},[287,4731,4732,4734,4736,4738,4740,4742,4744,4746,4748,4750],{"class":289,"line":338},[287,4733,598],{"class":597},[287,4735,669],{"class":601},[287,4737,672],{"class":616},[287,4739,620],{"class":597},[287,4741,677],{"class":623},[287,4743,2010],{"class":616},[287,4745,2486],{"class":616},[287,4747,620],{"class":597},[287,4749,2491],{"class":623},[287,4751,605],{"class":597},[287,4753,4754,4756,4759,4761],{"class":289,"line":343},[287,4755,2498],{"class":684},[287,4757,4758],{"class":597}," {ref,watch} ",[287,4760,2213],{"class":684},[287,4762,2506],{"class":623},[287,4764,4765],{"class":289,"line":349},[287,4766,3957],{"class":702},[287,4768,4769,4771,4774,4776,4778,4780,4782],{"class":289,"line":355},[287,4770,2050],{"class":684},[287,4772,4773],{"class":597}," sum ",[287,4775,620],{"class":684},[287,4777,2522],{"class":616},[287,4779,1181],{"class":597},[287,4781,761],{"class":741},[287,4783,2529],{"class":597},[287,4785,4786],{"class":289,"line":361},[287,4787,2085],{"class":702},[287,4789,4790,4792,4795],{"class":289,"line":367},[287,4791,2090],{"class":684},[287,4793,4794],{"class":616}," changeSum",[287,4796,1117],{"class":597},[287,4798,4799,4802,4804],{"class":289,"line":372},[287,4800,4801],{"class":597}," sum.value ",[287,4803,1156],{"class":684},[287,4805,1159],{"class":741},[287,4807,4808],{"class":289,"line":378},[287,4809,708],{"class":597},[287,4811,4812],{"class":289,"line":384},[287,4813,4814],{"class":702}," \u002F\u002F 监视，情况一：监视【ref】定义的【基本类型】数据\n",[287,4816,4817,4820,4823,4826,4829,4832,4835,4838,4841,4844,4846],{"class":289,"line":555},[287,4818,4819],{"class":684}," const",[287,4821,4822],{"class":741}," stopWatch",[287,4824,4825],{"class":684}," =",[287,4827,4828],{"class":616}," watch",[287,4830,4831],{"class":597},"(sum,(",[287,4833,4834],{"class":4453},"newValue",[287,4836,4837],{"class":597},",",[287,4839,4840],{"class":4453},"oldValue",[287,4842,4843],{"class":597},")",[287,4845,1754],{"class":684},[287,4847,4848],{"class":597},"{\n",[287,4850,4851,4853,4855,4857,4860],{"class":289,"line":561},[287,4852,2126],{"class":597},[287,4854,1612],{"class":616},[287,4856,1181],{"class":597},[287,4858,4859],{"class":623},"'sum变化了'",[287,4861,4862],{"class":597},",newValue,oldValue)\n",[287,4864,4865,4868,4871,4874,4876],{"class":289,"line":567},[287,4866,4867],{"class":684}," if",[287,4869,4870],{"class":597},"(newValue ",[287,4872,4873],{"class":684},">=",[287,4875,767],{"class":741},[287,4877,4457],{"class":597},[287,4879,4880,4883],{"class":289,"line":573},[287,4881,4882],{"class":616}," stopWatch",[287,4884,4885],{"class":597},"()\n",[287,4887,4888],{"class":289,"line":579},[287,4889,1697],{"class":597},[287,4891,4892],{"class":289,"line":1120},[287,4893,4529],{"class":597},[287,4895,4896,4898,4900],{"class":289,"line":1134},[287,4897,654],{"class":597},[287,4899,669],{"class":601},[287,4901,605],{"class":597},[1245,4903,4905],{"id":4904},"情况二","* 情况二",[255,4907,4630,4908,4910],{},[21,4909,180],{},"定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。",[264,4912,4913,4916],{},[255,4914,4915],{},"注意：",[14,4917,4918,4930],{},[17,4919,4920,4921,4923,4924,4926,4927,4929],{},"若修改的是",[21,4922,180],{},"定义的对象中的属性，",[21,4925,4834],{}," 和 ",[21,4928,4840],{}," 都是新值，因为它们是同一个对象。",[17,4931,4932,4933,4935,4936,4938,4939,4941],{},"若修改整个",[21,4934,180],{},"定义的对象，",[21,4937,4834],{}," 是新值， ",[21,4940,4840],{}," 是旧值，因为不是同一个对象了。",[278,4943,4945],{"className":588,"code":4944,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch1>情况二：监视【ref】定义的【对象类型】数据\u003C\u002Fh1>\n \u003Ch2>姓名：{{ person.name }}\u003C\u002Fh2>\n \u003Ch2>年龄：{{ person.age }}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeAge\">修改年龄\u003C\u002Fbutton>\n \u003Cbutton @click=\"changePerson\">修改整个人\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {ref,watch} from 'vue'\n \u002F\u002F 数据\n let person = ref({\n name:'张三',\n age:18\n })\n \u002F\u002F 方法\n function changeName(){\n person.value.name += '~'\n }\n function changeAge(){\n person.value.age += 1\n }\n function changePerson(){\n person.value = {name:'李四',age:90}\n }\n \u002F* \n 监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视\n watch的第一个参数是：被监视的数据\n watch的第二个参数是：监视的回调\n watch的第三个参数是：配置对象（deep、immediate等等.....） \n *\u002F\n watch(person,(newValue,oldValue)=>{\n console.log('person变化了',newValue,oldValue)\n },{deep:true})\n \n\u003C\u002Fscript>\n",[21,4946,4947,4955,4969,4982,4995,5008,5026,5044,5064,5072,5080,5084,5106,5116,5120,5132,5140,5148,5152,5156,5164,5173,5177,5185,5194,5198,5207,5228,5232,5237,5242,5247,5252,5257,5262,5282,5295,5305,5309],{"__ignoreMap":283},[287,4948,4949,4951,4953],{"class":289,"line":290},[287,4950,598],{"class":597},[287,4952,602],{"class":601},[287,4954,605],{"class":597},[287,4956,4957,4959,4961,4963,4965,4967],{"class":289,"line":296},[287,4958,610],{"class":597},[287,4960,613],{"class":601},[287,4962,617],{"class":616},[287,4964,620],{"class":597},[287,4966,910],{"class":623},[287,4968,605],{"class":597},[287,4970,4971,4973,4975,4978,4980],{"class":289,"line":302},[287,4972,631],{"class":597},[287,4974,10],{"class":601},[287,4976,4977],{"class":597},">情况二：监视【ref】定义的【对象类型】数据\u003C\u002F",[287,4979,10],{"class":601},[287,4981,605],{"class":597},[287,4983,4984,4986,4988,4991,4993],{"class":289,"line":309},[287,4985,631],{"class":597},[287,4987,81],{"class":601},[287,4989,4990],{"class":597},">姓名：{{ person.name }}\u003C\u002F",[287,4992,81],{"class":601},[287,4994,605],{"class":597},[287,4996,4997,4999,5001,5004,5006],{"class":289,"line":315},[287,4998,631],{"class":597},[287,5000,81],{"class":601},[287,5002,5003],{"class":597},">年龄：{{ person.age }}\u003C\u002F",[287,5005,81],{"class":601},[287,5007,605],{"class":597},[287,5009,5010,5012,5014,5016,5018,5020,5022,5024],{"class":289,"line":321},[287,5011,631],{"class":597},[287,5013,945],{"class":601},[287,5015,948],{"class":616},[287,5017,620],{"class":597},[287,5019,953],{"class":623},[287,5021,956],{"class":597},[287,5023,945],{"class":601},[287,5025,605],{"class":597},[287,5027,5028,5030,5032,5034,5036,5038,5040,5042],{"class":289,"line":326},[287,5029,631],{"class":597},[287,5031,945],{"class":601},[287,5033,948],{"class":616},[287,5035,620],{"class":597},[287,5037,973],{"class":623},[287,5039,3871],{"class":597},[287,5041,945],{"class":601},[287,5043,605],{"class":597},[287,5045,5046,5048,5050,5052,5054,5057,5060,5062],{"class":289,"line":332},[287,5047,631],{"class":597},[287,5049,945],{"class":601},[287,5051,948],{"class":616},[287,5053,620],{"class":597},[287,5055,5056],{"class":623},"\"changePerson\"",[287,5058,5059],{"class":597},">修改整个人\u003C\u002F",[287,5061,945],{"class":601},[287,5063,605],{"class":597},[287,5065,5066,5068,5070],{"class":289,"line":338},[287,5067,645],{"class":597},[287,5069,613],{"class":601},[287,5071,605],{"class":597},[287,5073,5074,5076,5078],{"class":289,"line":343},[287,5075,654],{"class":597},[287,5077,602],{"class":601},[287,5079,605],{"class":597},[287,5081,5082],{"class":289,"line":349},[287,5083,306],{"emptyLinePlaceholder":305},[287,5085,5086,5088,5090,5092,5094,5096,5098,5100,5102,5104],{"class":289,"line":355},[287,5087,598],{"class":597},[287,5089,669],{"class":601},[287,5091,672],{"class":616},[287,5093,620],{"class":597},[287,5095,677],{"class":623},[287,5097,2010],{"class":616},[287,5099,2486],{"class":616},[287,5101,620],{"class":597},[287,5103,2491],{"class":623},[287,5105,605],{"class":597},[287,5107,5108,5110,5112,5114],{"class":289,"line":361},[287,5109,2498],{"class":684},[287,5111,4758],{"class":597},[287,5113,2213],{"class":684},[287,5115,2506],{"class":623},[287,5117,5118],{"class":289,"line":367},[287,5119,3957],{"class":702},[287,5121,5122,5124,5126,5128,5130],{"class":289,"line":372},[287,5123,2050],{"class":684},[287,5125,3964],{"class":597},[287,5127,620],{"class":684},[287,5129,2522],{"class":616},[287,5131,2245],{"class":597},[287,5133,5134,5136,5138],{"class":289,"line":378},[287,5135,696],{"class":597},[287,5137,1074],{"class":623},[287,5139,1051],{"class":597},[287,5141,5142,5145],{"class":289,"line":384},[287,5143,5144],{"class":597}," age:",[287,5146,5147],{"class":741},"18\n",[287,5149,5150],{"class":289,"line":555},[287,5151,4529],{"class":597},[287,5153,5154],{"class":289,"line":561},[287,5155,2085],{"class":702},[287,5157,5158,5160,5162],{"class":289,"line":567},[287,5159,2090],{"class":684},[287,5161,1589],{"class":616},[287,5163,1117],{"class":597},[287,5165,5166,5169,5171],{"class":289,"line":573},[287,5167,5168],{"class":597}," person.value.name ",[287,5170,1156],{"class":684},[287,5172,4064],{"class":623},[287,5174,5175],{"class":289,"line":579},[287,5176,708],{"class":597},[287,5178,5179,5181,5183],{"class":289,"line":1120},[287,5180,2090],{"class":684},[287,5182,1626],{"class":616},[287,5184,1117],{"class":597},[287,5186,5187,5190,5192],{"class":289,"line":1134},[287,5188,5189],{"class":597}," person.value.age ",[287,5191,1156],{"class":684},[287,5193,1159],{"class":741},[287,5195,5196],{"class":289,"line":1140},[287,5197,708],{"class":597},[287,5199,5200,5202,5205],{"class":289,"line":1148},[287,5201,2090],{"class":684},[287,5203,5204],{"class":616}," changePerson",[287,5206,1117],{"class":597},[287,5208,5209,5212,5214,5217,5220,5223,5226],{"class":289,"line":1162},[287,5210,5211],{"class":597}," person.value ",[287,5213,620],{"class":684},[287,5215,5216],{"class":597}," {name:",[287,5218,5219],{"class":623},"'李四'",[287,5221,5222],{"class":597},",age:",[287,5224,5225],{"class":741},"90",[287,5227,1762],{"class":597},[287,5229,5230],{"class":289,"line":1167},[287,5231,708],{"class":597},[287,5233,5234],{"class":289,"line":1175},[287,5235,5236],{"class":702}," \u002F* \n",[287,5238,5239],{"class":289,"line":1190},[287,5240,5241],{"class":702}," 监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视\n",[287,5243,5244],{"class":289,"line":1195},[287,5245,5246],{"class":702}," watch的第一个参数是：被监视的数据\n",[287,5248,5249],{"class":289,"line":1200},[287,5250,5251],{"class":702}," watch的第二个参数是：监视的回调\n",[287,5253,5254],{"class":289,"line":1205},[287,5255,5256],{"class":702}," watch的第三个参数是：配置对象（deep、immediate等等.....） \n",[287,5258,5259],{"class":289,"line":1686},[287,5260,5261],{"class":702}," *\u002F\n",[287,5263,5264,5267,5270,5272,5274,5276,5278,5280],{"class":289,"line":1694},[287,5265,5266],{"class":616}," watch",[287,5268,5269],{"class":597},"(person,(",[287,5271,4834],{"class":4453},[287,5273,4837],{"class":597},[287,5275,4840],{"class":4453},[287,5277,4843],{"class":597},[287,5279,1754],{"class":684},[287,5281,4848],{"class":597},[287,5283,5284,5286,5288,5290,5293],{"class":289,"line":1700},[287,5285,2126],{"class":597},[287,5287,1612],{"class":616},[287,5289,1181],{"class":597},[287,5291,5292],{"class":623},"'person变化了'",[287,5294,4862],{"class":597},[287,5296,5297,5300,5303],{"class":289,"line":1705},[287,5298,5299],{"class":597}," },{deep:",[287,5301,5302],{"class":741},"true",[287,5304,2261],{"class":597},[287,5306,5307],{"class":289,"line":3125},[287,5308,2040],{"class":597},[287,5310,5311,5313,5315],{"class":289,"line":3135},[287,5312,654],{"class":597},[287,5314,669],{"class":601},[287,5316,605],{"class":597},[1245,5318,5320],{"id":5319},"情况三","* 情况三",[255,5322,4630,5323,5325],{},[21,5324,184],{},"定义的【对象类型】数据，且默认开启了深度监视。",[278,5327,5329],{"className":588,"code":5328,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch1>情况三：监视【reactive】定义的【对象类型】数据\u003C\u002Fh1>\n \u003Ch2>姓名：{{ person.name }}\u003C\u002Fh2>\n \u003Ch2>年龄：{{ person.age }}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeAge\">修改年龄\u003C\u002Fbutton>\n \u003Cbutton @click=\"changePerson\">修改整个人\u003C\u002Fbutton>\n \u003Chr>\n \u003Ch2>测试：{{obj.a.b.c}}\u003C\u002Fh2>\n \u003Cbutton @click=\"test\">修改obj.a.b.c\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {reactive,watch} from 'vue'\n \u002F\u002F 数据\n let person = reactive({\n name:'张三',\n age:18\n })\n let obj = reactive({\n a:{\n b:{\n c:666\n }\n }\n })\n \u002F\u002F 方法\n function changeName(){\n person.name += '~'\n }\n function changeAge(){\n person.age += 1\n }\n function changePerson(){\n Object.assign(person,{name:'李四',age:80})\n }\n function test(){\n obj.a.b.c = 888\n }\n\n \u002F\u002F 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的\n watch(person,(newValue,oldValue)=>{\n console.log('person变化了',newValue,oldValue)\n })\n watch(obj,(newValue,oldValue)=>{\n console.log('Obj变化了',newValue,oldValue)\n })\n\u003C\u002Fscript>\n",[21,5330,5331,5339,5353,5366,5378,5390,5408,5426,5444,5452,5465,5484,5492,5500,5504,5526,5537,5541,5553,5561,5567,5571,5583,5588,5593,5600,5604,5608,5612,5616,5624,5633,5637,5645,5654,5658,5666,5686,5690,5698,5708,5712,5716,5721,5739,5751,5755,5775,5789,5794],{"__ignoreMap":283},[287,5332,5333,5335,5337],{"class":289,"line":290},[287,5334,598],{"class":597},[287,5336,602],{"class":601},[287,5338,605],{"class":597},[287,5340,5341,5343,5345,5347,5349,5351],{"class":289,"line":296},[287,5342,610],{"class":597},[287,5344,613],{"class":601},[287,5346,617],{"class":616},[287,5348,620],{"class":597},[287,5350,910],{"class":623},[287,5352,605],{"class":597},[287,5354,5355,5357,5359,5362,5364],{"class":289,"line":302},[287,5356,631],{"class":597},[287,5358,10],{"class":601},[287,5360,5361],{"class":597},">情况三：监视【reactive】定义的【对象类型】数据\u003C\u002F",[287,5363,10],{"class":601},[287,5365,605],{"class":597},[287,5367,5368,5370,5372,5374,5376],{"class":289,"line":309},[287,5369,631],{"class":597},[287,5371,81],{"class":601},[287,5373,4990],{"class":597},[287,5375,81],{"class":601},[287,5377,605],{"class":597},[287,5379,5380,5382,5384,5386,5388],{"class":289,"line":315},[287,5381,631],{"class":597},[287,5383,81],{"class":601},[287,5385,5003],{"class":597},[287,5387,81],{"class":601},[287,5389,605],{"class":597},[287,5391,5392,5394,5396,5398,5400,5402,5404,5406],{"class":289,"line":321},[287,5393,631],{"class":597},[287,5395,945],{"class":601},[287,5397,948],{"class":616},[287,5399,620],{"class":597},[287,5401,953],{"class":623},[287,5403,956],{"class":597},[287,5405,945],{"class":601},[287,5407,605],{"class":597},[287,5409,5410,5412,5414,5416,5418,5420,5422,5424],{"class":289,"line":326},[287,5411,631],{"class":597},[287,5413,945],{"class":601},[287,5415,948],{"class":616},[287,5417,620],{"class":597},[287,5419,973],{"class":623},[287,5421,3871],{"class":597},[287,5423,945],{"class":601},[287,5425,605],{"class":597},[287,5427,5428,5430,5432,5434,5436,5438,5440,5442],{"class":289,"line":332},[287,5429,631],{"class":597},[287,5431,945],{"class":601},[287,5433,948],{"class":616},[287,5435,620],{"class":597},[287,5437,5056],{"class":623},[287,5439,5059],{"class":597},[287,5441,945],{"class":601},[287,5443,605],{"class":597},[287,5445,5446,5448,5450],{"class":289,"line":338},[287,5447,631],{"class":597},[287,5449,389],{"class":601},[287,5451,605],{"class":597},[287,5453,5454,5456,5458,5461,5463],{"class":289,"line":343},[287,5455,631],{"class":597},[287,5457,81],{"class":601},[287,5459,5460],{"class":597},">测试：{{obj.a.b.c}}\u003C\u002F",[287,5462,81],{"class":601},[287,5464,605],{"class":597},[287,5466,5467,5469,5471,5473,5475,5477,5480,5482],{"class":289,"line":349},[287,5468,631],{"class":597},[287,5470,945],{"class":601},[287,5472,948],{"class":616},[287,5474,620],{"class":597},[287,5476,2880],{"class":623},[287,5478,5479],{"class":597},">修改obj.a.b.c\u003C\u002F",[287,5481,945],{"class":601},[287,5483,605],{"class":597},[287,5485,5486,5488,5490],{"class":289,"line":355},[287,5487,645],{"class":597},[287,5489,613],{"class":601},[287,5491,605],{"class":597},[287,5493,5494,5496,5498],{"class":289,"line":361},[287,5495,654],{"class":597},[287,5497,602],{"class":601},[287,5499,605],{"class":597},[287,5501,5502],{"class":289,"line":367},[287,5503,306],{"emptyLinePlaceholder":305},[287,5505,5506,5508,5510,5512,5514,5516,5518,5520,5522,5524],{"class":289,"line":372},[287,5507,598],{"class":597},[287,5509,669],{"class":601},[287,5511,672],{"class":616},[287,5513,620],{"class":597},[287,5515,677],{"class":623},[287,5517,2010],{"class":616},[287,5519,2486],{"class":616},[287,5521,620],{"class":597},[287,5523,2491],{"class":623},[287,5525,605],{"class":597},[287,5527,5528,5530,5533,5535],{"class":289,"line":378},[287,5529,2498],{"class":684},[287,5531,5532],{"class":597}," {reactive,watch} ",[287,5534,2213],{"class":684},[287,5536,2506],{"class":623},[287,5538,5539],{"class":289,"line":384},[287,5540,3957],{"class":702},[287,5542,5543,5545,5547,5549,5551],{"class":289,"line":555},[287,5544,2050],{"class":684},[287,5546,3964],{"class":597},[287,5548,620],{"class":684},[287,5550,2962],{"class":616},[287,5552,2245],{"class":597},[287,5554,5555,5557,5559],{"class":289,"line":561},[287,5556,696],{"class":597},[287,5558,1074],{"class":623},[287,5560,1051],{"class":597},[287,5562,5563,5565],{"class":289,"line":567},[287,5564,5144],{"class":597},[287,5566,5147],{"class":741},[287,5568,5569],{"class":289,"line":573},[287,5570,4529],{"class":597},[287,5572,5573,5575,5577,5579,5581],{"class":289,"line":579},[287,5574,2050],{"class":684},[287,5576,3049],{"class":597},[287,5578,620],{"class":684},[287,5580,2962],{"class":616},[287,5582,2245],{"class":597},[287,5584,5585],{"class":289,"line":1120},[287,5586,5587],{"class":597}," a:{\n",[287,5589,5590],{"class":289,"line":1134},[287,5591,5592],{"class":597}," b:{\n",[287,5594,5595,5598],{"class":289,"line":1140},[287,5596,5597],{"class":597}," c:",[287,5599,3078],{"class":741},[287,5601,5602],{"class":289,"line":1148},[287,5603,1099],{"class":597},[287,5605,5606],{"class":289,"line":1162},[287,5607,1697],{"class":597},[287,5609,5610],{"class":289,"line":1167},[287,5611,4529],{"class":597},[287,5613,5614],{"class":289,"line":1175},[287,5615,2085],{"class":702},[287,5617,5618,5620,5622],{"class":289,"line":1190},[287,5619,2090],{"class":684},[287,5621,1589],{"class":616},[287,5623,1117],{"class":597},[287,5625,5626,5629,5631],{"class":289,"line":1195},[287,5627,5628],{"class":597}," person.name ",[287,5630,1156],{"class":684},[287,5632,4064],{"class":623},[287,5634,5635],{"class":289,"line":1200},[287,5636,708],{"class":597},[287,5638,5639,5641,5643],{"class":289,"line":1205},[287,5640,2090],{"class":684},[287,5642,1626],{"class":616},[287,5644,1117],{"class":597},[287,5646,5647,5650,5652],{"class":289,"line":1686},[287,5648,5649],{"class":597}," person.age ",[287,5651,1156],{"class":684},[287,5653,1159],{"class":741},[287,5655,5656],{"class":289,"line":1694},[287,5657,708],{"class":597},[287,5659,5660,5662,5664],{"class":289,"line":1700},[287,5661,2090],{"class":684},[287,5663,5204],{"class":616},[287,5665,1117],{"class":597},[287,5667,5668,5671,5674,5677,5679,5681,5684],{"class":289,"line":1705},[287,5669,5670],{"class":597}," Object.",[287,5672,5673],{"class":616},"assign",[287,5675,5676],{"class":597},"(person,{name:",[287,5678,5219],{"class":623},[287,5680,5222],{"class":597},[287,5682,5683],{"class":741},"80",[287,5685,2261],{"class":597},[287,5687,5688],{"class":289,"line":3125},[287,5689,708],{"class":597},[287,5691,5692,5694,5696],{"class":289,"line":3135},[287,5693,2090],{"class":684},[287,5695,3161],{"class":616},[287,5697,1117],{"class":597},[287,5699,5700,5703,5705],{"class":289,"line":3151},[287,5701,5702],{"class":597}," obj.a.b.c ",[287,5704,620],{"class":684},[287,5706,5707],{"class":741}," 888\n",[287,5709,5710],{"class":289,"line":3156},[287,5711,708],{"class":597},[287,5713,5714],{"class":289,"line":3166},[287,5715,306],{"emptyLinePlaceholder":305},[287,5717,5718],{"class":289,"line":3177},[287,5719,5720],{"class":702}," \u002F\u002F 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的\n",[287,5722,5723,5725,5727,5729,5731,5733,5735,5737],{"class":289,"line":3182},[287,5724,5266],{"class":616},[287,5726,5269],{"class":597},[287,5728,4834],{"class":4453},[287,5730,4837],{"class":597},[287,5732,4840],{"class":4453},[287,5734,4843],{"class":597},[287,5736,1754],{"class":684},[287,5738,4848],{"class":597},[287,5740,5741,5743,5745,5747,5749],{"class":289,"line":3635},[287,5742,2126],{"class":597},[287,5744,1612],{"class":616},[287,5746,1181],{"class":597},[287,5748,5292],{"class":623},[287,5750,4862],{"class":597},[287,5752,5753],{"class":289,"line":3640},[287,5754,4529],{"class":597},[287,5756,5758,5760,5763,5765,5767,5769,5771,5773],{"class":289,"line":5757},47,[287,5759,5266],{"class":616},[287,5761,5762],{"class":597},"(obj,(",[287,5764,4834],{"class":4453},[287,5766,4837],{"class":597},[287,5768,4840],{"class":4453},[287,5770,4843],{"class":597},[287,5772,1754],{"class":684},[287,5774,4848],{"class":597},[287,5776,5778,5780,5782,5784,5787],{"class":289,"line":5777},48,[287,5779,2126],{"class":597},[287,5781,1612],{"class":616},[287,5783,1181],{"class":597},[287,5785,5786],{"class":623},"'Obj变化了'",[287,5788,4862],{"class":597},[287,5790,5792],{"class":289,"line":5791},49,[287,5793,4529],{"class":597},[287,5795,5797,5799,5801],{"class":289,"line":5796},50,[287,5798,654],{"class":597},[287,5800,669],{"class":601},[287,5802,605],{"class":597},[1245,5804,5806],{"id":5805},"情况四","* 情况四",[255,5808,4630,5809,2297,5811,5813,5814,5817],{},[21,5810,180],{},[21,5812,184],{},"定义的【对象类型】数据中的",[1326,5815,5816],{},"某个属性","，注意点如下：",[157,5819,5820,5827],{},[17,5821,5822,5823,5826],{},"若该属性值",[1326,5824,5825],{},"不是","【对象类型】，需要写成函数形式。",[17,5828,5829,5830,5833],{},"若该属性值是",[1326,5831,5832],{},"依然","是【对象类型】，可直接编，也可写成函数，建议写成函数。",[255,5835,5836],{},"结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。",[278,5838,5840],{"className":588,"code":5839,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性\u003C\u002Fh1>\n \u003Ch2>姓名：{{ person.name }}\u003C\u002Fh2>\n \u003Ch2>年龄：{{ person.age }}\u003C\u002Fh2>\n \u003Ch2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeAge\">修改年龄\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeC1\">修改第一台车\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeC2\">修改第二台车\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeCar\">修改整个车\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {reactive,watch} from 'vue'\n\n \u002F\u002F 数据\n let person = reactive({\n name:'张三',\n age:18,\n car:{\n c1:'奔驰',\n c2:'宝马'\n }\n })\n \u002F\u002F 方法\n function changeName(){\n person.name += '~'\n }\n function changeAge(){\n person.age += 1\n }\n function changeC1(){\n person.car.c1 = '奥迪'\n }\n function changeC2(){\n person.car.c2 = '大众'\n }\n function changeCar(){\n person.car = {c1:'雅迪',c2:'爱玛'}\n }\n\n \u002F\u002F 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式\n \u002F* watch(()=> person.name,(newValue,oldValue)=>{\n console.log('person.name变化了',newValue,oldValue)\n }) *\u002F\n\n \u002F\u002F 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数\n watch(()=>person.car,(newValue,oldValue)=>{\n console.log('person.car变化了',newValue,oldValue)\n },{deep:true})\n\u003C\u002Fscript>\n",[21,5841,5842,5850,5864,5877,5889,5901,5914,5932,5950,5970,5990,6010,6018,6026,6030,6052,6062,6066,6070,6082,6090,6098,6103,6112,6120,6124,6128,6132,6140,6148,6152,6160,6168,6172,6181,6191,6195,6204,6214,6218,6227,6248,6252,6256,6261,6266,6271,6275,6279,6284,6308,6322,6331],{"__ignoreMap":283},[287,5843,5844,5846,5848],{"class":289,"line":290},[287,5845,598],{"class":597},[287,5847,602],{"class":601},[287,5849,605],{"class":597},[287,5851,5852,5854,5856,5858,5860,5862],{"class":289,"line":296},[287,5853,610],{"class":597},[287,5855,613],{"class":601},[287,5857,617],{"class":616},[287,5859,620],{"class":597},[287,5861,910],{"class":623},[287,5863,605],{"class":597},[287,5865,5866,5868,5870,5873,5875],{"class":289,"line":302},[287,5867,631],{"class":597},[287,5869,10],{"class":601},[287,5871,5872],{"class":597},">情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性\u003C\u002F",[287,5874,10],{"class":601},[287,5876,605],{"class":597},[287,5878,5879,5881,5883,5885,5887],{"class":289,"line":309},[287,5880,631],{"class":597},[287,5882,81],{"class":601},[287,5884,4990],{"class":597},[287,5886,81],{"class":601},[287,5888,605],{"class":597},[287,5890,5891,5893,5895,5897,5899],{"class":289,"line":315},[287,5892,631],{"class":597},[287,5894,81],{"class":601},[287,5896,5003],{"class":597},[287,5898,81],{"class":601},[287,5900,605],{"class":597},[287,5902,5903,5905,5907,5910,5912],{"class":289,"line":321},[287,5904,631],{"class":597},[287,5906,81],{"class":601},[287,5908,5909],{"class":597},">汽车：{{ person.car.c1 }}、{{ person.car.c2 }}\u003C\u002F",[287,5911,81],{"class":601},[287,5913,605],{"class":597},[287,5915,5916,5918,5920,5922,5924,5926,5928,5930],{"class":289,"line":326},[287,5917,631],{"class":597},[287,5919,945],{"class":601},[287,5921,948],{"class":616},[287,5923,620],{"class":597},[287,5925,953],{"class":623},[287,5927,956],{"class":597},[287,5929,945],{"class":601},[287,5931,605],{"class":597},[287,5933,5934,5936,5938,5940,5942,5944,5946,5948],{"class":289,"line":332},[287,5935,631],{"class":597},[287,5937,945],{"class":601},[287,5939,948],{"class":616},[287,5941,620],{"class":597},[287,5943,973],{"class":623},[287,5945,3871],{"class":597},[287,5947,945],{"class":601},[287,5949,605],{"class":597},[287,5951,5952,5954,5956,5958,5960,5963,5966,5968],{"class":289,"line":338},[287,5953,631],{"class":597},[287,5955,945],{"class":601},[287,5957,948],{"class":616},[287,5959,620],{"class":597},[287,5961,5962],{"class":623},"\"changeC1\"",[287,5964,5965],{"class":597},">修改第一台车\u003C\u002F",[287,5967,945],{"class":601},[287,5969,605],{"class":597},[287,5971,5972,5974,5976,5978,5980,5983,5986,5988],{"class":289,"line":343},[287,5973,631],{"class":597},[287,5975,945],{"class":601},[287,5977,948],{"class":616},[287,5979,620],{"class":597},[287,5981,5982],{"class":623},"\"changeC2\"",[287,5984,5985],{"class":597},">修改第二台车\u003C\u002F",[287,5987,945],{"class":601},[287,5989,605],{"class":597},[287,5991,5992,5994,5996,5998,6000,6003,6006,6008],{"class":289,"line":349},[287,5993,631],{"class":597},[287,5995,945],{"class":601},[287,5997,948],{"class":616},[287,5999,620],{"class":597},[287,6001,6002],{"class":623},"\"changeCar\"",[287,6004,6005],{"class":597},">修改整个车\u003C\u002F",[287,6007,945],{"class":601},[287,6009,605],{"class":597},[287,6011,6012,6014,6016],{"class":289,"line":355},[287,6013,645],{"class":597},[287,6015,613],{"class":601},[287,6017,605],{"class":597},[287,6019,6020,6022,6024],{"class":289,"line":361},[287,6021,654],{"class":597},[287,6023,602],{"class":601},[287,6025,605],{"class":597},[287,6027,6028],{"class":289,"line":367},[287,6029,306],{"emptyLinePlaceholder":305},[287,6031,6032,6034,6036,6038,6040,6042,6044,6046,6048,6050],{"class":289,"line":372},[287,6033,598],{"class":597},[287,6035,669],{"class":601},[287,6037,672],{"class":616},[287,6039,620],{"class":597},[287,6041,677],{"class":623},[287,6043,2010],{"class":616},[287,6045,2486],{"class":616},[287,6047,620],{"class":597},[287,6049,2491],{"class":623},[287,6051,605],{"class":597},[287,6053,6054,6056,6058,6060],{"class":289,"line":378},[287,6055,2498],{"class":684},[287,6057,5532],{"class":597},[287,6059,2213],{"class":684},[287,6061,2506],{"class":623},[287,6063,6064],{"class":289,"line":384},[287,6065,306],{"emptyLinePlaceholder":305},[287,6067,6068],{"class":289,"line":555},[287,6069,3957],{"class":702},[287,6071,6072,6074,6076,6078,6080],{"class":289,"line":561},[287,6073,2050],{"class":684},[287,6075,3964],{"class":597},[287,6077,620],{"class":684},[287,6079,2962],{"class":616},[287,6081,2245],{"class":597},[287,6083,6084,6086,6088],{"class":289,"line":567},[287,6085,696],{"class":597},[287,6087,1074],{"class":623},[287,6089,1051],{"class":597},[287,6091,6092,6094,6096],{"class":289,"line":573},[287,6093,5144],{"class":597},[287,6095,1084],{"class":741},[287,6097,1051],{"class":597},[287,6099,6100],{"class":289,"line":579},[287,6101,6102],{"class":597}," car:{\n",[287,6104,6105,6108,6110],{"class":289,"line":1120},[287,6106,6107],{"class":597}," c1:",[287,6109,2968],{"class":623},[287,6111,1051],{"class":597},[287,6113,6114,6117],{"class":289,"line":1134},[287,6115,6116],{"class":597}," c2:",[287,6118,6119],{"class":623},"'宝马'\n",[287,6121,6122],{"class":289,"line":1140},[287,6123,1697],{"class":597},[287,6125,6126],{"class":289,"line":1148},[287,6127,4529],{"class":597},[287,6129,6130],{"class":289,"line":1162},[287,6131,2085],{"class":702},[287,6133,6134,6136,6138],{"class":289,"line":1167},[287,6135,2090],{"class":684},[287,6137,1589],{"class":616},[287,6139,1117],{"class":597},[287,6141,6142,6144,6146],{"class":289,"line":1175},[287,6143,5628],{"class":597},[287,6145,1156],{"class":684},[287,6147,4064],{"class":623},[287,6149,6150],{"class":289,"line":1190},[287,6151,708],{"class":597},[287,6153,6154,6156,6158],{"class":289,"line":1195},[287,6155,2090],{"class":684},[287,6157,1626],{"class":616},[287,6159,1117],{"class":597},[287,6161,6162,6164,6166],{"class":289,"line":1200},[287,6163,5649],{"class":597},[287,6165,1156],{"class":684},[287,6167,1159],{"class":741},[287,6169,6170],{"class":289,"line":1205},[287,6171,708],{"class":597},[287,6173,6174,6176,6179],{"class":289,"line":1686},[287,6175,2090],{"class":684},[287,6177,6178],{"class":616}," changeC1",[287,6180,1117],{"class":597},[287,6182,6183,6186,6188],{"class":289,"line":1694},[287,6184,6185],{"class":597}," person.car.c1 ",[287,6187,620],{"class":684},[287,6189,6190],{"class":623}," '奥迪'\n",[287,6192,6193],{"class":289,"line":1700},[287,6194,708],{"class":597},[287,6196,6197,6199,6202],{"class":289,"line":1705},[287,6198,2090],{"class":684},[287,6200,6201],{"class":616}," changeC2",[287,6203,1117],{"class":597},[287,6205,6206,6209,6211],{"class":289,"line":3125},[287,6207,6208],{"class":597}," person.car.c2 ",[287,6210,620],{"class":684},[287,6212,6213],{"class":623}," '大众'\n",[287,6215,6216],{"class":289,"line":3135},[287,6217,708],{"class":597},[287,6219,6220,6222,6225],{"class":289,"line":3151},[287,6221,2090],{"class":684},[287,6223,6224],{"class":616}," changeCar",[287,6226,1117],{"class":597},[287,6228,6229,6232,6234,6237,6240,6243,6246],{"class":289,"line":3156},[287,6230,6231],{"class":597}," person.car ",[287,6233,620],{"class":684},[287,6235,6236],{"class":597}," {c1:",[287,6238,6239],{"class":623},"'雅迪'",[287,6241,6242],{"class":597},",c2:",[287,6244,6245],{"class":623},"'爱玛'",[287,6247,1762],{"class":597},[287,6249,6250],{"class":289,"line":3166},[287,6251,708],{"class":597},[287,6253,6254],{"class":289,"line":3177},[287,6255,306],{"emptyLinePlaceholder":305},[287,6257,6258],{"class":289,"line":3182},[287,6259,6260],{"class":702}," \u002F\u002F 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式\n",[287,6262,6263],{"class":289,"line":3635},[287,6264,6265],{"class":702}," \u002F* watch(()=> person.name,(newValue,oldValue)=>{\n",[287,6267,6268],{"class":289,"line":3640},[287,6269,6270],{"class":702}," console.log('person.name变化了',newValue,oldValue)\n",[287,6272,6273],{"class":289,"line":5757},[287,6274,4376],{"class":702},[287,6276,6277],{"class":289,"line":5777},[287,6278,306],{"emptyLinePlaceholder":305},[287,6280,6281],{"class":289,"line":5791},[287,6282,6283],{"class":702}," \u002F\u002F 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数\n",[287,6285,6286,6288,6291,6293,6296,6298,6300,6302,6304,6306],{"class":289,"line":5796},[287,6287,5266],{"class":616},[287,6289,6290],{"class":597},"(()",[287,6292,1754],{"class":684},[287,6294,6295],{"class":597},"person.car,(",[287,6297,4834],{"class":4453},[287,6299,4837],{"class":597},[287,6301,4840],{"class":4453},[287,6303,4843],{"class":597},[287,6305,1754],{"class":684},[287,6307,4848],{"class":597},[287,6309,6311,6313,6315,6317,6320],{"class":289,"line":6310},51,[287,6312,2126],{"class":597},[287,6314,1612],{"class":616},[287,6316,1181],{"class":597},[287,6318,6319],{"class":623},"'person.car变化了'",[287,6321,4862],{"class":597},[287,6323,6325,6327,6329],{"class":289,"line":6324},52,[287,6326,5299],{"class":597},[287,6328,5302],{"class":741},[287,6330,2261],{"class":597},[287,6332,6334,6336,6338],{"class":289,"line":6333},53,[287,6335,654],{"class":597},[287,6337,669],{"class":601},[287,6339,605],{"class":597},[1245,6341,6343],{"id":6342},"情况五","* 情况五",[255,6345,6346],{},"监视上述的多个数据",[278,6348,6350],{"className":588,"code":6349,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch1>情况五：监视上述的多个数据\u003C\u002Fh1>\n \u003Ch2>姓名：{{ person.name }}\u003C\u002Fh2>\n \u003Ch2>年龄：{{ person.age }}\u003C\u002Fh2>\n \u003Ch2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeName\">修改名字\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeAge\">修改年龄\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeC1\">修改第一台车\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeC2\">修改第二台车\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeCar\">修改整个车\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {reactive,watch} from 'vue'\n\n \u002F\u002F 数据\n let person = reactive({\n name:'张三',\n age:18,\n car:{\n c1:'奔驰',\n c2:'宝马'\n }\n })\n \u002F\u002F 方法\n function changeName(){\n person.name += '~'\n }\n function changeAge(){\n person.age += 1\n }\n function changeC1(){\n person.car.c1 = '奥迪'\n }\n function changeC2(){\n person.car.c2 = '大众'\n }\n function changeCar(){\n person.car = {c1:'雅迪',c2:'爱玛'}\n }\n\n \u002F\u002F 监视，情况五：监视上述的多个数据\n watch([()=>person.name,person.car],(newValue,oldValue)=>{\n console.log('person.car变化了',newValue,oldValue)\n },{deep:true})\n\n\u003C\u002Fscript>\n",[21,6351,6352,6360,6374,6387,6399,6411,6423,6441,6459,6477,6495,6513,6521,6529,6533,6555,6565,6569,6573,6585,6593,6601,6605,6613,6619,6623,6627,6631,6639,6647,6651,6659,6667,6671,6679,6687,6691,6699,6707,6711,6719,6735,6739,6743,6748,6772,6784,6792,6796],{"__ignoreMap":283},[287,6353,6354,6356,6358],{"class":289,"line":290},[287,6355,598],{"class":597},[287,6357,602],{"class":601},[287,6359,605],{"class":597},[287,6361,6362,6364,6366,6368,6370,6372],{"class":289,"line":296},[287,6363,610],{"class":597},[287,6365,613],{"class":601},[287,6367,617],{"class":616},[287,6369,620],{"class":597},[287,6371,910],{"class":623},[287,6373,605],{"class":597},[287,6375,6376,6378,6380,6383,6385],{"class":289,"line":302},[287,6377,631],{"class":597},[287,6379,10],{"class":601},[287,6381,6382],{"class":597},">情况五：监视上述的多个数据\u003C\u002F",[287,6384,10],{"class":601},[287,6386,605],{"class":597},[287,6388,6389,6391,6393,6395,6397],{"class":289,"line":309},[287,6390,631],{"class":597},[287,6392,81],{"class":601},[287,6394,4990],{"class":597},[287,6396,81],{"class":601},[287,6398,605],{"class":597},[287,6400,6401,6403,6405,6407,6409],{"class":289,"line":315},[287,6402,631],{"class":597},[287,6404,81],{"class":601},[287,6406,5003],{"class":597},[287,6408,81],{"class":601},[287,6410,605],{"class":597},[287,6412,6413,6415,6417,6419,6421],{"class":289,"line":321},[287,6414,631],{"class":597},[287,6416,81],{"class":601},[287,6418,5909],{"class":597},[287,6420,81],{"class":601},[287,6422,605],{"class":597},[287,6424,6425,6427,6429,6431,6433,6435,6437,6439],{"class":289,"line":326},[287,6426,631],{"class":597},[287,6428,945],{"class":601},[287,6430,948],{"class":616},[287,6432,620],{"class":597},[287,6434,953],{"class":623},[287,6436,956],{"class":597},[287,6438,945],{"class":601},[287,6440,605],{"class":597},[287,6442,6443,6445,6447,6449,6451,6453,6455,6457],{"class":289,"line":332},[287,6444,631],{"class":597},[287,6446,945],{"class":601},[287,6448,948],{"class":616},[287,6450,620],{"class":597},[287,6452,973],{"class":623},[287,6454,3871],{"class":597},[287,6456,945],{"class":601},[287,6458,605],{"class":597},[287,6460,6461,6463,6465,6467,6469,6471,6473,6475],{"class":289,"line":338},[287,6462,631],{"class":597},[287,6464,945],{"class":601},[287,6466,948],{"class":616},[287,6468,620],{"class":597},[287,6470,5962],{"class":623},[287,6472,5965],{"class":597},[287,6474,945],{"class":601},[287,6476,605],{"class":597},[287,6478,6479,6481,6483,6485,6487,6489,6491,6493],{"class":289,"line":343},[287,6480,631],{"class":597},[287,6482,945],{"class":601},[287,6484,948],{"class":616},[287,6486,620],{"class":597},[287,6488,5982],{"class":623},[287,6490,5985],{"class":597},[287,6492,945],{"class":601},[287,6494,605],{"class":597},[287,6496,6497,6499,6501,6503,6505,6507,6509,6511],{"class":289,"line":349},[287,6498,631],{"class":597},[287,6500,945],{"class":601},[287,6502,948],{"class":616},[287,6504,620],{"class":597},[287,6506,6002],{"class":623},[287,6508,6005],{"class":597},[287,6510,945],{"class":601},[287,6512,605],{"class":597},[287,6514,6515,6517,6519],{"class":289,"line":355},[287,6516,645],{"class":597},[287,6518,613],{"class":601},[287,6520,605],{"class":597},[287,6522,6523,6525,6527],{"class":289,"line":361},[287,6524,654],{"class":597},[287,6526,602],{"class":601},[287,6528,605],{"class":597},[287,6530,6531],{"class":289,"line":367},[287,6532,306],{"emptyLinePlaceholder":305},[287,6534,6535,6537,6539,6541,6543,6545,6547,6549,6551,6553],{"class":289,"line":372},[287,6536,598],{"class":597},[287,6538,669],{"class":601},[287,6540,672],{"class":616},[287,6542,620],{"class":597},[287,6544,677],{"class":623},[287,6546,2010],{"class":616},[287,6548,2486],{"class":616},[287,6550,620],{"class":597},[287,6552,2491],{"class":623},[287,6554,605],{"class":597},[287,6556,6557,6559,6561,6563],{"class":289,"line":378},[287,6558,2498],{"class":684},[287,6560,5532],{"class":597},[287,6562,2213],{"class":684},[287,6564,2506],{"class":623},[287,6566,6567],{"class":289,"line":384},[287,6568,306],{"emptyLinePlaceholder":305},[287,6570,6571],{"class":289,"line":555},[287,6572,3957],{"class":702},[287,6574,6575,6577,6579,6581,6583],{"class":289,"line":561},[287,6576,2050],{"class":684},[287,6578,3964],{"class":597},[287,6580,620],{"class":684},[287,6582,2962],{"class":616},[287,6584,2245],{"class":597},[287,6586,6587,6589,6591],{"class":289,"line":567},[287,6588,696],{"class":597},[287,6590,1074],{"class":623},[287,6592,1051],{"class":597},[287,6594,6595,6597,6599],{"class":289,"line":573},[287,6596,5144],{"class":597},[287,6598,1084],{"class":741},[287,6600,1051],{"class":597},[287,6602,6603],{"class":289,"line":579},[287,6604,6102],{"class":597},[287,6606,6607,6609,6611],{"class":289,"line":1120},[287,6608,6107],{"class":597},[287,6610,2968],{"class":623},[287,6612,1051],{"class":597},[287,6614,6615,6617],{"class":289,"line":1134},[287,6616,6116],{"class":597},[287,6618,6119],{"class":623},[287,6620,6621],{"class":289,"line":1140},[287,6622,1697],{"class":597},[287,6624,6625],{"class":289,"line":1148},[287,6626,4529],{"class":597},[287,6628,6629],{"class":289,"line":1162},[287,6630,2085],{"class":702},[287,6632,6633,6635,6637],{"class":289,"line":1167},[287,6634,2090],{"class":684},[287,6636,1589],{"class":616},[287,6638,1117],{"class":597},[287,6640,6641,6643,6645],{"class":289,"line":1175},[287,6642,5628],{"class":597},[287,6644,1156],{"class":684},[287,6646,4064],{"class":623},[287,6648,6649],{"class":289,"line":1190},[287,6650,708],{"class":597},[287,6652,6653,6655,6657],{"class":289,"line":1195},[287,6654,2090],{"class":684},[287,6656,1626],{"class":616},[287,6658,1117],{"class":597},[287,6660,6661,6663,6665],{"class":289,"line":1200},[287,6662,5649],{"class":597},[287,6664,1156],{"class":684},[287,6666,1159],{"class":741},[287,6668,6669],{"class":289,"line":1205},[287,6670,708],{"class":597},[287,6672,6673,6675,6677],{"class":289,"line":1686},[287,6674,2090],{"class":684},[287,6676,6178],{"class":616},[287,6678,1117],{"class":597},[287,6680,6681,6683,6685],{"class":289,"line":1694},[287,6682,6185],{"class":597},[287,6684,620],{"class":684},[287,6686,6190],{"class":623},[287,6688,6689],{"class":289,"line":1700},[287,6690,708],{"class":597},[287,6692,6693,6695,6697],{"class":289,"line":1705},[287,6694,2090],{"class":684},[287,6696,6201],{"class":616},[287,6698,1117],{"class":597},[287,6700,6701,6703,6705],{"class":289,"line":3125},[287,6702,6208],{"class":597},[287,6704,620],{"class":684},[287,6706,6213],{"class":623},[287,6708,6709],{"class":289,"line":3135},[287,6710,708],{"class":597},[287,6712,6713,6715,6717],{"class":289,"line":3151},[287,6714,2090],{"class":684},[287,6716,6224],{"class":616},[287,6718,1117],{"class":597},[287,6720,6721,6723,6725,6727,6729,6731,6733],{"class":289,"line":3156},[287,6722,6231],{"class":597},[287,6724,620],{"class":684},[287,6726,6236],{"class":597},[287,6728,6239],{"class":623},[287,6730,6242],{"class":597},[287,6732,6245],{"class":623},[287,6734,1762],{"class":597},[287,6736,6737],{"class":289,"line":3166},[287,6738,708],{"class":597},[287,6740,6741],{"class":289,"line":3177},[287,6742,306],{"emptyLinePlaceholder":305},[287,6744,6745],{"class":289,"line":3182},[287,6746,6747],{"class":702}," \u002F\u002F 监视，情况五：监视上述的多个数据\n",[287,6749,6750,6752,6755,6757,6760,6762,6764,6766,6768,6770],{"class":289,"line":3635},[287,6751,5266],{"class":616},[287,6753,6754],{"class":597},"([()",[287,6756,1754],{"class":684},[287,6758,6759],{"class":597},"person.name,person.car],(",[287,6761,4834],{"class":4453},[287,6763,4837],{"class":597},[287,6765,4840],{"class":4453},[287,6767,4843],{"class":597},[287,6769,1754],{"class":684},[287,6771,4848],{"class":597},[287,6773,6774,6776,6778,6780,6782],{"class":289,"line":3640},[287,6775,2126],{"class":597},[287,6777,1612],{"class":616},[287,6779,1181],{"class":597},[287,6781,6319],{"class":623},[287,6783,4862],{"class":597},[287,6785,6786,6788,6790],{"class":289,"line":5757},[287,6787,5299],{"class":597},[287,6789,5302],{"class":741},[287,6791,2261],{"class":597},[287,6793,6794],{"class":289,"line":5777},[287,6795,306],{"emptyLinePlaceholder":305},[287,6797,6798,6800,6802],{"class":289,"line":5791},[287,6799,654],{"class":597},[287,6801,669],{"class":601},[287,6803,605],{"class":597},[81,6805,6807],{"id":6806},"_310-watcheffect","3.10. 【watchEffect】",[14,6809,6810,6813,6838],{},[17,6811,6812],{},"官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。",[17,6814,6815,6817,6818,6821],{},[21,6816,192],{},"对比",[21,6819,6820],{},"watchEffect",[264,6822,6823],{},[157,6824,6825,6828,6833],{},[17,6826,6827],{},"都能监听响应式数据的变化，不同的是监听数据变化的方式不同",[17,6829,6830,6832],{},[21,6831,192],{},"：要明确指出监视的数据",[17,6834,6835,6837],{},[21,6836,6820],{},"：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。",[17,6839,6840,6841],{},"示例代码：",[278,6842,6844],{"className":588,"code":6843,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch1>需求：水温达到50℃，或水位达到20cm，则联系服务器\u003C\u002Fh1>\n \u003Ch2 id=\"demo\">水温：{{temp}}\u003C\u002Fh2>\n \u003Ch2>水位：{{height}}\u003C\u002Fh2>\n \u003Cbutton @click=\"changePrice\">水温+1\u003C\u002Fbutton>\n \u003Cbutton @click=\"changeSum\">水位+10\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {ref,watch,watchEffect} from 'vue'\n \u002F\u002F 数据\n let temp = ref(0)\n let height = ref(0)\n\n \u002F\u002F 方法\n function changePrice(){\n temp.value += 10\n }\n function changeSum(){\n height.value += 1\n }\n\n \u002F\u002F 用watch实现，需要明确的指出要监视：temp、height\n watch([temp,height],(value)=>{\n \u002F\u002F 从value中获取最新的temp值、height值\n const [newTemp,newHeight] = value\n \u002F\u002F 室温达到50℃，或水位达到20cm，立刻联系服务器\n if(newTemp >= 50 || newHeight >= 20){\n console.log('联系服务器')\n }\n })\n\n \u002F\u002F 用watchEffect实现，不用\n const stopWtach = watchEffect(()=>{\n \u002F\u002F 室温达到50℃，或水位达到20cm，立刻联系服务器\n if(temp.value >= 50 || height.value >= 20){\n console.log(document.getElementById('demo')?.innerText)\n console.log('联系服务器')\n }\n \u002F\u002F 水温达到100，或水位达到50，取消监视\n if(temp.value === 100 || height.value === 50){\n console.log('清理了')\n stopWtach()\n }\n })\n\u003C\u002Fscript>\n",[21,6845,6846,6854,6868,6881,6902,6915,6935,6954,6962,6970,6974,6996,7007,7011,7028,7045,7049,7053,7062,7071,7075,7083,7092,7096,7100,7105,7120,7125,7149,7154,7179,7192,7196,7200,7204,7209,7227,7231,7253,7273,7285,7289,7294,7316,7329,7336,7340,7344],{"__ignoreMap":283},[287,6847,6848,6850,6852],{"class":289,"line":290},[287,6849,598],{"class":597},[287,6851,602],{"class":601},[287,6853,605],{"class":597},[287,6855,6856,6858,6860,6862,6864,6866],{"class":289,"line":296},[287,6857,610],{"class":597},[287,6859,613],{"class":601},[287,6861,617],{"class":616},[287,6863,620],{"class":597},[287,6865,910],{"class":623},[287,6867,605],{"class":597},[287,6869,6870,6872,6874,6877,6879],{"class":289,"line":302},[287,6871,631],{"class":597},[287,6873,10],{"class":601},[287,6875,6876],{"class":597},">需求：水温达到50℃，或水位达到20cm，则联系服务器\u003C\u002F",[287,6878,10],{"class":601},[287,6880,605],{"class":597},[287,6882,6883,6885,6887,6890,6892,6895,6898,6900],{"class":289,"line":309},[287,6884,631],{"class":597},[287,6886,81],{"class":601},[287,6888,6889],{"class":616}," id",[287,6891,620],{"class":597},[287,6893,6894],{"class":623},"\"demo\"",[287,6896,6897],{"class":597},">水温：{{temp}}\u003C\u002F",[287,6899,81],{"class":601},[287,6901,605],{"class":597},[287,6903,6904,6906,6908,6911,6913],{"class":289,"line":315},[287,6905,631],{"class":597},[287,6907,81],{"class":601},[287,6909,6910],{"class":597},">水位：{{height}}\u003C\u002F",[287,6912,81],{"class":601},[287,6914,605],{"class":597},[287,6916,6917,6919,6921,6923,6925,6928,6931,6933],{"class":289,"line":321},[287,6918,631],{"class":597},[287,6920,945],{"class":601},[287,6922,948],{"class":616},[287,6924,620],{"class":597},[287,6926,6927],{"class":623},"\"changePrice\"",[287,6929,6930],{"class":597},">水温+1\u003C\u002F",[287,6932,945],{"class":601},[287,6934,605],{"class":597},[287,6936,6937,6939,6941,6943,6945,6947,6950,6952],{"class":289,"line":326},[287,6938,631],{"class":597},[287,6940,945],{"class":601},[287,6942,948],{"class":616},[287,6944,620],{"class":597},[287,6946,4702],{"class":623},[287,6948,6949],{"class":597},">水位+10\u003C\u002F",[287,6951,945],{"class":601},[287,6953,605],{"class":597},[287,6955,6956,6958,6960],{"class":289,"line":332},[287,6957,645],{"class":597},[287,6959,613],{"class":601},[287,6961,605],{"class":597},[287,6963,6964,6966,6968],{"class":289,"line":338},[287,6965,654],{"class":597},[287,6967,602],{"class":601},[287,6969,605],{"class":597},[287,6971,6972],{"class":289,"line":343},[287,6973,306],{"emptyLinePlaceholder":305},[287,6975,6976,6978,6980,6982,6984,6986,6988,6990,6992,6994],{"class":289,"line":349},[287,6977,598],{"class":597},[287,6979,669],{"class":601},[287,6981,672],{"class":616},[287,6983,620],{"class":597},[287,6985,677],{"class":623},[287,6987,2010],{"class":616},[287,6989,2486],{"class":616},[287,6991,620],{"class":597},[287,6993,2491],{"class":623},[287,6995,605],{"class":597},[287,6997,6998,7000,7003,7005],{"class":289,"line":355},[287,6999,2498],{"class":684},[287,7001,7002],{"class":597}," {ref,watch,watchEffect} ",[287,7004,2213],{"class":684},[287,7006,2506],{"class":623},[287,7008,7009],{"class":289,"line":361},[287,7010,3957],{"class":702},[287,7012,7013,7015,7018,7020,7022,7024,7026],{"class":289,"line":367},[287,7014,2050],{"class":684},[287,7016,7017],{"class":597}," temp ",[287,7019,620],{"class":684},[287,7021,2522],{"class":616},[287,7023,1181],{"class":597},[287,7025,761],{"class":741},[287,7027,2529],{"class":597},[287,7029,7030,7032,7035,7037,7039,7041,7043],{"class":289,"line":372},[287,7031,2050],{"class":684},[287,7033,7034],{"class":597}," height ",[287,7036,620],{"class":684},[287,7038,2522],{"class":616},[287,7040,1181],{"class":597},[287,7042,761],{"class":741},[287,7044,2529],{"class":597},[287,7046,7047],{"class":289,"line":378},[287,7048,306],{"emptyLinePlaceholder":305},[287,7050,7051],{"class":289,"line":384},[287,7052,2085],{"class":702},[287,7054,7055,7057,7060],{"class":289,"line":555},[287,7056,2090],{"class":684},[287,7058,7059],{"class":616}," changePrice",[287,7061,1117],{"class":597},[287,7063,7064,7067,7069],{"class":289,"line":561},[287,7065,7066],{"class":597}," temp.value ",[287,7068,1156],{"class":684},[287,7070,3118],{"class":741},[287,7072,7073],{"class":289,"line":567},[287,7074,708],{"class":597},[287,7076,7077,7079,7081],{"class":289,"line":573},[287,7078,2090],{"class":684},[287,7080,4794],{"class":616},[287,7082,1117],{"class":597},[287,7084,7085,7088,7090],{"class":289,"line":579},[287,7086,7087],{"class":597}," height.value ",[287,7089,1156],{"class":684},[287,7091,1159],{"class":741},[287,7093,7094],{"class":289,"line":1120},[287,7095,708],{"class":597},[287,7097,7098],{"class":289,"line":1134},[287,7099,306],{"emptyLinePlaceholder":305},[287,7101,7102],{"class":289,"line":1140},[287,7103,7104],{"class":702}," \u002F\u002F 用watch实现，需要明确的指出要监视：temp、height\n",[287,7106,7107,7109,7112,7114,7116,7118],{"class":289,"line":1148},[287,7108,5266],{"class":616},[287,7110,7111],{"class":597},"([temp,height],(",[287,7113,2305],{"class":4453},[287,7115,4843],{"class":597},[287,7117,1754],{"class":684},[287,7119,4848],{"class":597},[287,7121,7122],{"class":289,"line":1162},[287,7123,7124],{"class":702}," \u002F\u002F 从value中获取最新的temp值、height值\n",[287,7126,7127,7130,7133,7136,7138,7141,7144,7146],{"class":289,"line":1167},[287,7128,7129],{"class":684}," const",[287,7131,7132],{"class":597}," [",[287,7134,7135],{"class":741},"newTemp",[287,7137,4837],{"class":597},[287,7139,7140],{"class":741},"newHeight",[287,7142,7143],{"class":597},"] ",[287,7145,620],{"class":684},[287,7147,7148],{"class":597}," value\n",[287,7150,7151],{"class":289,"line":1175},[287,7152,7153],{"class":702}," \u002F\u002F 室温达到50℃，或水位达到20cm，立刻联系服务器\n",[287,7155,7156,7158,7161,7163,7166,7169,7172,7174,7177],{"class":289,"line":1190},[287,7157,4867],{"class":684},[287,7159,7160],{"class":597},"(newTemp ",[287,7162,4873],{"class":684},[287,7164,7165],{"class":741}," 50",[287,7167,7168],{"class":684}," ||",[287,7170,7171],{"class":597}," newHeight ",[287,7173,4873],{"class":684},[287,7175,7176],{"class":741}," 20",[287,7178,4457],{"class":597},[287,7180,7181,7183,7185,7187,7190],{"class":289,"line":1195},[287,7182,4462],{"class":597},[287,7184,1612],{"class":616},[287,7186,1181],{"class":597},[287,7188,7189],{"class":623},"'联系服务器'",[287,7191,2529],{"class":597},[287,7193,7194],{"class":289,"line":1200},[287,7195,1697],{"class":597},[287,7197,7198],{"class":289,"line":1205},[287,7199,4529],{"class":597},[287,7201,7202],{"class":289,"line":1686},[287,7203,306],{"emptyLinePlaceholder":305},[287,7205,7206],{"class":289,"line":1694},[287,7207,7208],{"class":702}," \u002F\u002F 用watchEffect实现，不用\n",[287,7210,7211,7213,7216,7218,7221,7223,7225],{"class":289,"line":1700},[287,7212,4819],{"class":684},[287,7214,7215],{"class":741}," stopWtach",[287,7217,4825],{"class":684},[287,7219,7220],{"class":616}," watchEffect",[287,7222,6290],{"class":597},[287,7224,1754],{"class":684},[287,7226,4848],{"class":597},[287,7228,7229],{"class":289,"line":1705},[287,7230,7153],{"class":702},[287,7232,7233,7235,7238,7240,7242,7244,7247,7249,7251],{"class":289,"line":3125},[287,7234,4867],{"class":684},[287,7236,7237],{"class":597},"(temp.value ",[287,7239,4873],{"class":684},[287,7241,7165],{"class":741},[287,7243,7168],{"class":684},[287,7245,7246],{"class":597}," height.value ",[287,7248,4873],{"class":684},[287,7250,7176],{"class":741},[287,7252,4457],{"class":597},[287,7254,7255,7257,7259,7262,7265,7267,7270],{"class":289,"line":3135},[287,7256,4462],{"class":597},[287,7258,1612],{"class":616},[287,7260,7261],{"class":597},"(document.",[287,7263,7264],{"class":616},"getElementById",[287,7266,1181],{"class":597},[287,7268,7269],{"class":623},"'demo'",[287,7271,7272],{"class":597},")?.innerText)\n",[287,7274,7275,7277,7279,7281,7283],{"class":289,"line":3151},[287,7276,4462],{"class":597},[287,7278,1612],{"class":616},[287,7280,1181],{"class":597},[287,7282,7189],{"class":623},[287,7284,2529],{"class":597},[287,7286,7287],{"class":289,"line":3156},[287,7288,1697],{"class":597},[287,7290,7291],{"class":289,"line":3166},[287,7292,7293],{"class":702}," \u002F\u002F 水温达到100，或水位达到50，取消监视\n",[287,7295,7296,7298,7300,7303,7306,7308,7310,7312,7314],{"class":289,"line":3177},[287,7297,4867],{"class":684},[287,7299,7237],{"class":597},[287,7301,7302],{"class":684},"===",[287,7304,7305],{"class":741}," 100",[287,7307,7168],{"class":684},[287,7309,7246],{"class":597},[287,7311,7302],{"class":684},[287,7313,7165],{"class":741},[287,7315,4457],{"class":597},[287,7317,7318,7320,7322,7324,7327],{"class":289,"line":3182},[287,7319,4462],{"class":597},[287,7321,1612],{"class":616},[287,7323,1181],{"class":597},[287,7325,7326],{"class":623},"'清理了'",[287,7328,2529],{"class":597},[287,7330,7331,7334],{"class":289,"line":3635},[287,7332,7333],{"class":616}," stopWtach",[287,7335,4885],{"class":597},[287,7337,7338],{"class":289,"line":3640},[287,7339,1697],{"class":597},[287,7341,7342],{"class":289,"line":5757},[287,7343,4529],{"class":597},[287,7345,7346,7348,7350],{"class":289,"line":5777},[287,7347,654],{"class":597},[287,7349,669],{"class":601},[287,7351,605],{"class":597},[81,7353,7355],{"id":7354},"_311-标签的-ref-属性","3.11. 【标签的 ref 属性】",[255,7357,7358],{},"作用：用于注册模板引用。",[264,7360,7361],{},[14,7362,7363,7372],{},[17,7364,7365,7366,7368,7369,7371],{},"用在普通",[21,7367,132],{},"标签上，获取的是",[21,7370,132],{},"节点。",[17,7373,7374],{},"用在组件标签上，获取的是组件实例对象。",[255,7376,7365,7377,7379],{},[21,7378,132],{},"标签上：",[278,7381,7383],{"className":588,"code":7382,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch1 ref=\"title1\">尚硅谷\u003C\u002Fh1>\n \u003Ch2 ref=\"title2\">前端\u003C\u002Fh2>\n \u003Ch3 ref=\"title3\">Vue\u003C\u002Fh3>\n \u003Cinput type=\"text\" ref=\"inpt\"> \u003Cbr>\u003Cbr>\n \u003Cbutton @click=\"showLog\">点我打印内容\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {ref} from 'vue'\n \n let title1 = ref()\n let title2 = ref()\n let title3 = ref()\n\n function showLog(){\n \u002F\u002F 通过id获取元素\n const t1 = document.getElementById('title1')\n \u002F\u002F 打印内容\n console.log((t1 as HTMLElement).innerText)\n console.log((\u003CHTMLElement>t1).innerText)\n console.log(t1?.innerText)\n \n \u002F************************************\u002F\n \n \u002F\u002F 通过ref获取元素\n console.log(title1.value)\n console.log(title2.value)\n console.log(title3.value)\n }\n\u003C\u002Fscript>\n",[21,7384,7385,7393,7407,7427,7447,7467,7497,7517,7525,7533,7537,7559,7569,7573,7586,7599,7612,7616,7625,7630,7651,7656,7674,7689,7698,7702,7707,7712,7717,7726,7735,7744,7748],{"__ignoreMap":283},[287,7386,7387,7389,7391],{"class":289,"line":290},[287,7388,598],{"class":597},[287,7390,602],{"class":601},[287,7392,605],{"class":597},[287,7394,7395,7397,7399,7401,7403,7405],{"class":289,"line":296},[287,7396,610],{"class":597},[287,7398,613],{"class":601},[287,7400,617],{"class":616},[287,7402,620],{"class":597},[287,7404,910],{"class":623},[287,7406,605],{"class":597},[287,7408,7409,7411,7413,7415,7417,7420,7423,7425],{"class":289,"line":302},[287,7410,631],{"class":597},[287,7412,10],{"class":601},[287,7414,2522],{"class":616},[287,7416,620],{"class":597},[287,7418,7419],{"class":623},"\"title1\"",[287,7421,7422],{"class":597},">尚硅谷\u003C\u002F",[287,7424,10],{"class":601},[287,7426,605],{"class":597},[287,7428,7429,7431,7433,7435,7437,7440,7443,7445],{"class":289,"line":309},[287,7430,631],{"class":597},[287,7432,81],{"class":601},[287,7434,2522],{"class":616},[287,7436,620],{"class":597},[287,7438,7439],{"class":623},"\"title2\"",[287,7441,7442],{"class":597},">前端\u003C\u002F",[287,7444,81],{"class":601},[287,7446,605],{"class":597},[287,7448,7449,7451,7453,7455,7457,7460,7463,7465],{"class":289,"line":315},[287,7450,631],{"class":597},[287,7452,1245],{"class":601},[287,7454,2522],{"class":616},[287,7456,620],{"class":597},[287,7458,7459],{"class":623},"\"title3\"",[287,7461,7462],{"class":597},">Vue\u003C\u002F",[287,7464,1245],{"class":601},[287,7466,605],{"class":597},[287,7468,7469,7471,7473,7475,7477,7479,7481,7483,7486,7488,7490,7493,7495],{"class":289,"line":321},[287,7470,631],{"class":597},[287,7472,4171],{"class":601},[287,7474,4174],{"class":616},[287,7476,620],{"class":597},[287,7478,4179],{"class":623},[287,7480,2522],{"class":616},[287,7482,620],{"class":597},[287,7484,7485],{"class":623},"\"inpt\"",[287,7487,4190],{"class":597},[287,7489,194],{"class":601},[287,7491,7492],{"class":597},">\u003C",[287,7494,194],{"class":601},[287,7496,605],{"class":597},[287,7498,7499,7501,7503,7505,7507,7510,7513,7515],{"class":289,"line":326},[287,7500,631],{"class":597},[287,7502,945],{"class":601},[287,7504,948],{"class":616},[287,7506,620],{"class":597},[287,7508,7509],{"class":623},"\"showLog\"",[287,7511,7512],{"class":597},">点我打印内容\u003C\u002F",[287,7514,945],{"class":601},[287,7516,605],{"class":597},[287,7518,7519,7521,7523],{"class":289,"line":332},[287,7520,645],{"class":597},[287,7522,613],{"class":601},[287,7524,605],{"class":597},[287,7526,7527,7529,7531],{"class":289,"line":338},[287,7528,654],{"class":597},[287,7530,602],{"class":601},[287,7532,605],{"class":597},[287,7534,7535],{"class":289,"line":343},[287,7536,306],{"emptyLinePlaceholder":305},[287,7538,7539,7541,7543,7545,7547,7549,7551,7553,7555,7557],{"class":289,"line":349},[287,7540,598],{"class":597},[287,7542,669],{"class":601},[287,7544,672],{"class":616},[287,7546,620],{"class":597},[287,7548,677],{"class":623},[287,7550,2010],{"class":616},[287,7552,2486],{"class":616},[287,7554,620],{"class":597},[287,7556,2491],{"class":623},[287,7558,605],{"class":597},[287,7560,7561,7563,7565,7567],{"class":289,"line":355},[287,7562,2498],{"class":684},[287,7564,2501],{"class":597},[287,7566,2213],{"class":684},[287,7568,2506],{"class":623},[287,7570,7571],{"class":289,"line":361},[287,7572,3991],{"class":597},[287,7574,7575,7577,7580,7582,7584],{"class":289,"line":367},[287,7576,2050],{"class":684},[287,7578,7579],{"class":597}," title1 ",[287,7581,620],{"class":684},[287,7583,2522],{"class":616},[287,7585,4885],{"class":597},[287,7587,7588,7590,7593,7595,7597],{"class":289,"line":372},[287,7589,2050],{"class":684},[287,7591,7592],{"class":597}," title2 ",[287,7594,620],{"class":684},[287,7596,2522],{"class":616},[287,7598,4885],{"class":597},[287,7600,7601,7603,7606,7608,7610],{"class":289,"line":378},[287,7602,2050],{"class":684},[287,7604,7605],{"class":597}," title3 ",[287,7607,620],{"class":684},[287,7609,2522],{"class":616},[287,7611,4885],{"class":597},[287,7613,7614],{"class":289,"line":384},[287,7615,306],{"emptyLinePlaceholder":305},[287,7617,7618,7620,7623],{"class":289,"line":555},[287,7619,2090],{"class":684},[287,7621,7622],{"class":616}," showLog",[287,7624,1117],{"class":597},[287,7626,7627],{"class":289,"line":561},[287,7628,7629],{"class":702}," \u002F\u002F 通过id获取元素\n",[287,7631,7632,7634,7637,7639,7642,7644,7646,7649],{"class":289,"line":567},[287,7633,7129],{"class":684},[287,7635,7636],{"class":741}," t1",[287,7638,4825],{"class":684},[287,7640,7641],{"class":597}," document.",[287,7643,7264],{"class":616},[287,7645,1181],{"class":597},[287,7647,7648],{"class":623},"'title1'",[287,7650,2529],{"class":597},[287,7652,7653],{"class":289,"line":573},[287,7654,7655],{"class":702}," \u002F\u002F 打印内容\n",[287,7657,7658,7660,7662,7665,7668,7671],{"class":289,"line":579},[287,7659,2126],{"class":597},[287,7661,1612],{"class":616},[287,7663,7664],{"class":597},"((t1 ",[287,7666,7667],{"class":684},"as",[287,7669,7670],{"class":616}," HTMLElement",[287,7672,7673],{"class":597},").innerText)\n",[287,7675,7676,7678,7680,7683,7686],{"class":289,"line":1120},[287,7677,2126],{"class":597},[287,7679,1612],{"class":616},[287,7681,7682],{"class":597},"((\u003C",[287,7684,7685],{"class":616},"HTMLElement",[287,7687,7688],{"class":597},">t1).innerText)\n",[287,7690,7691,7693,7695],{"class":289,"line":1134},[287,7692,2126],{"class":597},[287,7694,1612],{"class":616},[287,7696,7697],{"class":597},"(t1?.innerText)\n",[287,7699,7700],{"class":289,"line":1140},[287,7701,3991],{"class":597},[287,7703,7704],{"class":289,"line":1148},[287,7705,7706],{"class":702}," \u002F************************************\u002F\n",[287,7708,7709],{"class":289,"line":1162},[287,7710,7711],{"class":597}," \n",[287,7713,7714],{"class":289,"line":1167},[287,7715,7716],{"class":702}," \u002F\u002F 通过ref获取元素\n",[287,7718,7719,7721,7723],{"class":289,"line":1175},[287,7720,2126],{"class":597},[287,7722,1612],{"class":616},[287,7724,7725],{"class":597},"(title1.value)\n",[287,7727,7728,7730,7732],{"class":289,"line":1190},[287,7729,2126],{"class":597},[287,7731,1612],{"class":616},[287,7733,7734],{"class":597},"(title2.value)\n",[287,7736,7737,7739,7741],{"class":289,"line":1195},[287,7738,2126],{"class":597},[287,7740,1612],{"class":616},[287,7742,7743],{"class":597},"(title3.value)\n",[287,7745,7746],{"class":289,"line":1200},[287,7747,708],{"class":597},[287,7749,7750,7752,7754],{"class":289,"line":1205},[287,7751,654],{"class":597},[287,7753,669],{"class":601},[287,7755,605],{"class":597},[255,7757,7758],{},"用在组件标签上：",[278,7760,7762],{"className":588,"code":7761,"language":590,"meta":283,"style":283},"\u003C!-- 父组件App.vue -->\n\u003Ctemplate>\n \u003CPerson ref=\"ren\"\u002F>\n \u003Cbutton @click=\"test\">测试\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"App\">\n import Person from '.\u002Fcomponents\u002FPerson.vue'\n import {ref} from 'vue'\n\n let ren = ref()\n\n function test(){\n console.log(ren.value.name)\n console.log(ren.value.age)\n }\n\u003C\u002Fscript>\n\n\n\u003C!-- 子组件Person.vue中要使用defineExpose暴露内容 -->\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import {ref,defineExpose} from 'vue'\n \u002F\u002F 数据\n let name = ref('张三')\n let age = ref(18)\n \u002F****************************\u002F\n \u002F****************************\u002F\n \u002F\u002F 使用defineExpose将组件中的数据交给外部\n defineExpose({name,age})\n\u003C\u002Fscript>\n",[21,7763,7764,7769,7777,7794,7812,7820,7824,7846,7858,7868,7872,7885,7889,7897,7906,7915,7919,7927,7931,7935,7940,7962,7973,7978,7994,8010,8015,8019,8024,8032],{"__ignoreMap":283},[287,7765,7766],{"class":289,"line":290},[287,7767,7768],{"class":702},"\u003C!-- 父组件App.vue -->\n",[287,7770,7771,7773,7775],{"class":289,"line":296},[287,7772,598],{"class":597},[287,7774,602],{"class":601},[287,7776,605],{"class":597},[287,7778,7779,7781,7784,7786,7788,7791],{"class":289,"line":302},[287,7780,610],{"class":597},[287,7782,7783],{"class":601},"Person",[287,7785,2522],{"class":616},[287,7787,620],{"class":597},[287,7789,7790],{"class":623},"\"ren\"",[287,7792,7793],{"class":597},"\u002F>\n",[287,7795,7796,7798,7800,7802,7804,7806,7808,7810],{"class":289,"line":309},[287,7797,610],{"class":597},[287,7799,945],{"class":601},[287,7801,948],{"class":616},[287,7803,620],{"class":597},[287,7805,2880],{"class":623},[287,7807,2883],{"class":597},[287,7809,945],{"class":601},[287,7811,605],{"class":597},[287,7813,7814,7816,7818],{"class":289,"line":315},[287,7815,654],{"class":597},[287,7817,602],{"class":601},[287,7819,605],{"class":597},[287,7821,7822],{"class":289,"line":321},[287,7823,306],{"emptyLinePlaceholder":305},[287,7825,7826,7828,7830,7832,7834,7836,7838,7840,7842,7844],{"class":289,"line":326},[287,7827,598],{"class":597},[287,7829,669],{"class":601},[287,7831,672],{"class":616},[287,7833,620],{"class":597},[287,7835,677],{"class":623},[287,7837,2010],{"class":616},[287,7839,2486],{"class":616},[287,7841,620],{"class":597},[287,7843,4299],{"class":623},[287,7845,605],{"class":597},[287,7847,7848,7850,7853,7855],{"class":289,"line":332},[287,7849,2498],{"class":684},[287,7851,7852],{"class":597}," Person ",[287,7854,2213],{"class":684},[287,7856,7857],{"class":623}," '.\u002Fcomponents\u002FPerson.vue'\n",[287,7859,7860,7862,7864,7866],{"class":289,"line":338},[287,7861,2498],{"class":684},[287,7863,2501],{"class":597},[287,7865,2213],{"class":684},[287,7867,2506],{"class":623},[287,7869,7870],{"class":289,"line":343},[287,7871,306],{"emptyLinePlaceholder":305},[287,7873,7874,7876,7879,7881,7883],{"class":289,"line":349},[287,7875,2050],{"class":684},[287,7877,7878],{"class":597}," ren ",[287,7880,620],{"class":684},[287,7882,2522],{"class":616},[287,7884,4885],{"class":597},[287,7886,7887],{"class":289,"line":355},[287,7888,306],{"emptyLinePlaceholder":305},[287,7890,7891,7893,7895],{"class":289,"line":361},[287,7892,2090],{"class":684},[287,7894,3161],{"class":616},[287,7896,1117],{"class":597},[287,7898,7899,7901,7903],{"class":289,"line":367},[287,7900,2126],{"class":597},[287,7902,1612],{"class":616},[287,7904,7905],{"class":597},"(ren.value.name)\n",[287,7907,7908,7910,7912],{"class":289,"line":372},[287,7909,2126],{"class":597},[287,7911,1612],{"class":616},[287,7913,7914],{"class":597},"(ren.value.age)\n",[287,7916,7917],{"class":289,"line":378},[287,7918,708],{"class":597},[287,7920,7921,7923,7925],{"class":289,"line":384},[287,7922,654],{"class":597},[287,7924,669],{"class":601},[287,7926,605],{"class":597},[287,7928,7929],{"class":289,"line":555},[287,7930,306],{"emptyLinePlaceholder":305},[287,7932,7933],{"class":289,"line":561},[287,7934,306],{"emptyLinePlaceholder":305},[287,7936,7937],{"class":289,"line":567},[287,7938,7939],{"class":702},"\u003C!-- 子组件Person.vue中要使用defineExpose暴露内容 -->\n",[287,7941,7942,7944,7946,7948,7950,7952,7954,7956,7958,7960],{"class":289,"line":573},[287,7943,598],{"class":597},[287,7945,669],{"class":601},[287,7947,672],{"class":616},[287,7949,620],{"class":597},[287,7951,677],{"class":623},[287,7953,2010],{"class":616},[287,7955,2486],{"class":616},[287,7957,620],{"class":597},[287,7959,2491],{"class":623},[287,7961,605],{"class":597},[287,7963,7964,7966,7969,7971],{"class":289,"line":579},[287,7965,2498],{"class":684},[287,7967,7968],{"class":597}," {ref,defineExpose} ",[287,7970,2213],{"class":684},[287,7972,2506],{"class":623},[287,7974,7975],{"class":289,"line":1120},[287,7976,7977],{"class":702}," \u002F\u002F 数据\n",[287,7979,7980,7982,7984,7986,7988,7990,7992],{"class":289,"line":1134},[287,7981,2050],{"class":684},[287,7983,1543],{"class":597},[287,7985,620],{"class":684},[287,7987,2522],{"class":616},[287,7989,1181],{"class":597},[287,7991,1074],{"class":623},[287,7993,2529],{"class":597},[287,7995,7996,7998,8000,8002,8004,8006,8008],{"class":289,"line":1140},[287,7997,2050],{"class":684},[287,7999,1555],{"class":597},[287,8001,620],{"class":684},[287,8003,2522],{"class":616},[287,8005,1181],{"class":597},[287,8007,1084],{"class":741},[287,8009,2529],{"class":597},[287,8011,8012],{"class":289,"line":1148},[287,8013,8014],{"class":702}," \u002F****************************\u002F\n",[287,8016,8017],{"class":289,"line":1162},[287,8018,8014],{"class":702},[287,8020,8021],{"class":289,"line":1167},[287,8022,8023],{"class":702}," \u002F\u002F 使用defineExpose将组件中的数据交给外部\n",[287,8025,8026,8029],{"class":289,"line":1175},[287,8027,8028],{"class":616}," defineExpose",[287,8030,8031],{"class":597},"({name,age})\n",[287,8033,8034,8036,8038],{"class":289,"line":1190},[287,8035,654],{"class":597},[287,8037,669],{"class":601},[287,8039,605],{"class":597},[81,8041,8043],{"id":8042},"_312-props","3.12. 【props】",[264,8045,8046,8138,8144,8351,8356],{},[278,8047,8051],{"className":8048,"code":8049,"language":8050,"meta":283,"style":283},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F 定义一个接口，限制每个Person对象的格式\nexport interface PersonInter {\n id:string,\n name:string,\n age:number\n }\n \n\u002F\u002F 定义一个自定义类型Persons\nexport type Persons = Array\u003CPersonInter>\n","js",[21,8052,8053,8058,8070,8082,8092,8102,8107,8112,8117],{"__ignoreMap":283},[287,8054,8055],{"class":289,"line":290},[287,8056,8057],{"class":702},"\u002F\u002F 定义一个接口，限制每个Person对象的格式\n",[287,8059,8060,8062,8065,8068],{"class":289,"line":296},[287,8061,2237],{"class":684},[287,8063,8064],{"class":684}," interface",[287,8066,8067],{"class":616}," PersonInter",[287,8069,691],{"class":597},[287,8071,8072,8074,8077,8080],{"class":289,"line":302},[287,8073,6889],{"class":4453},[287,8075,8076],{"class":684},":",[287,8078,8079],{"class":741},"string",[287,8081,1051],{"class":597},[287,8083,8084,8086,8088,8090],{"class":289,"line":309},[287,8085,2486],{"class":4453},[287,8087,8076],{"class":684},[287,8089,8079],{"class":741},[287,8091,1051],{"class":597},[287,8093,8094,8097,8099],{"class":289,"line":315},[287,8095,8096],{"class":4453}," age",[287,8098,8076],{"class":684},[287,8100,8101],{"class":741},"number\n",[287,8103,8104],{"class":289,"line":321},[287,8105,8106],{"class":597}," }\n",[287,8108,8109],{"class":289,"line":326},[287,8110,8111],{"class":597}," \n",[287,8113,8114],{"class":289,"line":332},[287,8115,8116],{"class":702},"\u002F\u002F 定义一个自定义类型Persons\n",[287,8118,8119,8121,8123,8126,8128,8131,8133,8136],{"class":289,"line":338},[287,8120,2237],{"class":684},[287,8122,4174],{"class":684},[287,8124,8125],{"class":616}," Persons",[287,8127,4825],{"class":684},[287,8129,8130],{"class":616}," Array",[287,8132,598],{"class":597},[287,8134,8135],{"class":616},"PersonInter",[287,8137,605],{"class":597},[255,8139,8140,8143],{},[21,8141,8142],{},"App.vue","中代码：",[278,8145,8147],{"className":588,"code":8146,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003CPerson :list=\"persons\"\u002F>\n\u003C\u002Ftemplate>\n \n\u003Cscript lang=\"ts\" setup name=\"App\">\n import Person from '.\u002Fcomponents\u002FPerson.vue'\n import {reactive} from 'vue'\n import {type Persons} from '.\u002Ftypes'\n \n let persons = reactive\u003CPersons>([\n {id:'e98219e12',name:'张三',age:18},\n {id:'e98219e13',name:'李四',age:19},\n {id:'e98219e14',name:'王五',age:20}\n ])\n \u003C\u002Fscript>\n \n",[21,8148,8149,8157,8181,8189,8193,8215,8225,8236,8255,8259,8279,8299,8318,8337,8342],{"__ignoreMap":283},[287,8150,8151,8153,8155],{"class":289,"line":290},[287,8152,598],{"class":597},[287,8154,602],{"class":601},[287,8156,605],{"class":597},[287,8158,8159,8161,8163,8166,8169,8171,8174,8177,8179],{"class":289,"line":296},[287,8160,631],{"class":597},[287,8162,7783],{"class":601},[287,8164,8165],{"class":597}," :",[287,8167,8168],{"class":616},"list",[287,8170,620],{"class":597},[287,8172,8173],{"class":623},"\"",[287,8175,8176],{"class":597},"persons",[287,8178,8173],{"class":623},[287,8180,7793],{"class":597},[287,8182,8183,8185,8187],{"class":289,"line":302},[287,8184,654],{"class":597},[287,8186,602],{"class":601},[287,8188,605],{"class":597},[287,8190,8191],{"class":289,"line":309},[287,8192,2040],{"class":597},[287,8194,8195,8197,8199,8201,8203,8205,8207,8209,8211,8213],{"class":289,"line":315},[287,8196,598],{"class":597},[287,8198,669],{"class":601},[287,8200,672],{"class":616},[287,8202,620],{"class":597},[287,8204,677],{"class":623},[287,8206,2010],{"class":616},[287,8208,2486],{"class":616},[287,8210,620],{"class":597},[287,8212,4299],{"class":623},[287,8214,605],{"class":597},[287,8216,8217,8219,8221,8223],{"class":289,"line":321},[287,8218,2498],{"class":684},[287,8220,7852],{"class":597},[287,8222,2213],{"class":684},[287,8224,7857],{"class":623},[287,8226,8227,8229,8232,8234],{"class":289,"line":326},[287,8228,2498],{"class":684},[287,8230,8231],{"class":597}," {reactive} ",[287,8233,2213],{"class":684},[287,8235,2506],{"class":623},[287,8237,8238,8241,8244,8247,8250,8252],{"class":289,"line":332},[287,8239,8240],{"class":684}," import",[287,8242,8243],{"class":597}," {",[287,8245,8246],{"class":684},"type",[287,8248,8249],{"class":597}," Persons} ",[287,8251,2213],{"class":684},[287,8253,8254],{"class":623}," '.\u002Ftypes'\n",[287,8256,8257],{"class":289,"line":338},[287,8258,2040],{"class":597},[287,8260,8261,8264,8267,8269,8271,8273,8276],{"class":289,"line":343},[287,8262,8263],{"class":684}," let",[287,8265,8266],{"class":597}," persons ",[287,8268,620],{"class":684},[287,8270,2962],{"class":616},[287,8272,598],{"class":597},[287,8274,8275],{"class":616},"Persons",[287,8277,8278],{"class":597},">([\n",[287,8280,8281,8284,8287,8290,8292,8294,8296],{"class":289,"line":349},[287,8282,8283],{"class":597}," {id:",[287,8285,8286],{"class":623},"'e98219e12'",[287,8288,8289],{"class":597},",name:",[287,8291,1074],{"class":623},[287,8293,5222],{"class":597},[287,8295,1084],{"class":741},[287,8297,8298],{"class":597},"},\n",[287,8300,8301,8304,8307,8309,8311,8313,8316],{"class":289,"line":355},[287,8302,8303],{"class":597}," {id:",[287,8305,8306],{"class":623},"'e98219e13'",[287,8308,8289],{"class":597},[287,8310,5219],{"class":623},[287,8312,5222],{"class":597},[287,8314,8315],{"class":741},"19",[287,8317,8298],{"class":597},[287,8319,8320,8323,8326,8328,8331,8333,8335],{"class":289,"line":361},[287,8321,8322],{"class":597}," {id:",[287,8324,8325],{"class":623},"'e98219e14'",[287,8327,8289],{"class":597},[287,8329,8330],{"class":623},"'王五'",[287,8332,5222],{"class":597},[287,8334,796],{"class":741},[287,8336,1762],{"class":597},[287,8338,8339],{"class":289,"line":367},[287,8340,8341],{"class":597}," ])\n",[287,8343,8344,8347,8349],{"class":289,"line":372},[287,8345,8346],{"class":597}," \u003C\u002F",[287,8348,669],{"class":601},[287,8350,605],{"class":597},[255,8352,8353,8143],{},[21,8354,8355],{},"Person.vue",[278,8357,8361],{"className":8358,"code":8359,"language":8360,"meta":283,"style":283},"language-Vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n\u003Cdiv class=\"person\">\n \u003Cul>\n \u003Cli v-for=\"item in list\" :key=\"item.id\">\n {{item.name}}--{{item.age}}\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n \u003C\u002Ftemplate>\n \n\u003Cscript lang=\"ts\" setup name=\"Person\">\nimport {defineProps} from 'vue'\nimport {type PersonInter} from '@\u002Ftypes'\n \n \u002F\u002F 第一种写法：仅接收\n\u002F\u002F const props = defineProps(['list'])\n \n \u002F\u002F 第二种写法：接收+限制类型\n\u002F\u002F defineProps\u003C{list:Persons}>()\n \n \u002F\u002F 第三种写法：接收+限制类型+指定默认值+限制必要性\nlet props = withDefaults(defineProps\u003C{list?:Persons}>(),{\n list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]\n })\n console.log(props)\n \u003C\u002Fscript>\n","Vue",[21,8362,8363,8371,8385,8394,8417,8422,8431,8439,8447,8455,8459,8481,8492,8508,8512,8517,8522,8526,8531,8536,8540,8545,8575,8603,8607,8617],{"__ignoreMap":283},[287,8364,8365,8367,8369],{"class":289,"line":290},[287,8366,598],{"class":597},[287,8368,602],{"class":601},[287,8370,605],{"class":597},[287,8372,8373,8375,8377,8379,8381,8383],{"class":289,"line":296},[287,8374,598],{"class":597},[287,8376,613],{"class":601},[287,8378,617],{"class":616},[287,8380,620],{"class":597},[287,8382,910],{"class":623},[287,8384,605],{"class":597},[287,8386,8387,8390,8392],{"class":289,"line":302},[287,8388,8389],{"class":597}," \u003C",[287,8391,14],{"class":601},[287,8393,605],{"class":597},[287,8395,8396,8399,8401,8403,8405,8408,8410,8412,8415],{"class":289,"line":309},[287,8397,8398],{"class":597}," \u003C",[287,8400,17],{"class":601},[287,8402,2785],{"class":616},[287,8404,620],{"class":597},[287,8406,8407],{"class":623},"\"item in list\"",[287,8409,2793],{"class":616},[287,8411,620],{"class":597},[287,8413,8414],{"class":623},"\"item.id\"",[287,8416,605],{"class":597},[287,8418,8419],{"class":289,"line":315},[287,8420,8421],{"class":597}," {{item.name}}--{{item.age}}\n",[287,8423,8424,8427,8429],{"class":289,"line":321},[287,8425,8426],{"class":597}," \u003C\u002F",[287,8428,17],{"class":601},[287,8430,605],{"class":597},[287,8432,8433,8435,8437],{"class":289,"line":326},[287,8434,2810],{"class":597},[287,8436,14],{"class":601},[287,8438,605],{"class":597},[287,8440,8441,8443,8445],{"class":289,"line":332},[287,8442,8346],{"class":597},[287,8444,613],{"class":601},[287,8446,605],{"class":597},[287,8448,8449,8451,8453],{"class":289,"line":338},[287,8450,8346],{"class":597},[287,8452,602],{"class":601},[287,8454,605],{"class":597},[287,8456,8457],{"class":289,"line":343},[287,8458,2040],{"class":597},[287,8460,8461,8463,8465,8467,8469,8471,8473,8475,8477,8479],{"class":289,"line":349},[287,8462,598],{"class":597},[287,8464,669],{"class":601},[287,8466,672],{"class":616},[287,8468,620],{"class":597},[287,8470,677],{"class":623},[287,8472,2010],{"class":616},[287,8474,2486],{"class":616},[287,8476,620],{"class":597},[287,8478,2491],{"class":623},[287,8480,605],{"class":597},[287,8482,8483,8485,8488,8490],{"class":289,"line":355},[287,8484,2207],{"class":684},[287,8486,8487],{"class":597}," {defineProps} ",[287,8489,2213],{"class":684},[287,8491,2506],{"class":623},[287,8493,8494,8496,8498,8500,8503,8505],{"class":289,"line":361},[287,8495,2207],{"class":684},[287,8497,8243],{"class":597},[287,8499,8246],{"class":684},[287,8501,8502],{"class":597}," PersonInter} ",[287,8504,2213],{"class":684},[287,8506,8507],{"class":623}," '@\u002Ftypes'\n",[287,8509,8510],{"class":289,"line":367},[287,8511,2040],{"class":597},[287,8513,8514],{"class":289,"line":372},[287,8515,8516],{"class":702}," \u002F\u002F 第一种写法：仅接收\n",[287,8518,8519],{"class":289,"line":378},[287,8520,8521],{"class":702},"\u002F\u002F const props = defineProps(['list'])\n",[287,8523,8524],{"class":289,"line":384},[287,8525,2040],{"class":597},[287,8527,8528],{"class":289,"line":555},[287,8529,8530],{"class":702}," \u002F\u002F 第二种写法：接收+限制类型\n",[287,8532,8533],{"class":289,"line":561},[287,8534,8535],{"class":702},"\u002F\u002F defineProps\u003C{list:Persons}>()\n",[287,8537,8538],{"class":289,"line":567},[287,8539,2040],{"class":597},[287,8541,8542],{"class":289,"line":573},[287,8543,8544],{"class":702}," \u002F\u002F 第三种写法：接收+限制类型+指定默认值+限制必要性\n",[287,8546,8547,8549,8552,8554,8557,8559,8562,8565,8567,8570,8572],{"class":289,"line":579},[287,8548,2954],{"class":684},[287,8550,8551],{"class":597}," props ",[287,8553,620],{"class":684},[287,8555,8556],{"class":616}," withDefaults",[287,8558,1181],{"class":597},[287,8560,8561],{"class":616},"defineProps",[287,8563,8564],{"class":597},"\u003C{",[287,8566,8168],{"class":4453},[287,8568,8569],{"class":684},"?:",[287,8571,8275],{"class":616},[287,8573,8574],{"class":597},"}>(),{\n",[287,8576,8577,8580,8583,8585,8588,8591,8593,8596,8598,8600],{"class":289,"line":1120},[287,8578,8579],{"class":616}," list",[287,8581,8582],{"class":597},":()",[287,8584,1754],{"class":684},[287,8586,8587],{"class":597},"[{id:",[287,8589,8590],{"class":623},"'asdasg01'",[287,8592,8289],{"class":597},[287,8594,8595],{"class":623},"'小猪佩奇'",[287,8597,5222],{"class":597},[287,8599,1084],{"class":741},[287,8601,8602],{"class":597},"}]\n",[287,8604,8605],{"class":289,"line":1134},[287,8606,4529],{"class":597},[287,8608,8609,8612,8614],{"class":289,"line":1140},[287,8610,8611],{"class":597}," console.",[287,8613,1612],{"class":616},[287,8615,8616],{"class":597},"(props)\n",[287,8618,8619,8621,8623],{"class":289,"line":1148},[287,8620,645],{"class":597},[287,8622,669],{"class":601},[287,8624,605],{"class":597},[81,8626,8628],{"id":8627},"_313-生命周期","3.13. 【生命周期】",[14,8630,8631,8640,8652,8694,8729,8741],{},[17,8632,8633,8634,8636,8637,8639],{},"概念：",[21,8635,8360],{},"组件实例在创建时要经历一系列的初始化步骤，在此过程中",[21,8638,8360],{},"会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子",[17,8641,8642,8643],{},"规律：",[264,8644,8645],{},[255,8646,8647,8648,8651],{},"生命周期整体分为四个阶段，分别是：",[1326,8649,8650],{},"创建、挂载、更新、销毁","，每个阶段都有两个钩子，一前一后。",[17,8653,8654,8656,8657],{},[21,8655,880],{},"的生命周期",[264,8658,8659,8667,8676,8685],{},[255,8660,8661,8662,43,8664],{},"创建阶段：",[21,8663,1366],{},[21,8665,8666],{},"created",[255,8668,8669,8670,43,8673],{},"挂载阶段：",[21,8671,8672],{},"beforeMount",[21,8674,8675],{},"mounted",[255,8677,8678,8679,43,8682],{},"更新阶段：",[21,8680,8681],{},"beforeUpdate",[21,8683,8684],{},"updated",[255,8686,8687,8688,43,8691],{},"销毁阶段：",[21,8689,8690],{},"beforeDestroy",[21,8692,8693],{},"destroyed",[17,8695,8696,8656,8698],{},[21,8697,147],{},[264,8699,8700,8704,8712,8720],{},[255,8701,8661,8702],{},[21,8703,175],{},[255,8705,8669,8706,43,8709],{},[21,8707,8708],{},"onBeforeMount",[21,8710,8711],{},"onMounted",[255,8713,8678,8714,43,8717],{},[21,8715,8716],{},"onBeforeUpdate",[21,8718,8719],{},"onUpdated",[255,8721,8722,8723,43,8726],{},"卸载阶段：",[21,8724,8725],{},"onBeforeUnmount",[21,8727,8728],{},"onUnmounted",[17,8730,8731,8732,8734,8735,8737,8738,8740],{},"常用的钩子：",[21,8733,8711],{},"(挂载完毕)、",[21,8736,8719],{},"(更新完毕)、",[21,8739,8725],{},"(卸载之前)",[17,8742,6840,8743],{},[278,8744,8746],{"className":588,"code":8745,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"person\">\n \u003Ch2>当前求和为：{{ sum }}\u003C\u002Fh2>\n \u003Cbutton @click=\"changeSum\">点我sum+1\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003C!-- vue3写法 -->\n\u003Cscript lang=\"ts\" setup name=\"Person\">\n import { \n ref, \n onBeforeMount, \n onMounted, \n onBeforeUpdate, \n onUpdated, \n onBeforeUnmount, \n onUnmounted \n } from 'vue'\n\n \u002F\u002F 数据\n let sum = ref(0)\n \u002F\u002F 方法\n function changeSum() {\n sum.value += 1\n }\n console.log('setup')\n \u002F\u002F 生命周期钩子\n onBeforeMount(()=>{\n console.log('挂载之前')\n })\n onMounted(()=>{\n console.log('挂载完毕')\n })\n onBeforeUpdate(()=>{\n console.log('更新之前')\n })\n onUpdated(()=>{\n console.log('更新完毕')\n })\n onBeforeUnmount(()=>{\n console.log('卸载之前')\n })\n onUnmounted(()=>{\n console.log('卸载完毕')\n })\n\u003C\u002Fscript>\n",[21,8747,8748,8756,8770,8783,8801,8809,8817,8821,8826,8848,8855,8860,8865,8870,8875,8880,8885,8890,8899,8903,8907,8923,8927,8935,8943,8947,8960,8965,8976,8989,8993,9004,9017,9021,9032,9045,9049,9060,9073,9077,9088,9101,9105,9116,9129,9133],{"__ignoreMap":283},[287,8749,8750,8752,8754],{"class":289,"line":290},[287,8751,598],{"class":597},[287,8753,602],{"class":601},[287,8755,605],{"class":597},[287,8757,8758,8760,8762,8764,8766,8768],{"class":289,"line":296},[287,8759,610],{"class":597},[287,8761,613],{"class":601},[287,8763,617],{"class":616},[287,8765,620],{"class":597},[287,8767,910],{"class":623},[287,8769,605],{"class":597},[287,8771,8772,8774,8776,8779,8781],{"class":289,"line":302},[287,8773,631],{"class":597},[287,8775,81],{"class":601},[287,8777,8778],{"class":597},">当前求和为：{{ sum }}\u003C\u002F",[287,8780,81],{"class":601},[287,8782,605],{"class":597},[287,8784,8785,8787,8789,8791,8793,8795,8797,8799],{"class":289,"line":309},[287,8786,631],{"class":597},[287,8788,945],{"class":601},[287,8790,948],{"class":616},[287,8792,620],{"class":597},[287,8794,4702],{"class":623},[287,8796,4705],{"class":597},[287,8798,945],{"class":601},[287,8800,605],{"class":597},[287,8802,8803,8805,8807],{"class":289,"line":315},[287,8804,645],{"class":597},[287,8806,613],{"class":601},[287,8808,605],{"class":597},[287,8810,8811,8813,8815],{"class":289,"line":321},[287,8812,654],{"class":597},[287,8814,602],{"class":601},[287,8816,605],{"class":597},[287,8818,8819],{"class":289,"line":326},[287,8820,306],{"emptyLinePlaceholder":305},[287,8822,8823],{"class":289,"line":332},[287,8824,8825],{"class":702},"\u003C!-- vue3写法 -->\n",[287,8827,8828,8830,8832,8834,8836,8838,8840,8842,8844,8846],{"class":289,"line":338},[287,8829,598],{"class":597},[287,8831,669],{"class":601},[287,8833,672],{"class":616},[287,8835,620],{"class":597},[287,8837,677],{"class":623},[287,8839,2010],{"class":616},[287,8841,2486],{"class":616},[287,8843,620],{"class":597},[287,8845,2491],{"class":623},[287,8847,605],{"class":597},[287,8849,8850,8852],{"class":289,"line":343},[287,8851,2498],{"class":684},[287,8853,8854],{"class":597}," { \n",[287,8856,8857],{"class":289,"line":349},[287,8858,8859],{"class":597}," ref, \n",[287,8861,8862],{"class":289,"line":355},[287,8863,8864],{"class":597}," onBeforeMount, \n",[287,8866,8867],{"class":289,"line":361},[287,8868,8869],{"class":597}," onMounted, \n",[287,8871,8872],{"class":289,"line":367},[287,8873,8874],{"class":597}," onBeforeUpdate, \n",[287,8876,8877],{"class":289,"line":372},[287,8878,8879],{"class":597}," onUpdated, \n",[287,8881,8882],{"class":289,"line":378},[287,8883,8884],{"class":597}," onBeforeUnmount, \n",[287,8886,8887],{"class":289,"line":384},[287,8888,8889],{"class":597}," onUnmounted \n",[287,8891,8892,8895,8897],{"class":289,"line":555},[287,8893,8894],{"class":597}," } ",[287,8896,2213],{"class":684},[287,8898,2506],{"class":623},[287,8900,8901],{"class":289,"line":561},[287,8902,306],{"emptyLinePlaceholder":305},[287,8904,8905],{"class":289,"line":567},[287,8906,3957],{"class":702},[287,8908,8909,8911,8913,8915,8917,8919,8921],{"class":289,"line":573},[287,8910,2050],{"class":684},[287,8912,4773],{"class":597},[287,8914,620],{"class":684},[287,8916,2522],{"class":616},[287,8918,1181],{"class":597},[287,8920,761],{"class":741},[287,8922,2529],{"class":597},[287,8924,8925],{"class":289,"line":579},[287,8926,2085],{"class":702},[287,8928,8929,8931,8933],{"class":289,"line":1120},[287,8930,2090],{"class":684},[287,8932,4794],{"class":616},[287,8934,1059],{"class":597},[287,8936,8937,8939,8941],{"class":289,"line":1134},[287,8938,4801],{"class":597},[287,8940,1156],{"class":684},[287,8942,1159],{"class":741},[287,8944,8945],{"class":289,"line":1140},[287,8946,708],{"class":597},[287,8948,8949,8951,8953,8955,8958],{"class":289,"line":1148},[287,8950,2023],{"class":597},[287,8952,1612],{"class":616},[287,8954,1181],{"class":597},[287,8956,8957],{"class":623},"'setup'",[287,8959,2529],{"class":597},[287,8961,8962],{"class":289,"line":1162},[287,8963,8964],{"class":702}," \u002F\u002F 生命周期钩子\n",[287,8966,8967,8970,8972,8974],{"class":289,"line":1167},[287,8968,8969],{"class":616}," onBeforeMount",[287,8971,6290],{"class":597},[287,8973,1754],{"class":684},[287,8975,4848],{"class":597},[287,8977,8978,8980,8982,8984,8987],{"class":289,"line":1175},[287,8979,2126],{"class":597},[287,8981,1612],{"class":616},[287,8983,1181],{"class":597},[287,8985,8986],{"class":623},"'挂载之前'",[287,8988,2529],{"class":597},[287,8990,8991],{"class":289,"line":1190},[287,8992,4529],{"class":597},[287,8994,8995,8998,9000,9002],{"class":289,"line":1195},[287,8996,8997],{"class":616}," onMounted",[287,8999,6290],{"class":597},[287,9001,1754],{"class":684},[287,9003,4848],{"class":597},[287,9005,9006,9008,9010,9012,9015],{"class":289,"line":1200},[287,9007,2126],{"class":597},[287,9009,1612],{"class":616},[287,9011,1181],{"class":597},[287,9013,9014],{"class":623},"'挂载完毕'",[287,9016,2529],{"class":597},[287,9018,9019],{"class":289,"line":1205},[287,9020,4529],{"class":597},[287,9022,9023,9026,9028,9030],{"class":289,"line":1686},[287,9024,9025],{"class":616}," onBeforeUpdate",[287,9027,6290],{"class":597},[287,9029,1754],{"class":684},[287,9031,4848],{"class":597},[287,9033,9034,9036,9038,9040,9043],{"class":289,"line":1694},[287,9035,2126],{"class":597},[287,9037,1612],{"class":616},[287,9039,1181],{"class":597},[287,9041,9042],{"class":623},"'更新之前'",[287,9044,2529],{"class":597},[287,9046,9047],{"class":289,"line":1700},[287,9048,4529],{"class":597},[287,9050,9051,9054,9056,9058],{"class":289,"line":1705},[287,9052,9053],{"class":616}," onUpdated",[287,9055,6290],{"class":597},[287,9057,1754],{"class":684},[287,9059,4848],{"class":597},[287,9061,9062,9064,9066,9068,9071],{"class":289,"line":3125},[287,9063,2126],{"class":597},[287,9065,1612],{"class":616},[287,9067,1181],{"class":597},[287,9069,9070],{"class":623},"'更新完毕'",[287,9072,2529],{"class":597},[287,9074,9075],{"class":289,"line":3135},[287,9076,4529],{"class":597},[287,9078,9079,9082,9084,9086],{"class":289,"line":3151},[287,9080,9081],{"class":616}," onBeforeUnmount",[287,9083,6290],{"class":597},[287,9085,1754],{"class":684},[287,9087,4848],{"class":597},[287,9089,9090,9092,9094,9096,9099],{"class":289,"line":3156},[287,9091,2126],{"class":597},[287,9093,1612],{"class":616},[287,9095,1181],{"class":597},[287,9097,9098],{"class":623},"'卸载之前'",[287,9100,2529],{"class":597},[287,9102,9103],{"class":289,"line":3166},[287,9104,4529],{"class":597},[287,9106,9107,9110,9112,9114],{"class":289,"line":3177},[287,9108,9109],{"class":616}," onUnmounted",[287,9111,6290],{"class":597},[287,9113,1754],{"class":684},[287,9115,4848],{"class":597},[287,9117,9118,9120,9122,9124,9127],{"class":289,"line":3182},[287,9119,2126],{"class":597},[287,9121,1612],{"class":616},[287,9123,1181],{"class":597},[287,9125,9126],{"class":623},"'卸载完毕'",[287,9128,2529],{"class":597},[287,9130,9131],{"class":289,"line":3635},[287,9132,4529],{"class":597},[287,9134,9135,9137,9139],{"class":289,"line":3640},[287,9136,654],{"class":597},[287,9138,669],{"class":601},[287,9140,605],{"class":597},[81,9142,9144],{"id":9143},"_314-自定义hook","3.14. 【自定义hook】",[14,9146,9147,9166],{},[17,9148,9149,9150,9153,9154,9156,9157,9159,9160,4129,9163,93],{},"什么是",[21,9151,9152],{},"hook","？—— 本质是一个函数，把",[21,9155,175],{},"函数中使用的",[21,9158,163],{},"进行了封装，类似于",[21,9161,9162],{},"vue2.x",[21,9164,9165],{},"mixin",[17,9167,9168,9169,9171,9172,9174],{},"自定义",[21,9170,9152],{},"的优势：复用代码, 让",[21,9173,175],{},"中的逻辑更清楚易懂。",[255,9176,6840],{},[14,9178,9179,9332,9559],{},[17,9180,9181,9184,9185],{},[21,9182,9183],{},"useSum.ts","中内容如下：",[278,9186,9188],{"className":8048,"code":9187,"language":8050,"meta":283,"style":283},"import {ref,onMounted} from 'vue'\n\nexport default function(){\n let sum = ref(0)\n\n const increment = ()=>{\n sum.value += 1\n }\n const decrement = ()=>{\n sum.value -= 1\n }\n onMounted(()=>{\n increment()\n })\n\n \u002F\u002F向外部暴露数据\n return {sum,increment,decrement}\n} \n",[21,9189,9190,9201,9205,9216,9232,9236,9251,9259,9263,9278,9287,9291,9301,9308,9312,9316,9321,9328],{"__ignoreMap":283},[287,9191,9192,9194,9197,9199],{"class":289,"line":290},[287,9193,2207],{"class":684},[287,9195,9196],{"class":597}," {ref,onMounted} ",[287,9198,2213],{"class":684},[287,9200,2506],{"class":623},[287,9202,9203],{"class":289,"line":296},[287,9204,306],{"emptyLinePlaceholder":305},[287,9206,9207,9209,9211,9214],{"class":289,"line":302},[287,9208,2237],{"class":684},[287,9210,688],{"class":684},[287,9212,9213],{"class":684}," function",[287,9215,1117],{"class":597},[287,9217,9218,9220,9222,9224,9226,9228,9230],{"class":289,"line":309},[287,9219,2050],{"class":684},[287,9221,4773],{"class":597},[287,9223,620],{"class":684},[287,9225,2522],{"class":616},[287,9227,1181],{"class":597},[287,9229,761],{"class":741},[287,9231,2529],{"class":597},[287,9233,9234],{"class":289,"line":315},[287,9235,306],{"emptyLinePlaceholder":305},[287,9237,9238,9240,9243,9245,9247,9249],{"class":289,"line":321},[287,9239,4819],{"class":684},[287,9241,9242],{"class":616}," increment",[287,9244,4825],{"class":684},[287,9246,1751],{"class":597},[287,9248,1754],{"class":684},[287,9250,4848],{"class":597},[287,9252,9253,9255,9257],{"class":289,"line":326},[287,9254,4801],{"class":597},[287,9256,1156],{"class":684},[287,9258,1159],{"class":741},[287,9260,9261],{"class":289,"line":332},[287,9262,708],{"class":597},[287,9264,9265,9267,9270,9272,9274,9276],{"class":289,"line":338},[287,9266,4819],{"class":684},[287,9268,9269],{"class":616}," decrement",[287,9271,4825],{"class":684},[287,9273,1751],{"class":597},[287,9275,1754],{"class":684},[287,9277,4848],{"class":597},[287,9279,9280,9282,9285],{"class":289,"line":343},[287,9281,4801],{"class":597},[287,9283,9284],{"class":684},"-=",[287,9286,1159],{"class":741},[287,9288,9289],{"class":289,"line":349},[287,9290,708],{"class":597},[287,9292,9293,9295,9297,9299],{"class":289,"line":355},[287,9294,8997],{"class":616},[287,9296,6290],{"class":597},[287,9298,1754],{"class":684},[287,9300,4848],{"class":597},[287,9302,9303,9306],{"class":289,"line":361},[287,9304,9305],{"class":616}," increment",[287,9307,4885],{"class":597},[287,9309,9310],{"class":289,"line":367},[287,9311,4529],{"class":597},[287,9313,9314],{"class":289,"line":372},[287,9315,306],{"emptyLinePlaceholder":305},[287,9317,9318],{"class":289,"line":378},[287,9319,9320],{"class":702}," \u002F\u002F向外部暴露数据\n",[287,9322,9323,9325],{"class":289,"line":384},[287,9324,1748],{"class":684},[287,9326,9327],{"class":597}," {sum,increment,decrement}\n",[287,9329,9330],{"class":289,"line":555},[287,9331,1762],{"class":597},[17,9333,9334,9184,9337],{},[21,9335,9336],{},"useDog.ts",[278,9338,9340],{"className":8048,"code":9339,"language":8050,"meta":283,"style":283},"import {reactive,onMounted} from 'vue'\nimport axios,{AxiosError} from 'axios'\n\nexport default function(){\n let dogList = reactive\u003Cstring[]>([])\n\n \u002F\u002F 方法\n async function getDog(){\n try {\n \u002F\u002F 发请求\n let {data} = await axios.get('https:\u002F\u002Fdog.ceo\u002Fapi\u002Fbreed\u002Fpembroke\u002Fimages\u002Frandom')\n \u002F\u002F 维护数据\n dogList.push(data.message)\n } catch (error) {\n \u002F\u002F 处理错误\n const err = \u003CAxiosError>error\n console.log(err.message)\n }\n }\n\n \u002F\u002F 挂载钩子\n onMounted(()=>{\n getDog()\n })\n \n \u002F\u002F向外部暴露数据\n return {dogList,getDog}\n}\n",[21,9341,9342,9353,9365,9369,9379,9397,9401,9405,9417,9424,9429,9454,9459,9470,9481,9486,9504,9509,9513,9517,9521,9526,9531,9538,9542,9546,9550,9555],{"__ignoreMap":283},[287,9343,9344,9346,9349,9351],{"class":289,"line":290},[287,9345,2207],{"class":684},[287,9347,9348],{"class":597}," {reactive,onMounted} ",[287,9350,2213],{"class":684},[287,9352,2506],{"class":623},[287,9354,9355,9357,9360,9362],{"class":289,"line":296},[287,9356,2207],{"class":684},[287,9358,9359],{"class":597}," axios,{AxiosError} ",[287,9361,2213],{"class":684},[287,9363,9364],{"class":623}," 'axios'\n",[287,9366,9367],{"class":289,"line":302},[287,9368,306],{"emptyLinePlaceholder":305},[287,9370,9371,9373,9375,9377],{"class":289,"line":309},[287,9372,2237],{"class":684},[287,9374,688],{"class":684},[287,9376,9213],{"class":684},[287,9378,1117],{"class":597},[287,9380,9381,9383,9386,9388,9390,9392,9394],{"class":289,"line":315},[287,9382,2050],{"class":684},[287,9384,9385],{"class":597}," dogList ",[287,9387,620],{"class":684},[287,9389,2962],{"class":616},[287,9391,598],{"class":597},[287,9393,8079],{"class":741},[287,9395,9396],{"class":597},"[]>([])\n",[287,9398,9399],{"class":289,"line":321},[287,9400,306],{"emptyLinePlaceholder":305},[287,9402,9403],{"class":289,"line":326},[287,9404,2085],{"class":702},[287,9406,9407,9410,9412,9415],{"class":289,"line":332},[287,9408,9409],{"class":684}," async",[287,9411,9213],{"class":684},[287,9413,9414],{"class":616}," getDog",[287,9416,1117],{"class":597},[287,9418,9419,9422],{"class":289,"line":338},[287,9420,9421],{"class":684}," try",[287,9423,691],{"class":597},[287,9425,9426],{"class":289,"line":343},[287,9427,9428],{"class":702}," \u002F\u002F 发请求\n",[287,9430,9431,9433,9436,9438,9441,9444,9447,9449,9452],{"class":289,"line":349},[287,9432,1540],{"class":684},[287,9434,9435],{"class":597}," {data} ",[287,9437,620],{"class":684},[287,9439,9440],{"class":684}," await",[287,9442,9443],{"class":597}," axios.",[287,9445,9446],{"class":616},"get",[287,9448,1181],{"class":597},[287,9450,9451],{"class":623},"'https:\u002F\u002Fdog.ceo\u002Fapi\u002Fbreed\u002Fpembroke\u002Fimages\u002Frandom'",[287,9453,2529],{"class":597},[287,9455,9456],{"class":289,"line":355},[287,9457,9458],{"class":702}," \u002F\u002F 维护数据\n",[287,9460,9461,9464,9467],{"class":289,"line":361},[287,9462,9463],{"class":597}," dogList.",[287,9465,9466],{"class":616},"push",[287,9468,9469],{"class":597},"(data.message)\n",[287,9471,9472,9475,9478],{"class":289,"line":367},[287,9473,9474],{"class":597}," } ",[287,9476,9477],{"class":684},"catch",[287,9479,9480],{"class":597}," (error) {\n",[287,9482,9483],{"class":289,"line":372},[287,9484,9485],{"class":702}," \u002F\u002F 处理错误\n",[287,9487,9488,9491,9494,9496,9498,9501],{"class":289,"line":378},[287,9489,9490],{"class":684}," const",[287,9492,9493],{"class":741}," err",[287,9495,4825],{"class":684},[287,9497,8389],{"class":597},[287,9499,9500],{"class":741},"AxiosError",[287,9502,9503],{"class":597},">error\n",[287,9505,9506],{"class":289,"line":384},[287,9507,9508],{"class":597}," console.log(err.message)\n",[287,9510,9511],{"class":289,"line":555},[287,9512,1697],{"class":597},[287,9514,9515],{"class":289,"line":561},[287,9516,708],{"class":597},[287,9518,9519],{"class":289,"line":567},[287,9520,306],{"emptyLinePlaceholder":305},[287,9522,9523],{"class":289,"line":573},[287,9524,9525],{"class":597}," \u002F\u002F 挂载钩子\n",[287,9527,9528],{"class":289,"line":579},[287,9529,9530],{"class":597}," onMounted(()=>{\n",[287,9532,9533,9536],{"class":289,"line":1120},[287,9534,9535],{"class":616}," getDog",[287,9537,4885],{"class":597},[287,9539,9540],{"class":289,"line":1134},[287,9541,4529],{"class":597},[287,9543,9544],{"class":289,"line":1140},[287,9545,3991],{"class":597},[287,9547,9548],{"class":289,"line":1148},[287,9549,9320],{"class":597},[287,9551,9552],{"class":289,"line":1162},[287,9553,9554],{"class":597}," return {dogList,getDog}\n",[287,9556,9557],{"class":289,"line":1167},[287,9558,1762],{"class":597},[17,9560,9561,9562],{},"组件中具体使用：",[278,9563,9565],{"className":588,"code":9564,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Ch2>当前求和为：{{sum}}\u003C\u002Fh2>\n \u003Cbutton @click=\"increment\">点我+1\u003C\u002Fbutton>\n \u003Cbutton @click=\"decrement\">点我-1\u003C\u002Fbutton>\n \u003Chr>\n \u003Cimg v-for=\"(u,index) in dogList.urlList\" :key=\"index\" :src=\"(u as string)\"> \n \u003Cspan v-show=\"dogList.isLoading\">加载中......\u003C\u002Fspan>\u003Cbr>\n \u003Cbutton @click=\"getDog\">再来一只狗\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\">\n import {defineComponent} from 'vue'\n\n export default defineComponent({\n name:'App',\n })\n\u003C\u002Fscript>\n\n\u003Cscript setup lang=\"ts\">\n import useSum from '.\u002Fhooks\u002FuseSum'\n import useDog from '.\u002Fhooks\u002FuseDog'\n \n let {sum,increment,decrement} = useSum()\n let {dogList,getDog} = useDog()\n\u003C\u002Fscript>\n",[21,9566,9567,9575,9587,9607,9627,9635,9666,9691,9711,9719,9723,9737,9748,9752,9763,9771,9775,9783,9787,9803,9815,9827,9831,9845,9859],{"__ignoreMap":283},[287,9568,9569,9571,9573],{"class":289,"line":290},[287,9570,598],{"class":597},[287,9572,602],{"class":601},[287,9574,605],{"class":597},[287,9576,9577,9579,9581,9583,9585],{"class":289,"line":296},[287,9578,610],{"class":597},[287,9580,81],{"class":601},[287,9582,4685],{"class":597},[287,9584,81],{"class":601},[287,9586,605],{"class":597},[287,9588,9589,9591,9593,9595,9597,9600,9603,9605],{"class":289,"line":302},[287,9590,610],{"class":597},[287,9592,945],{"class":601},[287,9594,948],{"class":616},[287,9596,620],{"class":597},[287,9598,9599],{"class":623},"\"increment\"",[287,9601,9602],{"class":597},">点我+1\u003C\u002F",[287,9604,945],{"class":601},[287,9606,605],{"class":597},[287,9608,9609,9611,9613,9615,9617,9620,9623,9625],{"class":289,"line":309},[287,9610,610],{"class":597},[287,9612,945],{"class":601},[287,9614,948],{"class":616},[287,9616,620],{"class":597},[287,9618,9619],{"class":623},"\"decrement\"",[287,9621,9622],{"class":597},">点我-1\u003C\u002F",[287,9624,945],{"class":601},[287,9626,605],{"class":597},[287,9628,9629,9631,9633],{"class":289,"line":315},[287,9630,610],{"class":597},[287,9632,389],{"class":601},[287,9634,605],{"class":597},[287,9636,9637,9639,9641,9643,9645,9648,9650,9652,9655,9658,9660,9663],{"class":289,"line":321},[287,9638,610],{"class":597},[287,9640,74],{"class":601},[287,9642,2785],{"class":616},[287,9644,620],{"class":597},[287,9646,9647],{"class":623},"\"(u,index) in dogList.urlList\"",[287,9649,2793],{"class":616},[287,9651,620],{"class":597},[287,9653,9654],{"class":623},"\"index\"",[287,9656,9657],{"class":616}," :src",[287,9659,620],{"class":597},[287,9661,9662],{"class":623},"\"(u as string)\"",[287,9664,9665],{"class":597},"> \n",[287,9667,9668,9670,9672,9675,9677,9680,9683,9685,9687,9689],{"class":289,"line":326},[287,9669,610],{"class":597},[287,9671,287],{"class":601},[287,9673,9674],{"class":616}," v-show",[287,9676,620],{"class":597},[287,9678,9679],{"class":623},"\"dogList.isLoading\"",[287,9681,9682],{"class":597},">加载中......\u003C\u002F",[287,9684,287],{"class":601},[287,9686,7492],{"class":597},[287,9688,194],{"class":601},[287,9690,605],{"class":597},[287,9692,9693,9695,9697,9699,9701,9704,9707,9709],{"class":289,"line":332},[287,9694,610],{"class":597},[287,9696,945],{"class":601},[287,9698,948],{"class":616},[287,9700,620],{"class":597},[287,9702,9703],{"class":623},"\"getDog\"",[287,9705,9706],{"class":597},">再来一只狗\u003C\u002F",[287,9708,945],{"class":601},[287,9710,605],{"class":597},[287,9712,9713,9715,9717],{"class":289,"line":338},[287,9714,654],{"class":597},[287,9716,602],{"class":601},[287,9718,605],{"class":597},[287,9720,9721],{"class":289,"line":343},[287,9722,306],{"emptyLinePlaceholder":305},[287,9724,9725,9727,9729,9731,9733,9735],{"class":289,"line":349},[287,9726,598],{"class":597},[287,9728,669],{"class":601},[287,9730,672],{"class":616},[287,9732,620],{"class":597},[287,9734,677],{"class":623},[287,9736,605],{"class":597},[287,9738,9739,9741,9744,9746],{"class":289,"line":355},[287,9740,2498],{"class":684},[287,9742,9743],{"class":597}," {defineComponent} ",[287,9745,2213],{"class":684},[287,9747,2506],{"class":623},[287,9749,9750],{"class":289,"line":361},[287,9751,306],{"emptyLinePlaceholder":305},[287,9753,9754,9756,9758,9761],{"class":289,"line":367},[287,9755,685],{"class":684},[287,9757,688],{"class":684},[287,9759,9760],{"class":616}," defineComponent",[287,9762,2245],{"class":597},[287,9764,9765,9767,9769],{"class":289,"line":372},[287,9766,696],{"class":597},[287,9768,699],{"class":623},[287,9770,1051],{"class":597},[287,9772,9773],{"class":289,"line":378},[287,9774,4529],{"class":597},[287,9776,9777,9779,9781],{"class":289,"line":384},[287,9778,654],{"class":597},[287,9780,669],{"class":601},[287,9782,605],{"class":597},[287,9784,9785],{"class":289,"line":555},[287,9786,306],{"emptyLinePlaceholder":305},[287,9788,9789,9791,9793,9795,9797,9799,9801],{"class":289,"line":561},[287,9790,598],{"class":597},[287,9792,669],{"class":601},[287,9794,2010],{"class":616},[287,9796,672],{"class":616},[287,9798,620],{"class":597},[287,9800,677],{"class":623},[287,9802,605],{"class":597},[287,9804,9805,9807,9810,9812],{"class":289,"line":567},[287,9806,2498],{"class":684},[287,9808,9809],{"class":597}," useSum ",[287,9811,2213],{"class":684},[287,9813,9814],{"class":623}," '.\u002Fhooks\u002FuseSum'\n",[287,9816,9817,9819,9822,9824],{"class":289,"line":573},[287,9818,2498],{"class":684},[287,9820,9821],{"class":597}," useDog ",[287,9823,2213],{"class":684},[287,9825,9826],{"class":623}," '.\u002Fhooks\u002FuseDog'\n",[287,9828,9829],{"class":289,"line":579},[287,9830,3991],{"class":597},[287,9832,9833,9835,9838,9840,9843],{"class":289,"line":1120},[287,9834,2050],{"class":684},[287,9836,9837],{"class":597}," {sum,increment,decrement} ",[287,9839,620],{"class":684},[287,9841,9842],{"class":616}," useSum",[287,9844,4885],{"class":597},[287,9846,9847,9849,9852,9854,9857],{"class":289,"line":1134},[287,9848,2050],{"class":684},[287,9850,9851],{"class":597}," {dogList,getDog} ",[287,9853,620],{"class":684},[287,9855,9856],{"class":616}," useDog",[287,9858,4885],{"class":597},[287,9860,9861,9863,9865],{"class":289,"line":1140},[287,9862,654],{"class":597},[287,9864,669],{"class":601},[287,9866,605],{"class":597},[389,9868],{},[10,9870,9872],{"id":9871},"_4-路由","4. 路由",[81,9874,9876],{"id":9875},"_41-对路由的理解","4.1. 【对路由的理解】",[74,9878],{"src":9879,"alt":9880,"style":9881},"images\u002Fimage-20231018144351536.png","image-20231018144351536","zoom:20%;border-radius:40px",[81,9883,9885],{"id":9884},"_42-基本切换效果","4.2. 【基本切换效果】",[14,9887,9888,9901],{},[17,9889,9890,9892,9893,9896,9897,9900],{},[21,9891,147],{},"中要使用",[21,9894,9895],{},"vue-router","的最新版本，目前是",[21,9898,9899],{},"4","版本。",[17,9902,9903,9904],{},"路由配置文件代码如下：",[278,9905,9907],{"className":8048,"code":9906,"language":8050,"meta":283,"style":283},"import {createRouter,createWebHistory} from 'vue-router'\nimport Home from '@\u002Fpages\u002FHome.vue'\nimport News from '@\u002Fpages\u002FNews.vue'\nimport About from '@\u002Fpages\u002FAbout.vue'\n\nconst router = createRouter({\n history:createWebHistory(),\n routes:[\n {\n path:'\u002Fhome',\n component:Home\n },\n {\n path:'\u002Fabout',\n component:About\n }\n ]\n})\nexport default router\n",[21,9908,9909,9921,9933,9945,9957,9961,9976,9987,9992,9997,10007,10012,10017,10021,10030,10035,10040,10045,10049],{"__ignoreMap":283},[287,9910,9911,9913,9916,9918],{"class":289,"line":290},[287,9912,2207],{"class":684},[287,9914,9915],{"class":597}," {createRouter,createWebHistory} ",[287,9917,2213],{"class":684},[287,9919,9920],{"class":623}," 'vue-router'\n",[287,9922,9923,9925,9928,9930],{"class":289,"line":296},[287,9924,2207],{"class":684},[287,9926,9927],{"class":597}," Home ",[287,9929,2213],{"class":684},[287,9931,9932],{"class":623}," '@\u002Fpages\u002FHome.vue'\n",[287,9934,9935,9937,9940,9942],{"class":289,"line":302},[287,9936,2207],{"class":684},[287,9938,9939],{"class":597}," News ",[287,9941,2213],{"class":684},[287,9943,9944],{"class":623}," '@\u002Fpages\u002FNews.vue'\n",[287,9946,9947,9949,9952,9954],{"class":289,"line":309},[287,9948,2207],{"class":684},[287,9950,9951],{"class":597}," About ",[287,9953,2213],{"class":684},[287,9955,9956],{"class":623}," '@\u002Fpages\u002FAbout.vue'\n",[287,9958,9959],{"class":289,"line":315},[287,9960,306],{"emptyLinePlaceholder":305},[287,9962,9963,9966,9969,9971,9974],{"class":289,"line":321},[287,9964,9965],{"class":684},"const",[287,9967,9968],{"class":741}," router",[287,9970,4825],{"class":684},[287,9972,9973],{"class":616}," createRouter",[287,9975,2245],{"class":597},[287,9977,9978,9981,9984],{"class":289,"line":326},[287,9979,9980],{"class":597}," history:",[287,9982,9983],{"class":616},"createWebHistory",[287,9985,9986],{"class":597},"(),\n",[287,9988,9989],{"class":289,"line":332},[287,9990,9991],{"class":597}," routes:[\n",[287,9993,9994],{"class":289,"line":338},[287,9995,9996],{"class":597}," {\n",[287,9998,9999,10002,10005],{"class":289,"line":343},[287,10000,10001],{"class":597}," path:",[287,10003,10004],{"class":623},"'\u002Fhome'",[287,10006,1051],{"class":597},[287,10008,10009],{"class":289,"line":349},[287,10010,10011],{"class":597}," component:Home\n",[287,10013,10014],{"class":289,"line":355},[287,10015,10016],{"class":597}," },\n",[287,10018,10019],{"class":289,"line":361},[287,10020,9996],{"class":597},[287,10022,10023,10025,10028],{"class":289,"line":367},[287,10024,10001],{"class":597},[287,10026,10027],{"class":623},"'\u002Fabout'",[287,10029,1051],{"class":597},[287,10031,10032],{"class":289,"line":372},[287,10033,10034],{"class":597}," component:About\n",[287,10036,10037],{"class":289,"line":378},[287,10038,10039],{"class":597}," }\n",[287,10041,10042],{"class":289,"line":384},[287,10043,10044],{"class":597}," ]\n",[287,10046,10047],{"class":289,"line":555},[287,10048,2261],{"class":597},[287,10050,10051,10053,10055],{"class":289,"line":561},[287,10052,2237],{"class":684},[287,10054,688],{"class":684},[287,10056,10057],{"class":597}," router\n",[14,10059,10060],{},[17,10061,10062,10065,10066],{},[21,10063,10064],{},"main.ts","代码如下：",[278,10067,10069],{"className":8048,"code":10068,"language":8050,"meta":283,"style":283},"import router from '.\u002Frouter\u002Findex'\napp.use(router)\n\napp.mount('#app')\n",[21,10070,10071,10083,10094,10098],{"__ignoreMap":283},[287,10072,10073,10075,10078,10080],{"class":289,"line":290},[287,10074,2207],{"class":684},[287,10076,10077],{"class":597}," router ",[287,10079,2213],{"class":684},[287,10081,10082],{"class":623}," '.\u002Frouter\u002Findex'\n",[287,10084,10085,10088,10091],{"class":289,"line":296},[287,10086,10087],{"class":597},"app.",[287,10089,10090],{"class":616},"use",[287,10092,10093],{"class":597},"(router)\n",[287,10095,10096],{"class":289,"line":302},[287,10097,306],{"emptyLinePlaceholder":305},[287,10099,10100,10102,10105,10107,10110],{"class":289,"line":309},[287,10101,10087],{"class":597},[287,10103,10104],{"class":616},"mount",[287,10106,1181],{"class":597},[287,10108,10109],{"class":623},"'#app'",[287,10111,2529],{"class":597},[14,10113,10114],{},[17,10115,10116,10118,10119],{},[21,10117,8142],{},"代码如下",[278,10120,10122],{"className":588,"code":10121,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"app\">\n \u003Ch2 class=\"title\">Vue路由测试\u003C\u002Fh2>\n \u003C!-- 导航区 -->\n \u003Cdiv class=\"navigate\">\n \u003CRouterLink to=\"\u002Fhome\" active-class=\"active\">首页\u003C\u002FRouterLink>\n \u003CRouterLink to=\"\u002Fnews\" active-class=\"active\">新闻\u003C\u002FRouterLink>\n \u003CRouterLink to=\"\u002Fabout\" active-class=\"active\">关于\u003C\u002FRouterLink>\n \u003C\u002Fdiv>\n \u003C!-- 展示区 -->\n \u003Cdiv class=\"main-content\">\n \u003CRouterView>\u003C\u002FRouterView>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup name=\"App\">\n import {RouterLink,RouterView} from 'vue-router' \n\u003C\u002Fscript>\n",[21,10123,10124,10132,10146,10166,10171,10186,10216,10242,10268,10276,10281,10296,10310,10318,10326,10334,10338,10360,10374],{"__ignoreMap":283},[287,10125,10126,10128,10130],{"class":289,"line":290},[287,10127,598],{"class":597},[287,10129,602],{"class":601},[287,10131,605],{"class":597},[287,10133,10134,10136,10138,10140,10142,10144],{"class":289,"line":296},[287,10135,610],{"class":597},[287,10137,613],{"class":601},[287,10139,617],{"class":616},[287,10141,620],{"class":597},[287,10143,624],{"class":623},[287,10145,605],{"class":597},[287,10147,10148,10150,10152,10154,10156,10159,10162,10164],{"class":289,"line":302},[287,10149,631],{"class":597},[287,10151,81],{"class":601},[287,10153,617],{"class":616},[287,10155,620],{"class":597},[287,10157,10158],{"class":623},"\"title\"",[287,10160,10161],{"class":597},">Vue路由测试\u003C\u002F",[287,10163,81],{"class":601},[287,10165,605],{"class":597},[287,10167,10168],{"class":289,"line":309},[287,10169,10170],{"class":702}," \u003C!-- 导航区 -->\n",[287,10172,10173,10175,10177,10179,10181,10184],{"class":289,"line":315},[287,10174,631],{"class":597},[287,10176,613],{"class":601},[287,10178,617],{"class":616},[287,10180,620],{"class":597},[287,10182,10183],{"class":623},"\"navigate\"",[287,10185,605],{"class":597},[287,10187,10188,10190,10193,10196,10198,10201,10204,10206,10209,10212,10214],{"class":289,"line":321},[287,10189,2780],{"class":597},[287,10191,10192],{"class":601},"RouterLink",[287,10194,10195],{"class":616}," to",[287,10197,620],{"class":597},[287,10199,10200],{"class":623},"\"\u002Fhome\"",[287,10202,10203],{"class":616}," active-class",[287,10205,620],{"class":597},[287,10207,10208],{"class":623},"\"active\"",[287,10210,10211],{"class":597},">首页\u003C\u002F",[287,10213,10192],{"class":601},[287,10215,605],{"class":597},[287,10217,10218,10220,10222,10224,10226,10229,10231,10233,10235,10238,10240],{"class":289,"line":326},[287,10219,2780],{"class":597},[287,10221,10192],{"class":601},[287,10223,10195],{"class":616},[287,10225,620],{"class":597},[287,10227,10228],{"class":623},"\"\u002Fnews\"",[287,10230,10203],{"class":616},[287,10232,620],{"class":597},[287,10234,10208],{"class":623},[287,10236,10237],{"class":597},">新闻\u003C\u002F",[287,10239,10192],{"class":601},[287,10241,605],{"class":597},[287,10243,10244,10246,10248,10250,10252,10255,10257,10259,10261,10264,10266],{"class":289,"line":332},[287,10245,2780],{"class":597},[287,10247,10192],{"class":601},[287,10249,10195],{"class":616},[287,10251,620],{"class":597},[287,10253,10254],{"class":623},"\"\u002Fabout\"",[287,10256,10203],{"class":616},[287,10258,620],{"class":597},[287,10260,10208],{"class":623},[287,10262,10263],{"class":597},">关于\u003C\u002F",[287,10265,10192],{"class":601},[287,10267,605],{"class":597},[287,10269,10270,10272,10274],{"class":289,"line":338},[287,10271,2810],{"class":597},[287,10273,613],{"class":601},[287,10275,605],{"class":597},[287,10277,10278],{"class":289,"line":343},[287,10279,10280],{"class":702}," \u003C!-- 展示区 -->\n",[287,10282,10283,10285,10287,10289,10291,10294],{"class":289,"line":349},[287,10284,631],{"class":597},[287,10286,613],{"class":601},[287,10288,617],{"class":616},[287,10290,620],{"class":597},[287,10292,10293],{"class":623},"\"main-content\"",[287,10295,605],{"class":597},[287,10297,10298,10300,10303,10306,10308],{"class":289,"line":355},[287,10299,2780],{"class":597},[287,10301,10302],{"class":601},"RouterView",[287,10304,10305],{"class":597},">\u003C\u002F",[287,10307,10302],{"class":601},[287,10309,605],{"class":597},[287,10311,10312,10314,10316],{"class":289,"line":361},[287,10313,2810],{"class":597},[287,10315,613],{"class":601},[287,10317,605],{"class":597},[287,10319,10320,10322,10324],{"class":289,"line":367},[287,10321,645],{"class":597},[287,10323,613],{"class":601},[287,10325,605],{"class":597},[287,10327,10328,10330,10332],{"class":289,"line":372},[287,10329,654],{"class":597},[287,10331,602],{"class":601},[287,10333,605],{"class":597},[287,10335,10336],{"class":289,"line":378},[287,10337,306],{"emptyLinePlaceholder":305},[287,10339,10340,10342,10344,10346,10348,10350,10352,10354,10356,10358],{"class":289,"line":384},[287,10341,598],{"class":597},[287,10343,669],{"class":601},[287,10345,672],{"class":616},[287,10347,620],{"class":597},[287,10349,677],{"class":623},[287,10351,2010],{"class":616},[287,10353,2486],{"class":616},[287,10355,620],{"class":597},[287,10357,4299],{"class":623},[287,10359,605],{"class":597},[287,10361,10362,10364,10367,10369,10372],{"class":289,"line":555},[287,10363,2498],{"class":684},[287,10365,10366],{"class":597}," {RouterLink,RouterView} ",[287,10368,2213],{"class":684},[287,10370,10371],{"class":623}," 'vue-router'",[287,10373,2040],{"class":597},[287,10375,10376,10378,10380],{"class":289,"line":561},[287,10377,654],{"class":597},[287,10379,669],{"class":601},[287,10381,605],{"class":597},[81,10383,10385],{"id":10384},"_43-两个注意点","4.3. 【两个注意点】",[264,10387,10388],{},[157,10389,10390,10405],{},[17,10391,10392,10393,10396,10397,10400,10401,10404],{},"路由组件通常存放在",[21,10394,10395],{},"pages"," 或 ",[21,10398,10399],{},"views","文件夹，一般组件通常存放在",[21,10402,10403],{},"components","文件夹。",[17,10406,10407,10408,10411,10412,93],{},"通过点击导航，视觉效果上“消失” 了的路由组件，默认是被",[1326,10409,10410],{},"卸载","掉的，需要的时候再去",[1326,10413,10414],{},"挂载",[81,10416,10418],{"id":10417},"_44路由器工作模式","4.4.【路由器工作模式】",[157,10420,10421,10487],{},[17,10422,10423,10426,10427],{},[21,10424,10425],{},"history","模式",[264,10428,10429,10442,10449],{},[255,10430,10431,10432,10435,10436,10439,10440,93],{},"优点：",[21,10433,10434],{},"URL","更加美观，不带有",[21,10437,10438],{},"#","，更接近传统的网站",[21,10441,10434],{},[255,10443,10444,10445,10448],{},"缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有",[21,10446,10447],{},"404","错误。",[278,10450,10452],{"className":8048,"code":10451,"language":8050,"meta":283,"style":283},"const router = createRouter({\n history:createWebHistory(), \u002F\u002Fhistory模式\n \u002F******\u002F\n})\n",[21,10453,10454,10466,10478,10483],{"__ignoreMap":283},[287,10455,10456,10458,10460,10462,10464],{"class":289,"line":290},[287,10457,9965],{"class":684},[287,10459,9968],{"class":741},[287,10461,4825],{"class":684},[287,10463,9973],{"class":616},[287,10465,2245],{"class":597},[287,10467,10468,10470,10472,10475],{"class":289,"line":296},[287,10469,9980],{"class":597},[287,10471,9983],{"class":616},[287,10473,10474],{"class":597},"(), ",[287,10476,10477],{"class":702},"\u002F\u002Fhistory模式\n",[287,10479,10480],{"class":289,"line":302},[287,10481,10482],{"class":702}," \u002F******\u002F\n",[287,10484,10485],{"class":289,"line":309},[287,10486,2261],{"class":597},[17,10488,10489,10426,10492],{},[21,10490,10491],{},"hash",[264,10493,10494,10497,10510],{},[255,10495,10496],{},"优点：兼容性更好，因为不需要服务器端处理路径。",[255,10498,10499,10500,10502,10503,10505,10506,10509],{},"缺点：",[21,10501,10434],{},"带有",[21,10504,10438],{},"不太美观，且在",[21,10507,10508],{},"SEO","优化方面相对较差。",[278,10511,10513],{"className":8048,"code":10512,"language":8050,"meta":283,"style":283},"const router = createRouter({\n history:createWebHashHistory(), \u002F\u002Fhash模式\n \u002F******\u002F\n})\n",[21,10514,10515,10527,10539,10543],{"__ignoreMap":283},[287,10516,10517,10519,10521,10523,10525],{"class":289,"line":290},[287,10518,9965],{"class":684},[287,10520,9968],{"class":741},[287,10522,4825],{"class":684},[287,10524,9973],{"class":616},[287,10526,2245],{"class":597},[287,10528,10529,10531,10534,10536],{"class":289,"line":296},[287,10530,9980],{"class":597},[287,10532,10533],{"class":616},"createWebHashHistory",[287,10535,10474],{"class":597},[287,10537,10538],{"class":702},"\u002F\u002Fhash模式\n",[287,10540,10541],{"class":289,"line":302},[287,10542,10482],{"class":702},[287,10544,10545],{"class":289,"line":309},[287,10546,2261],{"class":597},[81,10548,10550],{"id":10549},"_45-to的两种写法","4.5. 【to的两种写法】",[278,10552,10554],{"className":588,"code":10553,"language":590,"meta":283,"style":283},"\u003C!-- 第一种：to的字符串写法 -->\n\u003Crouter-link active-class=\"active\" to=\"\u002Fhome\">主页\u003C\u002Frouter-link>\n\n\u003C!-- 第二种：to的对象写法 -->\n\u003Crouter-link active-class=\"active\" :to=\"{path:'\u002Fhome'}\">Home\u003C\u002Frouter-link>\n",[21,10555,10556,10561,10587,10591,10596],{"__ignoreMap":283},[287,10557,10558],{"class":289,"line":290},[287,10559,10560],{"class":702},"\u003C!-- 第一种：to的字符串写法 -->\n",[287,10562,10563,10565,10568,10570,10572,10574,10576,10578,10580,10583,10585],{"class":289,"line":296},[287,10564,598],{"class":597},[287,10566,10567],{"class":601},"router-link",[287,10569,10203],{"class":616},[287,10571,620],{"class":597},[287,10573,10208],{"class":623},[287,10575,10195],{"class":616},[287,10577,620],{"class":597},[287,10579,10200],{"class":623},[287,10581,10582],{"class":597},">主页\u003C\u002F",[287,10584,10567],{"class":601},[287,10586,605],{"class":597},[287,10588,10589],{"class":289,"line":302},[287,10590,306],{"emptyLinePlaceholder":305},[287,10592,10593],{"class":289,"line":309},[287,10594,10595],{"class":702},"\u003C!-- 第二种：to的对象写法 -->\n",[287,10597,10598,10600,10602,10604,10606,10608,10610,10613,10615,10617,10620,10622,10625,10627,10630,10632],{"class":289,"line":315},[287,10599,598],{"class":597},[287,10601,10567],{"class":601},[287,10603,10203],{"class":616},[287,10605,620],{"class":597},[287,10607,10208],{"class":623},[287,10609,8165],{"class":597},[287,10611,10612],{"class":616},"to",[287,10614,620],{"class":597},[287,10616,8173],{"class":623},[287,10618,10619],{"class":597},"{path:",[287,10621,10004],{"class":623},[287,10623,10624],{"class":597},"}",[287,10626,8173],{"class":623},[287,10628,10629],{"class":597},">Home\u003C\u002F",[287,10631,10567],{"class":601},[287,10633,605],{"class":597},[81,10635,10637],{"id":10636},"_46-命名路由","4.6. 【命名路由】",[255,10639,10640],{},"作用：可以简化路由跳转及传参（后面就讲）。",[255,10642,10643],{},"给路由规则命名：",[278,10645,10647],{"className":8048,"code":10646,"language":8050,"meta":283,"style":283},"routes:[\n {\n name:'zhuye',\n path:'\u002Fhome',\n component:Home\n },\n {\n name:'xinwen',\n path:'\u002Fnews',\n component:News,\n },\n {\n name:'guanyu',\n path:'\u002Fabout',\n component:About\n }\n]\n",[21,10648,10649,10657,10662,10671,10680,10685,10690,10694,10703,10712,10717,10721,10725,10734,10742,10747,10751],{"__ignoreMap":283},[287,10650,10651,10654],{"class":289,"line":290},[287,10652,10653],{"class":616},"routes",[287,10655,10656],{"class":597},":[\n",[287,10658,10659],{"class":289,"line":296},[287,10660,10661],{"class":597}," {\n",[287,10663,10664,10666,10669],{"class":289,"line":302},[287,10665,696],{"class":597},[287,10667,10668],{"class":623},"'zhuye'",[287,10670,1051],{"class":597},[287,10672,10673,10676,10678],{"class":289,"line":309},[287,10674,10675],{"class":597}," path:",[287,10677,10004],{"class":623},[287,10679,1051],{"class":597},[287,10681,10682],{"class":289,"line":315},[287,10683,10684],{"class":597}," component:Home\n",[287,10686,10687],{"class":289,"line":321},[287,10688,10689],{"class":597}," },\n",[287,10691,10692],{"class":289,"line":326},[287,10693,10661],{"class":597},[287,10695,10696,10698,10701],{"class":289,"line":332},[287,10697,696],{"class":597},[287,10699,10700],{"class":623},"'xinwen'",[287,10702,1051],{"class":597},[287,10704,10705,10707,10710],{"class":289,"line":338},[287,10706,10675],{"class":597},[287,10708,10709],{"class":623},"'\u002Fnews'",[287,10711,1051],{"class":597},[287,10713,10714],{"class":289,"line":343},[287,10715,10716],{"class":597}," component:News,\n",[287,10718,10719],{"class":289,"line":349},[287,10720,10689],{"class":597},[287,10722,10723],{"class":289,"line":355},[287,10724,10661],{"class":597},[287,10726,10727,10729,10732],{"class":289,"line":361},[287,10728,696],{"class":597},[287,10730,10731],{"class":623},"'guanyu'",[287,10733,1051],{"class":597},[287,10735,10736,10738,10740],{"class":289,"line":367},[287,10737,10675],{"class":597},[287,10739,10027],{"class":623},[287,10741,1051],{"class":597},[287,10743,10744],{"class":289,"line":372},[287,10745,10746],{"class":597}," component:About\n",[287,10748,10749],{"class":289,"line":378},[287,10750,708],{"class":597},[287,10752,10753],{"class":289,"line":384},[287,10754,4498],{"class":597},[255,10756,10757],{},"跳转路由：",[278,10759,10761],{"className":588,"code":10760,"language":590,"meta":283,"style":283},"\u003C!--简化前：需要写完整的路径（to的字符串写法） -->\n\u003Crouter-link to=\"\u002Fnews\u002Fdetail\">跳转\u003C\u002Frouter-link>\n\n\u003C!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->\n\u003Crouter-link :to=\"{name:'guanyu'}\">跳转\u003C\u002Frouter-link>\n",[21,10762,10763,10768,10788,10792,10797],{"__ignoreMap":283},[287,10764,10765],{"class":289,"line":290},[287,10766,10767],{"class":702},"\u003C!--简化前：需要写完整的路径（to的字符串写法） -->\n",[287,10769,10770,10772,10774,10776,10778,10781,10784,10786],{"class":289,"line":296},[287,10771,598],{"class":597},[287,10773,10567],{"class":601},[287,10775,10195],{"class":616},[287,10777,620],{"class":597},[287,10779,10780],{"class":623},"\"\u002Fnews\u002Fdetail\"",[287,10782,10783],{"class":597},">跳转\u003C\u002F",[287,10785,10567],{"class":601},[287,10787,605],{"class":597},[287,10789,10790],{"class":289,"line":302},[287,10791,306],{"emptyLinePlaceholder":305},[287,10793,10794],{"class":289,"line":309},[287,10795,10796],{"class":702},"\u003C!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->\n",[287,10798,10799,10801,10803,10805,10807,10809,10811,10814,10816,10818,10820,10822,10824],{"class":289,"line":315},[287,10800,598],{"class":597},[287,10802,10567],{"class":601},[287,10804,8165],{"class":597},[287,10806,10612],{"class":616},[287,10808,620],{"class":597},[287,10810,8173],{"class":623},[287,10812,10813],{"class":597},"{name:",[287,10815,10731],{"class":623},[287,10817,10624],{"class":597},[287,10819,8173],{"class":623},[287,10821,10783],{"class":597},[287,10823,10567],{"class":601},[287,10825,605],{"class":597},[81,10827,10829],{"id":10828},"_47-嵌套路由","4.7. 【嵌套路由】",[157,10831,10832,10842,11028,11089],{},[17,10833,10834,10835,10838,10839],{},"编写",[21,10836,10837],{},"News","的子路由：",[21,10840,10841],{},"Detail.vue",[17,10843,10844,10845,10848,10849],{},"配置路由规则，使用",[21,10846,10847],{},"children","配置项：",[278,10850,10854],{"className":10851,"code":10852,"language":10853,"meta":283,"style":283},"language-ts shiki shiki-themes github-light github-dark","const router = createRouter({\n history:createWebHistory(),\n routes:[\n {\n name:'zhuye',\n path:'\u002Fhome',\n component:Home\n },\n {\n name:'xinwen',\n path:'\u002Fnews',\n component:News,\n children:[\n {\n name:'xiang',\n path:'detail',\n component:Detail\n }\n ]\n },\n {\n name:'guanyu',\n path:'\u002Fabout',\n component:About\n }\n ]\n})\nexport default router\n","ts",[21,10855,10856,10868,10877,10881,10885,10894,10902,10906,10910,10914,10922,10930,10935,10940,10945,10955,10965,10970,10975,10980,10984,10988,10996,11004,11008,11012,11016,11020],{"__ignoreMap":283},[287,10857,10858,10860,10862,10864,10866],{"class":289,"line":290},[287,10859,9965],{"class":684},[287,10861,9968],{"class":741},[287,10863,4825],{"class":684},[287,10865,9973],{"class":616},[287,10867,2245],{"class":597},[287,10869,10870,10873,10875],{"class":289,"line":296},[287,10871,10872],{"class":597}," history:",[287,10874,9983],{"class":616},[287,10876,9986],{"class":597},[287,10878,10879],{"class":289,"line":302},[287,10880,9991],{"class":597},[287,10882,10883],{"class":289,"line":309},[287,10884,9996],{"class":597},[287,10886,10887,10890,10892],{"class":289,"line":315},[287,10888,10889],{"class":597}," name:",[287,10891,10668],{"class":623},[287,10893,1051],{"class":597},[287,10895,10896,10898,10900],{"class":289,"line":321},[287,10897,10001],{"class":597},[287,10899,10004],{"class":623},[287,10901,1051],{"class":597},[287,10903,10904],{"class":289,"line":326},[287,10905,10011],{"class":597},[287,10907,10908],{"class":289,"line":332},[287,10909,10016],{"class":597},[287,10911,10912],{"class":289,"line":338},[287,10913,9996],{"class":597},[287,10915,10916,10918,10920],{"class":289,"line":343},[287,10917,10889],{"class":597},[287,10919,10700],{"class":623},[287,10921,1051],{"class":597},[287,10923,10924,10926,10928],{"class":289,"line":349},[287,10925,10001],{"class":597},[287,10927,10709],{"class":623},[287,10929,1051],{"class":597},[287,10931,10932],{"class":289,"line":355},[287,10933,10934],{"class":597}," component:News,\n",[287,10936,10937],{"class":289,"line":361},[287,10938,10939],{"class":597}," children:[\n",[287,10941,10942],{"class":289,"line":367},[287,10943,10944],{"class":597}," {\n",[287,10946,10947,10950,10953],{"class":289,"line":372},[287,10948,10949],{"class":597}," name:",[287,10951,10952],{"class":623},"'xiang'",[287,10954,1051],{"class":597},[287,10956,10957,10960,10963],{"class":289,"line":378},[287,10958,10959],{"class":597}," path:",[287,10961,10962],{"class":623},"'detail'",[287,10964,1051],{"class":597},[287,10966,10967],{"class":289,"line":384},[287,10968,10969],{"class":597}," component:Detail\n",[287,10971,10972],{"class":289,"line":555},[287,10973,10974],{"class":597}," }\n",[287,10976,10977],{"class":289,"line":561},[287,10978,10979],{"class":597}," ]\n",[287,10981,10982],{"class":289,"line":567},[287,10983,10016],{"class":597},[287,10985,10986],{"class":289,"line":573},[287,10987,9996],{"class":597},[287,10989,10990,10992,10994],{"class":289,"line":579},[287,10991,10889],{"class":597},[287,10993,10731],{"class":623},[287,10995,1051],{"class":597},[287,10997,10998,11000,11002],{"class":289,"line":1120},[287,10999,10001],{"class":597},[287,11001,10027],{"class":623},[287,11003,1051],{"class":597},[287,11005,11006],{"class":289,"line":1134},[287,11007,10034],{"class":597},[287,11009,11010],{"class":289,"line":1140},[287,11011,10039],{"class":597},[287,11013,11014],{"class":289,"line":1148},[287,11015,10044],{"class":597},[287,11017,11018],{"class":289,"line":1162},[287,11019,2261],{"class":597},[287,11021,11022,11024,11026],{"class":289,"line":1167},[287,11023,2237],{"class":684},[287,11025,688],{"class":684},[287,11027,10057],{"class":597},[17,11029,11030,11031],{},"跳转路由（记得要加完整路径）：",[278,11032,11034],{"className":588,"code":11033,"language":590,"meta":283,"style":283},"\u003Crouter-link to=\"\u002Fnews\u002Fdetail\">xxxx\u003C\u002Frouter-link>\n\u003C!-- 或 -->\n\u003Crouter-link :to=\"{path:'\u002Fnews\u002Fdetail'}\">xxxx\u003C\u002Frouter-link>\n",[21,11035,11036,11055,11060],{"__ignoreMap":283},[287,11037,11038,11040,11042,11044,11046,11048,11051,11053],{"class":289,"line":290},[287,11039,598],{"class":597},[287,11041,10567],{"class":601},[287,11043,10195],{"class":616},[287,11045,620],{"class":597},[287,11047,10780],{"class":623},[287,11049,11050],{"class":597},">xxxx\u003C\u002F",[287,11052,10567],{"class":601},[287,11054,605],{"class":597},[287,11056,11057],{"class":289,"line":296},[287,11058,11059],{"class":702},"\u003C!-- 或 -->\n",[287,11061,11062,11064,11066,11068,11070,11072,11074,11076,11079,11081,11083,11085,11087],{"class":289,"line":302},[287,11063,598],{"class":597},[287,11065,10567],{"class":601},[287,11067,8165],{"class":597},[287,11069,10612],{"class":616},[287,11071,620],{"class":597},[287,11073,8173],{"class":623},[287,11075,10619],{"class":597},[287,11077,11078],{"class":623},"'\u002Fnews\u002Fdetail'",[287,11080,10624],{"class":597},[287,11082,8173],{"class":623},[287,11084,11050],{"class":597},[287,11086,10567],{"class":601},[287,11088,605],{"class":597},[17,11090,11091,11092,11095,11096,11099],{},"记得去",[21,11093,11094],{},"Home","组件中预留一个",[21,11097,11098],{},"\u003Crouter-view>",[278,11100,11102],{"className":588,"code":11101,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"news\">\n \u003Cnav class=\"news-list\">\n \u003CRouterLink v-for=\"news in newsList\" :key=\"news.id\" :to=\"{path:'\u002Fnews\u002Fdetail'}\">\n {{news.name}}\n \u003C\u002FRouterLink>\n \u003C\u002Fnav>\n \u003Cdiv class=\"news-detail\">\n \u003CRouterView\u002F>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[21,11103,11104,11112,11127,11143,11198,11203,11211,11219,11234,11242,11250,11258],{"__ignoreMap":283},[287,11105,11106,11108,11110],{"class":289,"line":290},[287,11107,598],{"class":597},[287,11109,602],{"class":601},[287,11111,605],{"class":597},[287,11113,11114,11116,11118,11120,11122,11125],{"class":289,"line":296},[287,11115,610],{"class":597},[287,11117,613],{"class":601},[287,11119,617],{"class":616},[287,11121,620],{"class":597},[287,11123,11124],{"class":623},"\"news\"",[287,11126,605],{"class":597},[287,11128,11129,11131,11134,11136,11138,11141],{"class":289,"line":302},[287,11130,631],{"class":597},[287,11132,11133],{"class":601},"nav",[287,11135,617],{"class":616},[287,11137,620],{"class":597},[287,11139,11140],{"class":623},"\"news-list\"",[287,11142,605],{"class":597},[287,11144,11145,11147,11149,11151,11153,11155,11158,11161,11164,11166,11168,11171,11173,11175,11178,11180,11182,11184,11186,11188,11190,11192,11194,11196],{"class":289,"line":309},[287,11146,2780],{"class":597},[287,11148,10192],{"class":601},[287,11150,2785],{"class":684},[287,11152,620],{"class":597},[287,11154,8173],{"class":623},[287,11156,11157],{"class":597},"news ",[287,11159,11160],{"class":684},"in",[287,11162,11163],{"class":597}," newsList",[287,11165,8173],{"class":623},[287,11167,8165],{"class":597},[287,11169,11170],{"class":616},"key",[287,11172,620],{"class":597},[287,11174,8173],{"class":623},[287,11176,11177],{"class":597},"news.id",[287,11179,8173],{"class":623},[287,11181,8165],{"class":597},[287,11183,10612],{"class":616},[287,11185,620],{"class":597},[287,11187,8173],{"class":623},[287,11189,10619],{"class":597},[287,11191,11078],{"class":623},[287,11193,10624],{"class":597},[287,11195,8173],{"class":623},[287,11197,605],{"class":597},[287,11199,11200],{"class":289,"line":315},[287,11201,11202],{"class":597}," {{news.name}}\n",[287,11204,11205,11207,11209],{"class":289,"line":321},[287,11206,8426],{"class":597},[287,11208,10192],{"class":601},[287,11210,605],{"class":597},[287,11212,11213,11215,11217],{"class":289,"line":326},[287,11214,2810],{"class":597},[287,11216,11133],{"class":601},[287,11218,605],{"class":597},[287,11220,11221,11223,11225,11227,11229,11232],{"class":289,"line":332},[287,11222,631],{"class":597},[287,11224,613],{"class":601},[287,11226,617],{"class":616},[287,11228,620],{"class":597},[287,11230,11231],{"class":623},"\"news-detail\"",[287,11233,605],{"class":597},[287,11235,11236,11238,11240],{"class":289,"line":338},[287,11237,2780],{"class":597},[287,11239,10302],{"class":601},[287,11241,7793],{"class":597},[287,11243,11244,11246,11248],{"class":289,"line":343},[287,11245,2810],{"class":597},[287,11247,613],{"class":601},[287,11249,605],{"class":597},[287,11251,11252,11254,11256],{"class":289,"line":349},[287,11253,645],{"class":597},[287,11255,613],{"class":601},[287,11257,605],{"class":597},[287,11259,11260,11262,11264],{"class":289,"line":355},[287,11261,654],{"class":597},[287,11263,602],{"class":601},[287,11265,605],{"class":597},[81,11267,11269],{"id":11268},"_48-路由传参","4.8. 【路由传参】",[1245,11271,11272],{"id":11272},"query参数",[157,11274,11275,11412],{},[17,11276,11277,11278],{},"传递参数",[278,11279,11281],{"className":588,"code":11280,"language":590,"meta":283,"style":283},"\u003C!-- 跳转并携带query参数（to的字符串写法） -->\n\u003Crouter-link to=\"\u002Fnews\u002Fdetail?a=1&b=2&content=欢迎你\">\n 跳转\n\u003C\u002Frouter-link>\n \n\u003C!-- 跳转并携带query参数（to的对象写法） -->\n\u003CRouterLink \n :to=\"{\n \u002F\u002Fname:'xiang', \u002F\u002F用name也可以跳转\n path:'\u002Fnews\u002Fdetail',\n query:{\n id:news.id,\n title:news.title,\n content:news.content\n }\n }\"\n>\n {{news.title}}\n\u003C\u002FRouterLink>\n",[21,11282,11283,11288,11303,11308,11316,11321,11326,11334,11347,11355,11363,11368,11373,11378,11383,11387,11395,11399,11404],{"__ignoreMap":283},[287,11284,11285],{"class":289,"line":290},[287,11286,11287],{"class":702},"\u003C!-- 跳转并携带query参数（to的字符串写法） -->\n",[287,11289,11290,11292,11294,11296,11298,11301],{"class":289,"line":296},[287,11291,598],{"class":597},[287,11293,10567],{"class":601},[287,11295,10195],{"class":616},[287,11297,620],{"class":597},[287,11299,11300],{"class":623},"\"\u002Fnews\u002Fdetail?a=1&b=2&content=欢迎你\"",[287,11302,605],{"class":597},[287,11304,11305],{"class":289,"line":302},[287,11306,11307],{"class":597}," 跳转\n",[287,11309,11310,11312,11314],{"class":289,"line":309},[287,11311,654],{"class":597},[287,11313,10567],{"class":601},[287,11315,605],{"class":597},[287,11317,11318],{"class":289,"line":315},[287,11319,11320],{"class":597}," \n",[287,11322,11323],{"class":289,"line":321},[287,11324,11325],{"class":702},"\u003C!-- 跳转并携带query参数（to的对象写法） -->\n",[287,11327,11328,11330,11332],{"class":289,"line":326},[287,11329,598],{"class":597},[287,11331,10192],{"class":601},[287,11333,79],{"class":597},[287,11335,11336,11339,11341,11343,11345],{"class":289,"line":332},[287,11337,11338],{"class":597}," :",[287,11340,10612],{"class":616},[287,11342,620],{"class":597},[287,11344,8173],{"class":623},[287,11346,4848],{"class":597},[287,11348,11349,11352],{"class":289,"line":338},[287,11350,11351],{"class":702}," \u002F\u002Fname:'xiang',",[287,11353,11354],{"class":702}," \u002F\u002F用name也可以跳转\n",[287,11356,11357,11359,11361],{"class":289,"line":343},[287,11358,10675],{"class":597},[287,11360,11078],{"class":623},[287,11362,1051],{"class":597},[287,11364,11365],{"class":289,"line":349},[287,11366,11367],{"class":597}," query:{\n",[287,11369,11370],{"class":289,"line":355},[287,11371,11372],{"class":597}," id:news.id,\n",[287,11374,11375],{"class":289,"line":361},[287,11376,11377],{"class":597}," title:news.title,\n",[287,11379,11380],{"class":289,"line":367},[287,11381,11382],{"class":597}," content:news.content\n",[287,11384,11385],{"class":289,"line":372},[287,11386,1697],{"class":597},[287,11388,11389,11392],{"class":289,"line":378},[287,11390,11391],{"class":597}," }",[287,11393,11394],{"class":623},"\"\n",[287,11396,11397],{"class":289,"line":384},[287,11398,605],{"class":597},[287,11400,11401],{"class":289,"line":555},[287,11402,11403],{"class":597}," {{news.title}}\n",[287,11405,11406,11408,11410],{"class":289,"line":561},[287,11407,654],{"class":597},[287,11409,10192],{"class":601},[287,11411,605],{"class":597},[17,11413,11414,11415],{},"接收参数：",[278,11416,11418],{"className":8048,"code":11417,"language":8050,"meta":283,"style":283},"import {useRoute} from 'vue-router'\nconst route = useRoute()\n\u002F\u002F 打印query参数\nconsole.log(route.query)\n",[21,11419,11420,11431,11445,11450],{"__ignoreMap":283},[287,11421,11422,11424,11427,11429],{"class":289,"line":290},[287,11423,2207],{"class":684},[287,11425,11426],{"class":597}," {useRoute} ",[287,11428,2213],{"class":684},[287,11430,9920],{"class":623},[287,11432,11433,11435,11438,11440,11443],{"class":289,"line":296},[287,11434,9965],{"class":684},[287,11436,11437],{"class":741}," route",[287,11439,4825],{"class":684},[287,11441,11442],{"class":616}," useRoute",[287,11444,4885],{"class":597},[287,11446,11447],{"class":289,"line":302},[287,11448,11449],{"class":702},"\u002F\u002F 打印query参数\n",[287,11451,11452,11454,11456],{"class":289,"line":309},[287,11453,3560],{"class":597},[287,11455,1612],{"class":616},[287,11457,11458],{"class":597},"(route.query)\n",[1245,11460,11461],{"id":11461},"params参数",[157,11463,11464,11583],{},[17,11465,11277,11466],{},[278,11467,11469],{"className":588,"code":11468,"language":590,"meta":283,"style":283},"\u003C!-- 跳转并携带params参数（to的字符串写法） -->\n\u003CRouterLink :to=\"`\u002Fnews\u002Fdetail\u002F001\u002F新闻001\u002F内容001`\">{{news.title}}\u003C\u002FRouterLink>\n \n\u003C!-- 跳转并携带params参数（to的对象写法） -->\n\u003CRouterLink \n :to=\"{\n name:'xiang', \u002F\u002F用name跳转\n params:{\n id:news.id,\n title:news.title,\n content:news.title\n }\n }\"\n>\n {{news.title}}\n\u003C\u002FRouterLink>\n",[21,11470,11471,11476,11498,11502,11507,11515,11527,11539,11544,11548,11552,11557,11561,11567,11571,11575],{"__ignoreMap":283},[287,11472,11473],{"class":289,"line":290},[287,11474,11475],{"class":702},"\u003C!-- 跳转并携带params参数（to的字符串写法） -->\n",[287,11477,11478,11480,11482,11484,11486,11488,11491,11494,11496],{"class":289,"line":296},[287,11479,598],{"class":597},[287,11481,10192],{"class":601},[287,11483,8165],{"class":597},[287,11485,10612],{"class":616},[287,11487,620],{"class":597},[287,11489,11490],{"class":623},"\"`\u002Fnews\u002Fdetail\u002F001\u002F新闻001\u002F内容001`\"",[287,11492,11493],{"class":597},">{{news.title}}\u003C\u002F",[287,11495,10192],{"class":601},[287,11497,605],{"class":597},[287,11499,11500],{"class":289,"line":302},[287,11501,11320],{"class":597},[287,11503,11504],{"class":289,"line":309},[287,11505,11506],{"class":702},"\u003C!-- 跳转并携带params参数（to的对象写法） -->\n",[287,11508,11509,11511,11513],{"class":289,"line":315},[287,11510,598],{"class":597},[287,11512,10192],{"class":601},[287,11514,79],{"class":597},[287,11516,11517,11519,11521,11523,11525],{"class":289,"line":321},[287,11518,11338],{"class":597},[287,11520,10612],{"class":616},[287,11522,620],{"class":597},[287,11524,8173],{"class":623},[287,11526,4848],{"class":597},[287,11528,11529,11531,11533,11536],{"class":289,"line":326},[287,11530,696],{"class":597},[287,11532,10952],{"class":623},[287,11534,11535],{"class":597},", ",[287,11537,11538],{"class":702},"\u002F\u002F用name跳转\n",[287,11540,11541],{"class":289,"line":332},[287,11542,11543],{"class":597}," params:{\n",[287,11545,11546],{"class":289,"line":338},[287,11547,11372],{"class":597},[287,11549,11550],{"class":289,"line":343},[287,11551,11377],{"class":597},[287,11553,11554],{"class":289,"line":349},[287,11555,11556],{"class":597}," content:news.title\n",[287,11558,11559],{"class":289,"line":355},[287,11560,1697],{"class":597},[287,11562,11563,11565],{"class":289,"line":361},[287,11564,11391],{"class":597},[287,11566,11394],{"class":623},[287,11568,11569],{"class":289,"line":367},[287,11570,605],{"class":597},[287,11572,11573],{"class":289,"line":372},[287,11574,11403],{"class":597},[287,11576,11577,11579,11581],{"class":289,"line":378},[287,11578,654],{"class":597},[287,11580,10192],{"class":601},[287,11582,605],{"class":597},[17,11584,11414,11585],{},[278,11586,11588],{"className":8048,"code":11587,"language":8050,"meta":283,"style":283},"import {useRoute} from 'vue-router'\nconst route = useRoute()\n\u002F\u002F 打印params参数\nconsole.log(route.params)\n",[21,11589,11590,11600,11612,11617],{"__ignoreMap":283},[287,11591,11592,11594,11596,11598],{"class":289,"line":290},[287,11593,2207],{"class":684},[287,11595,11426],{"class":597},[287,11597,2213],{"class":684},[287,11599,9920],{"class":623},[287,11601,11602,11604,11606,11608,11610],{"class":289,"line":296},[287,11603,9965],{"class":684},[287,11605,11437],{"class":741},[287,11607,4825],{"class":684},[287,11609,11442],{"class":616},[287,11611,4885],{"class":597},[287,11613,11614],{"class":289,"line":302},[287,11615,11616],{"class":702},"\u002F\u002F 打印params参数\n",[287,11618,11619,11621,11623],{"class":289,"line":309},[287,11620,3560],{"class":597},[287,11622,1612],{"class":616},[287,11624,11625],{"class":597},"(route.params)\n",[264,11627,11628,11644],{},[255,11629,11630,11631,11634,11635,11637,11638,11640,11641,93],{},"备注1：传递",[21,11632,11633],{},"params","参数时，若使用",[21,11636,10612],{},"的对象写法，必须使用",[21,11639,2339],{},"配置项，不能用",[21,11642,11643],{},"path",[255,11645,11646,11647,11649],{},"备注2：传递",[21,11648,11633],{},"参数时，需要提前在规则中占位。",[81,11651,11653],{"id":11652},"_49-路由的props配置","4.9. 【路由的props配置】",[255,11655,11656,11657,11660],{},"作用：让路由组件更方便的收到参数（可以将路由参数作为",[21,11658,11659],{},"props","传给组件）",[278,11662,11664],{"className":8048,"code":11663,"language":8050,"meta":283,"style":283},"{\n name:'xiang',\n path:'detail\u002F:id\u002F:title\u002F:content',\n component:Detail,\n\n \u002F\u002F props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件\n \u002F\u002F props:{a:1,b:2,c:3}, \n\n \u002F\u002F props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件\n \u002F\u002F props:true\n \n \u002F\u002F props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件\n props(route){\n return route.query\n }\n}\n",[21,11665,11666,11670,11681,11693,11701,11705,11710,11715,11719,11724,11729,11733,11738,11746,11754,11758],{"__ignoreMap":283},[287,11667,11668],{"class":289,"line":290},[287,11669,4848],{"class":597},[287,11671,11672,11675,11677,11679],{"class":289,"line":296},[287,11673,11674],{"class":616}," name",[287,11676,8076],{"class":597},[287,11678,10952],{"class":623},[287,11680,1051],{"class":597},[287,11682,11683,11686,11688,11691],{"class":289,"line":302},[287,11684,11685],{"class":616}," path",[287,11687,8076],{"class":597},[287,11689,11690],{"class":623},"'detail\u002F:id\u002F:title\u002F:content'",[287,11692,1051],{"class":597},[287,11694,11695,11698],{"class":289,"line":309},[287,11696,11697],{"class":616}," component",[287,11699,11700],{"class":597},":Detail,\n",[287,11702,11703],{"class":289,"line":315},[287,11704,306],{"emptyLinePlaceholder":305},[287,11706,11707],{"class":289,"line":321},[287,11708,11709],{"class":702}," \u002F\u002F props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件\n",[287,11711,11712],{"class":289,"line":326},[287,11713,11714],{"class":702}," \u002F\u002F props:{a:1,b:2,c:3}, \n",[287,11716,11717],{"class":289,"line":332},[287,11718,306],{"emptyLinePlaceholder":305},[287,11720,11721],{"class":289,"line":338},[287,11722,11723],{"class":702}," \u002F\u002F props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件\n",[287,11725,11726],{"class":289,"line":343},[287,11727,11728],{"class":702}," \u002F\u002F props:true\n",[287,11730,11731],{"class":289,"line":349},[287,11732,2040],{"class":597},[287,11734,11735],{"class":289,"line":355},[287,11736,11737],{"class":702}," \u002F\u002F props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件\n",[287,11739,11740,11743],{"class":289,"line":361},[287,11741,11742],{"class":616}," props",[287,11744,11745],{"class":597},"(route){\n",[287,11747,11748,11751],{"class":289,"line":367},[287,11749,11750],{"class":684}," return",[287,11752,11753],{"class":597}," route.query\n",[287,11755,11756],{"class":289,"line":372},[287,11757,708],{"class":597},[287,11759,11760],{"class":289,"line":378},[287,11761,1762],{"class":597},[81,11763,11765],{"id":11764},"_410-replace属性","4.10. 【 replace属性】",[157,11767,11768,11771,11792],{},[17,11769,11770],{},"作用：控制路由跳转时操作浏览器历史记录的模式。",[17,11772,11773,11774,11776,11777,4591,11780],{},"浏览器的历史记录有两种写入方式：分别为",[21,11775,9466],{},"和",[21,11778,11779],{},"replace",[14,11781,11782,11787],{},[17,11783,11784,11786],{},[21,11785,9466],{},"是追加历史记录（默认值）。",[17,11788,11789,11791],{},[21,11790,11779],{},"是替换当前记录。",[17,11793,11794,11795,11797,11798],{},"开启",[21,11796,11779],{},"模式：",[278,11799,11801],{"className":588,"code":11800,"language":590,"meta":283,"style":283},"\u003CRouterLink replace .......>News\u003C\u002FRouterLink>\n",[21,11802,11803],{"__ignoreMap":283},[287,11804,11805,11807,11809,11812,11815,11817],{"class":289,"line":290},[287,11806,598],{"class":597},[287,11808,10192],{"class":601},[287,11810,11811],{"class":616}," replace",[287,11813,11814],{"class":597}," .......>News\u003C\u002F",[287,11816,10192],{"class":601},[287,11818,605],{"class":597},[81,11820,11822],{"id":11821},"_411-编程式导航","4.11. 【编程式导航】",[255,11824,11825,11826,11776,11829,11832,11833],{},"路由组件的两个重要的属性：",[21,11827,11828],{},"$route",[21,11830,11831],{},"$router","变成了两个",[21,11834,11835],{},"hooks",[278,11837,11839],{"className":8048,"code":11838,"language":8050,"meta":283,"style":283},"import {useRoute,useRouter} from 'vue-router'\n\nconst route = useRoute()\nconst router = useRouter()\n\nconsole.log(route.query)\nconsole.log(route.parmas)\nconsole.log(router.push)\nconsole.log(router.replace)\n",[21,11840,11841,11852,11856,11868,11881,11885,11893,11902,11911],{"__ignoreMap":283},[287,11842,11843,11845,11848,11850],{"class":289,"line":290},[287,11844,2207],{"class":684},[287,11846,11847],{"class":597}," {useRoute,useRouter} ",[287,11849,2213],{"class":684},[287,11851,9920],{"class":623},[287,11853,11854],{"class":289,"line":296},[287,11855,306],{"emptyLinePlaceholder":305},[287,11857,11858,11860,11862,11864,11866],{"class":289,"line":302},[287,11859,9965],{"class":684},[287,11861,11437],{"class":741},[287,11863,4825],{"class":684},[287,11865,11442],{"class":616},[287,11867,4885],{"class":597},[287,11869,11870,11872,11874,11876,11879],{"class":289,"line":309},[287,11871,9965],{"class":684},[287,11873,9968],{"class":741},[287,11875,4825],{"class":684},[287,11877,11878],{"class":616}," useRouter",[287,11880,4885],{"class":597},[287,11882,11883],{"class":289,"line":315},[287,11884,306],{"emptyLinePlaceholder":305},[287,11886,11887,11889,11891],{"class":289,"line":321},[287,11888,3560],{"class":597},[287,11890,1612],{"class":616},[287,11892,11458],{"class":597},[287,11894,11895,11897,11899],{"class":289,"line":326},[287,11896,3560],{"class":597},[287,11898,1612],{"class":616},[287,11900,11901],{"class":597},"(route.parmas)\n",[287,11903,11904,11906,11908],{"class":289,"line":332},[287,11905,3560],{"class":597},[287,11907,1612],{"class":616},[287,11909,11910],{"class":597},"(router.push)\n",[287,11912,11913,11915,11917],{"class":289,"line":338},[287,11914,3560],{"class":597},[287,11916,1612],{"class":616},[287,11918,11919],{"class":597},"(router.replace)\n",[81,11921,11923],{"id":11922},"_412-重定向","4.12. 【重定向】",[157,11925,11926,11929],{},[17,11927,11928],{},"作用：将特定的路径，重新定向到已有路由。",[17,11930,11931,11932],{},"具体编码：",[278,11933,11935],{"className":8048,"code":11934,"language":8050,"meta":283,"style":283},"{\n path:'\u002F',\n redirect:'\u002Fabout'\n}\n",[21,11936,11937,11941,11952,11962],{"__ignoreMap":283},[287,11938,11939],{"class":289,"line":290},[287,11940,4848],{"class":597},[287,11942,11943,11945,11947,11950],{"class":289,"line":296},[287,11944,11685],{"class":616},[287,11946,8076],{"class":597},[287,11948,11949],{"class":623},"'\u002F'",[287,11951,1051],{"class":597},[287,11953,11954,11957,11959],{"class":289,"line":302},[287,11955,11956],{"class":616}," redirect",[287,11958,8076],{"class":597},[287,11960,11961],{"class":623},"'\u002Fabout'\n",[287,11963,11964],{"class":289,"line":309},[287,11965,1762],{"class":597},[10,11967,11969],{"id":11968},"_5-pinia","5. pinia",[81,11971,11973],{"id":11972},"_51准备一个效果","5.1【准备一个效果】",[74,11975],{"src":11976,"alt":11977,"style":11978},".\u002Fimages\u002Fpinia_example.gif","pinia_example","zoom:30%;border:3px solid",[81,11980,11982],{"id":11981},"_52搭建-pinia-环境","5.2【搭建 pinia 环境】",[255,11984,2188,11985],{},[21,11986,11987],{},"npm install pinia",[255,11989,11990,11991],{},"第二步：操作",[21,11992,11993],{},"src\u002Fmain.ts",[278,11995,11997],{"className":10851,"code":11996,"language":10853,"meta":283,"style":283},"import { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\n\u002F* 引入createPinia，用于创建pinia *\u002F\nimport { createPinia } from 'pinia'\n\n\u002F* 创建pinia *\u002F\nconst pinia = createPinia()\nconst app = createApp(App)\n\n\u002F* 使用插件 *\u002F{}\napp.use(pinia)\napp.mount('#app')\n",[21,11998,11999,12010,12022,12026,12031,12043,12047,12052,12066,12081,12085,12093,12102],{"__ignoreMap":283},[287,12000,12001,12003,12006,12008],{"class":289,"line":290},[287,12002,2207],{"class":684},[287,12004,12005],{"class":597}," { createApp } ",[287,12007,2213],{"class":684},[287,12009,2506],{"class":623},[287,12011,12012,12014,12017,12019],{"class":289,"line":296},[287,12013,2207],{"class":684},[287,12015,12016],{"class":597}," App ",[287,12018,2213],{"class":684},[287,12020,12021],{"class":623}," '.\u002FApp.vue'\n",[287,12023,12024],{"class":289,"line":302},[287,12025,306],{"emptyLinePlaceholder":305},[287,12027,12028],{"class":289,"line":309},[287,12029,12030],{"class":702},"\u002F* 引入createPinia，用于创建pinia *\u002F\n",[287,12032,12033,12035,12038,12040],{"class":289,"line":315},[287,12034,2207],{"class":684},[287,12036,12037],{"class":597}," { createPinia } ",[287,12039,2213],{"class":684},[287,12041,12042],{"class":623}," 'pinia'\n",[287,12044,12045],{"class":289,"line":321},[287,12046,306],{"emptyLinePlaceholder":305},[287,12048,12049],{"class":289,"line":326},[287,12050,12051],{"class":702},"\u002F* 创建pinia *\u002F\n",[287,12053,12054,12056,12059,12061,12064],{"class":289,"line":332},[287,12055,9965],{"class":684},[287,12057,12058],{"class":741}," pinia",[287,12060,4825],{"class":684},[287,12062,12063],{"class":616}," createPinia",[287,12065,4885],{"class":597},[287,12067,12068,12070,12073,12075,12078],{"class":289,"line":338},[287,12069,9965],{"class":684},[287,12071,12072],{"class":741}," app",[287,12074,4825],{"class":684},[287,12076,12077],{"class":616}," createApp",[287,12079,12080],{"class":597},"(App)\n",[287,12082,12083],{"class":289,"line":343},[287,12084,306],{"emptyLinePlaceholder":305},[287,12086,12087,12090],{"class":289,"line":349},[287,12088,12089],{"class":702},"\u002F* 使用插件 *\u002F",[287,12091,12092],{"class":597},"{}\n",[287,12094,12095,12097,12099],{"class":289,"line":355},[287,12096,10087],{"class":597},[287,12098,10090],{"class":616},[287,12100,12101],{"class":597},"(pinia)\n",[287,12103,12104,12106,12108,12110,12112],{"class":289,"line":361},[287,12105,10087],{"class":597},[287,12107,10104],{"class":616},[287,12109,1181],{"class":597},[287,12111,10109],{"class":623},[287,12113,2529],{"class":597},[255,12115,12116,12117,12120],{},"此时开发者工具中已经有了",[21,12118,12119],{},"pinia","选项",[74,12122],{"src":12123,"style":12124},"https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F35780599\u002F1684309952481-c67f67f9-d1a3-4d69-8bd6-2b381e003f31.png","zoom:80%;border:1px solid black;border-radius:10px",[81,12126,12128],{"id":12127},"_53存储读取数据","5.3【存储+读取数据】",[157,12130,12131,12151,12170,12286,12437],{},[17,12132,12133,12136,12137,43,12140,12143,12144,43,12147,12150],{},[21,12134,12135],{},"Store","是一个保存：",[1326,12138,12139],{},"状态",[1326,12141,12142],{},"业务逻辑"," 的实体，每个组件都可以",[1326,12145,12146],{},"读取",[1326,12148,12149],{},"写入","它。",[17,12152,12153,12154,43,12157,43,12159,12162,12163,12165,12166,4926,12168,93],{},"它有三个概念：",[21,12155,12156],{},"state",[21,12158,4610],{},[21,12160,12161],{},"action","，相当于组件中的： ",[21,12164,231],{},"、 ",[21,12167,189],{},[21,12169,1261],{},[17,12171,11931,12172,12175],{},[21,12173,12174],{},"src\u002Fstore\u002Fcount.ts",[278,12176,12178],{"className":10851,"code":12177,"language":10853,"meta":283,"style":283},"\u002F\u002F 引入defineStore用于创建store\nimport {defineStore} from 'pinia'\n\n\u002F\u002F 定义并暴露一个store\nexport const useCountStore = defineStore('count',{\n \u002F\u002F 动作\n actions:{},\n \u002F\u002F 状态\n state(){\n return {\n sum:6\n }\n },\n \u002F\u002F 计算\n getters:{}\n})\n",[21,12179,12180,12185,12196,12200,12205,12228,12233,12238,12243,12250,12256,12264,12268,12272,12277,12282],{"__ignoreMap":283},[287,12181,12182],{"class":289,"line":290},[287,12183,12184],{"class":702},"\u002F\u002F 引入defineStore用于创建store\n",[287,12186,12187,12189,12192,12194],{"class":289,"line":296},[287,12188,2207],{"class":684},[287,12190,12191],{"class":597}," {defineStore} ",[287,12193,2213],{"class":684},[287,12195,12042],{"class":623},[287,12197,12198],{"class":289,"line":302},[287,12199,306],{"emptyLinePlaceholder":305},[287,12201,12202],{"class":289,"line":309},[287,12203,12204],{"class":702},"\u002F\u002F 定义并暴露一个store\n",[287,12206,12207,12209,12212,12215,12217,12220,12222,12225],{"class":289,"line":315},[287,12208,2237],{"class":684},[287,12210,12211],{"class":684}," const",[287,12213,12214],{"class":741}," useCountStore",[287,12216,4825],{"class":684},[287,12218,12219],{"class":616}," defineStore",[287,12221,1181],{"class":597},[287,12223,12224],{"class":623},"'count'",[287,12226,12227],{"class":597},",{\n",[287,12229,12230],{"class":289,"line":321},[287,12231,12232],{"class":702}," \u002F\u002F 动作\n",[287,12234,12235],{"class":289,"line":326},[287,12236,12237],{"class":597}," actions:{},\n",[287,12239,12240],{"class":289,"line":332},[287,12241,12242],{"class":702}," \u002F\u002F 状态\n",[287,12244,12245,12248],{"class":289,"line":338},[287,12246,12247],{"class":616}," state",[287,12249,1117],{"class":597},[287,12251,12252,12254],{"class":289,"line":343},[287,12253,11750],{"class":684},[287,12255,691],{"class":597},[287,12257,12258,12261],{"class":289,"line":349},[287,12259,12260],{"class":597}," sum:",[287,12262,12263],{"class":741},"6\n",[287,12265,12266],{"class":289,"line":355},[287,12267,1697],{"class":597},[287,12269,12270],{"class":289,"line":361},[287,12271,10689],{"class":597},[287,12273,12274],{"class":289,"line":367},[287,12275,12276],{"class":702}," \u002F\u002F 计算\n",[287,12278,12279],{"class":289,"line":372},[287,12280,12281],{"class":597}," getters:{}\n",[287,12283,12284],{"class":289,"line":378},[287,12285,2261],{"class":597},[17,12287,11931,12288,12291],{},[21,12289,12290],{},"src\u002Fstore\u002Ftalk.ts",[278,12292,12294],{"className":8048,"code":12293,"language":8050,"meta":283,"style":283},"\u002F\u002F 引入defineStore用于创建store\nimport {defineStore} from 'pinia'\n\n\u002F\u002F 定义并暴露一个store\nexport const useTalkStore = defineStore('talk',{\n \u002F\u002F 动作\n actions:{},\n \u002F\u002F 状态\n state(){\n return {\n talkList:[\n {id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},\n {id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},\n {id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}\n ]\n }\n },\n \u002F\u002F 计算\n getters:{}\n})\n",[21,12295,12296,12300,12310,12314,12318,12338,12342,12346,12350,12356,12362,12367,12383,12398,12412,12417,12421,12425,12429,12433],{"__ignoreMap":283},[287,12297,12298],{"class":289,"line":290},[287,12299,12184],{"class":702},[287,12301,12302,12304,12306,12308],{"class":289,"line":296},[287,12303,2207],{"class":684},[287,12305,12191],{"class":597},[287,12307,2213],{"class":684},[287,12309,12042],{"class":623},[287,12311,12312],{"class":289,"line":302},[287,12313,306],{"emptyLinePlaceholder":305},[287,12315,12316],{"class":289,"line":309},[287,12317,12204],{"class":702},[287,12319,12320,12322,12324,12327,12329,12331,12333,12336],{"class":289,"line":315},[287,12321,2237],{"class":684},[287,12323,12211],{"class":684},[287,12325,12326],{"class":741}," useTalkStore",[287,12328,4825],{"class":684},[287,12330,12219],{"class":616},[287,12332,1181],{"class":597},[287,12334,12335],{"class":623},"'talk'",[287,12337,12227],{"class":597},[287,12339,12340],{"class":289,"line":321},[287,12341,12232],{"class":702},[287,12343,12344],{"class":289,"line":326},[287,12345,12237],{"class":597},[287,12347,12348],{"class":289,"line":332},[287,12349,12242],{"class":702},[287,12351,12352,12354],{"class":289,"line":338},[287,12353,12247],{"class":616},[287,12355,1117],{"class":597},[287,12357,12358,12360],{"class":289,"line":343},[287,12359,11750],{"class":684},[287,12361,691],{"class":597},[287,12363,12364],{"class":289,"line":349},[287,12365,12366],{"class":597}," talkList:[\n",[287,12368,12369,12372,12375,12378,12381],{"class":289,"line":355},[287,12370,12371],{"class":597}," {id:",[287,12373,12374],{"class":623},"'yuysada01'",[287,12376,12377],{"class":597},",content:",[287,12379,12380],{"class":623},"'你今天有点怪，哪里怪？怪好看的！'",[287,12382,8298],{"class":597},[287,12384,12385,12388,12391,12393,12396],{"class":289,"line":361},[287,12386,12387],{"class":597}," {id:",[287,12389,12390],{"class":623},"'yuysada02'",[287,12392,12377],{"class":597},[287,12394,12395],{"class":623},"'草莓、蓝莓、蔓越莓，你想我了没？'",[287,12397,8298],{"class":597},[287,12399,12400,12402,12405,12407,12410],{"class":289,"line":367},[287,12401,12371],{"class":597},[287,12403,12404],{"class":623},"'yuysada03'",[287,12406,12377],{"class":597},[287,12408,12409],{"class":623},"'心里给你留了一块地，我的死心塌地'",[287,12411,1762],{"class":597},[287,12413,12414],{"class":289,"line":372},[287,12415,12416],{"class":597}," ]\n",[287,12418,12419],{"class":289,"line":378},[287,12420,1697],{"class":597},[287,12422,12423],{"class":289,"line":384},[287,12424,10689],{"class":597},[287,12426,12427],{"class":289,"line":555},[287,12428,12276],{"class":702},[287,12430,12431],{"class":289,"line":561},[287,12432,12281],{"class":597},[287,12434,12435],{"class":289,"line":567},[287,12436,2261],{"class":597},[17,12438,12439,12440,12442,12443,12552],{},"组件中使用",[21,12441,12156],{},"中的数据",[278,12444,12446],{"className":588,"code":12445,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Ch2>当前求和为：{{ sumStore.sum }}\u003C\u002Fh2>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Count\">\n \u002F\u002F 引入对应的useXxxxxStore \n import {useSumStore} from '@\u002Fstore\u002Fsum'\n \n \u002F\u002F 调用useXxxxxStore得到对应的store\n const sumStore = useSumStore()\n\u003C\u002Fscript>\n",[21,12447,12448,12456,12469,12477,12481,12504,12509,12521,12525,12530,12544],{"__ignoreMap":283},[287,12449,12450,12452,12454],{"class":289,"line":290},[287,12451,598],{"class":597},[287,12453,602],{"class":601},[287,12455,605],{"class":597},[287,12457,12458,12460,12462,12465,12467],{"class":289,"line":296},[287,12459,610],{"class":597},[287,12461,81],{"class":601},[287,12463,12464],{"class":597},">当前求和为：{{ sumStore.sum }}\u003C\u002F",[287,12466,81],{"class":601},[287,12468,605],{"class":597},[287,12470,12471,12473,12475],{"class":289,"line":302},[287,12472,654],{"class":597},[287,12474,602],{"class":601},[287,12476,605],{"class":597},[287,12478,12479],{"class":289,"line":309},[287,12480,306],{"emptyLinePlaceholder":305},[287,12482,12483,12485,12487,12489,12491,12493,12495,12497,12499,12502],{"class":289,"line":315},[287,12484,598],{"class":597},[287,12486,669],{"class":601},[287,12488,2010],{"class":616},[287,12490,672],{"class":616},[287,12492,620],{"class":597},[287,12494,677],{"class":623},[287,12496,2486],{"class":616},[287,12498,620],{"class":597},[287,12500,12501],{"class":623},"\"Count\"",[287,12503,605],{"class":597},[287,12505,12506],{"class":289,"line":321},[287,12507,12508],{"class":702}," \u002F\u002F 引入对应的useXxxxxStore \n",[287,12510,12511,12513,12516,12518],{"class":289,"line":326},[287,12512,2498],{"class":684},[287,12514,12515],{"class":597}," {useSumStore} ",[287,12517,2213],{"class":684},[287,12519,12520],{"class":623}," '@\u002Fstore\u002Fsum'\n",[287,12522,12523],{"class":289,"line":332},[287,12524,2040],{"class":597},[287,12526,12527],{"class":289,"line":338},[287,12528,12529],{"class":702}," \u002F\u002F 调用useXxxxxStore得到对应的store\n",[287,12531,12532,12534,12537,12539,12542],{"class":289,"line":343},[287,12533,4819],{"class":684},[287,12535,12536],{"class":741}," sumStore",[287,12538,4825],{"class":684},[287,12540,12541],{"class":616}," useSumStore",[287,12543,4885],{"class":597},[287,12545,12546,12548,12550],{"class":289,"line":349},[287,12547,654],{"class":597},[287,12549,669],{"class":601},[287,12551,605],{"class":597},[278,12553,12555],{"className":588,"code":12554,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cul>\n \u003Cli v-for=\"talk in talkStore.talkList\" :key=\"talk.id\">\n {{ talk.content }}\n \u003C\u002Fli>\n \u003C\u002Ful>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Count\">\n import axios from 'axios'\n import {useTalkStore} from '@\u002Fstore\u002Ftalk'\n\n const talkStore = useTalkStore()\n\u003C\u002Fscript>\n",[21,12556,12557,12565,12573,12595,12600,12608,12616,12624,12628,12650,12661,12673,12677,12690],{"__ignoreMap":283},[287,12558,12559,12561,12563],{"class":289,"line":290},[287,12560,598],{"class":597},[287,12562,602],{"class":601},[287,12564,605],{"class":597},[287,12566,12567,12569,12571],{"class":289,"line":296},[287,12568,631],{"class":597},[287,12570,14],{"class":601},[287,12572,605],{"class":597},[287,12574,12575,12577,12579,12581,12583,12586,12588,12590,12593],{"class":289,"line":302},[287,12576,631],{"class":597},[287,12578,17],{"class":601},[287,12580,2785],{"class":616},[287,12582,620],{"class":597},[287,12584,12585],{"class":623},"\"talk in talkStore.talkList\"",[287,12587,2793],{"class":616},[287,12589,620],{"class":597},[287,12591,12592],{"class":623},"\"talk.id\"",[287,12594,605],{"class":597},[287,12596,12597],{"class":289,"line":309},[287,12598,12599],{"class":597}," {{ talk.content }}\n",[287,12601,12602,12604,12606],{"class":289,"line":315},[287,12603,2810],{"class":597},[287,12605,17],{"class":601},[287,12607,605],{"class":597},[287,12609,12610,12612,12614],{"class":289,"line":321},[287,12611,645],{"class":597},[287,12613,14],{"class":601},[287,12615,605],{"class":597},[287,12617,12618,12620,12622],{"class":289,"line":326},[287,12619,654],{"class":597},[287,12621,602],{"class":601},[287,12623,605],{"class":597},[287,12625,12626],{"class":289,"line":332},[287,12627,306],{"emptyLinePlaceholder":305},[287,12629,12630,12632,12634,12636,12638,12640,12642,12644,12646,12648],{"class":289,"line":338},[287,12631,598],{"class":597},[287,12633,669],{"class":601},[287,12635,2010],{"class":616},[287,12637,672],{"class":616},[287,12639,620],{"class":597},[287,12641,677],{"class":623},[287,12643,2486],{"class":616},[287,12645,620],{"class":597},[287,12647,12501],{"class":623},[287,12649,605],{"class":597},[287,12651,12652,12654,12657,12659],{"class":289,"line":343},[287,12653,2498],{"class":684},[287,12655,12656],{"class":597}," axios ",[287,12658,2213],{"class":684},[287,12660,9364],{"class":623},[287,12662,12663,12665,12668,12670],{"class":289,"line":349},[287,12664,2498],{"class":684},[287,12666,12667],{"class":597}," {useTalkStore} ",[287,12669,2213],{"class":684},[287,12671,12672],{"class":623}," '@\u002Fstore\u002Ftalk'\n",[287,12674,12675],{"class":289,"line":355},[287,12676,306],{"emptyLinePlaceholder":305},[287,12678,12679,12681,12684,12686,12688],{"class":289,"line":361},[287,12680,4819],{"class":684},[287,12682,12683],{"class":741}," talkStore",[287,12685,4825],{"class":684},[287,12687,12326],{"class":616},[287,12689,4885],{"class":597},[287,12691,12692,12694,12696],{"class":289,"line":367},[287,12693,654],{"class":597},[287,12695,669],{"class":601},[287,12697,605],{"class":597},[81,12699,12701],{"id":12700},"_54修改数据三种方式","5.4.【修改数据】(三种方式)",[157,12703,12704,12722,12762,12950],{},[17,12705,12706,12707],{},"第一种修改方式，直接修改",[278,12708,12710],{"className":10851,"code":12709,"language":10853,"meta":283,"style":283},"countStore.sum = 666\n",[21,12711,12712],{"__ignoreMap":283},[287,12713,12714,12717,12719],{"class":289,"line":290},[287,12715,12716],{"class":597},"countStore.sum ",[287,12718,620],{"class":684},[287,12720,12721],{"class":741}," 666\n",[17,12723,12724,12725],{},"第二种修改方式：批量修改",[278,12726,12728],{"className":10851,"code":12727,"language":10853,"meta":283,"style":283},"countStore.$patch({\n sum:999,\n school:'atguigu'\n})\n",[21,12729,12730,12740,12750,12758],{"__ignoreMap":283},[287,12731,12732,12735,12738],{"class":289,"line":290},[287,12733,12734],{"class":597},"countStore.",[287,12736,12737],{"class":616},"$patch",[287,12739,2245],{"class":597},[287,12741,12742,12745,12748],{"class":289,"line":296},[287,12743,12744],{"class":597}," sum:",[287,12746,12747],{"class":741},"999",[287,12749,1051],{"class":597},[287,12751,12752,12755],{"class":289,"line":302},[287,12753,12754],{"class":597}," school:",[287,12756,12757],{"class":623},"'atguigu'\n",[287,12759,12760],{"class":289,"line":309},[287,12761,2261],{"class":597},[17,12763,12764,12765,12767,12768,12770,12771],{},"第三种修改方式：借助",[21,12766,12161],{},"修改（",[21,12769,12161],{},"中可以编写一些业务逻辑）",[278,12772,12774],{"className":8048,"code":12773,"language":8050,"meta":283,"style":283},"import { defineStore } from 'pinia'\n\nexport const useCountStore = defineStore('count', {\n \u002F*************\u002F\n actions: {\n \u002F\u002F加\n increment(value:number) {\n if (this.sum \u003C 10) {\n \u002F\u002F操作countStore中的sum\n this.sum += value\n }\n },\n \u002F\u002F减\n decrement(value:number){\n if(this.sum > 1){\n this.sum -= value\n }\n }\n },\n \u002F*************\u002F\n})\n",[21,12775,12776,12787,12791,12810,12815,12820,12825,12841,12860,12865,12875,12879,12883,12888,12903,12920,12930,12934,12938,12942,12946],{"__ignoreMap":283},[287,12777,12778,12780,12783,12785],{"class":289,"line":290},[287,12779,2207],{"class":684},[287,12781,12782],{"class":597}," { defineStore } ",[287,12784,2213],{"class":684},[287,12786,12042],{"class":623},[287,12788,12789],{"class":289,"line":296},[287,12790,306],{"emptyLinePlaceholder":305},[287,12792,12793,12795,12797,12799,12801,12803,12805,12807],{"class":289,"line":302},[287,12794,2237],{"class":684},[287,12796,12211],{"class":684},[287,12798,12214],{"class":741},[287,12800,4825],{"class":684},[287,12802,12219],{"class":616},[287,12804,1181],{"class":597},[287,12806,12224],{"class":623},[287,12808,12809],{"class":597},", {\n",[287,12811,12812],{"class":289,"line":309},[287,12813,12814],{"class":702}," \u002F*************\u002F\n",[287,12816,12817],{"class":289,"line":315},[287,12818,12819],{"class":597}," actions: {\n",[287,12821,12822],{"class":289,"line":321},[287,12823,12824],{"class":702}," \u002F\u002F加\n",[287,12826,12827,12829,12831,12833,12835,12838],{"class":289,"line":326},[287,12828,9305],{"class":616},[287,12830,1181],{"class":597},[287,12832,2305],{"class":4453},[287,12834,8076],{"class":684},[287,12836,12837],{"class":741},"number",[287,12839,12840],{"class":597},") {\n",[287,12842,12843,12846,12849,12851,12854,12856,12858],{"class":289,"line":332},[287,12844,12845],{"class":684}," if",[287,12847,12848],{"class":597}," (",[287,12850,1184],{"class":741},[287,12852,12853],{"class":597},".sum ",[287,12855,598],{"class":684},[287,12857,767],{"class":741},[287,12859,12840],{"class":597},[287,12861,12862],{"class":289,"line":338},[287,12863,12864],{"class":702}," \u002F\u002F操作countStore中的sum\n",[287,12866,12867,12869,12871,12873],{"class":289,"line":343},[287,12868,1123],{"class":741},[287,12870,12853],{"class":597},[287,12872,1156],{"class":684},[287,12874,7148],{"class":597},[287,12876,12877],{"class":289,"line":349},[287,12878,1099],{"class":597},[287,12880,12881],{"class":289,"line":355},[287,12882,1104],{"class":597},[287,12884,12885],{"class":289,"line":361},[287,12886,12887],{"class":702}," \u002F\u002F减\n",[287,12889,12890,12893,12895,12897,12899,12901],{"class":289,"line":367},[287,12891,12892],{"class":616}," decrement",[287,12894,1181],{"class":597},[287,12896,2305],{"class":4453},[287,12898,8076],{"class":684},[287,12900,12837],{"class":741},[287,12902,4457],{"class":597},[287,12904,12905,12907,12909,12911,12913,12916,12918],{"class":289,"line":372},[287,12906,12845],{"class":684},[287,12908,1181],{"class":597},[287,12910,1184],{"class":741},[287,12912,12853],{"class":597},[287,12914,12915],{"class":684},">",[287,12917,1638],{"class":741},[287,12919,4457],{"class":597},[287,12921,12922,12924,12926,12928],{"class":289,"line":378},[287,12923,1123],{"class":741},[287,12925,12853],{"class":597},[287,12927,9284],{"class":684},[287,12929,7148],{"class":597},[287,12931,12932],{"class":289,"line":384},[287,12933,1099],{"class":597},[287,12935,12936],{"class":289,"line":555},[287,12937,1697],{"class":597},[287,12939,12940],{"class":289,"line":561},[287,12941,10689],{"class":597},[287,12943,12944],{"class":289,"line":567},[287,12945,12814],{"class":702},[287,12947,12948],{"class":289,"line":573},[287,12949,2261],{"class":597},[17,12951,12952,12953,12955,12956],{},"组件中调用",[21,12954,12161],{},"即可",[278,12957,12959],{"className":8048,"code":12958,"language":8050,"meta":283,"style":283},"\u002F\u002F 使用countStore\nconst countStore = useCountStore()\n\n\u002F\u002F 调用对应action\ncountStore.incrementOdd(n.value)\n",[21,12960,12961,12966,12979,12983,12988],{"__ignoreMap":283},[287,12962,12963],{"class":289,"line":290},[287,12964,12965],{"class":702},"\u002F\u002F 使用countStore\n",[287,12967,12968,12970,12973,12975,12977],{"class":289,"line":296},[287,12969,9965],{"class":684},[287,12971,12972],{"class":741}," countStore",[287,12974,4825],{"class":684},[287,12976,12214],{"class":616},[287,12978,4885],{"class":597},[287,12980,12981],{"class":289,"line":302},[287,12982,306],{"emptyLinePlaceholder":305},[287,12984,12985],{"class":289,"line":309},[287,12986,12987],{"class":702},"\u002F\u002F 调用对应action\n",[287,12989,12990,12992,12995],{"class":289,"line":315},[287,12991,12734],{"class":597},[287,12993,12994],{"class":616},"incrementOdd",[287,12996,12997],{"class":597},"(n.value)\n",[81,12999,13001],{"id":13000},"_55storetorefs","5.5.【storeToRefs】",[14,13003,13004,13018],{},[17,13005,13006,13007,13010,13011,13014,13015,13017],{},"借助",[21,13008,13009],{},"storeToRefs","将",[21,13012,13013],{},"store","中的数据转为",[21,13016,180],{},"对象，方便在模板中使用。",[17,13019,4915,13020,13022,13023,13025,13026,1226,13028,13030,13031,13033],{},[21,13021,12119],{},"提供的",[21,13024,13009],{},"只会将数据做转换，而",[21,13027,8360],{},[21,13029,3762],{},"会转换",[21,13032,13013],{},"中数据。",[278,13035,13037],{"className":588,"code":13036,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"count\">\n \u003Ch2>当前求和为：{{sum}}\u003C\u002Fh2>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Count\">\n import { useCountStore } from '@\u002Fstore\u002Fcount'\n \u002F* 引入storeToRefs *\u002F\n import { storeToRefs } from 'pinia'\n\n \u002F* 得到countStore *\u002F\n const countStore = useCountStore()\n \u002F* 使用storeToRefs转换countStore，随后解构 *\u002F\n const {sum} = storeToRefs(countStore)\n\u003C\u002Fscript>\n\n",[21,13038,13039,13047,13062,13075,13083,13091,13095,13117,13129,13134,13145,13149,13154,13166,13171,13191],{"__ignoreMap":283},[287,13040,13041,13043,13045],{"class":289,"line":290},[287,13042,598],{"class":597},[287,13044,602],{"class":601},[287,13046,605],{"class":597},[287,13048,13049,13051,13053,13055,13057,13060],{"class":289,"line":296},[287,13050,631],{"class":597},[287,13052,613],{"class":601},[287,13054,617],{"class":616},[287,13056,620],{"class":597},[287,13058,13059],{"class":623},"\"count\"",[287,13061,605],{"class":597},[287,13063,13064,13067,13069,13071,13073],{"class":289,"line":302},[287,13065,13066],{"class":597}," \u003C",[287,13068,81],{"class":601},[287,13070,4685],{"class":597},[287,13072,81],{"class":601},[287,13074,605],{"class":597},[287,13076,13077,13079,13081],{"class":289,"line":309},[287,13078,2810],{"class":597},[287,13080,613],{"class":601},[287,13082,605],{"class":597},[287,13084,13085,13087,13089],{"class":289,"line":315},[287,13086,654],{"class":597},[287,13088,602],{"class":601},[287,13090,605],{"class":597},[287,13092,13093],{"class":289,"line":321},[287,13094,306],{"emptyLinePlaceholder":305},[287,13096,13097,13099,13101,13103,13105,13107,13109,13111,13113,13115],{"class":289,"line":326},[287,13098,598],{"class":597},[287,13100,669],{"class":601},[287,13102,2010],{"class":616},[287,13104,672],{"class":616},[287,13106,620],{"class":597},[287,13108,677],{"class":623},[287,13110,2486],{"class":616},[287,13112,620],{"class":597},[287,13114,12501],{"class":623},[287,13116,605],{"class":597},[287,13118,13119,13121,13124,13126],{"class":289,"line":332},[287,13120,2498],{"class":684},[287,13122,13123],{"class":597}," { useCountStore } ",[287,13125,2213],{"class":684},[287,13127,13128],{"class":623}," '@\u002Fstore\u002Fcount'\n",[287,13130,13131],{"class":289,"line":338},[287,13132,13133],{"class":702}," \u002F* 引入storeToRefs *\u002F\n",[287,13135,13136,13138,13141,13143],{"class":289,"line":343},[287,13137,2498],{"class":684},[287,13139,13140],{"class":597}," { storeToRefs } ",[287,13142,2213],{"class":684},[287,13144,12042],{"class":623},[287,13146,13147],{"class":289,"line":349},[287,13148,306],{"emptyLinePlaceholder":305},[287,13150,13151],{"class":289,"line":355},[287,13152,13153],{"class":702}," \u002F* 得到countStore *\u002F\n",[287,13155,13156,13158,13160,13162,13164],{"class":289,"line":361},[287,13157,4819],{"class":684},[287,13159,12972],{"class":741},[287,13161,4825],{"class":684},[287,13163,12214],{"class":616},[287,13165,4885],{"class":597},[287,13167,13168],{"class":289,"line":367},[287,13169,13170],{"class":702}," \u002F* 使用storeToRefs转换countStore，随后解构 *\u002F\n",[287,13172,13173,13175,13177,13180,13183,13185,13188],{"class":289,"line":372},[287,13174,4819],{"class":684},[287,13176,8243],{"class":597},[287,13178,13179],{"class":741},"sum",[287,13181,13182],{"class":597},"} ",[287,13184,620],{"class":684},[287,13186,13187],{"class":616}," storeToRefs",[287,13189,13190],{"class":597},"(countStore)\n",[287,13192,13193,13195,13197],{"class":289,"line":378},[287,13194,654],{"class":597},[287,13196,669],{"class":601},[287,13198,605],{"class":597},[81,13200,13202],{"id":13201},"_56getters","5.6.【getters】",[157,13204,13205,13215,13401],{},[17,13206,13207,13208,13210,13211,13214],{},"概念：当",[21,13209,12156],{},"中的数据，需要经过处理后再使用时，可以使用",[21,13212,13213],{},"getters","配置。",[17,13216,13217,13218,13214,13220],{},"追加",[21,13219,13213],{},[278,13221,13223],{"className":8048,"code":13222,"language":8050,"meta":283,"style":283},"\u002F\u002F 引入defineStore用于创建store\nimport {defineStore} from 'pinia'\n\n\u002F\u002F 定义并暴露一个store\nexport const useCountStore = defineStore('count',{\n \u002F\u002F 动作\n actions:{\n \u002F************\u002F\n },\n \u002F\u002F 状态\n state(){\n return {\n sum:1,\n school:'atguigu'\n }\n },\n \u002F\u002F 计算\n getters:{\n bigSum:(state):number => state.sum *10,\n upperSchool():string{\n return this. school.toUpperCase()\n }\n }\n})\n",[21,13224,13225,13229,13239,13243,13247,13265,13269,13274,13279,13283,13287,13293,13299,13307,13314,13318,13322,13326,13331,13360,13374,13389,13393,13397],{"__ignoreMap":283},[287,13226,13227],{"class":289,"line":290},[287,13228,12184],{"class":702},[287,13230,13231,13233,13235,13237],{"class":289,"line":296},[287,13232,2207],{"class":684},[287,13234,12191],{"class":597},[287,13236,2213],{"class":684},[287,13238,12042],{"class":623},[287,13240,13241],{"class":289,"line":302},[287,13242,306],{"emptyLinePlaceholder":305},[287,13244,13245],{"class":289,"line":309},[287,13246,12204],{"class":702},[287,13248,13249,13251,13253,13255,13257,13259,13261,13263],{"class":289,"line":315},[287,13250,2237],{"class":684},[287,13252,12211],{"class":684},[287,13254,12214],{"class":741},[287,13256,4825],{"class":684},[287,13258,12219],{"class":616},[287,13260,1181],{"class":597},[287,13262,12224],{"class":623},[287,13264,12227],{"class":597},[287,13266,13267],{"class":289,"line":321},[287,13268,12232],{"class":702},[287,13270,13271],{"class":289,"line":326},[287,13272,13273],{"class":597}," actions:{\n",[287,13275,13276],{"class":289,"line":332},[287,13277,13278],{"class":702}," \u002F************\u002F\n",[287,13280,13281],{"class":289,"line":338},[287,13282,10689],{"class":597},[287,13284,13285],{"class":289,"line":343},[287,13286,12242],{"class":702},[287,13288,13289,13291],{"class":289,"line":349},[287,13290,12247],{"class":616},[287,13292,1117],{"class":597},[287,13294,13295,13297],{"class":289,"line":355},[287,13296,11750],{"class":684},[287,13298,691],{"class":597},[287,13300,13301,13303,13305],{"class":289,"line":361},[287,13302,12260],{"class":597},[287,13304,4518],{"class":741},[287,13306,1051],{"class":597},[287,13308,13309,13312],{"class":289,"line":367},[287,13310,13311],{"class":597}," school:",[287,13313,12757],{"class":623},[287,13315,13316],{"class":289,"line":372},[287,13317,1697],{"class":597},[287,13319,13320],{"class":289,"line":378},[287,13321,10689],{"class":597},[287,13323,13324],{"class":289,"line":384},[287,13325,12276],{"class":702},[287,13327,13328],{"class":289,"line":555},[287,13329,13330],{"class":597}," getters:{\n",[287,13332,13333,13336,13339,13341,13343,13345,13347,13350,13353,13356,13358],{"class":289,"line":561},[287,13334,13335],{"class":616}," bigSum",[287,13337,13338],{"class":597},":(",[287,13340,12156],{"class":4453},[287,13342,4843],{"class":597},[287,13344,8076],{"class":684},[287,13346,12837],{"class":741},[287,13348,13349],{"class":684}," =>",[287,13351,13352],{"class":597}," state.sum ",[287,13354,13355],{"class":684},"*",[287,13357,782],{"class":741},[287,13359,1051],{"class":597},[287,13361,13362,13365,13368,13370,13372],{"class":289,"line":567},[287,13363,13364],{"class":616}," upperSchool",[287,13366,13367],{"class":597},"()",[287,13369,8076],{"class":684},[287,13371,8079],{"class":741},[287,13373,4848],{"class":597},[287,13375,13376,13378,13381,13384,13387],{"class":289,"line":573},[287,13377,1064],{"class":684},[287,13379,13380],{"class":741}," this",[287,13382,13383],{"class":597},". school.",[287,13385,13386],{"class":616},"toUpperCase",[287,13388,4885],{"class":597},[287,13390,13391],{"class":289,"line":579},[287,13392,1697],{"class":597},[287,13394,13395],{"class":289,"line":1120},[287,13396,708],{"class":597},[287,13398,13399],{"class":289,"line":1134},[287,13400,2261],{"class":597},[17,13402,13403,13404],{},"组件中读取数据：",[278,13405,13407],{"className":8048,"code":13406,"language":8050,"meta":283,"style":283},"const {increment,decrement} = countStore\nlet {sum,school,bigSum,upperSchool} = storeToRefs(countStore)\n",[21,13408,13409,13430],{"__ignoreMap":283},[287,13410,13411,13413,13415,13418,13420,13423,13425,13427],{"class":289,"line":290},[287,13412,9965],{"class":684},[287,13414,8243],{"class":597},[287,13416,13417],{"class":741},"increment",[287,13419,4837],{"class":597},[287,13421,13422],{"class":741},"decrement",[287,13424,13182],{"class":597},[287,13426,620],{"class":684},[287,13428,13429],{"class":597}," countStore\n",[287,13431,13432,13434,13437,13439,13441],{"class":289,"line":296},[287,13433,2954],{"class":684},[287,13435,13436],{"class":597}," {sum,school,bigSum,upperSchool} ",[287,13438,620],{"class":684},[287,13440,13187],{"class":616},[287,13442,13190],{"class":597},[81,13444,13446],{"id":13445},"_57subscribe","5.7.【$subscribe】",[255,13448,13449,13450,13453,13454,13456],{},"通过 store 的 ",[21,13451,13452],{},"$subscribe()"," 方法侦听 ",[21,13455,12156],{}," 及其变化",[278,13458,13460],{"className":10851,"code":13459,"language":10853,"meta":283,"style":283},"talkStore.$subscribe((mutate,state)=>{\n console.log('LoveTalk',mutate,state)\n localStorage.setItem('talk',JSON.stringify(talkList.value))\n})\n",[21,13461,13462,13486,13500,13526],{"__ignoreMap":283},[287,13463,13464,13467,13470,13473,13476,13478,13480,13482,13484],{"class":289,"line":290},[287,13465,13466],{"class":597},"talkStore.",[287,13468,13469],{"class":616},"$subscribe",[287,13471,13472],{"class":597},"((",[287,13474,13475],{"class":4453},"mutate",[287,13477,4837],{"class":597},[287,13479,12156],{"class":4453},[287,13481,4843],{"class":597},[287,13483,1754],{"class":684},[287,13485,4848],{"class":597},[287,13487,13488,13490,13492,13494,13497],{"class":289,"line":296},[287,13489,2023],{"class":597},[287,13491,1612],{"class":616},[287,13493,1181],{"class":597},[287,13495,13496],{"class":623},"'LoveTalk'",[287,13498,13499],{"class":597},",mutate,state)\n",[287,13501,13502,13505,13508,13510,13512,13514,13517,13520,13523],{"class":289,"line":302},[287,13503,13504],{"class":597}," localStorage.",[287,13506,13507],{"class":616},"setItem",[287,13509,1181],{"class":597},[287,13511,12335],{"class":623},[287,13513,4837],{"class":597},[287,13515,13516],{"class":741},"JSON",[287,13518,13519],{"class":597},".",[287,13521,13522],{"class":616},"stringify",[287,13524,13525],{"class":597},"(talkList.value))\n",[287,13527,13528],{"class":289,"line":309},[287,13529,2261],{"class":597},[81,13531,13533],{"id":13532},"_58-store组合式写法","5.8. 【store组合式写法】",[278,13535,13537],{"className":10851,"code":13536,"language":10853,"meta":283,"style":283},"import {defineStore} from 'pinia'\nimport axios from 'axios'\nimport {nanoid} from 'nanoid'\nimport {reactive} from 'vue'\n\nexport const useTalkStore = defineStore('talk',()=>{\n \u002F\u002F talkList就是state\n const talkList = reactive(\n JSON.parse(localStorage.getItem('talkList') as string) || []\n )\n\n \u002F\u002F getATalk函数相当于action\n async function getATalk(){\n \u002F\u002F 发请求，下面这行的写法是：连续解构赋值+重命名\n let {data:{content:title}} = await axios.get('https:\u002F\u002Fapi.uomg.com\u002Fapi\u002Frand.qinghua?format=json')\n \u002F\u002F 把请求回来的字符串，包装成一个对象\n let obj = {id:nanoid(),title}\n \u002F\u002F 放到数组中\n talkList.unshift(obj)\n }\n return {talkList,getATalk}\n})\n",[21,13538,13539,13549,13559,13571,13581,13585,13608,13613,13627,13663,13668,13672,13677,13688,13693,13725,13730,13747,13752,13763,13767,13774],{"__ignoreMap":283},[287,13540,13541,13543,13545,13547],{"class":289,"line":290},[287,13542,2207],{"class":684},[287,13544,12191],{"class":597},[287,13546,2213],{"class":684},[287,13548,12042],{"class":623},[287,13550,13551,13553,13555,13557],{"class":289,"line":296},[287,13552,2207],{"class":684},[287,13554,12656],{"class":597},[287,13556,2213],{"class":684},[287,13558,9364],{"class":623},[287,13560,13561,13563,13566,13568],{"class":289,"line":302},[287,13562,2207],{"class":684},[287,13564,13565],{"class":597}," {nanoid} ",[287,13567,2213],{"class":684},[287,13569,13570],{"class":623}," 'nanoid'\n",[287,13572,13573,13575,13577,13579],{"class":289,"line":309},[287,13574,2207],{"class":684},[287,13576,8231],{"class":597},[287,13578,2213],{"class":684},[287,13580,2506],{"class":623},[287,13582,13583],{"class":289,"line":315},[287,13584,306],{"emptyLinePlaceholder":305},[287,13586,13587,13589,13591,13593,13595,13597,13599,13601,13604,13606],{"class":289,"line":321},[287,13588,2237],{"class":684},[287,13590,12211],{"class":684},[287,13592,12326],{"class":741},[287,13594,4825],{"class":684},[287,13596,12219],{"class":616},[287,13598,1181],{"class":597},[287,13600,12335],{"class":623},[287,13602,13603],{"class":597},",()",[287,13605,1754],{"class":684},[287,13607,4848],{"class":597},[287,13609,13610],{"class":289,"line":326},[287,13611,13612],{"class":702}," \u002F\u002F talkList就是state\n",[287,13614,13615,13617,13620,13622,13624],{"class":289,"line":332},[287,13616,4819],{"class":684},[287,13618,13619],{"class":741}," talkList",[287,13621,4825],{"class":684},[287,13623,2962],{"class":616},[287,13625,13626],{"class":597},"(\n",[287,13628,13629,13632,13634,13637,13640,13643,13645,13648,13650,13652,13655,13657,13660],{"class":289,"line":338},[287,13630,13631],{"class":741}," JSON",[287,13633,13519],{"class":597},[287,13635,13636],{"class":616},"parse",[287,13638,13639],{"class":597},"(localStorage.",[287,13641,13642],{"class":616},"getItem",[287,13644,1181],{"class":597},[287,13646,13647],{"class":623},"'talkList'",[287,13649,2032],{"class":597},[287,13651,7667],{"class":684},[287,13653,13654],{"class":741}," string",[287,13656,2032],{"class":597},[287,13658,13659],{"class":684},"||",[287,13661,13662],{"class":597}," []\n",[287,13664,13665],{"class":289,"line":343},[287,13666,13667],{"class":597}," )\n",[287,13669,13670],{"class":289,"line":349},[287,13671,306],{"emptyLinePlaceholder":305},[287,13673,13674],{"class":289,"line":355},[287,13675,13676],{"class":702}," \u002F\u002F getATalk函数相当于action\n",[287,13678,13679,13681,13683,13686],{"class":289,"line":361},[287,13680,9409],{"class":684},[287,13682,9213],{"class":684},[287,13684,13685],{"class":616}," getATalk",[287,13687,1117],{"class":597},[287,13689,13690],{"class":289,"line":367},[287,13691,13692],{"class":702}," \u002F\u002F 发请求，下面这行的写法是：连续解构赋值+重命名\n",[287,13694,13695,13697,13699,13701,13704,13707,13710,13712,13714,13716,13718,13720,13723],{"class":289,"line":372},[287,13696,8263],{"class":684},[287,13698,8243],{"class":597},[287,13700,231],{"class":4453},[287,13702,13703],{"class":597},":{",[287,13705,13706],{"class":4453},"content",[287,13708,13709],{"class":597},":title}} ",[287,13711,620],{"class":684},[287,13713,9440],{"class":684},[287,13715,9443],{"class":597},[287,13717,9446],{"class":616},[287,13719,1181],{"class":597},[287,13721,13722],{"class":623},"'https:\u002F\u002Fapi.uomg.com\u002Fapi\u002Frand.qinghua?format=json'",[287,13724,2529],{"class":597},[287,13726,13727],{"class":289,"line":378},[287,13728,13729],{"class":702}," \u002F\u002F 把请求回来的字符串，包装成一个对象\n",[287,13731,13732,13734,13736,13738,13741,13744],{"class":289,"line":384},[287,13733,8263],{"class":684},[287,13735,3049],{"class":597},[287,13737,620],{"class":684},[287,13739,13740],{"class":597}," {id:",[287,13742,13743],{"class":616},"nanoid",[287,13745,13746],{"class":597},"(),title}\n",[287,13748,13749],{"class":289,"line":555},[287,13750,13751],{"class":702}," \u002F\u002F 放到数组中\n",[287,13753,13754,13757,13760],{"class":289,"line":561},[287,13755,13756],{"class":597}," talkList.",[287,13758,13759],{"class":616},"unshift",[287,13761,13762],{"class":597},"(obj)\n",[287,13764,13765],{"class":289,"line":567},[287,13766,708],{"class":597},[287,13768,13769,13771],{"class":289,"line":573},[287,13770,1748],{"class":684},[287,13772,13773],{"class":597}," {talkList,getATalk}\n",[287,13775,13776],{"class":289,"line":579},[287,13777,2261],{"class":597},[10,13779,13781],{"id":13780},"_6-组件通信","6. 组件通信",[255,13783,13784],{},[1326,13785,13786,13788,13789,13791],{},[21,13787,147],{},"组件通信和",[21,13790,880],{},"的区别：",[14,13793,13794],{},[17,13795,13796,13797,13800],{},"移出事件总线，使用",[21,13798,13799],{},"mitt","代替。",[14,13802,13803,13811,13822,13832],{},[17,13804,13805,13808,13809,93],{},[21,13806,13807],{},"vuex","换成了",[21,13810,12119],{},[17,13812,13813,13814,13817,13818,13821],{},"把",[21,13815,13816],{},".sync","优化到了",[21,13819,13820],{},"v-model","里面了。",[17,13823,13813,13824,13827,13828,13831],{},[21,13825,13826],{},"$listeners","所有的东西，合并到",[21,13829,13830],{},"$attrs","中了。",[17,13833,13834,13837],{},[21,13835,13836],{},"$children","被砍掉了。",[255,13839,13840],{},[1326,13841,13842],{},"常见搭配形式：",[74,13844],{"src":13845,"alt":13846,"style":13847},"images\u002Fimage-20231119185900990.png","image-20231119185900990","zoom:60%;",[81,13849,13851],{"id":13850},"_61-props","6.1. 【props】",[255,13853,13854,13855,13857,13858,93],{},"概述：",[21,13856,11659],{},"是使用频率最高的一种通信方式，常用与 ：",[1326,13859,13860],{},"父 ↔ 子",[14,13862,13863,13873],{},[17,13864,13865,13866,13869,13870,93],{},"若 ",[1326,13867,13868],{},"父传子","：属性值是",[1326,13871,13872],{},"非函数",[17,13874,13865,13875,13869,13878,13880],{},[1326,13876,13877],{},"子传父",[1326,13879,1729],{},"，父组件必须给子组件传递一个函数，子组件收到这个函数再调用再去回调一个值去给父组件。",[255,13882,13883],{},"父组件：",[278,13885,13887],{"className":588,"code":13886,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"father\">\n \u003Ch3>父组件，\u003C\u002Fh3>\n \u003Ch4>我的车：{{ car }}\u003C\u002Fh4>\n \u003Ch4>儿子给的玩具：{{ toy }}\u003C\u002Fh4>\n \u003CChild :car=\"car\" :sendToy=\"getToy\"\u002F>\n \u002F\u002F这里给子组件传递了一个sendToy的props，并绑定getToy函数，接受得到的value的值，这样便可以回调得到响应的效果。\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Father\">\n import Child from '.\u002FChild.vue'\n import { ref } from \"vue\";\n \u002F\u002F 数据\n const car = ref('奔驰')\n const toy = ref()\n \u002F\u002F 方法\n function getToy(value:string){\n toy.value = value\n }\n\u003C\u002Fscript>\n",[21,13888,13889,13897,13912,13925,13939,13952,13988,13993,14001,14009,14013,14036,14048,14061,14065,14082,14095,14100,14118,14127,14131],{"__ignoreMap":283},[287,13890,13891,13893,13895],{"class":289,"line":290},[287,13892,598],{"class":597},[287,13894,602],{"class":601},[287,13896,605],{"class":597},[287,13898,13899,13901,13903,13905,13907,13910],{"class":289,"line":296},[287,13900,610],{"class":597},[287,13902,613],{"class":601},[287,13904,617],{"class":616},[287,13906,620],{"class":597},[287,13908,13909],{"class":623},"\"father\"",[287,13911,605],{"class":597},[287,13913,13914,13916,13918,13921,13923],{"class":289,"line":302},[287,13915,631],{"class":597},[287,13917,1245],{"class":601},[287,13919,13920],{"class":597},">父组件，\u003C\u002F",[287,13922,1245],{"class":601},[287,13924,605],{"class":597},[287,13926,13927,13929,13932,13935,13937],{"class":289,"line":309},[287,13928,13066],{"class":597},[287,13930,13931],{"class":601},"h4",[287,13933,13934],{"class":597},">我的车：{{ car }}\u003C\u002F",[287,13936,13931],{"class":601},[287,13938,605],{"class":597},[287,13940,13941,13943,13945,13948,13950],{"class":289,"line":315},[287,13942,13066],{"class":597},[287,13944,13931],{"class":601},[287,13946,13947],{"class":597},">儿子给的玩具：{{ toy }}\u003C\u002F",[287,13949,13931],{"class":601},[287,13951,605],{"class":597},[287,13953,13954,13956,13959,13961,13964,13966,13968,13970,13972,13974,13977,13979,13981,13984,13986],{"class":289,"line":321},[287,13955,13066],{"class":597},[287,13957,13958],{"class":601},"Child",[287,13960,8165],{"class":597},[287,13962,13963],{"class":616},"car",[287,13965,620],{"class":597},[287,13967,8173],{"class":623},[287,13969,13963],{"class":597},[287,13971,8173],{"class":623},[287,13973,8165],{"class":597},[287,13975,13976],{"class":616},"sendToy",[287,13978,620],{"class":597},[287,13980,8173],{"class":623},[287,13982,13983],{"class":597},"getToy",[287,13985,8173],{"class":623},[287,13987,7793],{"class":597},[287,13989,13990],{"class":289,"line":326},[287,13991,13992],{"class":597}," \u002F\u002F这里给子组件传递了一个sendToy的props，并绑定getToy函数，接受得到的value的值，这样便可以回调得到响应的效果。\n",[287,13994,13995,13997,13999],{"class":289,"line":332},[287,13996,645],{"class":597},[287,13998,613],{"class":601},[287,14000,605],{"class":597},[287,14002,14003,14005,14007],{"class":289,"line":338},[287,14004,654],{"class":597},[287,14006,602],{"class":601},[287,14008,605],{"class":597},[287,14010,14011],{"class":289,"line":343},[287,14012,306],{"emptyLinePlaceholder":305},[287,14014,14015,14017,14019,14021,14023,14025,14027,14029,14031,14034],{"class":289,"line":349},[287,14016,598],{"class":597},[287,14018,669],{"class":601},[287,14020,2010],{"class":616},[287,14022,672],{"class":616},[287,14024,620],{"class":597},[287,14026,677],{"class":623},[287,14028,2486],{"class":616},[287,14030,620],{"class":597},[287,14032,14033],{"class":623},"\"Father\"",[287,14035,605],{"class":597},[287,14037,14038,14040,14043,14045],{"class":289,"line":355},[287,14039,8240],{"class":684},[287,14041,14042],{"class":597}," Child ",[287,14044,2213],{"class":684},[287,14046,14047],{"class":623}," '.\u002FChild.vue'\n",[287,14049,14050,14052,14054,14056,14059],{"class":289,"line":361},[287,14051,8240],{"class":684},[287,14053,3421],{"class":597},[287,14055,2213],{"class":684},[287,14057,14058],{"class":623}," \"vue\"",[287,14060,751],{"class":597},[287,14062,14063],{"class":289,"line":367},[287,14064,7977],{"class":702},[287,14066,14067,14069,14072,14074,14076,14078,14080],{"class":289,"line":372},[287,14068,7129],{"class":684},[287,14070,14071],{"class":741}," car",[287,14073,4825],{"class":684},[287,14075,2522],{"class":616},[287,14077,1181],{"class":597},[287,14079,2968],{"class":623},[287,14081,2529],{"class":597},[287,14083,14084,14086,14089,14091,14093],{"class":289,"line":378},[287,14085,7129],{"class":684},[287,14087,14088],{"class":741}," toy",[287,14090,4825],{"class":684},[287,14092,2522],{"class":616},[287,14094,4885],{"class":597},[287,14096,14097],{"class":289,"line":384},[287,14098,14099],{"class":702}," \u002F\u002F 方法\n",[287,14101,14102,14105,14108,14110,14112,14114,14116],{"class":289,"line":555},[287,14103,14104],{"class":684}," function",[287,14106,14107],{"class":616}," getToy",[287,14109,1181],{"class":597},[287,14111,2305],{"class":4453},[287,14113,8076],{"class":684},[287,14115,8079],{"class":741},[287,14117,4457],{"class":597},[287,14119,14120,14123,14125],{"class":289,"line":561},[287,14121,14122],{"class":597}," toy.value ",[287,14124,620],{"class":684},[287,14126,7148],{"class":597},[287,14128,14129],{"class":289,"line":567},[287,14130,1697],{"class":597},[287,14132,14133,14135,14137],{"class":289,"line":573},[287,14134,654],{"class":597},[287,14136,669],{"class":601},[287,14138,605],{"class":597},[255,14140,14141],{},"子组件",[278,14143,14145],{"className":588,"code":14144,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"child\">\n \u003Ch3>子组件\u003C\u002Fh3>\n \u003Ch4>我的玩具：{{ toy }}\u003C\u002Fh4>\n \u003Ch4>父给我的车：{{ car }}\u003C\u002Fh4>\n \u003Cbutton @click=\"sendToy(toy)\">玩具给父亲\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Child\">\n import { ref } from \"vue\";\n const toy = ref('奥特曼')\n \n defineProps(['car','sendToy']) \u002F\u002F声明接受的props\n \u002F\u002F这里接受car和getToy这个方法。\n\u003C\u002Fscript>\n",[21,14146,14147,14155,14170,14183,14196,14209,14229,14237,14245,14249,14272,14284,14301,14305,14327,14332],{"__ignoreMap":283},[287,14148,14149,14151,14153],{"class":289,"line":290},[287,14150,598],{"class":597},[287,14152,602],{"class":601},[287,14154,605],{"class":597},[287,14156,14157,14159,14161,14163,14165,14168],{"class":289,"line":296},[287,14158,610],{"class":597},[287,14160,613],{"class":601},[287,14162,617],{"class":616},[287,14164,620],{"class":597},[287,14166,14167],{"class":623},"\"child\"",[287,14169,605],{"class":597},[287,14171,14172,14174,14176,14179,14181],{"class":289,"line":302},[287,14173,631],{"class":597},[287,14175,1245],{"class":601},[287,14177,14178],{"class":597},">子组件\u003C\u002F",[287,14180,1245],{"class":601},[287,14182,605],{"class":597},[287,14184,14185,14187,14189,14192,14194],{"class":289,"line":309},[287,14186,13066],{"class":597},[287,14188,13931],{"class":601},[287,14190,14191],{"class":597},">我的玩具：{{ toy }}\u003C\u002F",[287,14193,13931],{"class":601},[287,14195,605],{"class":597},[287,14197,14198,14200,14202,14205,14207],{"class":289,"line":315},[287,14199,13066],{"class":597},[287,14201,13931],{"class":601},[287,14203,14204],{"class":597},">父给我的车：{{ car }}\u003C\u002F",[287,14206,13931],{"class":601},[287,14208,605],{"class":597},[287,14210,14211,14213,14215,14217,14219,14222,14225,14227],{"class":289,"line":321},[287,14212,13066],{"class":597},[287,14214,945],{"class":601},[287,14216,948],{"class":616},[287,14218,620],{"class":597},[287,14220,14221],{"class":623},"\"sendToy(toy)\"",[287,14223,14224],{"class":597},">玩具给父亲\u003C\u002F",[287,14226,945],{"class":601},[287,14228,605],{"class":597},[287,14230,14231,14233,14235],{"class":289,"line":326},[287,14232,645],{"class":597},[287,14234,613],{"class":601},[287,14236,605],{"class":597},[287,14238,14239,14241,14243],{"class":289,"line":332},[287,14240,654],{"class":597},[287,14242,602],{"class":601},[287,14244,605],{"class":597},[287,14246,14247],{"class":289,"line":338},[287,14248,306],{"emptyLinePlaceholder":305},[287,14250,14251,14253,14255,14257,14259,14261,14263,14265,14267,14270],{"class":289,"line":343},[287,14252,598],{"class":597},[287,14254,669],{"class":601},[287,14256,2010],{"class":616},[287,14258,672],{"class":616},[287,14260,620],{"class":597},[287,14262,677],{"class":623},[287,14264,2486],{"class":616},[287,14266,620],{"class":597},[287,14268,14269],{"class":623},"\"Child\"",[287,14271,605],{"class":597},[287,14273,14274,14276,14278,14280,14282],{"class":289,"line":349},[287,14275,8240],{"class":684},[287,14277,3421],{"class":597},[287,14279,2213],{"class":684},[287,14281,14058],{"class":623},[287,14283,751],{"class":597},[287,14285,14286,14288,14290,14292,14294,14296,14299],{"class":289,"line":355},[287,14287,7129],{"class":684},[287,14289,14088],{"class":741},[287,14291,4825],{"class":684},[287,14293,2522],{"class":616},[287,14295,1181],{"class":597},[287,14297,14298],{"class":623},"'奥特曼'",[287,14300,2529],{"class":597},[287,14302,14303],{"class":289,"line":361},[287,14304,3991],{"class":597},[287,14306,14307,14310,14313,14316,14318,14321,14324],{"class":289,"line":367},[287,14308,14309],{"class":616}," defineProps",[287,14311,14312],{"class":597},"([",[287,14314,14315],{"class":623},"'car'",[287,14317,4837],{"class":597},[287,14319,14320],{"class":623},"'sendToy'",[287,14322,14323],{"class":597},"]) ",[287,14325,14326],{"class":702},"\u002F\u002F声明接受的props\n",[287,14328,14329],{"class":289,"line":372},[287,14330,14331],{"class":702}," \u002F\u002F这里接受car和getToy这个方法。\n",[287,14333,14334,14336,14338],{"class":289,"line":378},[287,14335,654],{"class":597},[287,14337,669],{"class":601},[287,14339,605],{"class":597},[81,14341,14343],{"id":14342},"_62-自定义事件","6.2. 【自定义事件】",[278,14345,14347],{"className":10851,"code":14346,"language":10853,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"father\">\n \u003Ch2>父组件\u003C\u002Fh2>\n \u003Cbutton @click=\"test(6)\">cilick!\u003C\u002Fbutton>\n \u003CPerson \u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup name=\"App\" lang=\"ts\">\nimport Person from '.\u002Fcomponents\u002FPerson.vue'\nfunction test(value: number) {\n console.log(value)\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\u003C\u002Fstyle>\n\n",[21,14348,14349,14357,14370,14385,14409,14418,14426,14434,14438,14457,14467,14484,14493,14497,14505,14509],{"__ignoreMap":283},[287,14350,14351,14353,14355],{"class":289,"line":290},[287,14352,598],{"class":597},[287,14354,602],{"class":616},[287,14356,605],{"class":597},[287,14358,14359,14361,14364,14366,14368],{"class":289,"line":296},[287,14360,610],{"class":684},[287,14362,14363],{"class":597},"div class",[287,14365,620],{"class":684},[287,14367,13909],{"class":623},[287,14369,605],{"class":684},[287,14371,14372,14374,14376,14379,14381,14383],{"class":289,"line":302},[287,14373,631],{"class":597},[287,14375,81],{"class":616},[287,14377,14378],{"class":597},">父组件",[287,14380,654],{"class":684},[287,14382,81],{"class":597},[287,14384,605],{"class":684},[287,14386,14387,14389,14392,14394,14397,14399,14402,14405,14407],{"class":289,"line":309},[287,14388,631],{"class":684},[287,14390,14391],{"class":597},"button @click",[287,14393,620],{"class":684},[287,14395,14396],{"class":623},"\"test(6)\"",[287,14398,12915],{"class":684},[287,14400,14401],{"class":597},"cilick",[287,14403,14404],{"class":684},"!\u003C\u002F",[287,14406,945],{"class":597},[287,14408,605],{"class":684},[287,14410,14411,14413,14416],{"class":289,"line":315},[287,14412,631],{"class":684},[287,14414,14415],{"class":597},"Person ",[287,14417,7793],{"class":684},[287,14419,14420,14422,14424],{"class":289,"line":321},[287,14421,645],{"class":684},[287,14423,613],{"class":597},[287,14425,605],{"class":684},[287,14427,14428,14430,14432],{"class":289,"line":326},[287,14429,654],{"class":684},[287,14431,602],{"class":597},[287,14433,605],{"class":684},[287,14435,14436],{"class":289,"line":332},[287,14437,306],{"emptyLinePlaceholder":305},[287,14439,14440,14442,14445,14447,14449,14451,14453,14455],{"class":289,"line":338},[287,14441,598],{"class":684},[287,14443,14444],{"class":597},"script setup name",[287,14446,620],{"class":684},[287,14448,4299],{"class":623},[287,14450,672],{"class":597},[287,14452,620],{"class":684},[287,14454,677],{"class":623},[287,14456,605],{"class":684},[287,14458,14459,14461,14463,14465],{"class":289,"line":343},[287,14460,2207],{"class":684},[287,14462,7852],{"class":597},[287,14464,2213],{"class":684},[287,14466,7857],{"class":623},[287,14468,14469,14471,14473,14475,14477,14479,14482],{"class":289,"line":349},[287,14470,3103],{"class":684},[287,14472,3161],{"class":616},[287,14474,1181],{"class":597},[287,14476,2305],{"class":4453},[287,14478,8076],{"class":684},[287,14480,14481],{"class":741}," number",[287,14483,12840],{"class":597},[287,14485,14486,14488,14490],{"class":289,"line":355},[287,14487,2023],{"class":597},[287,14489,1612],{"class":616},[287,14491,14492],{"class":597},"(value)\n",[287,14494,14495],{"class":289,"line":361},[287,14496,1762],{"class":597},[287,14498,14499,14501,14503],{"class":289,"line":367},[287,14500,654],{"class":684},[287,14502,669],{"class":597},[287,14504,605],{"class":684},[287,14506,14507],{"class":289,"line":372},[287,14508,306],{"emptyLinePlaceholder":305},[287,14510,14511,14513,14515,14517,14519],{"class":289,"line":378},[287,14512,598],{"class":597},[287,14514,727],{"class":616},[287,14516,10305],{"class":597},[287,14518,727],{"class":616},[287,14520,605],{"class":597},[255,14522,14523],{},"​\t可以看到通过button中click里 用test(6)的形式可以给函数传递参数，并通过后面的断言，函数后面的内容也当然可以执行。 如果不在button上写参数传递的话，会传递事件对象！能拿得到鼠标的位置，屏幕宽度等信息。",[255,14525,14526,14527,14530],{},"如果想要同时",[1326,14528,14529],{},"传递参数和事件对象","的话，可以这样写：",[255,14532,14533],{},[74,14534],{"alt":14535,"src":14536},"image-20250222221606097",".\u002Fassets\u002Fimage-20250222221606097.png",[255,14538,14539],{},"在后面加上$event的占位符，它的意思就是事件对象。",[255,14541,14542],{},[74,14543],{"alt":14544,"src":14545},"image-20250222222255241",".\u002Fassets\u002Fimage-20250222222255241.png",[255,14547,14548,14549],{},"​\t这个ab",[1326,14550,14551],{},"c就是自定义出来的事件，和之前的@click有些相似。如果abc这个事件被触发，那么后面的xyz方法就会被触发！ 而触发abc的条件怎么设置？",[255,14553,14554],{},"​\t需要在子组件去设置，通过defineEmits()方法去传递，然后通过emit这个方法去触发事件。",[255,14556,14557],{},[74,14558],{"alt":14559,"src":14560},"image-20250222222728982",".\u002Fassets\u002Fimage-20250222222728982.png",[255,14562,14563],{},"​\t上面的button按钮通过click去触发了emit('abc')，然后abc这个自定义事件就会触发。 最后在父组件里，abc事件被触发，进而又可以引发其他的处理。",[255,14565,14566],{},[74,14567],{"alt":14568,"src":14569},"image-20250222222823082",".\u002Fassets\u002Fimage-20250222222823082.png",[255,14571,14572],{},"比如xyz这个方法。",[157,14574,14575,14581],{},[17,14576,14577,14578],{},"概述：自定义事件常用于：",[1326,14579,14580],{},"子 => 父。",[17,14582,14583],{},"注意区分好：原生事件、自定义事件。",[14,14585,14586,14619],{},[17,14587,14588,14589],{},"原生事件：\n",[14,14590,14591,14601],{},[17,14592,14593,14594,43,14597,14600],{},"事件名是特定的（",[21,14595,14596],{},"click",[21,14598,14599],{},"mosueenter","等等）",[17,14602,14603,14604,14607,14608,43,14611,43,14614,43,14617,463],{},"事件对象",[21,14605,14606],{},"$event",": 是包含事件相关信息的对象（",[21,14609,14610],{},"pageX",[21,14612,14613],{},"pageY",[21,14615,14616],{},"target",[21,14618,238],{},[17,14620,14621,14622],{},"自定义事件：\n",[14,14623,14624,14627],{},[17,14625,14626],{},"事件名是任意名称",[17,14628,14629],{},[1326,14630,14603,14632,14634,14635,14638],{"style":14631},"color:red",[21,14633,14606],{},": 是调用",[21,14636,14637],{},"emit","时所提供的数据，可以是任意类型！！！",[157,14640,14641],{"start":302},[17,14642,14643,14644,14700],{},"示例：",[278,14645,14649],{"className":14646,"code":14647,"language":14648,"meta":283,"style":283},"language-html shiki shiki-themes github-light github-dark","\u003C!--在父组件中，给子组件绑定自定义事件：-->\n\u003CChild @send-toy=\"toy = $event\"\u002F>\n\n\u003C!--注意区分原生事件与自定义事件中的$event-->\n\u003Cbutton @click=\"toy = $event\">测试\u003C\u002Fbutton>\n\n\n","html",[21,14650,14651,14656,14673,14677,14682],{"__ignoreMap":283},[287,14652,14653],{"class":289,"line":290},[287,14654,14655],{"class":702},"\u003C!--在父组件中，给子组件绑定自定义事件：-->\n",[287,14657,14658,14660,14663,14666,14668,14671],{"class":289,"line":296},[287,14659,598],{"class":597},[287,14661,13958],{"class":14662},"s7hpK",[287,14664,14665],{"class":616}," @send-toy",[287,14667,620],{"class":597},[287,14669,14670],{"class":623},"\"toy = $event\"",[287,14672,7793],{"class":597},[287,14674,14675],{"class":289,"line":302},[287,14676,306],{"emptyLinePlaceholder":305},[287,14678,14679],{"class":289,"line":309},[287,14680,14681],{"class":702},"\u003C!--注意区分原生事件与自定义事件中的$event-->\n",[287,14683,14684,14686,14688,14690,14692,14694,14696,14698],{"class":289,"line":315},[287,14685,598],{"class":597},[287,14687,945],{"class":601},[287,14689,948],{"class":616},[287,14691,620],{"class":597},[287,14693,14670],{"class":623},[287,14695,2883],{"class":597},[287,14697,945],{"class":601},[287,14699,605],{"class":597},[278,14701,14703],{"className":8048,"code":14702,"language":8050,"meta":283,"style":283},"\u002F\u002F子组件中，触发事件：\nthis.$emit('send-toy', 具体数据)\n",[21,14704,14705,14710],{"__ignoreMap":283},[287,14706,14707],{"class":289,"line":290},[287,14708,14709],{"class":702},"\u002F\u002F子组件中，触发事件：\n",[287,14711,14712,14714,14716,14719,14721,14724],{"class":289,"line":296},[287,14713,1184],{"class":741},[287,14715,13519],{"class":597},[287,14717,14718],{"class":616},"$emit",[287,14720,1181],{"class":597},[287,14722,14723],{"class":623},"'send-toy'",[287,14725,14726],{"class":597},", 具体数据)\n",[81,14728,14730],{"id":14729},"_63-mitt","6.3. 【mitt】",[255,14732,14733,14734,14737,14738,93],{},"概述：与消息订阅与发布（",[21,14735,14736],{},"pubsub","）功能类似，可以实现",[1326,14739,14740],{},"任意组件间通信",[255,14742,14743],{},"​\tmitt属于一个工具，所以我们\t最后在src这个文件夹里设置一个文件夹去专门存放工具类型的ts文件，也就是utils文件夹，然后设置以设置emitter.ts",[255,14745,14746],{},"emitter可以绑定事件和触发事件。",[255,14748,14749],{},[74,14750],{"alt":14751,"src":14752},"image-20250222233112439",".\u002Fassets\u002Fimage-20250222233112439.png",[255,14754,14755],{},"上面的就是一个任意两个组件相互通信的实例！",[255,14757,14758,14759,14761],{},"安装",[21,14760,13799],{},"y",[278,14763,14767],{"className":14764,"code":14765,"language":14766,"meta":283,"style":283},"language-shell shiki shiki-themes github-light github-dark","npm i mitt\n","shell",[21,14768,14769],{"__ignoreMap":283},[287,14770,14771],{"class":289,"line":290},[287,14772,14765],{},[255,14774,14775,14776],{},"新建文件：",[21,14777,14778],{},"src\\utils\\emitter.ts",[278,14780,14784],{"className":14781,"code":14782,"language":14783,"meta":283,"style":283},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F 引入mitt \nimport mitt from \"mitt\";\n\n\u002F\u002F 创建emitter\nconst emitter = mitt()\n\n\u002F*\n \u002F\u002F 绑定事件\n emitter.on('abc',(value)=>{\n console.log('abc事件被触发',value)\n })\n emitter.on('xyz',(value)=>{\n console.log('xyz事件被触发',value)\n })\n\n setInterval(() => {\n \u002F\u002F 触发事件\n emitter.emit('abc',666)\n emitter.emit('xyz',777)\n }, 1000);\n\n setTimeout(() => {\n \u002F\u002F 清理事件\n emitter.all.clear()\n }, 3000); \n*\u002F\n\n\u002F\u002F 创建并暴露mitt\nexport default emitter\n","javascript",[21,14785,14786,14791,14796,14800,14805,14810,14814,14819,14824,14829,14834,14838,14843,14848,14852,14856,14861,14866,14871,14876,14881,14885,14890,14895,14900,14905,14910,14914,14919],{"__ignoreMap":283},[287,14787,14788],{"class":289,"line":290},[287,14789,14790],{},"\u002F\u002F 引入mitt \n",[287,14792,14793],{"class":289,"line":296},[287,14794,14795],{},"import mitt from \"mitt\";\n",[287,14797,14798],{"class":289,"line":302},[287,14799,306],{"emptyLinePlaceholder":305},[287,14801,14802],{"class":289,"line":309},[287,14803,14804],{},"\u002F\u002F 创建emitter\n",[287,14806,14807],{"class":289,"line":315},[287,14808,14809],{},"const emitter = mitt()\n",[287,14811,14812],{"class":289,"line":321},[287,14813,306],{"emptyLinePlaceholder":305},[287,14815,14816],{"class":289,"line":326},[287,14817,14818],{},"\u002F*\n",[287,14820,14821],{"class":289,"line":332},[287,14822,14823],{}," \u002F\u002F 绑定事件\n",[287,14825,14826],{"class":289,"line":338},[287,14827,14828],{}," emitter.on('abc',(value)=>{\n",[287,14830,14831],{"class":289,"line":343},[287,14832,14833],{}," console.log('abc事件被触发',value)\n",[287,14835,14836],{"class":289,"line":349},[287,14837,4529],{},[287,14839,14840],{"class":289,"line":355},[287,14841,14842],{}," emitter.on('xyz',(value)=>{\n",[287,14844,14845],{"class":289,"line":361},[287,14846,14847],{}," console.log('xyz事件被触发',value)\n",[287,14849,14850],{"class":289,"line":367},[287,14851,4529],{},[287,14853,14854],{"class":289,"line":372},[287,14855,306],{"emptyLinePlaceholder":305},[287,14857,14858],{"class":289,"line":378},[287,14859,14860],{}," setInterval(() => {\n",[287,14862,14863],{"class":289,"line":384},[287,14864,14865],{}," \u002F\u002F 触发事件\n",[287,14867,14868],{"class":289,"line":555},[287,14869,14870],{}," emitter.emit('abc',666)\n",[287,14872,14873],{"class":289,"line":561},[287,14874,14875],{}," emitter.emit('xyz',777)\n",[287,14877,14878],{"class":289,"line":567},[287,14879,14880],{}," }, 1000);\n",[287,14882,14883],{"class":289,"line":573},[287,14884,306],{"emptyLinePlaceholder":305},[287,14886,14887],{"class":289,"line":579},[287,14888,14889],{}," setTimeout(() => {\n",[287,14891,14892],{"class":289,"line":1120},[287,14893,14894],{}," \u002F\u002F 清理事件\n",[287,14896,14897],{"class":289,"line":1134},[287,14898,14899],{}," emitter.all.clear()\n",[287,14901,14902],{"class":289,"line":1140},[287,14903,14904],{}," }, 3000); \n",[287,14906,14907],{"class":289,"line":1148},[287,14908,14909],{},"*\u002F\n",[287,14911,14912],{"class":289,"line":1162},[287,14913,306],{"emptyLinePlaceholder":305},[287,14915,14916],{"class":289,"line":1167},[287,14917,14918],{},"\u002F\u002F 创建并暴露mitt\n",[287,14920,14921],{"class":289,"line":1175},[287,14922,14923],{},"export default emitter\n",[255,14925,14926],{},"接收数据的组件中：绑定事件、同时在销毁前解绑事件：",[278,14928,14932],{"className":14929,"code":14930,"language":14931,"meta":283,"style":283},"language-typescript shiki shiki-themes github-light github-dark","import emitter from \"@\u002Futils\u002Femitter\";\nimport { onUnmounted } from \"vue\";\n\n\u002F\u002F 绑定事件 all是拿到所有所有绑定的事件，emit是某一个事件，off是解绑某一个事件，on 是绑定某一事件。\nemitter.on('send-toy',(value)=>{\n console.log('send-toy事件被触发',value)\n})\n\nonUnmounted(()=>{\n \u002F\u002F 解绑事件\n emitter.off('send-toy')\n}) \u002F\u002F这是main.ts\n","typescript",[21,14933,14934,14948,14961,14965,14970,14993,15007,15011,15015,15025,15030,15044],{"__ignoreMap":283},[287,14935,14936,14938,14941,14943,14946],{"class":289,"line":290},[287,14937,2207],{"class":684},[287,14939,14940],{"class":597}," emitter ",[287,14942,2213],{"class":684},[287,14944,14945],{"class":623}," \"@\u002Futils\u002Femitter\"",[287,14947,751],{"class":597},[287,14949,14950,14952,14955,14957,14959],{"class":289,"line":296},[287,14951,2207],{"class":684},[287,14953,14954],{"class":597}," { onUnmounted } ",[287,14956,2213],{"class":684},[287,14958,14058],{"class":623},[287,14960,751],{"class":597},[287,14962,14963],{"class":289,"line":302},[287,14964,306],{"emptyLinePlaceholder":305},[287,14966,14967],{"class":289,"line":309},[287,14968,14969],{"class":702},"\u002F\u002F 绑定事件 all是拿到所有所有绑定的事件，emit是某一个事件，off是解绑某一个事件，on 是绑定某一事件。\n",[287,14971,14972,14975,14978,14980,14982,14985,14987,14989,14991],{"class":289,"line":315},[287,14973,14974],{"class":597},"emitter.",[287,14976,14977],{"class":616},"on",[287,14979,1181],{"class":597},[287,14981,14723],{"class":623},[287,14983,14984],{"class":597},",(",[287,14986,2305],{"class":4453},[287,14988,4843],{"class":597},[287,14990,1754],{"class":684},[287,14992,4848],{"class":597},[287,14994,14995,14997,14999,15001,15004],{"class":289,"line":321},[287,14996,2023],{"class":597},[287,14998,1612],{"class":616},[287,15000,1181],{"class":597},[287,15002,15003],{"class":623},"'send-toy事件被触发'",[287,15005,15006],{"class":597},",value)\n",[287,15008,15009],{"class":289,"line":326},[287,15010,2261],{"class":597},[287,15012,15013],{"class":289,"line":332},[287,15014,306],{"emptyLinePlaceholder":305},[287,15016,15017,15019,15021,15023],{"class":289,"line":338},[287,15018,8728],{"class":616},[287,15020,6290],{"class":597},[287,15022,1754],{"class":684},[287,15024,4848],{"class":597},[287,15026,15027],{"class":289,"line":343},[287,15028,15029],{"class":702}," \u002F\u002F 解绑事件\n",[287,15031,15032,15035,15038,15040,15042],{"class":289,"line":349},[287,15033,15034],{"class":597}," emitter.",[287,15036,15037],{"class":616},"off",[287,15039,1181],{"class":597},[287,15041,14723],{"class":623},[287,15043,2529],{"class":597},[287,15045,15046,15049],{"class":289,"line":355},[287,15047,15048],{"class":597},"}) ",[287,15050,15051],{"class":702},"\u002F\u002F这是main.ts\n",[255,15053,15054],{},"【第三步】：提供数据的组件，在合适的时候触发事件",[278,15056,15058],{"className":14781,"code":15057,"language":14783,"meta":283,"style":283},"import emitter from \"@\u002Futils\u002Femitter\";\n\nfunction sendToy(){\n \u002F\u002F 触发事件\n emitter.emit('send-toy',toy.value)\n}\n",[21,15059,15060,15065,15069,15074,15079,15084],{"__ignoreMap":283},[287,15061,15062],{"class":289,"line":290},[287,15063,15064],{},"import emitter from \"@\u002Futils\u002Femitter\";\n",[287,15066,15067],{"class":289,"line":296},[287,15068,306],{"emptyLinePlaceholder":305},[287,15070,15071],{"class":289,"line":302},[287,15072,15073],{},"function sendToy(){\n",[287,15075,15076],{"class":289,"line":309},[287,15077,15078],{}," \u002F\u002F 触发事件\n",[287,15080,15081],{"class":289,"line":315},[287,15082,15083],{}," emitter.emit('send-toy',toy.value)\n",[287,15085,15086],{"class":289,"line":321},[287,15087,1762],{},[255,15089,15090],{},[1326,15091,15092],{},"注意这个重要的内置关系，总线依赖着这个内置关系",[81,15094,15096],{"id":15095},"_64v-model","6.4.【v-model】",[157,15098,15099,15106,15180,15459,15708],{},[17,15100,15101,15102,15105],{},"概述：实现 ",[1326,15103,15104],{},"父↔子"," 之间相互通信。",[17,15107,15108,15109,15111,15112],{},"前序知识 —— ",[21,15110,13820],{},"的本质",[278,15113,15115],{"className":588,"code":15114,"language":590,"meta":283,"style":283},"\u003C!-- 使用v-model指令 -->\n\u003Cinput type=\"text\" v-model=\"userName\">\n\n\u003C!-- v-model的本质是下面这行代码 -->\n\u003Cinput \n type=\"text\" \n :value=\"userName\" \n @input=\"userName =(\u003CHTMLInputElement>$event.target).value\"\n>\n",[21,15116,15117,15122,15147,15151,15156,15161,15166,15171,15176],{"__ignoreMap":283},[287,15118,15119],{"class":289,"line":290},[287,15120,15121],{"class":702},"\u003C!-- 使用v-model指令 -->\n",[287,15123,15124,15126,15128,15130,15132,15134,15136,15138,15140,15143,15145],{"class":289,"line":296},[287,15125,598],{"class":597},[287,15127,4171],{"class":601},[287,15129,4174],{"class":616},[287,15131,620],{"class":597},[287,15133,4179],{"class":623},[287,15135,4182],{"class":616},[287,15137,620],{"class":597},[287,15139,8173],{"class":623},[287,15141,15142],{"class":597},"userName",[287,15144,8173],{"class":623},[287,15146,605],{"class":597},[287,15148,15149],{"class":289,"line":302},[287,15150,306],{"emptyLinePlaceholder":305},[287,15152,15153],{"class":289,"line":309},[287,15154,15155],{"class":597},"\u003C!-- v-model的本质是下面这行代码 -->\n",[287,15157,15158],{"class":289,"line":315},[287,15159,15160],{"class":597},"\u003Cinput \n",[287,15162,15163],{"class":289,"line":321},[287,15164,15165],{"class":597}," type=\"text\" \n",[287,15167,15168],{"class":289,"line":326},[287,15169,15170],{"class":597}," :value=\"userName\" \n",[287,15172,15173],{"class":289,"line":332},[287,15174,15175],{"class":597}," @input=\"userName =(\u003CHTMLInputElement>$event.target).value\"\n",[287,15177,15178],{"class":289,"line":338},[287,15179,605],{"class":597},[17,15181,15182,15183,15185,15186,15189,15190,15193,15194,15278,15280,15282,15283],{},"组件标签上的",[21,15184,13820],{},"的本质：",[21,15187,15188],{},":moldeValue"," ＋ ",[21,15191,15192],{},"update:modelValue","事件。",[278,15195,15197],{"className":588,"code":15196,"language":590,"meta":283,"style":283},"\u003C!-- 组件标签上使用v-model指令 -->\n\u003CAtguiguInput v-model=\"userName\"\u002F>\n\n\u003C!-- 组件标签上v-model的本质 -->\n\u003CAtguiguInput :modelValue=\"userName\" @update:model-value=\"userName = $event\"\u002F>\n",[21,15198,15199,15204,15223,15227,15232],{"__ignoreMap":283},[287,15200,15201],{"class":289,"line":290},[287,15202,15203],{"class":702},"\u003C!-- 组件标签上使用v-model指令 -->\n",[287,15205,15206,15208,15211,15213,15215,15217,15219,15221],{"class":289,"line":296},[287,15207,598],{"class":597},[287,15209,15210],{"class":601},"AtguiguInput",[287,15212,4182],{"class":616},[287,15214,620],{"class":597},[287,15216,8173],{"class":623},[287,15218,15142],{"class":597},[287,15220,8173],{"class":623},[287,15222,7793],{"class":597},[287,15224,15225],{"class":289,"line":302},[287,15226,306],{"emptyLinePlaceholder":305},[287,15228,15229],{"class":289,"line":309},[287,15230,15231],{"class":702},"\u003C!-- 组件标签上v-model的本质 -->\n",[287,15233,15234,15236,15238,15240,15243,15245,15247,15249,15251,15254,15257,15259,15262,15264,15266,15269,15271,15274,15276],{"class":289,"line":315},[287,15235,598],{"class":597},[287,15237,15210],{"class":601},[287,15239,8165],{"class":597},[287,15241,15242],{"class":616},"modelValue",[287,15244,620],{"class":597},[287,15246,8173],{"class":623},[287,15248,15142],{"class":597},[287,15250,8173],{"class":623},[287,15252,15253],{"class":597}," @",[287,15255,15256],{"class":616},"update",[287,15258,8076],{"class":597},[287,15260,15261],{"class":616},"model-value",[287,15263,620],{"class":597},[287,15265,8173],{"class":623},[287,15267,15268],{"class":597},"userName ",[287,15270,620],{"class":684},[287,15272,15273],{"class":597}," $event",[287,15275,8173],{"class":623},[287,15277,7793],{"class":597},[194,15279],{},[21,15281,15210],{},"组件中：",[278,15284,15286],{"className":588,"code":15285,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"box\">\n \u003C!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->\n \u003C!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->\n \u003Cinput \n type=\"text\" \n :value=\"modelValue\" \n @input=\"emit('update:model-value',$event.target.value)\"\n >\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"AtguiguInput\">\n \u002F\u002F 接收props\n defineProps(['modelValue'])\n \u002F\u002F 声明事件\n const emit = defineEmits(['update:model-value'])\n\u003C\u002Fscript>\n",[21,15287,15288,15296,15311,15316,15321,15329,15340,15352,15362,15367,15375,15383,15387,15410,15415,15427,15432,15451],{"__ignoreMap":283},[287,15289,15290,15292,15294],{"class":289,"line":290},[287,15291,598],{"class":597},[287,15293,602],{"class":601},[287,15295,605],{"class":597},[287,15297,15298,15300,15302,15304,15306,15309],{"class":289,"line":296},[287,15299,610],{"class":597},[287,15301,613],{"class":601},[287,15303,617],{"class":616},[287,15305,620],{"class":597},[287,15307,15308],{"class":623},"\"box\"",[287,15310,605],{"class":597},[287,15312,15313],{"class":289,"line":302},[287,15314,15315],{"class":702}," \u003C!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->\n",[287,15317,15318],{"class":289,"line":309},[287,15319,15320],{"class":702}," \u003C!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->\n",[287,15322,15323,15325,15327],{"class":289,"line":315},[287,15324,631],{"class":597},[287,15326,4171],{"class":601},[287,15328,79],{"class":597},[287,15330,15331,15334,15336,15338],{"class":289,"line":321},[287,15332,15333],{"class":616}," type",[287,15335,620],{"class":597},[287,15337,4179],{"class":623},[287,15339,79],{"class":597},[287,15341,15342,15345,15347,15350],{"class":289,"line":326},[287,15343,15344],{"class":616}," :value",[287,15346,620],{"class":597},[287,15348,15349],{"class":623},"\"modelValue\"",[287,15351,79],{"class":597},[287,15353,15354,15357,15359],{"class":289,"line":332},[287,15355,15356],{"class":616}," @input",[287,15358,620],{"class":597},[287,15360,15361],{"class":623},"\"emit('update:model-value',$event.target.value)\"\n",[287,15363,15364],{"class":289,"line":338},[287,15365,15366],{"class":597}," >\n",[287,15368,15369,15371,15373],{"class":289,"line":343},[287,15370,645],{"class":597},[287,15372,613],{"class":601},[287,15374,605],{"class":597},[287,15376,15377,15379,15381],{"class":289,"line":349},[287,15378,654],{"class":597},[287,15380,602],{"class":601},[287,15382,605],{"class":597},[287,15384,15385],{"class":289,"line":355},[287,15386,306],{"emptyLinePlaceholder":305},[287,15388,15389,15391,15393,15395,15397,15399,15401,15403,15405,15408],{"class":289,"line":361},[287,15390,598],{"class":597},[287,15392,669],{"class":601},[287,15394,2010],{"class":616},[287,15396,672],{"class":616},[287,15398,620],{"class":597},[287,15400,677],{"class":623},[287,15402,2486],{"class":616},[287,15404,620],{"class":597},[287,15406,15407],{"class":623},"\"AtguiguInput\"",[287,15409,605],{"class":597},[287,15411,15412],{"class":289,"line":367},[287,15413,15414],{"class":702}," \u002F\u002F 接收props\n",[287,15416,15417,15420,15422,15425],{"class":289,"line":372},[287,15418,15419],{"class":616}," defineProps",[287,15421,14312],{"class":597},[287,15423,15424],{"class":623},"'modelValue'",[287,15426,3042],{"class":597},[287,15428,15429],{"class":289,"line":378},[287,15430,15431],{"class":702}," \u002F\u002F 声明事件\n",[287,15433,15434,15436,15439,15441,15444,15446,15449],{"class":289,"line":384},[287,15435,4819],{"class":684},[287,15437,15438],{"class":741}," emit",[287,15440,4825],{"class":684},[287,15442,15443],{"class":616}," defineEmits",[287,15445,14312],{"class":597},[287,15447,15448],{"class":623},"'update:model-value'",[287,15450,3042],{"class":597},[287,15452,15453,15455,15457],{"class":289,"line":555},[287,15454,654],{"class":597},[287,15456,669],{"class":601},[287,15458,605],{"class":597},[17,15460,15461,15462,15464,15465,15468,15549,15551,15282,15553],{},"也可以更换",[21,15463,2305],{},"，例如改成",[21,15466,15467],{},"abc",[278,15469,15471],{"className":588,"code":15470,"language":590,"meta":283,"style":283},"\u003C!-- 也可以更换value，例如改成abc-->\n\u003CAtguiguInput v-model:abc=\"userName\"\u002F>\n\n\u003C!-- 上面代码的本质如下 -->\n\u003CAtguiguInput :abc=\"userName\" @update:abc=\"userName = $event\"\u002F>\n",[21,15472,15473,15478,15500,15504,15509],{"__ignoreMap":283},[287,15474,15475],{"class":289,"line":290},[287,15476,15477],{"class":702},"\u003C!-- 也可以更换value，例如改成abc-->\n",[287,15479,15480,15482,15484,15486,15488,15490,15492,15494,15496,15498],{"class":289,"line":296},[287,15481,598],{"class":597},[287,15483,15210],{"class":601},[287,15485,4182],{"class":616},[287,15487,8076],{"class":597},[287,15489,15467],{"class":616},[287,15491,620],{"class":597},[287,15493,8173],{"class":623},[287,15495,15142],{"class":597},[287,15497,8173],{"class":623},[287,15499,7793],{"class":597},[287,15501,15502],{"class":289,"line":302},[287,15503,306],{"emptyLinePlaceholder":305},[287,15505,15506],{"class":289,"line":309},[287,15507,15508],{"class":702},"\u003C!-- 上面代码的本质如下 -->\n",[287,15510,15511,15513,15515,15517,15519,15521,15523,15525,15527,15529,15531,15533,15535,15537,15539,15541,15543,15545,15547],{"class":289,"line":315},[287,15512,598],{"class":597},[287,15514,15210],{"class":601},[287,15516,8165],{"class":597},[287,15518,15467],{"class":616},[287,15520,620],{"class":597},[287,15522,8173],{"class":623},[287,15524,15142],{"class":597},[287,15526,8173],{"class":623},[287,15528,15253],{"class":597},[287,15530,15256],{"class":616},[287,15532,8076],{"class":597},[287,15534,15467],{"class":616},[287,15536,620],{"class":597},[287,15538,8173],{"class":623},[287,15540,15268],{"class":597},[287,15542,620],{"class":684},[287,15544,15273],{"class":597},[287,15546,8173],{"class":623},[287,15548,7793],{"class":597},[194,15550],{},[21,15552,15210],{},[278,15554,15556],{"className":588,"code":15555,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"box\">\n \u003Cinput \n type=\"text\" \n :value=\"abc\" \n @input=\"emit('update:abc',$event.target.value)\"\n >\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"AtguiguInput\">\n \u002F\u002F 接收props\n defineProps(['abc'])\n \u002F\u002F 声明事件\n const emit = defineEmits(['update:abc'])\n\u003C\u002Fscript>\n",[21,15557,15558,15566,15580,15588,15598,15609,15618,15622,15630,15638,15642,15664,15668,15679,15683,15700],{"__ignoreMap":283},[287,15559,15560,15562,15564],{"class":289,"line":290},[287,15561,598],{"class":597},[287,15563,602],{"class":601},[287,15565,605],{"class":597},[287,15567,15568,15570,15572,15574,15576,15578],{"class":289,"line":296},[287,15569,610],{"class":597},[287,15571,613],{"class":601},[287,15573,617],{"class":616},[287,15575,620],{"class":597},[287,15577,15308],{"class":623},[287,15579,605],{"class":597},[287,15581,15582,15584,15586],{"class":289,"line":302},[287,15583,631],{"class":597},[287,15585,4171],{"class":601},[287,15587,79],{"class":597},[287,15589,15590,15592,15594,15596],{"class":289,"line":309},[287,15591,15333],{"class":616},[287,15593,620],{"class":597},[287,15595,4179],{"class":623},[287,15597,79],{"class":597},[287,15599,15600,15602,15604,15607],{"class":289,"line":315},[287,15601,15344],{"class":616},[287,15603,620],{"class":597},[287,15605,15606],{"class":623},"\"abc\"",[287,15608,79],{"class":597},[287,15610,15611,15613,15615],{"class":289,"line":321},[287,15612,15356],{"class":616},[287,15614,620],{"class":597},[287,15616,15617],{"class":623},"\"emit('update:abc',$event.target.value)\"\n",[287,15619,15620],{"class":289,"line":326},[287,15621,15366],{"class":597},[287,15623,15624,15626,15628],{"class":289,"line":332},[287,15625,645],{"class":597},[287,15627,613],{"class":601},[287,15629,605],{"class":597},[287,15631,15632,15634,15636],{"class":289,"line":338},[287,15633,654],{"class":597},[287,15635,602],{"class":601},[287,15637,605],{"class":597},[287,15639,15640],{"class":289,"line":343},[287,15641,306],{"emptyLinePlaceholder":305},[287,15643,15644,15646,15648,15650,15652,15654,15656,15658,15660,15662],{"class":289,"line":349},[287,15645,598],{"class":597},[287,15647,669],{"class":601},[287,15649,2010],{"class":616},[287,15651,672],{"class":616},[287,15653,620],{"class":597},[287,15655,677],{"class":623},[287,15657,2486],{"class":616},[287,15659,620],{"class":597},[287,15661,15407],{"class":623},[287,15663,605],{"class":597},[287,15665,15666],{"class":289,"line":355},[287,15667,15414],{"class":702},[287,15669,15670,15672,15674,15677],{"class":289,"line":361},[287,15671,15419],{"class":616},[287,15673,14312],{"class":597},[287,15675,15676],{"class":623},"'abc'",[287,15678,3042],{"class":597},[287,15680,15681],{"class":289,"line":367},[287,15682,15431],{"class":702},[287,15684,15685,15687,15689,15691,15693,15695,15698],{"class":289,"line":372},[287,15686,4819],{"class":684},[287,15688,15438],{"class":741},[287,15690,4825],{"class":684},[287,15692,15443],{"class":616},[287,15694,14312],{"class":597},[287,15696,15697],{"class":623},"'update:abc'",[287,15699,3042],{"class":597},[287,15701,15702,15704,15706],{"class":289,"line":378},[287,15703,654],{"class":597},[287,15705,669],{"class":601},[287,15707,605],{"class":597},[17,15709,15710,15711,15713,15714,15716],{},"如果",[21,15712,2305],{},"可以更换，那么就可以在组件标签上多次使用",[21,15715,13820],{},[278,15717,15719],{"className":588,"code":15718,"language":590,"meta":283,"style":283},"\u003CAtguiguInput v-model:abc=\"userName\" v-model:xyz=\"password\"\u002F>\n",[21,15720,15721],{"__ignoreMap":283},[287,15722,15723,15725,15727,15729,15731,15733,15735,15737,15739,15741,15743,15745,15748,15750,15752,15755,15757],{"class":289,"line":290},[287,15724,598],{"class":597},[287,15726,15210],{"class":601},[287,15728,4182],{"class":616},[287,15730,8076],{"class":597},[287,15732,15467],{"class":616},[287,15734,620],{"class":597},[287,15736,8173],{"class":623},[287,15738,15142],{"class":597},[287,15740,8173],{"class":623},[287,15742,4182],{"class":616},[287,15744,8076],{"class":597},[287,15746,15747],{"class":616},"xyz",[287,15749,620],{"class":597},[287,15751,8173],{"class":623},[287,15753,15754],{"class":597},"password",[287,15756,8173],{"class":623},[287,15758,7793],{"class":597},[81,15760,15762],{"id":15761},"_65attrs","6.5.【$attrs 】",[157,15764,15765,15781],{},[17,15766,13854,15767,15769,15770,15773,15774,15777,15778,3699],{},[21,15768,13830],{},"用于实现",[1326,15771,15772],{},"当前组件的父组件","，向",[1326,15775,15776],{},"当前组件的子组件","通信（",[1326,15779,15780],{},"祖→孙",[17,15782,15783,15784,15786,15787],{},"具体说明：",[21,15785,13830],{},"是一个对象，包含所有父组件传入的标签属性。",[264,15788,15789],{},[255,15790,4915,15791,15793,15794,15796,15797,15799],{},[21,15792,13830],{},"会自动排除",[21,15795,11659],{},"中声明的属性(可以认为声明过的 ",[21,15798,11659],{}," 被子组件自己“消费”了)",[255,15801,13883],{},[278,15803,15805],{"className":588,"code":15804,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"father\">\n \u003Ch3>父组件\u003C\u002Fh3>\n \u003CChild :a=\"a\" :b=\"b\" :c=\"c\" :d=\"d\" v-bind=\"{x:100,y:200}\" :updateA=\"updateA\"\u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Father\">\n import Child from '.\u002FChild.vue'\n import { ref } from \"vue\";\n let a = ref(1)\n let b = ref(2)\n let c = ref(3)\n let d = ref(4)\n\n function updateA(value){\n a.value = value\n }\n\u003C\u002Fscript>\n",[21,15806,15807,15815,15829,15842,15936,15944,15952,15956,15978,15988,16000,16017,16035,16053,16070,16074,16087,16096,16100],{"__ignoreMap":283},[287,15808,15809,15811,15813],{"class":289,"line":290},[287,15810,598],{"class":597},[287,15812,602],{"class":601},[287,15814,605],{"class":597},[287,15816,15817,15819,15821,15823,15825,15827],{"class":289,"line":296},[287,15818,610],{"class":597},[287,15820,613],{"class":601},[287,15822,617],{"class":616},[287,15824,620],{"class":597},[287,15826,13909],{"class":623},[287,15828,605],{"class":597},[287,15830,15831,15833,15835,15838,15840],{"class":289,"line":302},[287,15832,631],{"class":597},[287,15834,1245],{"class":601},[287,15836,15837],{"class":597},">父组件\u003C\u002F",[287,15839,1245],{"class":601},[287,15841,605],{"class":597},[287,15843,15844,15846,15848,15850,15852,15854,15856,15858,15860,15862,15865,15867,15869,15871,15873,15875,15878,15880,15882,15884,15886,15888,15891,15893,15895,15897,15899,15902,15904,15906,15909,15911,15914,15917,15919,15921,15923,15926,15928,15930,15932,15934],{"class":289,"line":309},[287,15845,13066],{"class":597},[287,15847,13958],{"class":601},[287,15849,8165],{"class":597},[287,15851,37],{"class":616},[287,15853,620],{"class":597},[287,15855,8173],{"class":623},[287,15857,37],{"class":597},[287,15859,8173],{"class":623},[287,15861,8165],{"class":597},[287,15863,15864],{"class":616},"b",[287,15866,620],{"class":597},[287,15868,8173],{"class":623},[287,15870,15864],{"class":597},[287,15872,8173],{"class":623},[287,15874,8165],{"class":597},[287,15876,15877],{"class":616},"c",[287,15879,620],{"class":597},[287,15881,8173],{"class":623},[287,15883,15877],{"class":597},[287,15885,8173],{"class":623},[287,15887,8165],{"class":597},[287,15889,15890],{"class":616},"d",[287,15892,620],{"class":597},[287,15894,8173],{"class":623},[287,15896,15890],{"class":597},[287,15898,8173],{"class":623},[287,15900,15901],{"class":616}," v-bind",[287,15903,620],{"class":597},[287,15905,8173],{"class":623},[287,15907,15908],{"class":597},"{x:",[287,15910,2974],{"class":741},[287,15912,15913],{"class":597},",y:",[287,15915,15916],{"class":741},"200",[287,15918,10624],{"class":597},[287,15920,8173],{"class":623},[287,15922,8165],{"class":597},[287,15924,15925],{"class":616},"updateA",[287,15927,620],{"class":597},[287,15929,8173],{"class":623},[287,15931,15925],{"class":597},[287,15933,8173],{"class":623},[287,15935,7793],{"class":597},[287,15937,15938,15940,15942],{"class":289,"line":315},[287,15939,645],{"class":597},[287,15941,613],{"class":601},[287,15943,605],{"class":597},[287,15945,15946,15948,15950],{"class":289,"line":321},[287,15947,654],{"class":597},[287,15949,602],{"class":601},[287,15951,605],{"class":597},[287,15953,15954],{"class":289,"line":326},[287,15955,306],{"emptyLinePlaceholder":305},[287,15957,15958,15960,15962,15964,15966,15968,15970,15972,15974,15976],{"class":289,"line":332},[287,15959,598],{"class":597},[287,15961,669],{"class":601},[287,15963,2010],{"class":616},[287,15965,672],{"class":616},[287,15967,620],{"class":597},[287,15969,677],{"class":623},[287,15971,2486],{"class":616},[287,15973,620],{"class":597},[287,15975,14033],{"class":623},[287,15977,605],{"class":597},[287,15979,15980,15982,15984,15986],{"class":289,"line":338},[287,15981,8240],{"class":684},[287,15983,14042],{"class":597},[287,15985,2213],{"class":684},[287,15987,14047],{"class":623},[287,15989,15990,15992,15994,15996,15998],{"class":289,"line":343},[287,15991,8240],{"class":684},[287,15993,3421],{"class":597},[287,15995,2213],{"class":684},[287,15997,14058],{"class":623},[287,15999,751],{"class":597},[287,16001,16002,16004,16007,16009,16011,16013,16015],{"class":289,"line":349},[287,16003,8263],{"class":684},[287,16005,16006],{"class":597}," a ",[287,16008,620],{"class":684},[287,16010,2522],{"class":616},[287,16012,1181],{"class":597},[287,16014,4518],{"class":741},[287,16016,2529],{"class":597},[287,16018,16019,16021,16024,16026,16028,16030,16033],{"class":289,"line":355},[287,16020,8263],{"class":684},[287,16022,16023],{"class":597}," b ",[287,16025,620],{"class":684},[287,16027,2522],{"class":616},[287,16029,1181],{"class":597},[287,16031,16032],{"class":741},"2",[287,16034,2529],{"class":597},[287,16036,16037,16039,16042,16044,16046,16048,16051],{"class":289,"line":361},[287,16038,8263],{"class":684},[287,16040,16041],{"class":597}," c ",[287,16043,620],{"class":684},[287,16045,2522],{"class":616},[287,16047,1181],{"class":597},[287,16049,16050],{"class":741},"3",[287,16052,2529],{"class":597},[287,16054,16055,16057,16060,16062,16064,16066,16068],{"class":289,"line":367},[287,16056,8263],{"class":684},[287,16058,16059],{"class":597}," d ",[287,16061,620],{"class":684},[287,16063,2522],{"class":616},[287,16065,1181],{"class":597},[287,16067,9899],{"class":741},[287,16069,2529],{"class":597},[287,16071,16072],{"class":289,"line":372},[287,16073,306],{"emptyLinePlaceholder":305},[287,16075,16076,16078,16081,16083,16085],{"class":289,"line":378},[287,16077,14104],{"class":684},[287,16079,16080],{"class":616}," updateA",[287,16082,1181],{"class":597},[287,16084,2305],{"class":4453},[287,16086,4457],{"class":597},[287,16088,16089,16092,16094],{"class":289,"line":384},[287,16090,16091],{"class":597}," a.value ",[287,16093,620],{"class":684},[287,16095,7148],{"class":597},[287,16097,16098],{"class":289,"line":555},[287,16099,1697],{"class":597},[287,16101,16102,16104,16106],{"class":289,"line":561},[287,16103,654],{"class":597},[287,16105,669],{"class":601},[287,16107,605],{"class":597},[255,16109,16110],{},"子组件：",[278,16112,16114],{"className":588,"code":16113,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"child\">\n \u003Ch3>子组件\u003C\u002Fh3>\n \u003CGrandChild v-bind=\"$attrs\"\u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Child\">\n import GrandChild from '.\u002FGrandChild.vue'\n\u003C\u002Fscript>\n",[21,16115,16116,16124,16138,16150,16169,16177,16185,16189,16211,16223],{"__ignoreMap":283},[287,16117,16118,16120,16122],{"class":289,"line":290},[287,16119,598],{"class":597},[287,16121,602],{"class":601},[287,16123,605],{"class":597},[287,16125,16126,16128,16130,16132,16134,16136],{"class":289,"line":296},[287,16127,631],{"class":597},[287,16129,613],{"class":601},[287,16131,617],{"class":616},[287,16133,620],{"class":597},[287,16135,14167],{"class":623},[287,16137,605],{"class":597},[287,16139,16140,16142,16144,16146,16148],{"class":289,"line":302},[287,16141,13066],{"class":597},[287,16143,1245],{"class":601},[287,16145,14178],{"class":597},[287,16147,1245],{"class":601},[287,16149,605],{"class":597},[287,16151,16152,16154,16157,16159,16161,16163,16165,16167],{"class":289,"line":309},[287,16153,13066],{"class":597},[287,16155,16156],{"class":601},"GrandChild",[287,16158,15901],{"class":616},[287,16160,620],{"class":597},[287,16162,8173],{"class":623},[287,16164,13830],{"class":597},[287,16166,8173],{"class":623},[287,16168,7793],{"class":597},[287,16170,16171,16173,16175],{"class":289,"line":315},[287,16172,2810],{"class":597},[287,16174,613],{"class":601},[287,16176,605],{"class":597},[287,16178,16179,16181,16183],{"class":289,"line":321},[287,16180,654],{"class":597},[287,16182,602],{"class":601},[287,16184,605],{"class":597},[287,16186,16187],{"class":289,"line":326},[287,16188,306],{"emptyLinePlaceholder":305},[287,16190,16191,16193,16195,16197,16199,16201,16203,16205,16207,16209],{"class":289,"line":332},[287,16192,598],{"class":597},[287,16194,669],{"class":601},[287,16196,2010],{"class":616},[287,16198,672],{"class":616},[287,16200,620],{"class":597},[287,16202,677],{"class":623},[287,16204,2486],{"class":616},[287,16206,620],{"class":597},[287,16208,14269],{"class":623},[287,16210,605],{"class":597},[287,16212,16213,16215,16218,16220],{"class":289,"line":338},[287,16214,8240],{"class":684},[287,16216,16217],{"class":597}," GrandChild ",[287,16219,2213],{"class":684},[287,16221,16222],{"class":623}," '.\u002FGrandChild.vue'\n",[287,16224,16225,16227,16229],{"class":289,"line":343},[287,16226,654],{"class":597},[287,16228,669],{"class":601},[287,16230,605],{"class":597},[255,16232,16233],{},"孙组件：",[278,16235,16237],{"className":588,"code":16236,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"grand-child\">\n \u003Ch3>孙组件\u003C\u002Fh3>\n \u003Ch4>a：{{ a }}\u003C\u002Fh4>\n \u003Ch4>b：{{ b }}\u003C\u002Fh4>\n \u003Ch4>c：{{ c }}\u003C\u002Fh4>\n \u003Ch4>d：{{ d }}\u003C\u002Fh4>\n \u003Ch4>x：{{ x }}\u003C\u002Fh4>\n \u003Ch4>y：{{ y }}\u003C\u002Fh4>\n \u003Cbutton @click=\"updateA(666)\">点我更新A\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"GrandChild\">\n defineProps(['a','b','c','d','x','y','updateA'])\n\u003C\u002Fscript>\n",[21,16238,16239,16247,16262,16275,16288,16301,16314,16327,16340,16353,16373,16381,16389,16393,16416,16457],{"__ignoreMap":283},[287,16240,16241,16243,16245],{"class":289,"line":290},[287,16242,598],{"class":597},[287,16244,602],{"class":601},[287,16246,605],{"class":597},[287,16248,16249,16251,16253,16255,16257,16260],{"class":289,"line":296},[287,16250,631],{"class":597},[287,16252,613],{"class":601},[287,16254,617],{"class":616},[287,16256,620],{"class":597},[287,16258,16259],{"class":623},"\"grand-child\"",[287,16261,605],{"class":597},[287,16263,16264,16266,16268,16271,16273],{"class":289,"line":302},[287,16265,13066],{"class":597},[287,16267,1245],{"class":601},[287,16269,16270],{"class":597},">孙组件\u003C\u002F",[287,16272,1245],{"class":601},[287,16274,605],{"class":597},[287,16276,16277,16279,16281,16284,16286],{"class":289,"line":309},[287,16278,13066],{"class":597},[287,16280,13931],{"class":601},[287,16282,16283],{"class":597},">a：{{ a }}\u003C\u002F",[287,16285,13931],{"class":601},[287,16287,605],{"class":597},[287,16289,16290,16292,16294,16297,16299],{"class":289,"line":315},[287,16291,13066],{"class":597},[287,16293,13931],{"class":601},[287,16295,16296],{"class":597},">b：{{ b }}\u003C\u002F",[287,16298,13931],{"class":601},[287,16300,605],{"class":597},[287,16302,16303,16305,16307,16310,16312],{"class":289,"line":321},[287,16304,13066],{"class":597},[287,16306,13931],{"class":601},[287,16308,16309],{"class":597},">c：{{ c }}\u003C\u002F",[287,16311,13931],{"class":601},[287,16313,605],{"class":597},[287,16315,16316,16318,16320,16323,16325],{"class":289,"line":326},[287,16317,13066],{"class":597},[287,16319,13931],{"class":601},[287,16321,16322],{"class":597},">d：{{ d }}\u003C\u002F",[287,16324,13931],{"class":601},[287,16326,605],{"class":597},[287,16328,16329,16331,16333,16336,16338],{"class":289,"line":332},[287,16330,13066],{"class":597},[287,16332,13931],{"class":601},[287,16334,16335],{"class":597},">x：{{ x }}\u003C\u002F",[287,16337,13931],{"class":601},[287,16339,605],{"class":597},[287,16341,16342,16344,16346,16349,16351],{"class":289,"line":338},[287,16343,13066],{"class":597},[287,16345,13931],{"class":601},[287,16347,16348],{"class":597},">y：{{ y }}\u003C\u002F",[287,16350,13931],{"class":601},[287,16352,605],{"class":597},[287,16354,16355,16357,16359,16361,16363,16366,16369,16371],{"class":289,"line":343},[287,16356,13066],{"class":597},[287,16358,945],{"class":601},[287,16360,948],{"class":616},[287,16362,620],{"class":597},[287,16364,16365],{"class":623},"\"updateA(666)\"",[287,16367,16368],{"class":597},">点我更新A\u003C\u002F",[287,16370,945],{"class":601},[287,16372,605],{"class":597},[287,16374,16375,16377,16379],{"class":289,"line":349},[287,16376,2810],{"class":597},[287,16378,613],{"class":601},[287,16380,605],{"class":597},[287,16382,16383,16385,16387],{"class":289,"line":355},[287,16384,654],{"class":597},[287,16386,602],{"class":601},[287,16388,605],{"class":597},[287,16390,16391],{"class":289,"line":361},[287,16392,306],{"emptyLinePlaceholder":305},[287,16394,16395,16397,16399,16401,16403,16405,16407,16409,16411,16414],{"class":289,"line":367},[287,16396,598],{"class":597},[287,16398,669],{"class":601},[287,16400,2010],{"class":616},[287,16402,672],{"class":616},[287,16404,620],{"class":597},[287,16406,677],{"class":623},[287,16408,2486],{"class":616},[287,16410,620],{"class":597},[287,16412,16413],{"class":623},"\"GrandChild\"",[287,16415,605],{"class":597},[287,16417,16418,16420,16422,16425,16427,16430,16432,16435,16437,16440,16442,16445,16447,16450,16452,16455],{"class":289,"line":372},[287,16419,14309],{"class":616},[287,16421,14312],{"class":597},[287,16423,16424],{"class":623},"'a'",[287,16426,4837],{"class":597},[287,16428,16429],{"class":623},"'b'",[287,16431,4837],{"class":597},[287,16433,16434],{"class":623},"'c'",[287,16436,4837],{"class":597},[287,16438,16439],{"class":623},"'d'",[287,16441,4837],{"class":597},[287,16443,16444],{"class":623},"'x'",[287,16446,4837],{"class":597},[287,16448,16449],{"class":623},"'y'",[287,16451,4837],{"class":597},[287,16453,16454],{"class":623},"'updateA'",[287,16456,3042],{"class":597},[287,16458,16459,16461,16463],{"class":289,"line":378},[287,16460,654],{"class":597},[287,16462,669],{"class":601},[287,16464,605],{"class":597},[81,16466,16468],{"id":16467},"_66-refsparent","6.6. 【$refs、$parent】",[157,16470,16471,16493],{},[17,16472,13854,16473],{},[14,16474,16475,16484],{},[17,16476,16477,16480,16481],{},[21,16478,16479],{},"$refs","用于 ：",[1326,16482,16483],{},"父→子。",[17,16485,16486,16489,16490],{},[21,16487,16488],{},"$parent","用于：",[1326,16491,16492],{},"子→父。",[17,16494,16495,16496],{},"原理如下：",[16497,16498,16499,16512],"table",{},[16500,16501,16502],"thead",{},[16503,16504,16505,16509],"tr",{},[16506,16507,16508],"th",{},"属性",[16506,16510,16511],{},"说明",[16513,16514,16515,16531],"tbody",{},[16503,16516,16517,16522],{},[16518,16519,16520],"td",{},[21,16521,16479],{},[16518,16523,16524,16525,16527,16528,16530],{},"值为对象，包含所有被",[21,16526,180],{},"属性标识的",[21,16529,132],{},"元素或组件实例。",[16503,16532,16533,16537],{},[16518,16534,16535],{},[21,16536,16488],{},[16518,16538,16539],{},"值为对象，当前组件的父组件实例对象。",[81,16541,16543],{"id":16542},"_67-provideinject","6.7. 【provide、inject】",[157,16545,16546,16553,16572],{},[17,16547,16548,16549,16552],{},"概述：实现",[1326,16550,16551],{},"祖孙组件","直接通信",[17,16554,16555,16556],{},"具体使用：",[14,16557,16558,16565],{},[17,16559,16560,16561,16564],{},"在祖先组件中通过",[21,16562,16563],{},"provide","配置向后代组件提供数据",[17,16566,16567,16568,16571],{},"在后代组件中通过",[21,16569,16570],{},"inject","配置来声明接收数据",[17,16573,11931,16574,16576,16577,16579,16580,16884,16889,16891,16892,16894,16895],{},[194,16575],{},"【第一步】父组件中，使用",[21,16578,16563],{},"提供数据",[278,16581,16583],{"className":588,"code":16582,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"father\">\n \u003Ch3>父组件\u003C\u002Fh3>\n \u003Ch4>资产：{{ money }}\u003C\u002Fh4>\n \u003Ch4>汽车：{{ car }}\u003C\u002Fh4>\n \u003Cbutton @click=\"money += 1\">资产+1\u003C\u002Fbutton>\n \u003Cbutton @click=\"car.price += 1\">汽车价格+1\u003C\u002Fbutton>\n \u003CChild\u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"Father\">\n import Child from '.\u002FChild.vue'\n import { ref,reactive,provide } from \"vue\";\n \u002F\u002F 数据\n let money = ref(100)\n let car = reactive({\n brand:'奔驰',\n price:100\n })\n \u002F\u002F 用于更新money的方法\n function updateMoney(value:number){\n money.value += value\n }\n \u002F\u002F 提供数据\n provide('moneyContext',{money,updateMoney})\n provide('car',car)\n\u003C\u002Fscript>\n",[21,16584,16585,16593,16607,16619,16632,16645,16665,16685,16693,16701,16709,16713,16735,16745,16758,16762,16779,16791,16800,16808,16812,16817,16834,16843,16847,16852,16865,16876],{"__ignoreMap":283},[287,16586,16587,16589,16591],{"class":289,"line":290},[287,16588,598],{"class":597},[287,16590,602],{"class":601},[287,16592,605],{"class":597},[287,16594,16595,16597,16599,16601,16603,16605],{"class":289,"line":296},[287,16596,610],{"class":597},[287,16598,613],{"class":601},[287,16600,617],{"class":616},[287,16602,620],{"class":597},[287,16604,13909],{"class":623},[287,16606,605],{"class":597},[287,16608,16609,16611,16613,16615,16617],{"class":289,"line":302},[287,16610,631],{"class":597},[287,16612,1245],{"class":601},[287,16614,15837],{"class":597},[287,16616,1245],{"class":601},[287,16618,605],{"class":597},[287,16620,16621,16623,16625,16628,16630],{"class":289,"line":309},[287,16622,631],{"class":597},[287,16624,13931],{"class":601},[287,16626,16627],{"class":597},">资产：{{ money }}\u003C\u002F",[287,16629,13931],{"class":601},[287,16631,605],{"class":597},[287,16633,16634,16636,16638,16641,16643],{"class":289,"line":315},[287,16635,631],{"class":597},[287,16637,13931],{"class":601},[287,16639,16640],{"class":597},">汽车：{{ car }}\u003C\u002F",[287,16642,13931],{"class":601},[287,16644,605],{"class":597},[287,16646,16647,16649,16651,16653,16655,16658,16661,16663],{"class":289,"line":321},[287,16648,631],{"class":597},[287,16650,945],{"class":601},[287,16652,948],{"class":616},[287,16654,620],{"class":597},[287,16656,16657],{"class":623},"\"money += 1\"",[287,16659,16660],{"class":597},">资产+1\u003C\u002F",[287,16662,945],{"class":601},[287,16664,605],{"class":597},[287,16666,16667,16669,16671,16673,16675,16678,16681,16683],{"class":289,"line":326},[287,16668,631],{"class":597},[287,16670,945],{"class":601},[287,16672,948],{"class":616},[287,16674,620],{"class":597},[287,16676,16677],{"class":623},"\"car.price += 1\"",[287,16679,16680],{"class":597},">汽车价格+1\u003C\u002F",[287,16682,945],{"class":601},[287,16684,605],{"class":597},[287,16686,16687,16689,16691],{"class":289,"line":332},[287,16688,631],{"class":597},[287,16690,13958],{"class":601},[287,16692,7793],{"class":597},[287,16694,16695,16697,16699],{"class":289,"line":338},[287,16696,645],{"class":597},[287,16698,613],{"class":601},[287,16700,605],{"class":597},[287,16702,16703,16705,16707],{"class":289,"line":343},[287,16704,654],{"class":597},[287,16706,602],{"class":601},[287,16708,605],{"class":597},[287,16710,16711],{"class":289,"line":349},[287,16712,306],{"emptyLinePlaceholder":305},[287,16714,16715,16717,16719,16721,16723,16725,16727,16729,16731,16733],{"class":289,"line":355},[287,16716,598],{"class":597},[287,16718,669],{"class":601},[287,16720,2010],{"class":616},[287,16722,672],{"class":616},[287,16724,620],{"class":597},[287,16726,677],{"class":623},[287,16728,2486],{"class":616},[287,16730,620],{"class":597},[287,16732,14033],{"class":623},[287,16734,605],{"class":597},[287,16736,16737,16739,16741,16743],{"class":289,"line":361},[287,16738,2498],{"class":684},[287,16740,14042],{"class":597},[287,16742,2213],{"class":684},[287,16744,14047],{"class":623},[287,16746,16747,16749,16752,16754,16756],{"class":289,"line":367},[287,16748,2498],{"class":684},[287,16750,16751],{"class":597}," { ref,reactive,provide } ",[287,16753,2213],{"class":684},[287,16755,14058],{"class":623},[287,16757,751],{"class":597},[287,16759,16760],{"class":289,"line":372},[287,16761,3957],{"class":702},[287,16763,16764,16766,16769,16771,16773,16775,16777],{"class":289,"line":378},[287,16765,2050],{"class":684},[287,16767,16768],{"class":597}," money ",[287,16770,620],{"class":684},[287,16772,2522],{"class":616},[287,16774,1181],{"class":597},[287,16776,2974],{"class":741},[287,16778,2529],{"class":597},[287,16780,16781,16783,16785,16787,16789],{"class":289,"line":384},[287,16782,2050],{"class":684},[287,16784,2957],{"class":597},[287,16786,620],{"class":684},[287,16788,2962],{"class":616},[287,16790,2245],{"class":597},[287,16792,16793,16796,16798],{"class":289,"line":555},[287,16794,16795],{"class":597}," brand:",[287,16797,2968],{"class":623},[287,16799,1051],{"class":597},[287,16801,16802,16805],{"class":289,"line":561},[287,16803,16804],{"class":597}," price:",[287,16806,16807],{"class":741},"100\n",[287,16809,16810],{"class":289,"line":567},[287,16811,4529],{"class":597},[287,16813,16814],{"class":289,"line":573},[287,16815,16816],{"class":702}," \u002F\u002F 用于更新money的方法\n",[287,16818,16819,16821,16824,16826,16828,16830,16832],{"class":289,"line":579},[287,16820,2090],{"class":684},[287,16822,16823],{"class":616}," updateMoney",[287,16825,1181],{"class":597},[287,16827,2305],{"class":4453},[287,16829,8076],{"class":684},[287,16831,12837],{"class":741},[287,16833,4457],{"class":597},[287,16835,16836,16839,16841],{"class":289,"line":1120},[287,16837,16838],{"class":597}," money.value ",[287,16840,1156],{"class":684},[287,16842,7148],{"class":597},[287,16844,16845],{"class":289,"line":1134},[287,16846,708],{"class":597},[287,16848,16849],{"class":289,"line":1140},[287,16850,16851],{"class":702}," \u002F\u002F 提供数据\n",[287,16853,16854,16857,16859,16862],{"class":289,"line":1148},[287,16855,16856],{"class":616}," provide",[287,16858,1181],{"class":597},[287,16860,16861],{"class":623},"'moneyContext'",[287,16863,16864],{"class":597},",{money,updateMoney})\n",[287,16866,16867,16869,16871,16873],{"class":289,"line":1162},[287,16868,16856],{"class":616},[287,16870,1181],{"class":597},[287,16872,14315],{"class":623},[287,16874,16875],{"class":597},",car)\n",[287,16877,16878,16880,16882],{"class":289,"line":1167},[287,16879,654],{"class":597},[287,16881,669],{"class":601},[287,16883,605],{"class":597},[264,16885,16886],{},[255,16887,16888],{},"注意：子组件中不用编写任何东西，是不受到任何打扰的",[194,16890],{},"【第二步】孙组件中使用",[21,16893,16570],{},"配置项接受数据。",[278,16896,16898],{"className":588,"code":16897,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"grand-child\">\n \u003Ch3>我是孙组件\u003C\u002Fh3>\n \u003Ch4>资产：{{ money }}\u003C\u002Fh4>\n \u003Ch4>汽车：{{ car }}\u003C\u002Fh4>\n \u003Cbutton @click=\"updateMoney(6)\">点我\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\" name=\"GrandChild\">\n import { inject } from 'vue';\n \u002F\u002F 注入数据\n let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})\n let car = inject('car')\n\u003C\u002Fscript>\n",[21,16899,16900,16908,16922,16935,16947,16959,16979,16987,16995,16999,17021,17035,17040,17083,17099],{"__ignoreMap":283},[287,16901,16902,16904,16906],{"class":289,"line":290},[287,16903,598],{"class":597},[287,16905,602],{"class":601},[287,16907,605],{"class":597},[287,16909,16910,16912,16914,16916,16918,16920],{"class":289,"line":296},[287,16911,610],{"class":597},[287,16913,613],{"class":601},[287,16915,617],{"class":616},[287,16917,620],{"class":597},[287,16919,16259],{"class":623},[287,16921,605],{"class":597},[287,16923,16924,16926,16928,16931,16933],{"class":289,"line":302},[287,16925,631],{"class":597},[287,16927,1245],{"class":601},[287,16929,16930],{"class":597},">我是孙组件\u003C\u002F",[287,16932,1245],{"class":601},[287,16934,605],{"class":597},[287,16936,16937,16939,16941,16943,16945],{"class":289,"line":309},[287,16938,631],{"class":597},[287,16940,13931],{"class":601},[287,16942,16627],{"class":597},[287,16944,13931],{"class":601},[287,16946,605],{"class":597},[287,16948,16949,16951,16953,16955,16957],{"class":289,"line":315},[287,16950,631],{"class":597},[287,16952,13931],{"class":601},[287,16954,16640],{"class":597},[287,16956,13931],{"class":601},[287,16958,605],{"class":597},[287,16960,16961,16963,16965,16967,16969,16972,16975,16977],{"class":289,"line":321},[287,16962,631],{"class":597},[287,16964,945],{"class":601},[287,16966,948],{"class":616},[287,16968,620],{"class":597},[287,16970,16971],{"class":623},"\"updateMoney(6)\"",[287,16973,16974],{"class":597},">点我\u003C\u002F",[287,16976,945],{"class":601},[287,16978,605],{"class":597},[287,16980,16981,16983,16985],{"class":289,"line":326},[287,16982,645],{"class":597},[287,16984,613],{"class":601},[287,16986,605],{"class":597},[287,16988,16989,16991,16993],{"class":289,"line":332},[287,16990,654],{"class":597},[287,16992,602],{"class":601},[287,16994,605],{"class":597},[287,16996,16997],{"class":289,"line":338},[287,16998,306],{"emptyLinePlaceholder":305},[287,17000,17001,17003,17005,17007,17009,17011,17013,17015,17017,17019],{"class":289,"line":343},[287,17002,598],{"class":597},[287,17004,669],{"class":601},[287,17006,2010],{"class":616},[287,17008,672],{"class":616},[287,17010,620],{"class":597},[287,17012,677],{"class":623},[287,17014,2486],{"class":616},[287,17016,620],{"class":597},[287,17018,16413],{"class":623},[287,17020,605],{"class":597},[287,17022,17023,17025,17028,17030,17033],{"class":289,"line":349},[287,17024,2498],{"class":684},[287,17026,17027],{"class":597}," { inject } ",[287,17029,2213],{"class":684},[287,17031,17032],{"class":623}," 'vue'",[287,17034,751],{"class":597},[287,17036,17037],{"class":289,"line":355},[287,17038,17039],{"class":702}," \u002F\u002F 注入数据\n",[287,17041,17042,17045,17048,17050,17053,17055,17057,17060,17062,17064,17067,17069,17072,17074,17076,17078,17080],{"class":289,"line":361},[287,17043,17044],{"class":684}," let",[287,17046,17047],{"class":597}," {money,updateMoney} ",[287,17049,620],{"class":684},[287,17051,17052],{"class":616}," inject",[287,17054,1181],{"class":597},[287,17056,16861],{"class":623},[287,17058,17059],{"class":597},",{money:",[287,17061,761],{"class":741},[287,17063,4837],{"class":597},[287,17065,17066],{"class":616},"updateMoney",[287,17068,13338],{"class":597},[287,17070,17071],{"class":4453},"x",[287,17073,8076],{"class":684},[287,17075,12837],{"class":741},[287,17077,4843],{"class":597},[287,17079,1754],{"class":684},[287,17081,17082],{"class":597},"{}})\n",[287,17084,17085,17087,17089,17091,17093,17095,17097],{"class":289,"line":367},[287,17086,2050],{"class":684},[287,17088,2957],{"class":597},[287,17090,620],{"class":684},[287,17092,17052],{"class":616},[287,17094,1181],{"class":597},[287,17096,14315],{"class":623},[287,17098,2529],{"class":597},[287,17100,17101,17103,17105],{"class":289,"line":372},[287,17102,654],{"class":597},[287,17104,669],{"class":601},[287,17106,605],{"class":597},[81,17108,17110],{"id":17109},"_68-pinia","6.8. 【pinia】",[255,17112,17113,17114,17116],{},"参考之前",[21,17115,12119],{},"部分的讲解",[81,17118,17120],{"id":17119},"_69-slot","6.9. 【slot】",[1245,17122,17124],{"id":17123},"_1-默认插槽","1. 默认插槽",[255,17126,17127],{},[74,17128],{"alt":74,"src":17129},"http:\u002F\u002F49.232.112.44\u002Fimages\u002Fdefault_slot.png",[278,17131,17133],{"className":588,"code":17132,"language":590,"meta":283,"style":283},"父组件中：\n \u003CCategory title=\"今日热门游戏\">\n \u003Cul>\n \u003Cli v-for=\"g in games\" :key=\"g.id\">{{ g.name }}\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002FCategory>\n子组件中：\n \u003Ctemplate>\n \u003Cdiv class=\"item\">\n \u003Ch3>{{ title }}\u003C\u002Fh3>\n \u003C!-- 默认插槽 -->\n \u003Cslot>\u003C\u002Fslot>\n \u003C\u002Fdiv>\n \u003C\u002Ftemplate>\n",[21,17134,17135,17140,17157,17162,17167,17172,17181,17186,17194,17210,17224,17229,17242,17251],{"__ignoreMap":283},[287,17136,17137],{"class":289,"line":290},[287,17138,17139],{"class":597},"父组件中：\n",[287,17141,17142,17144,17147,17150,17152,17155],{"class":289,"line":296},[287,17143,13066],{"class":597},[287,17145,17146],{"class":601},"Category",[287,17148,17149],{"class":616}," title",[287,17151,620],{"class":597},[287,17153,17154],{"class":623},"\"今日热门游戏\"",[287,17156,605],{"class":597},[287,17158,17159],{"class":289,"line":302},[287,17160,17161],{"class":597}," \u003Cul>\n",[287,17163,17164],{"class":289,"line":309},[287,17165,17166],{"class":597}," \u003Cli v-for=\"g in games\" :key=\"g.id\">{{ g.name }}\u003C\u002Fli>\n",[287,17168,17169],{"class":289,"line":315},[287,17170,17171],{"class":597}," \u003C\u002Ful>\n",[287,17173,17174,17177,17179],{"class":289,"line":321},[287,17175,17176],{"class":597}," \u003C\u002F",[287,17178,17146],{"class":601},[287,17180,605],{"class":597},[287,17182,17183],{"class":289,"line":326},[287,17184,17185],{"class":597},"子组件中：\n",[287,17187,17188,17190,17192],{"class":289,"line":332},[287,17189,13066],{"class":597},[287,17191,602],{"class":601},[287,17193,605],{"class":597},[287,17195,17196,17199,17201,17203,17205,17208],{"class":289,"line":338},[287,17197,17198],{"class":597}," \u003C",[287,17200,613],{"class":601},[287,17202,617],{"class":616},[287,17204,620],{"class":597},[287,17206,17207],{"class":623},"\"item\"",[287,17209,605],{"class":597},[287,17211,17212,17215,17217,17220,17222],{"class":289,"line":343},[287,17213,17214],{"class":597}," \u003C",[287,17216,1245],{"class":601},[287,17218,17219],{"class":597},">{{ title }}\u003C\u002F",[287,17221,1245],{"class":601},[287,17223,605],{"class":597},[287,17225,17226],{"class":289,"line":349},[287,17227,17228],{"class":702}," \u003C!-- 默认插槽 -->\n",[287,17230,17231,17233,17236,17238,17240],{"class":289,"line":355},[287,17232,17214],{"class":597},[287,17234,17235],{"class":601},"slot",[287,17237,10305],{"class":597},[287,17239,17235],{"class":601},[287,17241,605],{"class":597},[287,17243,17244,17247,17249],{"class":289,"line":361},[287,17245,17246],{"class":597}," \u003C\u002F",[287,17248,613],{"class":601},[287,17250,605],{"class":597},[287,17252,17253,17255,17257],{"class":289,"line":367},[287,17254,17176],{"class":597},[287,17256,602],{"class":601},[287,17258,605],{"class":597},[1245,17260,17262],{"id":17261},"_2-具名插槽","2. 具名插槽",[278,17264,17266],{"className":588,"code":17265,"language":590,"meta":283,"style":283},"父组件中：\n \u003CCategory title=\"今日热门游戏\">\n \u003Ctemplate v-slot:s1>\n \u003Cul>\n \u003Cli v-for=\"g in games\" :key=\"g.id\">{{ g.name }}\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Ftemplate>\n \u003Ctemplate #s2>\n \u003Ca href=\"\">更多\u003C\u002Fa>\n \u003C\u002Ftemplate>\n \u003C\u002FCategory>\n子组件中：\n \u003Ctemplate>\n \u003Cdiv class=\"item\">\n \u003Ch3>{{ title }}\u003C\u002Fh3>\n \u003Cslot name=\"s1\">\u003C\u002Fslot>\n \u003Cslot name=\"s2\">\u003C\u002Fslot>\n \u003C\u002Fdiv>\n \u003C\u002Ftemplate>\n",[21,17267,17268,17272,17286,17291,17296,17301,17306,17311,17316,17321,17325,17333,17337,17345,17359,17371,17390,17409,17417],{"__ignoreMap":283},[287,17269,17270],{"class":289,"line":290},[287,17271,17139],{"class":597},[287,17273,17274,17276,17278,17280,17282,17284],{"class":289,"line":296},[287,17275,13066],{"class":597},[287,17277,17146],{"class":601},[287,17279,17149],{"class":616},[287,17281,620],{"class":597},[287,17283,17154],{"class":623},[287,17285,605],{"class":597},[287,17287,17288],{"class":289,"line":302},[287,17289,17290],{"class":597}," \u003Ctemplate v-slot:s1>\n",[287,17292,17293],{"class":289,"line":309},[287,17294,17295],{"class":597}," \u003Cul>\n",[287,17297,17298],{"class":289,"line":315},[287,17299,17300],{"class":597}," \u003Cli v-for=\"g in games\" :key=\"g.id\">{{ g.name }}\u003C\u002Fli>\n",[287,17302,17303],{"class":289,"line":321},[287,17304,17305],{"class":597}," \u003C\u002Ful>\n",[287,17307,17308],{"class":289,"line":326},[287,17309,17310],{"class":597}," \u003C\u002Ftemplate>\n",[287,17312,17313],{"class":289,"line":332},[287,17314,17315],{"class":597}," \u003Ctemplate #s2>\n",[287,17317,17318],{"class":289,"line":338},[287,17319,17320],{"class":597}," \u003Ca href=\"\">更多\u003C\u002Fa>\n",[287,17322,17323],{"class":289,"line":343},[287,17324,17310],{"class":597},[287,17326,17327,17329,17331],{"class":289,"line":349},[287,17328,17176],{"class":597},[287,17330,17146],{"class":601},[287,17332,605],{"class":597},[287,17334,17335],{"class":289,"line":355},[287,17336,17185],{"class":597},[287,17338,17339,17341,17343],{"class":289,"line":361},[287,17340,13066],{"class":597},[287,17342,602],{"class":601},[287,17344,605],{"class":597},[287,17346,17347,17349,17351,17353,17355,17357],{"class":289,"line":367},[287,17348,17198],{"class":597},[287,17350,613],{"class":601},[287,17352,617],{"class":616},[287,17354,620],{"class":597},[287,17356,17207],{"class":623},[287,17358,605],{"class":597},[287,17360,17361,17363,17365,17367,17369],{"class":289,"line":372},[287,17362,17214],{"class":597},[287,17364,1245],{"class":601},[287,17366,17219],{"class":597},[287,17368,1245],{"class":601},[287,17370,605],{"class":597},[287,17372,17373,17375,17377,17379,17381,17384,17386,17388],{"class":289,"line":378},[287,17374,17214],{"class":597},[287,17376,17235],{"class":601},[287,17378,2486],{"class":616},[287,17380,620],{"class":597},[287,17382,17383],{"class":623},"\"s1\"",[287,17385,10305],{"class":597},[287,17387,17235],{"class":601},[287,17389,605],{"class":597},[287,17391,17392,17394,17396,17398,17400,17403,17405,17407],{"class":289,"line":384},[287,17393,17214],{"class":597},[287,17395,17235],{"class":601},[287,17397,2486],{"class":616},[287,17399,620],{"class":597},[287,17401,17402],{"class":623},"\"s2\"",[287,17404,10305],{"class":597},[287,17406,17235],{"class":601},[287,17408,605],{"class":597},[287,17410,17411,17413,17415],{"class":289,"line":555},[287,17412,17246],{"class":597},[287,17414,613],{"class":601},[287,17416,605],{"class":597},[287,17418,17419,17421,17423],{"class":289,"line":561},[287,17420,17176],{"class":597},[287,17422,602],{"class":601},[287,17424,605],{"class":597},[1245,17426,17428],{"id":17427},"_3-作用域插槽","3. 作用域插槽",[157,17430,17431,17445],{},[17,17432,17433,17434,17437,17438,17440,17441,17444],{},"理解：",[287,17435,17436],{"style":14631},"数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。","（新闻数据在",[21,17439,10837],{},"组件中，但使用数据所遍历出来的结构由",[21,17442,17443],{},"App","组件决定）",[17,17446,11931,17447],{},[278,17448,17450],{"className":588,"code":17449,"language":590,"meta":283,"style":283},"父组件中：\n \u003CGame v-slot=\"params\">\n \u003C!-- \u003CGame v-slot:default=\"params\"> -->\n \u003C!-- \u003CGame #default=\"params\"> -->\n \u003Cul>\n \u003Cli v-for=\"g in params.games\" :key=\"g.id\">{{ g.name }}\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002FGame>\n\n子组件中：\n \u003Ctemplate>\n \u003Cdiv class=\"category\">\n \u003Ch2>今日游戏榜单\u003C\u002Fh2>\n \u003Cslot :games=\"games\" a=\"哈哈\">\u003C\u002Fslot>\n \u003C\u002Fdiv>\n \u003C\u002Ftemplate>\n\n \u003Cscript setup lang=\"ts\" name=\"Category\">\n import {reactive} from 'vue'\n let games = reactive([\n {id:'asgdytsa01',name:'英雄联盟'},\n {id:'asgdytsa02',name:'王者荣耀'},\n {id:'asgdytsa03',name:'红色警戒'},\n {id:'asgdytsa04',name:'斗罗大陆'}\n ])\n \u003C\u002Fscript>\n",[21,17451,17452,17456,17476,17481,17486,17491,17496,17501,17509,17513,17517,17525,17540,17553,17581,17589,17597,17601,17624,17635,17648,17662,17675,17689,17703,17708],{"__ignoreMap":283},[287,17453,17454],{"class":289,"line":290},[287,17455,17139],{"class":597},[287,17457,17458,17460,17463,17466,17468,17470,17472,17474],{"class":289,"line":296},[287,17459,2780],{"class":597},[287,17461,17462],{"class":601},"Game",[287,17464,17465],{"class":616}," v-slot",[287,17467,620],{"class":597},[287,17469,8173],{"class":623},[287,17471,11633],{"class":597},[287,17473,8173],{"class":623},[287,17475,605],{"class":597},[287,17477,17478],{"class":289,"line":302},[287,17479,17480],{"class":597}," \u003C!-- \u003CGame v-slot:default=\"params\"> -->\n",[287,17482,17483],{"class":289,"line":309},[287,17484,17485],{"class":597}," \u003C!-- \u003CGame #default=\"params\"> -->\n",[287,17487,17488],{"class":289,"line":315},[287,17489,17490],{"class":597}," \u003Cul>\n",[287,17492,17493],{"class":289,"line":321},[287,17494,17495],{"class":597}," \u003Cli v-for=\"g in params.games\" :key=\"g.id\">{{ g.name }}\u003C\u002Fli>\n",[287,17497,17498],{"class":289,"line":326},[287,17499,17500],{"class":597}," \u003C\u002Ful>\n",[287,17502,17503,17505,17507],{"class":289,"line":332},[287,17504,8426],{"class":597},[287,17506,17462],{"class":601},[287,17508,605],{"class":597},[287,17510,17511],{"class":289,"line":338},[287,17512,306],{"emptyLinePlaceholder":305},[287,17514,17515],{"class":289,"line":343},[287,17516,17185],{"class":597},[287,17518,17519,17521,17523],{"class":289,"line":349},[287,17520,2780],{"class":597},[287,17522,602],{"class":601},[287,17524,605],{"class":597},[287,17526,17527,17529,17531,17533,17535,17538],{"class":289,"line":355},[287,17528,13066],{"class":597},[287,17530,613],{"class":601},[287,17532,617],{"class":616},[287,17534,620],{"class":597},[287,17536,17537],{"class":623},"\"category\"",[287,17539,605],{"class":597},[287,17541,17542,17544,17546,17549,17551],{"class":289,"line":361},[287,17543,17198],{"class":597},[287,17545,81],{"class":601},[287,17547,17548],{"class":597},">今日游戏榜单\u003C\u002F",[287,17550,81],{"class":601},[287,17552,605],{"class":597},[287,17554,17555,17557,17559,17562,17564,17567,17570,17572,17575,17577,17579],{"class":289,"line":367},[287,17556,17198],{"class":597},[287,17558,17235],{"class":601},[287,17560,17561],{"class":616}," :games",[287,17563,620],{"class":597},[287,17565,17566],{"class":623},"\"games\"",[287,17568,17569],{"class":616}," a",[287,17571,620],{"class":597},[287,17573,17574],{"class":623},"\"哈哈\"",[287,17576,10305],{"class":597},[287,17578,17235],{"class":601},[287,17580,605],{"class":597},[287,17582,17583,17585,17587],{"class":289,"line":372},[287,17584,17176],{"class":597},[287,17586,613],{"class":601},[287,17588,605],{"class":597},[287,17590,17591,17593,17595],{"class":289,"line":378},[287,17592,8426],{"class":597},[287,17594,602],{"class":601},[287,17596,605],{"class":597},[287,17598,17599],{"class":289,"line":384},[287,17600,306],{"emptyLinePlaceholder":305},[287,17602,17603,17605,17607,17609,17611,17613,17615,17617,17619,17622],{"class":289,"line":555},[287,17604,2780],{"class":597},[287,17606,669],{"class":601},[287,17608,2010],{"class":616},[287,17610,672],{"class":616},[287,17612,620],{"class":597},[287,17614,677],{"class":623},[287,17616,2486],{"class":616},[287,17618,620],{"class":597},[287,17620,17621],{"class":623},"\"Category\"",[287,17623,605],{"class":597},[287,17625,17626,17629,17631,17633],{"class":289,"line":561},[287,17627,17628],{"class":684}," import",[287,17630,8231],{"class":597},[287,17632,2213],{"class":684},[287,17634,2506],{"class":623},[287,17636,17637,17640,17642,17644,17646],{"class":289,"line":567},[287,17638,17639],{"class":684}," let",[287,17641,2984],{"class":597},[287,17643,620],{"class":684},[287,17645,2962],{"class":616},[287,17647,2991],{"class":597},[287,17649,17650,17653,17656,17658,17660],{"class":289,"line":573},[287,17651,17652],{"class":597}," {id:",[287,17654,17655],{"class":623},"'asgdytsa01'",[287,17657,8289],{"class":597},[287,17659,3005],{"class":623},[287,17661,8298],{"class":597},[287,17663,17664,17666,17669,17671,17673],{"class":289,"line":579},[287,17665,17652],{"class":597},[287,17667,17668],{"class":623},"'asgdytsa02'",[287,17670,8289],{"class":597},[287,17672,3020],{"class":623},[287,17674,8298],{"class":597},[287,17676,17677,17679,17682,17684,17687],{"class":289,"line":1120},[287,17678,17652],{"class":597},[287,17680,17681],{"class":623},"'asgdytsa03'",[287,17683,8289],{"class":597},[287,17685,17686],{"class":623},"'红色警戒'",[287,17688,8298],{"class":597},[287,17690,17691,17693,17696,17698,17701],{"class":289,"line":1134},[287,17692,17652],{"class":597},[287,17694,17695],{"class":623},"'asgdytsa04'",[287,17697,8289],{"class":597},[287,17699,17700],{"class":623},"'斗罗大陆'",[287,17702,1762],{"class":597},[287,17704,17705],{"class":289,"line":1140},[287,17706,17707],{"class":597}," ])\n",[287,17709,17710,17712,17714],{"class":289,"line":1148},[287,17711,8426],{"class":597},[287,17713,669],{"class":601},[287,17715,605],{"class":597},[10,17717,17719],{"id":17718},"_7-其它-api","7. 其它 API",[81,17721,17723],{"id":17722},"_71shallowref-与-shallowreactive","7.1.【shallowRef 与 shallowReactive 】",[1245,17725,17727],{"id":17726},"shallowref",[21,17728,17729],{},"shallowRef",[157,17731,17732,17735,17758],{},[17,17733,17734],{},"作用：创建一个响应式数据，但只对顶层属性进行响应式处理。",[17,17736,17737,17738],{},"用法：",[278,17739,17741],{"className":8048,"code":17740,"language":8050,"meta":283,"style":283},"let myVar = shallowRef(initialValue);\n",[21,17742,17743],{"__ignoreMap":283},[287,17744,17745,17747,17750,17752,17755],{"class":289,"line":290},[287,17746,2954],{"class":684},[287,17748,17749],{"class":597}," myVar ",[287,17751,620],{"class":684},[287,17753,17754],{"class":616}," shallowRef",[287,17756,17757],{"class":597},"(initialValue);\n",[17,17759,17760],{},"特点：只跟踪引用值的变化，不关心值内部的属性变化。",[1245,17762,17764],{"id":17763},"shallowreactive",[21,17765,17766],{},"shallowReactive",[157,17768,17769,17772,17800],{},[17,17770,17771],{},"作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的",[17,17773,17737,17774],{},[278,17775,17777],{"className":8048,"code":17776,"language":8050,"meta":283,"style":283},"const myObj = shallowReactive({ ... });\n",[21,17778,17779],{"__ignoreMap":283},[287,17780,17781,17783,17786,17788,17791,17794,17797],{"class":289,"line":290},[287,17782,9965],{"class":684},[287,17784,17785],{"class":741}," myObj",[287,17787,4825],{"class":684},[287,17789,17790],{"class":616}," shallowReactive",[287,17792,17793],{"class":597},"({ ",[287,17795,17796],{"class":684},"...",[287,17798,17799],{"class":597}," });\n",[17,17801,17802],{},"特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。",[1245,17804,17805],{"id":17805},"总结",[264,17807,17808],{},[255,17809,17810,17811,4926,17818,17825,17826,17828],{},"通过使用 ",[37,17812,17815],{"href":17813,"rel":17814},"https:\u002F\u002Fcn.vuejs.org\u002Fapi\u002Freactivity-advanced.html#shallowref",[41],[21,17816,17817],{},"shallowRef()",[37,17819,17822],{"href":17820,"rel":17821},"https:\u002F\u002Fcn.vuejs.org\u002Fapi\u002Freactivity-advanced.html#shallowreactive",[41],[21,17823,17824],{},"shallowReactive()"," 来绕开深度响应。浅层式 ",[21,17827,167],{}," 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。",[81,17830,17832],{"id":17831},"_72readonly-与-shallowreadonly","7.2.【readonly 与 shallowReadonly】",[1245,17834,17836],{"id":17835},"readonly",[1326,17837,17838],{},[21,17839,17835],{},[157,17841,17842,17845,17884,17894],{},[17,17843,17844],{},"作用：用于创建一个对象的深只读副本。",[17,17846,17737,17847],{},[278,17848,17850],{"className":8048,"code":17849,"language":8050,"meta":283,"style":283},"const original = reactive({ ... });\nconst readOnlyCopy = readonly(original);\n",[21,17851,17852,17869],{"__ignoreMap":283},[287,17853,17854,17856,17859,17861,17863,17865,17867],{"class":289,"line":290},[287,17855,9965],{"class":684},[287,17857,17858],{"class":741}," original",[287,17860,4825],{"class":684},[287,17862,2962],{"class":616},[287,17864,17793],{"class":597},[287,17866,17796],{"class":684},[287,17868,17799],{"class":597},[287,17870,17871,17873,17876,17878,17881],{"class":289,"line":296},[287,17872,9965],{"class":684},[287,17874,17875],{"class":741}," readOnlyCopy",[287,17877,4825],{"class":684},[287,17879,17880],{"class":616}," readonly",[287,17882,17883],{"class":597},"(original);\n",[17,17885,4582,17886],{},[14,17887,17888,17891],{},[17,17889,17890],{},"对象的所有嵌套属性都将变为只读。",[17,17892,17893],{},"任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。",[17,17895,17896,17897],{},"应用场景：",[14,17898,17899,17902],{},[17,17900,17901],{},"创建不可变的状态快照。",[17,17903,17904],{},"保护全局状态或配置不被修改。",[1245,17906,17908],{"id":17907},"shallowreadonly",[1326,17909,17910],{},[21,17911,17912],{},"shallowReadonly",[157,17914,17915,17921,17958],{},[17,17916,17917,17918,17920],{},"作用：与 ",[21,17919,17835],{}," 类似，但只作用于对象的顶层属性。",[17,17922,17737,17923],{},[278,17924,17926],{"className":8048,"code":17925,"language":8050,"meta":283,"style":283},"const original = reactive({ ... });\nconst shallowReadOnlyCopy = shallowReadonly(original);\n",[21,17927,17928,17944],{"__ignoreMap":283},[287,17929,17930,17932,17934,17936,17938,17940,17942],{"class":289,"line":290},[287,17931,9965],{"class":684},[287,17933,17858],{"class":741},[287,17935,4825],{"class":684},[287,17937,2962],{"class":616},[287,17939,17793],{"class":597},[287,17941,17796],{"class":684},[287,17943,17799],{"class":597},[287,17945,17946,17948,17951,17953,17956],{"class":289,"line":296},[287,17947,9965],{"class":684},[287,17949,17950],{"class":741}," shallowReadOnlyCopy",[287,17952,4825],{"class":684},[287,17954,17955],{"class":616}," shallowReadonly",[287,17957,17883],{"class":597},[17,17959,4582,17960],{},[14,17961,17962,17965],{},[17,17963,17964],{},"只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。",[17,17966,17967],{},"适用于只需保护对象顶层属性的场景。",[81,17969,17971],{"id":17970},"_73toraw-与-markraw","7.3.【toRaw 与 markRaw】",[1245,17973,17975],{"id":17974},"toraw",[21,17976,17977],{},"toRaw",[157,17979,17980,18002],{},[17,17981,17982,17983,17985,17986,17991],{},"作用：用于获取一个响应式对象的原始对象， ",[21,17984,17977],{}," 返回的对象不再是响应式的，不会触发视图更新。",[264,17987,17988],{},[255,17989,17990],{},"官网描述：这是一个可以用于临时读取而不引起代理访问\u002F跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。",[264,17992,17993],{},[255,17994,17995,17996,17998,17999,18001],{},"何时使用？ —— 在需要将响应式对象传递给非 ",[21,17997,8360],{}," 的库或外部系统时，使用 ",[21,18000,17977],{}," 可以确保它们收到的是普通对象",[17,18003,11931,18004],{},[278,18005,18007],{"className":8048,"code":18006,"language":8050,"meta":283,"style":283},"import { reactive,toRaw,markRaw,isReactive } from \"vue\";\n\n\u002F* toRaw *\u002F\n\u002F\u002F 响应式对象\nlet person = reactive({name:'tony',age:18})\n\u002F\u002F 原始对象\nlet rawPerson = toRaw(person)\n\n\n\u002F* markRaw *\u002F\nlet citysd = markRaw([\n {id:'asdda01',name:'北京'},\n {id:'asdda02',name:'上海'},\n {id:'asdda03',name:'天津'},\n {id:'asdda04',name:'重庆'}\n])\n\u002F\u002F 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了\nlet citys2 = reactive(citys)\nconsole.log(isReactive(person))\nconsole.log(isReactive(rawPerson))\nconsole.log(isReactive(citys))\nconsole.log(isReactive(citys2))\n",[21,18008,18009,18022,18026,18031,18036,18057,18062,18076,18080,18084,18089,18103,18118,18132,18146,18160,18164,18169,18183,18197,18210,18223],{"__ignoreMap":283},[287,18010,18011,18013,18016,18018,18020],{"class":289,"line":290},[287,18012,2207],{"class":684},[287,18014,18015],{"class":597}," { reactive,toRaw,markRaw,isReactive } ",[287,18017,2213],{"class":684},[287,18019,14058],{"class":623},[287,18021,751],{"class":597},[287,18023,18024],{"class":289,"line":296},[287,18025,306],{"emptyLinePlaceholder":305},[287,18027,18028],{"class":289,"line":302},[287,18029,18030],{"class":702},"\u002F* toRaw *\u002F\n",[287,18032,18033],{"class":289,"line":309},[287,18034,18035],{"class":702},"\u002F\u002F 响应式对象\n",[287,18037,18038,18040,18042,18044,18046,18048,18051,18053,18055],{"class":289,"line":315},[287,18039,2954],{"class":684},[287,18041,3964],{"class":597},[287,18043,620],{"class":684},[287,18045,2962],{"class":616},[287,18047,3971],{"class":597},[287,18049,18050],{"class":623},"'tony'",[287,18052,5222],{"class":597},[287,18054,1084],{"class":741},[287,18056,2261],{"class":597},[287,18058,18059],{"class":289,"line":321},[287,18060,18061],{"class":702},"\u002F\u002F 原始对象\n",[287,18063,18064,18066,18069,18071,18074],{"class":289,"line":326},[287,18065,2954],{"class":684},[287,18067,18068],{"class":597}," rawPerson ",[287,18070,620],{"class":684},[287,18072,18073],{"class":616}," toRaw",[287,18075,4011],{"class":597},[287,18077,18078],{"class":289,"line":332},[287,18079,306],{"emptyLinePlaceholder":305},[287,18081,18082],{"class":289,"line":338},[287,18083,306],{"emptyLinePlaceholder":305},[287,18085,18086],{"class":289,"line":343},[287,18087,18088],{"class":702},"\u002F* markRaw *\u002F\n",[287,18090,18091,18093,18096,18098,18101],{"class":289,"line":349},[287,18092,2954],{"class":684},[287,18094,18095],{"class":597}," citysd ",[287,18097,620],{"class":684},[287,18099,18100],{"class":616}," markRaw",[287,18102,2991],{"class":597},[287,18104,18105,18108,18111,18113,18116],{"class":289,"line":355},[287,18106,18107],{"class":597}," {id:",[287,18109,18110],{"class":623},"'asdda01'",[287,18112,8289],{"class":597},[287,18114,18115],{"class":623},"'北京'",[287,18117,8298],{"class":597},[287,18119,18120,18122,18125,18127,18130],{"class":289,"line":361},[287,18121,18107],{"class":597},[287,18123,18124],{"class":623},"'asdda02'",[287,18126,8289],{"class":597},[287,18128,18129],{"class":623},"'上海'",[287,18131,8298],{"class":597},[287,18133,18134,18136,18139,18141,18144],{"class":289,"line":367},[287,18135,18107],{"class":597},[287,18137,18138],{"class":623},"'asdda03'",[287,18140,8289],{"class":597},[287,18142,18143],{"class":623},"'天津'",[287,18145,8298],{"class":597},[287,18147,18148,18150,18153,18155,18158],{"class":289,"line":372},[287,18149,18107],{"class":597},[287,18151,18152],{"class":623},"'asdda04'",[287,18154,8289],{"class":597},[287,18156,18157],{"class":623},"'重庆'",[287,18159,1762],{"class":597},[287,18161,18162],{"class":289,"line":378},[287,18163,3042],{"class":597},[287,18165,18166],{"class":289,"line":384},[287,18167,18168],{"class":702},"\u002F\u002F 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了\n",[287,18170,18171,18173,18176,18178,18180],{"class":289,"line":555},[287,18172,2954],{"class":684},[287,18174,18175],{"class":597}," citys2 ",[287,18177,620],{"class":684},[287,18179,2962],{"class":616},[287,18181,18182],{"class":597},"(citys)\n",[287,18184,18185,18187,18189,18191,18194],{"class":289,"line":561},[287,18186,3560],{"class":597},[287,18188,1612],{"class":616},[287,18190,1181],{"class":597},[287,18192,18193],{"class":616},"isReactive",[287,18195,18196],{"class":597},"(person))\n",[287,18198,18199,18201,18203,18205,18207],{"class":289,"line":567},[287,18200,3560],{"class":597},[287,18202,1612],{"class":616},[287,18204,1181],{"class":597},[287,18206,18193],{"class":616},[287,18208,18209],{"class":597},"(rawPerson))\n",[287,18211,18212,18214,18216,18218,18220],{"class":289,"line":573},[287,18213,3560],{"class":597},[287,18215,1612],{"class":616},[287,18217,1181],{"class":597},[287,18219,18193],{"class":616},[287,18221,18222],{"class":597},"(citys))\n",[287,18224,18225,18227,18229,18231,18233],{"class":289,"line":579},[287,18226,3560],{"class":597},[287,18228,1612],{"class":616},[287,18230,1181],{"class":597},[287,18232,18193],{"class":616},[287,18234,18235],{"class":597},"(citys2))\n",[1245,18237,18239],{"id":18238},"markraw",[21,18240,18241],{},"markRaw",[157,18243,18244,18268],{},[17,18245,18246,18247,18250,18251],{},"作用：标记一个对象，使其",[1326,18248,18249],{},"永远不会","变成响应式的。",[264,18252,18253],{},[255,18254,18255,18256,18259,18260,18262,18263,18265,18266],{},"例如使用",[21,18257,18258],{},"mockjs","时，为了防止误把",[21,18261,18258],{},"变为响应式对象，可以使用 ",[21,18264,18241],{}," 去标记",[21,18267,18258],{},[17,18269,18270,18271],{},"编码：",[278,18272,18274],{"className":8048,"code":18273,"language":8050,"meta":283,"style":283},"\u002F* markRaw *\u002F\nlet citys = markRaw([\n {id:'asdda01',name:'北京'},\n {id:'asdda02',name:'上海'},\n {id:'asdda03',name:'天津'},\n {id:'asdda04',name:'重庆'}\n])\n\u002F\u002F 根据原始对象citys去创建响应式对象citys2 —— 创建失败，因为citys被markRaw标记了\nlet citys2 = reactive(citys)\n",[21,18275,18276,18280,18293,18305,18317,18329,18341,18345,18349],{"__ignoreMap":283},[287,18277,18278],{"class":289,"line":290},[287,18279,18088],{"class":702},[287,18281,18282,18284,18287,18289,18291],{"class":289,"line":296},[287,18283,2954],{"class":684},[287,18285,18286],{"class":597}," citys ",[287,18288,620],{"class":684},[287,18290,18100],{"class":616},[287,18292,2991],{"class":597},[287,18294,18295,18297,18299,18301,18303],{"class":289,"line":302},[287,18296,18107],{"class":597},[287,18298,18110],{"class":623},[287,18300,8289],{"class":597},[287,18302,18115],{"class":623},[287,18304,8298],{"class":597},[287,18306,18307,18309,18311,18313,18315],{"class":289,"line":309},[287,18308,18107],{"class":597},[287,18310,18124],{"class":623},[287,18312,8289],{"class":597},[287,18314,18129],{"class":623},[287,18316,8298],{"class":597},[287,18318,18319,18321,18323,18325,18327],{"class":289,"line":315},[287,18320,18107],{"class":597},[287,18322,18138],{"class":623},[287,18324,8289],{"class":597},[287,18326,18143],{"class":623},[287,18328,8298],{"class":597},[287,18330,18331,18333,18335,18337,18339],{"class":289,"line":321},[287,18332,18107],{"class":597},[287,18334,18152],{"class":623},[287,18336,8289],{"class":597},[287,18338,18157],{"class":623},[287,18340,1762],{"class":597},[287,18342,18343],{"class":289,"line":326},[287,18344,3042],{"class":597},[287,18346,18347],{"class":289,"line":332},[287,18348,18168],{"class":702},[287,18350,18351,18353,18355,18357,18359],{"class":289,"line":338},[287,18352,2954],{"class":684},[287,18354,18175],{"class":597},[287,18356,620],{"class":684},[287,18358,2962],{"class":616},[287,18360,18182],{"class":597},[81,18362,18364],{"id":18363},"_74customref","7.4.【customRef】",[255,18366,18367,18368,18370],{},"作用：创建一个自定义的",[21,18369,180],{},"，并对其依赖项跟踪和更新触发进行逻辑控制。",[255,18372,18373,18374,168],{},"实现防抖效果（",[21,18375,18376],{},"useSumRef.ts",[278,18378,18380],{"className":14929,"code":18379,"language":14931,"meta":283,"style":283},"import {customRef } from \"vue\";\n\nexport default function(initValue:string,delay:number){\n let msg = customRef((track,trigger)=>{\n let timer:number\n return {\n get(){\n track() \u002F\u002F 告诉Vue数据msg很重要，要对msg持续关注，一旦变化就更新\n return initValue\n },\n set(value){\n clearTimeout(timer)\n timer = setTimeout(() => {\n initValue = value\n trigger() \u002F\u002F通知Vue数据msg变化了\n }, delay);\n }\n }\n }) \n return {msg}\n}\n",[21,18381,18382,18395,18399,18427,18455,18466,18472,18479,18490,18498,18502,18513,18521,18538,18547,18557,18562,18566,18570,18575,18582],{"__ignoreMap":283},[287,18383,18384,18386,18389,18391,18393],{"class":289,"line":290},[287,18385,2207],{"class":684},[287,18387,18388],{"class":597}," {customRef } ",[287,18390,2213],{"class":684},[287,18392,14058],{"class":623},[287,18394,751],{"class":597},[287,18396,18397],{"class":289,"line":296},[287,18398,306],{"emptyLinePlaceholder":305},[287,18400,18401,18403,18405,18407,18409,18412,18414,18416,18418,18421,18423,18425],{"class":289,"line":302},[287,18402,2237],{"class":684},[287,18404,688],{"class":684},[287,18406,9213],{"class":684},[287,18408,1181],{"class":597},[287,18410,18411],{"class":4453},"initValue",[287,18413,8076],{"class":684},[287,18415,8079],{"class":741},[287,18417,4837],{"class":597},[287,18419,18420],{"class":4453},"delay",[287,18422,8076],{"class":684},[287,18424,12837],{"class":741},[287,18426,4457],{"class":597},[287,18428,18429,18431,18434,18436,18439,18441,18444,18446,18449,18451,18453],{"class":289,"line":309},[287,18430,2050],{"class":684},[287,18432,18433],{"class":597}," msg ",[287,18435,620],{"class":684},[287,18437,18438],{"class":616}," customRef",[287,18440,13472],{"class":597},[287,18442,18443],{"class":4453},"track",[287,18445,4837],{"class":597},[287,18447,18448],{"class":4453},"trigger",[287,18450,4843],{"class":597},[287,18452,1754],{"class":684},[287,18454,4848],{"class":597},[287,18456,18457,18459,18462,18464],{"class":289,"line":315},[287,18458,8263],{"class":684},[287,18460,18461],{"class":597}," timer",[287,18463,8076],{"class":684},[287,18465,8101],{"class":741},[287,18467,18468,18470],{"class":289,"line":321},[287,18469,11750],{"class":684},[287,18471,691],{"class":597},[287,18473,18474,18477],{"class":289,"line":326},[287,18475,18476],{"class":616}," get",[287,18478,1117],{"class":597},[287,18480,18481,18484,18487],{"class":289,"line":332},[287,18482,18483],{"class":616}," track",[287,18485,18486],{"class":597},"() ",[287,18488,18489],{"class":702},"\u002F\u002F 告诉Vue数据msg很重要，要对msg持续关注，一旦变化就更新\n",[287,18491,18492,18495],{"class":289,"line":338},[287,18493,18494],{"class":684}," return",[287,18496,18497],{"class":597}," initValue\n",[287,18499,18500],{"class":289,"line":343},[287,18501,1137],{"class":597},[287,18503,18504,18507,18509,18511],{"class":289,"line":349},[287,18505,18506],{"class":616}," set",[287,18508,1181],{"class":597},[287,18510,2305],{"class":4453},[287,18512,4457],{"class":597},[287,18514,18515,18518],{"class":289,"line":355},[287,18516,18517],{"class":616}," clearTimeout",[287,18519,18520],{"class":597},"(timer)\n",[287,18522,18523,18526,18528,18531,18534,18536],{"class":289,"line":361},[287,18524,18525],{"class":597}," timer ",[287,18527,620],{"class":684},[287,18529,18530],{"class":616}," setTimeout",[287,18532,18533],{"class":597},"(() ",[287,18535,1754],{"class":684},[287,18537,691],{"class":597},[287,18539,18540,18543,18545],{"class":289,"line":367},[287,18541,18542],{"class":597}," initValue ",[287,18544,620],{"class":684},[287,18546,7148],{"class":597},[287,18548,18549,18552,18554],{"class":289,"line":372},[287,18550,18551],{"class":616}," trigger",[287,18553,18486],{"class":597},[287,18555,18556],{"class":702},"\u002F\u002F通知Vue数据msg变化了\n",[287,18558,18559],{"class":289,"line":378},[287,18560,18561],{"class":597}," }, delay);\n",[287,18563,18564],{"class":289,"line":384},[287,18565,1099],{"class":597},[287,18567,18568],{"class":289,"line":555},[287,18569,1697],{"class":597},[287,18571,18572],{"class":289,"line":561},[287,18573,18574],{"class":597}," }) \n",[287,18576,18577,18579],{"class":289,"line":567},[287,18578,1748],{"class":684},[287,18580,18581],{"class":597}," {msg}\n",[287,18583,18584],{"class":289,"line":573},[287,18585,1762],{"class":597},[255,18587,18588],{},"组件中使用：",[10,18590,18592],{"id":18591},"_8-vue3新组件","8. Vue3新组件",[81,18594,18596],{"id":18595},"_81-teleport","8.1. 【Teleport】",[14,18598,18599],{},[17,18600,18601,18602,18605],{},"什么是Teleport？—— Teleport 是一种能够将我们的",[1326,18603,18604],{},"组件html结构","移动到指定位置的技术。",[278,18607,18609],{"className":14646,"code":18608,"language":14648,"meta":283,"style":283},"\u003Cteleport to='body' >\n \u003Cdiv class=\"modal\" v-show=\"isShow\">\n \u003Ch2>我是一个弹窗\u003C\u002Fh2>\n \u003Cp>我是弹窗中的一些内容\u003C\u002Fp>\n \u003Cbutton @click=\"isShow = false\">关闭弹窗\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Fteleport>\n",[21,18610,18611,18628,18650,18663,18676,18696,18704],{"__ignoreMap":283},[287,18612,18613,18615,18618,18620,18622,18625],{"class":289,"line":290},[287,18614,598],{"class":597},[287,18616,18617],{"class":14662},"teleport",[287,18619,10195],{"class":616},[287,18621,620],{"class":597},[287,18623,18624],{"class":623},"'body'",[287,18626,18627],{"class":597}," >\n",[287,18629,18630,18632,18634,18636,18638,18641,18643,18645,18648],{"class":289,"line":296},[287,18631,631],{"class":597},[287,18633,613],{"class":601},[287,18635,617],{"class":616},[287,18637,620],{"class":597},[287,18639,18640],{"class":623},"\"modal\"",[287,18642,9674],{"class":616},[287,18644,620],{"class":597},[287,18646,18647],{"class":623},"\"isShow\"",[287,18649,605],{"class":597},[287,18651,18652,18654,18656,18659,18661],{"class":289,"line":302},[287,18653,2780],{"class":597},[287,18655,81],{"class":601},[287,18657,18658],{"class":597},">我是一个弹窗\u003C\u002F",[287,18660,81],{"class":601},[287,18662,605],{"class":597},[287,18664,18665,18667,18669,18672,18674],{"class":289,"line":309},[287,18666,2780],{"class":597},[287,18668,255],{"class":601},[287,18670,18671],{"class":597},">我是弹窗中的一些内容\u003C\u002F",[287,18673,255],{"class":601},[287,18675,605],{"class":597},[287,18677,18678,18680,18682,18684,18686,18689,18692,18694],{"class":289,"line":315},[287,18679,2780],{"class":597},[287,18681,945],{"class":601},[287,18683,948],{"class":616},[287,18685,620],{"class":597},[287,18687,18688],{"class":623},"\"isShow = false\"",[287,18690,18691],{"class":597},">关闭弹窗\u003C\u002F",[287,18693,945],{"class":601},[287,18695,605],{"class":597},[287,18697,18698,18700,18702],{"class":289,"line":321},[287,18699,2810],{"class":597},[287,18701,613],{"class":601},[287,18703,605],{"class":597},[287,18705,18706,18708,18710],{"class":289,"line":326},[287,18707,654],{"class":597},[287,18709,18617],{"class":14662},[287,18711,605],{"class":597},[81,18713,18715],{"id":18714},"_82-suspense","8.2. 【Suspense】",[14,18717,18718,18721],{},[17,18719,18720],{},"等待异步组件时渲染一些额外内容，让应用有更好的用户体验",[17,18722,18723,18724],{},"使用步骤：\n",[14,18725,18726,18729],{},[17,18727,18728],{},"异步引入组件",[17,18730,118,18731,18733,18734,18737,18738],{},[21,18732,216],{},"包裹组件，并配置好",[21,18735,18736],{},"default"," 与 ",[21,18739,18740],{},"fallback",[278,18742,18746],{"className":18743,"code":18744,"language":18745,"meta":283,"style":283},"language-tsx shiki shiki-themes github-light github-dark","import { defineAsyncComponent,Suspense } from \"vue\";\nconst Child = defineAsyncComponent(()=>import('.\u002FChild.vue'))\n","tsx",[21,18747,18748,18761],{"__ignoreMap":283},[287,18749,18750,18752,18755,18757,18759],{"class":289,"line":290},[287,18751,2207],{"class":684},[287,18753,18754],{"class":597}," { defineAsyncComponent,Suspense } ",[287,18756,2213],{"class":684},[287,18758,14058],{"class":623},[287,18760,751],{"class":597},[287,18762,18763,18765,18768,18770,18773,18775,18778,18780,18783],{"class":289,"line":296},[287,18764,9965],{"class":684},[287,18766,18767],{"class":741}," Child",[287,18769,4825],{"class":684},[287,18771,18772],{"class":616}," defineAsyncComponent",[287,18774,6290],{"class":597},[287,18776,18777],{"class":684},"=>import",[287,18779,1181],{"class":597},[287,18781,18782],{"class":623},"'.\u002FChild.vue'",[287,18784,18785],{"class":597},"))\n",[278,18787,18789],{"className":588,"code":18788,"language":590,"meta":283,"style":283},"\u003Ctemplate>\n \u003Cdiv class=\"app\">\n \u003Ch3>我是App组件\u003C\u002Fh3>\n \u003CSuspense>\n \u003Ctemplate v-slot:default>\n \u003CChild\u002F>\n \u003C\u002Ftemplate>\n \u003Ctemplate v-slot:fallback>\n \u003Ch3>加载中.......\u003C\u002Fh3>\n \u003C\u002Ftemplate>\n \u003C\u002FSuspense>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[21,18790,18791,18799,18813,18826,18834,18848,18856,18864,18878,18891,18899,18907,18915],{"__ignoreMap":283},[287,18792,18793,18795,18797],{"class":289,"line":290},[287,18794,598],{"class":597},[287,18796,602],{"class":601},[287,18798,605],{"class":597},[287,18800,18801,18803,18805,18807,18809,18811],{"class":289,"line":296},[287,18802,631],{"class":597},[287,18804,613],{"class":601},[287,18806,617],{"class":616},[287,18808,620],{"class":597},[287,18810,624],{"class":623},[287,18812,605],{"class":597},[287,18814,18815,18817,18819,18822,18824],{"class":289,"line":302},[287,18816,13066],{"class":597},[287,18818,1245],{"class":601},[287,18820,18821],{"class":597},">我是App组件\u003C\u002F",[287,18823,1245],{"class":601},[287,18825,605],{"class":597},[287,18827,18828,18830,18832],{"class":289,"line":309},[287,18829,13066],{"class":597},[287,18831,216],{"class":601},[287,18833,605],{"class":597},[287,18835,18836,18838,18840,18842,18844,18846],{"class":289,"line":315},[287,18837,17198],{"class":597},[287,18839,602],{"class":601},[287,18841,17465],{"class":616},[287,18843,8076],{"class":597},[287,18845,18736],{"class":616},[287,18847,605],{"class":597},[287,18849,18850,18852,18854],{"class":289,"line":321},[287,18851,17214],{"class":597},[287,18853,13958],{"class":601},[287,18855,7793],{"class":597},[287,18857,18858,18860,18862],{"class":289,"line":326},[287,18859,17246],{"class":597},[287,18861,602],{"class":601},[287,18863,605],{"class":597},[287,18865,18866,18868,18870,18872,18874,18876],{"class":289,"line":332},[287,18867,17198],{"class":597},[287,18869,602],{"class":601},[287,18871,17465],{"class":616},[287,18873,8076],{"class":597},[287,18875,18740],{"class":616},[287,18877,605],{"class":597},[287,18879,18880,18882,18884,18887,18889],{"class":289,"line":338},[287,18881,17214],{"class":597},[287,18883,1245],{"class":601},[287,18885,18886],{"class":597},">加载中.......\u003C\u002F",[287,18888,1245],{"class":601},[287,18890,605],{"class":597},[287,18892,18893,18895,18897],{"class":289,"line":343},[287,18894,17246],{"class":597},[287,18896,602],{"class":601},[287,18898,605],{"class":597},[287,18900,18901,18903,18905],{"class":289,"line":349},[287,18902,17176],{"class":597},[287,18904,216],{"class":601},[287,18906,605],{"class":597},[287,18908,18909,18911,18913],{"class":289,"line":355},[287,18910,2810],{"class":597},[287,18912,613],{"class":601},[287,18914,605],{"class":597},[287,18916,18917,18919,18921],{"class":289,"line":361},[287,18918,654],{"class":597},[287,18920,602],{"class":601},[287,18922,605],{"class":597},[81,18924,18926],{"id":18925},"_83全局api转移到应用对象","8.3.【全局API转移到应用对象】",[14,18928,18929,18934,18939,18944,18949,18954],{},[17,18930,18931],{},[21,18932,18933],{},"app.component",[17,18935,18936],{},[21,18937,18938],{},"app.config",[17,18940,18941],{},[21,18942,18943],{},"app.directive",[17,18945,18946],{},[21,18947,18948],{},"app.mount",[17,18950,18951],{},[21,18952,18953],{},"app.unmount",[17,18955,18956],{},[21,18957,18958],{},"app.use",[81,18960,18962],{"id":18961},"_84其他","8.4.【其他】",[14,18964,18965,18982,18991,18999,19008,19021,19027],{},[17,18966,18967,18968,18971,18972,18975,18976,18971,18979,93],{},"过渡类名 ",[21,18969,18970],{},"v-enter"," 修改为 ",[21,18973,18974],{},"v-enter-from","、过渡类名 ",[21,18977,18978],{},"v-leave",[21,18980,18981],{},"v-leave-from",[17,18983,18984,18986,18987,18990],{},[21,18985,238],{}," 作为 ",[21,18988,18989],{},"v-on"," 修饰符的支持。",[17,18992,18993,18995,18996],{},[21,18994,13820],{}," 指令在组件上的使用已经被重新设计，替换掉了 ",[21,18997,18998],{},"v-bind.sync。",[17,19000,19001,4926,19004,19007],{},[21,19002,19003],{},"v-if",[21,19005,19006],{},"v-for"," 在同一个元素身上使用时的优先级发生了变化。",[17,19009,19010,19011,43,19014,4926,19017,19020],{},"移除了",[21,19012,19013],{},"$on",[21,19015,19016],{},"$off",[21,19018,19019],{},"$once"," 实例方法。",[17,19022,19023,19024,93],{},"移除了过滤器 ",[21,19025,19026],{},"filter",[17,19028,19010,19029,19031,19032,93,19035,196],{},[21,19030,13836],{}," 实例 ",[21,19033,19034],{},"propert",[194,19036],{},[727,19038,19039],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":283,"searchDepth":296,"depth":296,"links":19041},[19042,19043,19044,19045,19046,19047,19048,19049,19053,19059,19060,19061,19062,19063,19064,19065,19072,19073,19074,19075,19076,19077,19078,19079,19080,19081,19082,19083,19084,19088,19089,19090,19091,19092,19093,19094,19095,19096,19097,19098,19099,19100,19101,19102,19103,19104,19105,19106,19107,19108,19113,19118,19122,19126,19127,19128,19129,19130],{"id":83,"depth":296,"text":84},{"id":112,"depth":296,"text":113},{"id":139,"depth":296,"text":140},{"id":154,"depth":296,"text":155},{"id":252,"depth":296,"text":253},{"id":393,"depth":296,"text":394},{"id":871,"depth":296,"text":872},{"id":1218,"depth":296,"text":1219,"children":19050},[19051,19052],{"id":1247,"depth":302,"text":1248},{"id":1285,"depth":302,"text":1286},{"id":1308,"depth":296,"text":1309,"children":19054},[19055,19056,19057,19058],{"id":1312,"depth":302,"text":1313},{"id":1714,"depth":302,"text":1715},{"id":1765,"depth":302,"text":1766},{"id":1814,"depth":302,"text":1815},{"id":2272,"depth":296,"text":2273},{"id":2679,"depth":296,"text":2680},{"id":3191,"depth":296,"text":3192},{"id":3649,"depth":296,"text":3650},{"id":3747,"depth":296,"text":3748},{"id":4122,"depth":296,"text":4123},{"id":4568,"depth":296,"text":4569,"children":19066},[19067,19068,19069,19070,19071],{"id":4626,"depth":302,"text":4627},{"id":4904,"depth":302,"text":4905},{"id":5319,"depth":302,"text":5320},{"id":5805,"depth":302,"text":5806},{"id":6342,"depth":302,"text":6343},{"id":6806,"depth":296,"text":6807},{"id":7354,"depth":296,"text":7355},{"id":8042,"depth":296,"text":8043},{"id":8627,"depth":296,"text":8628},{"id":9143,"depth":296,"text":9144},{"id":9875,"depth":296,"text":9876},{"id":9884,"depth":296,"text":9885},{"id":10384,"depth":296,"text":10385},{"id":10417,"depth":296,"text":10418},{"id":10549,"depth":296,"text":10550},{"id":10636,"depth":296,"text":10637},{"id":10828,"depth":296,"text":10829},{"id":11268,"depth":296,"text":11269,"children":19085},[19086,19087],{"id":11272,"depth":302,"text":11272},{"id":11461,"depth":302,"text":11461},{"id":11652,"depth":296,"text":11653},{"id":11764,"depth":296,"text":11765},{"id":11821,"depth":296,"text":11822},{"id":11922,"depth":296,"text":11923},{"id":11972,"depth":296,"text":11973},{"id":11981,"depth":296,"text":11982},{"id":12127,"depth":296,"text":12128},{"id":12700,"depth":296,"text":12701},{"id":13000,"depth":296,"text":13001},{"id":13201,"depth":296,"text":13202},{"id":13445,"depth":296,"text":13446},{"id":13532,"depth":296,"text":13533},{"id":13850,"depth":296,"text":13851},{"id":14342,"depth":296,"text":14343},{"id":14729,"depth":296,"text":14730},{"id":15095,"depth":296,"text":15096},{"id":15761,"depth":296,"text":15762},{"id":16467,"depth":296,"text":16468},{"id":16542,"depth":296,"text":16543},{"id":17109,"depth":296,"text":17110},{"id":17119,"depth":296,"text":17120,"children":19109},[19110,19111,19112],{"id":17123,"depth":302,"text":17124},{"id":17261,"depth":302,"text":17262},{"id":17427,"depth":302,"text":17428},{"id":17722,"depth":296,"text":17723,"children":19114},[19115,19116,19117],{"id":17726,"depth":302,"text":17729},{"id":17763,"depth":302,"text":17766},{"id":17805,"depth":302,"text":17805},{"id":17831,"depth":296,"text":17832,"children":19119},[19120,19121],{"id":17835,"depth":302,"text":17835},{"id":17907,"depth":302,"text":17912},{"id":17970,"depth":296,"text":17971,"children":19123},[19124,19125],{"id":17974,"depth":302,"text":17977},{"id":18238,"depth":302,"text":18241},{"id":18363,"depth":296,"text":18364},{"id":18595,"depth":296,"text":18596},{"id":18714,"depth":296,"text":18715},{"id":18925,"depth":296,"text":18926},{"id":18961,"depth":296,"text":18962},"md",{},"\u002Fvue\u002Fvue3快速上手",{"title":5,"description":283},"Vue\u002FVue3快速上手","qW50SHQw0PW3nxFTF_WYXlFAQztqMPV5sY2_psBs4QU",1791042468495]