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