[{"data":1,"prerenderedAt":738},["ShallowReactive",2],{"blog-hello-vue3":3},{"id":4,"title":5,"body":6,"category":26,"date":726,"description":727,"draft":728,"extension":729,"meta":730,"navigation":73,"path":731,"seo":732,"stem":733,"tags":734,"__hash__":737},"blog\u002Fblog\u002Fhello-vue3.md","Vue 3 组合式 API 入门",{"type":7,"value":8,"toc":721},"minimark",[9,13,17,21,170,173,176,696,699,718],[10,11,5],"h1",{"id":12},"vue-3-组合式-api-入门",[14,15,16],"p",{},"Vue 3 的组合式 API 让逻辑组织更灵活。下面是一个最小可运行的计数器示例。",[18,19,20],"h2",{"id":20},"静态代码展示",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">\n    点击次数：{{ count }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","vue","",[29,30,31,51,68,75,100,110,115,125,145,151,161],"code",{"__ignoreMap":27},[32,33,36,40,44,48],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sVt8B","\u003C",[32,41,43],{"class":42},"s9eBZ","script",[32,45,47],{"class":46},"sScJk"," setup",[32,49,50],{"class":38},">\n",[32,52,54,58,61,64],{"class":34,"line":53},2,[32,55,57],{"class":56},"szBVR","import",[32,59,60],{"class":38}," { ref } ",[32,62,63],{"class":56},"from",[32,65,67],{"class":66},"sZZnC"," 'vue'\n",[32,69,71],{"class":34,"line":70},3,[32,72,74],{"emptyLinePlaceholder":73},true,"\n",[32,76,78,81,85,88,91,94,97],{"class":34,"line":77},4,[32,79,80],{"class":56},"const",[32,82,84],{"class":83},"sj4cs"," count",[32,86,87],{"class":56}," =",[32,89,90],{"class":46}," ref",[32,92,93],{"class":38},"(",[32,95,96],{"class":83},"0",[32,98,99],{"class":38},")\n",[32,101,103,106,108],{"class":34,"line":102},5,[32,104,105],{"class":38},"\u003C\u002F",[32,107,43],{"class":42},[32,109,50],{"class":38},[32,111,113],{"class":34,"line":112},6,[32,114,74],{"emptyLinePlaceholder":73},[32,116,118,120,123],{"class":34,"line":117},7,[32,119,39],{"class":38},[32,121,122],{"class":42},"template",[32,124,50],{"class":38},[32,126,128,131,134,137,140,143],{"class":34,"line":127},8,[32,129,130],{"class":38},"  \u003C",[32,132,133],{"class":42},"button",[32,135,136],{"class":46}," @click",[32,138,139],{"class":38},"=",[32,141,142],{"class":66},"\"count++\"",[32,144,50],{"class":38},[32,146,148],{"class":34,"line":147},9,[32,149,150],{"class":38},"    点击次数：{{ count }}\n",[32,152,154,157,159],{"class":34,"line":153},10,[32,155,156],{"class":38},"  \u003C\u002F",[32,158,133],{"class":42},[32,160,50],{"class":38},[32,162,164,166,168],{"class":34,"line":163},11,[32,165,105],{"class":38},[32,167,122],{"class":42},[32,169,50],{"class":38},[18,171,172],{"id":172},"实时预览",[14,174,175],{},"试着修改下面的代码，右侧会即时渲染效果：",[177,178,180],"code-playground",{"title":179},"计数器示例",[22,181,183],{"className":24,"code":182,"language":26,"meta":27,"style":27},"\u003Ctemplate>\n  \u003Cdiv class=\"demo\">\n    \u003Cp class=\"count\">点击次数：{{ count }}\u003C\u002Fp>\n    \u003Cbutton class=\"btn\" @click=\"count++\">点我 +1\u003C\u002Fbutton>\n    \u003Cbutton class=\"btn secondary\" @click=\"count = 0\">重置\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.demo {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 24px;\n  font-family: sans-serif;\n}\n\n.count {\n  font-size: 20px;\n  font-weight: 600;\n  color: #0f172a;\n}\n\n.btn {\n  cursor: pointer;\n  border: none;\n  border-radius: 999px;\n  padding: 10px 18px;\n  background: #38bdf8;\n  color: #0f1419;\n  font-weight: 600;\n}\n\n.btn.secondary {\n  background: #e2e8f0;\n  color: #334155;\n}\n\u003C\u002Fstyle>\n",[29,184,185,193,210,231,257,284,292,300,304,314,324,328,345,354,359,372,381,396,409,422,438,453,466,472,477,485,500,513,526,531,536,544,557,570,585,604,617,629,640,645,650,658,670,682,687],{"__ignoreMap":27},[32,186,187,189,191],{"class":34,"line":35},[32,188,39],{"class":38},[32,190,122],{"class":42},[32,192,50],{"class":38},[32,194,195,197,200,203,205,208],{"class":34,"line":53},[32,196,130],{"class":38},[32,198,199],{"class":42},"div",[32,201,202],{"class":46}," class",[32,204,139],{"class":38},[32,206,207],{"class":66},"\"demo\"",[32,209,50],{"class":38},[32,211,212,215,217,219,221,224,227,229],{"class":34,"line":70},[32,213,214],{"class":38},"    \u003C",[32,216,14],{"class":42},[32,218,202],{"class":46},[32,220,139],{"class":38},[32,222,223],{"class":66},"\"count\"",[32,225,226],{"class":38},">点击次数：{{ count }}\u003C\u002F",[32,228,14],{"class":42},[32,230,50],{"class":38},[32,232,233,235,237,239,241,244,246,248,250,253,255],{"class":34,"line":77},[32,234,214],{"class":38},[32,236,133],{"class":42},[32,238,202],{"class":46},[32,240,139],{"class":38},[32,242,243],{"class":66},"\"btn\"",[32,245,136],{"class":46},[32,247,139],{"class":38},[32,249,142],{"class":66},[32,251,252],{"class":38},">点我 +1\u003C\u002F",[32,254,133],{"class":42},[32,256,50],{"class":38},[32,258,259,261,263,265,267,270,272,274,277,280,282],{"class":34,"line":102},[32,260,214],{"class":38},[32,262,133],{"class":42},[32,264,202],{"class":46},[32,266,139],{"class":38},[32,268,269],{"class":66},"\"btn secondary\"",[32,271,136],{"class":46},[32,273,139],{"class":38},[32,275,276],{"class":66},"\"count = 0\"",[32,278,279],{"class":38},">重置\u003C\u002F",[32,281,133],{"class":42},[32,283,50],{"class":38},[32,285,286,288,290],{"class":34,"line":112},[32,287,156],{"class":38},[32,289,199],{"class":42},[32,291,50],{"class":38},[32,293,294,296,298],{"class":34,"line":117},[32,295,105],{"class":38},[32,297,122],{"class":42},[32,299,50],{"class":38},[32,301,302],{"class":34,"line":127},[32,303,74],{"emptyLinePlaceholder":73},[32,305,306,308,310,312],{"class":34,"line":147},[32,307,39],{"class":38},[32,309,43],{"class":42},[32,311,47],{"class":46},[32,313,50],{"class":38},[32,315,316,318,320,322],{"class":34,"line":153},[32,317,57],{"class":56},[32,319,60],{"class":38},[32,321,63],{"class":56},[32,323,67],{"class":66},[32,325,326],{"class":34,"line":163},[32,327,74],{"emptyLinePlaceholder":73},[32,329,331,333,335,337,339,341,343],{"class":34,"line":330},12,[32,332,80],{"class":56},[32,334,84],{"class":83},[32,336,87],{"class":56},[32,338,90],{"class":46},[32,340,93],{"class":38},[32,342,96],{"class":83},[32,344,99],{"class":38},[32,346,348,350,352],{"class":34,"line":347},13,[32,349,105],{"class":38},[32,351,43],{"class":42},[32,353,50],{"class":38},[32,355,357],{"class":34,"line":356},14,[32,358,74],{"emptyLinePlaceholder":73},[32,360,362,364,367,370],{"class":34,"line":361},15,[32,363,39],{"class":38},[32,365,366],{"class":42},"style",[32,368,369],{"class":46}," scoped",[32,371,50],{"class":38},[32,373,375,378],{"class":34,"line":374},16,[32,376,377],{"class":46},".demo",[32,379,380],{"class":38}," {\n",[32,382,384,387,390,393],{"class":34,"line":383},17,[32,385,386],{"class":83},"  display",[32,388,389],{"class":38},": ",[32,391,392],{"class":83},"flex",[32,394,395],{"class":38},";\n",[32,397,399,402,404,407],{"class":34,"line":398},18,[32,400,401],{"class":83},"  flex-direction",[32,403,389],{"class":38},[32,405,406],{"class":83},"column",[32,408,395],{"class":38},[32,410,412,415,417,420],{"class":34,"line":411},19,[32,413,414],{"class":83},"  align-items",[32,416,389],{"class":38},[32,418,419],{"class":83},"center",[32,421,395],{"class":38},[32,423,425,428,430,433,436],{"class":34,"line":424},20,[32,426,427],{"class":83},"  gap",[32,429,389],{"class":38},[32,431,432],{"class":83},"12",[32,434,435],{"class":56},"px",[32,437,395],{"class":38},[32,439,441,444,446,449,451],{"class":34,"line":440},21,[32,442,443],{"class":83},"  padding",[32,445,389],{"class":38},[32,447,448],{"class":83},"24",[32,450,435],{"class":56},[32,452,395],{"class":38},[32,454,456,459,461,464],{"class":34,"line":455},22,[32,457,458],{"class":83},"  font-family",[32,460,389],{"class":38},[32,462,463],{"class":83},"sans-serif",[32,465,395],{"class":38},[32,467,469],{"class":34,"line":468},23,[32,470,471],{"class":38},"}\n",[32,473,475],{"class":34,"line":474},24,[32,476,74],{"emptyLinePlaceholder":73},[32,478,480,483],{"class":34,"line":479},25,[32,481,482],{"class":46},".count",[32,484,380],{"class":38},[32,486,488,491,493,496,498],{"class":34,"line":487},26,[32,489,490],{"class":83},"  font-size",[32,492,389],{"class":38},[32,494,495],{"class":83},"20",[32,497,435],{"class":56},[32,499,395],{"class":38},[32,501,503,506,508,511],{"class":34,"line":502},27,[32,504,505],{"class":83},"  font-weight",[32,507,389],{"class":38},[32,509,510],{"class":83},"600",[32,512,395],{"class":38},[32,514,516,519,521,524],{"class":34,"line":515},28,[32,517,518],{"class":83},"  color",[32,520,389],{"class":38},[32,522,523],{"class":83},"#0f172a",[32,525,395],{"class":38},[32,527,529],{"class":34,"line":528},29,[32,530,471],{"class":38},[32,532,534],{"class":34,"line":533},30,[32,535,74],{"emptyLinePlaceholder":73},[32,537,539,542],{"class":34,"line":538},31,[32,540,541],{"class":46},".btn",[32,543,380],{"class":38},[32,545,547,550,552,555],{"class":34,"line":546},32,[32,548,549],{"class":83},"  cursor",[32,551,389],{"class":38},[32,553,554],{"class":83},"pointer",[32,556,395],{"class":38},[32,558,560,563,565,568],{"class":34,"line":559},33,[32,561,562],{"class":83},"  border",[32,564,389],{"class":38},[32,566,567],{"class":83},"none",[32,569,395],{"class":38},[32,571,573,576,578,581,583],{"class":34,"line":572},34,[32,574,575],{"class":83},"  border-radius",[32,577,389],{"class":38},[32,579,580],{"class":83},"999",[32,582,435],{"class":56},[32,584,395],{"class":38},[32,586,588,590,592,595,597,600,602],{"class":34,"line":587},35,[32,589,443],{"class":83},[32,591,389],{"class":38},[32,593,594],{"class":83},"10",[32,596,435],{"class":56},[32,598,599],{"class":83}," 18",[32,601,435],{"class":56},[32,603,395],{"class":38},[32,605,607,610,612,615],{"class":34,"line":606},36,[32,608,609],{"class":83},"  background",[32,611,389],{"class":38},[32,613,614],{"class":83},"#38bdf8",[32,616,395],{"class":38},[32,618,620,622,624,627],{"class":34,"line":619},37,[32,621,518],{"class":83},[32,623,389],{"class":38},[32,625,626],{"class":83},"#0f1419",[32,628,395],{"class":38},[32,630,632,634,636,638],{"class":34,"line":631},38,[32,633,505],{"class":83},[32,635,389],{"class":38},[32,637,510],{"class":83},[32,639,395],{"class":38},[32,641,643],{"class":34,"line":642},39,[32,644,471],{"class":38},[32,646,648],{"class":34,"line":647},40,[32,649,74],{"emptyLinePlaceholder":73},[32,651,653,656],{"class":34,"line":652},41,[32,654,655],{"class":46},".btn.secondary",[32,657,380],{"class":38},[32,659,661,663,665,668],{"class":34,"line":660},42,[32,662,609],{"class":83},[32,664,389],{"class":38},[32,666,667],{"class":83},"#e2e8f0",[32,669,395],{"class":38},[32,671,673,675,677,680],{"class":34,"line":672},43,[32,674,518],{"class":83},[32,676,389],{"class":38},[32,678,679],{"class":83},"#334155",[32,681,395],{"class":38},[32,683,685],{"class":34,"line":684},44,[32,686,471],{"class":38},[32,688,690,692,694],{"class":34,"line":689},45,[32,691,105],{"class":38},[32,693,366],{"class":42},[32,695,50],{"class":38},[18,697,698],{"id":698},"小结",[700,701,702,709,715],"ul",{},[703,704,705,708],"li",{},[29,706,707],{},"ref"," 创建响应式基本类型",[703,710,711,714],{},[29,712,713],{},"\u003Cscript setup>"," 减少样板代码",[703,716,717],{},"模板中可直接使用响应式变量",[366,719,720],{},"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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"title":27,"searchDepth":70,"depth":70,"links":722},[723,724,725],{"id":20,"depth":53,"text":20},{"id":172,"depth":53,"text":172},{"id":698,"depth":53,"text":698},"2026-05-05","通过一个简单的计数器示例，了解 ref、响应式与事件处理，并可在下方实时编辑预览。",false,"md",{},"\u002Fblog\u002Fhello-vue3",{"title":5,"description":727},"blog\u002Fhello-vue3",[735,736],"vue3","composition-api","oJ481NqFU2a5mD3yV0ikqu37vdc4cHiK-jdLf7hi-94",1782309645712]