[{"data":1,"prerenderedAt":419},["ShallowReactive",2],{"post-\u002Fblog\u002Fvue3-composition-api":3,"post-surroundings":385},{"id":4,"title":5,"body":6,"date":372,"description":373,"desktopCover":40,"extension":374,"isPopular":375,"meta":376,"mobileCover":377,"navigation":130,"path":378,"seo":379,"slug":378,"stem":380,"tags":381,"__hash__":384},"blog\u002Fblog\u002Fvue3-composition-api.md","Vue 3 新手指南：快速掌握 Composition API 與關鍵特色",{"type":7,"value":8,"toc":367},"minimark",[9,36,41,348,351,363],[10,11,12,16],"content-space",{},[13,14,15],"h2",{"id":15},"前言",[17,18,19,20,24,25,28,29,28,32,35],"p",{},"Vue 3 的 Composition API 打破了傳統 Options API 的侷限，讓你能在 ",[21,22,23],"code",{},"setup()"," 裡自由組合反應式邏輯與生命週期。對於剛從 Vue 2 或其他框架轉換的新手來說，可能一開始會被 ",[21,26,27],{},"ref","、",[21,30,31],{},"reactive",[21,33,34],{},"watchEffect"," 等概念搞得頭昏腦脹。本文將用「三大關鍵」示範，幫助你快速上手 Composition API，寫出更模組化、易維護的程式碼。",[37,38],"prose-img",{"alt":39,"src":40},"前言圖片","\u002Fdesktop\u002Fblog\u002Fvue3-composition-api.webp",[10,42,43,47,212],{},[13,44,46],{"id":45},"三大關鍵快速掌握-composition-api","三大關鍵快速掌握 Composition API",[48,49,50,58,78,83],"content-block",{},[51,52,54,55,57],"h3",{"id":53},"關鍵一理解-setup-與反應式-api","關鍵一：理解 ",[21,56,23],{}," 與反應式 API",[17,59,60,64,67,69,70,28,72,28,74,77],{},[61,62,63],"strong",{},"為何重要",[65,66],"br",{},[21,68,23],{}," 是所有 Composition API 的起點，定義在此的 ",[21,71,27],{},[21,73,31],{},[21,75,76],{},"computed"," 都能享受 Vue 的反應式追蹤。",[17,79,80],{},[61,81,82],{},"建議做法",[84,85,86,200,206],"ol",{},[87,88,89,90,92,93],"li",{},"在元件中使用 ",[21,91,27],{}," 管理單一原始值：",[94,95,100],"pre",{"className":96,"code":97,"language":98,"meta":99,"style":99},"language-ts shiki shiki-themes github-light github-dark","import { ref } from \"vue\";\n\nexport default {\n  setup() {\n    const count = ref(0);\n    return { count };\n  },\n};\n","ts","",[21,101,102,125,132,144,154,179,188,194],{"__ignoreMap":99},[103,104,107,111,115,118,122],"span",{"class":105,"line":106},"line",1,[103,108,110],{"class":109},"szBVR","import",[103,112,114],{"class":113},"sVt8B"," { ref } ",[103,116,117],{"class":109},"from",[103,119,121],{"class":120},"sZZnC"," \"vue\"",[103,123,124],{"class":113},";\n",[103,126,128],{"class":105,"line":127},2,[103,129,131],{"emptyLinePlaceholder":130},true,"\n",[103,133,135,138,141],{"class":105,"line":134},3,[103,136,137],{"class":109},"export",[103,139,140],{"class":109}," default",[103,142,143],{"class":113}," {\n",[103,145,147,151],{"class":105,"line":146},4,[103,148,150],{"class":149},"sScJk","  setup",[103,152,153],{"class":113},"() {\n",[103,155,157,160,164,167,170,173,176],{"class":105,"line":156},5,[103,158,159],{"class":109},"    const",[103,161,163],{"class":162},"sj4cs"," count",[103,165,166],{"class":109}," =",[103,168,169],{"class":149}," ref",[103,171,172],{"class":113},"(",[103,174,175],{"class":162},"0",[103,177,178],{"class":113},");\n",[103,180,182,185],{"class":105,"line":181},6,[103,183,184],{"class":109},"    return",[103,186,187],{"class":113}," { count };\n",[103,189,191],{"class":105,"line":190},7,[103,192,193],{"class":113},"  },\n",[103,195,197],{"class":105,"line":196},8,[103,198,199],{"class":113},"};\n",[87,201,202,203,205],{},"用 ",[21,204,31],{}," 包成物件狀態",[87,207,208,209,211],{},"熟悉 ",[21,210,76],{}," 衍生狀態",[48,213,214,224,231,235,243,281,288],{},[51,215,217,218,220,221],{"id":216},"關鍵二善用-watcheffect-與-watch","關鍵二：善用 ",[21,219,34],{}," 與 ",[21,222,223],{},"watch",[17,225,226,228,230],{},[61,227,63],{},[65,229],{},"\n監聽狀態改變、處理副作用時，watchEffect 讓你無須指定依賴，watch 可精確控制何時執行。",[17,232,233],{},[61,234,82],{},[236,237,238],"ul",{},[87,239,240,242],{},[21,241,34],{},"：自動追蹤所有用到的 ref，適合簡單場景：",[94,244,246],{"className":96,"code":245,"language":98,"meta":99,"style":99},"watchEffect(() => {\n  console.log(state.items.length);\n});\n",[21,247,248,260,276],{"__ignoreMap":99},[103,249,250,252,255,258],{"class":105,"line":106},[103,251,34],{"class":149},[103,253,254],{"class":113},"(() ",[103,256,257],{"class":109},"=>",[103,259,143],{"class":113},[103,261,262,265,268,271,274],{"class":105,"line":127},[103,263,264],{"class":113},"  console.",[103,266,267],{"class":149},"log",[103,269,270],{"class":113},"(state.items.",[103,272,273],{"class":162},"length",[103,275,178],{"class":113},[103,277,278],{"class":105,"line":134},[103,279,280],{"class":113},"});\n",[236,282,283],{},[87,284,285,287],{},[21,286,223],{},"：監聽特定來源，並處理新舊值：",[94,289,291],{"className":96,"code":290,"language":98,"meta":99,"style":99},"watch(\n  () => props.id,\n  (newId, oldId) => {\n    fetchItem(newId);\n  },\n);\n",[21,292,293,300,310,332,340,344],{"__ignoreMap":99},[103,294,295,297],{"class":105,"line":106},[103,296,223],{"class":149},[103,298,299],{"class":113},"(\n",[103,301,302,305,307],{"class":105,"line":127},[103,303,304],{"class":113},"  () ",[103,306,257],{"class":109},[103,308,309],{"class":113}," props.id,\n",[103,311,312,315,319,322,325,328,330],{"class":105,"line":134},[103,313,314],{"class":113},"  (",[103,316,318],{"class":317},"s4XuR","newId",[103,320,321],{"class":113},", ",[103,323,324],{"class":317},"oldId",[103,326,327],{"class":113},") ",[103,329,257],{"class":109},[103,331,143],{"class":113},[103,333,334,337],{"class":105,"line":146},[103,335,336],{"class":149},"    fetchItem",[103,338,339],{"class":113},"(newId);\n",[103,341,342],{"class":105,"line":156},[103,343,193],{"class":113},[103,345,346],{"class":105,"line":181},[103,347,178],{"class":113},[13,349,350],{"id":350},"結語",[17,352,353,354,356,357,359,360,362],{},"掌握 ",[21,355,23],{}," 中的反應式 API、打造通用 Composable，並善用 ",[21,358,34],{},"／",[21,361,223],{},"，你就能快速上手 Vue 3 Composition API，寫出更結構化、易維護的元件。立即在專案中實作這三大關鍵，享受 Composition API 帶來的開發魅力！",[364,365,366],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":99,"searchDepth":127,"depth":127,"links":368},[369,370,371],{"id":15,"depth":127,"text":15},{"id":45,"depth":127,"text":46},{"id":350,"depth":127,"text":350},"2024-06-29","許多前端開發者對 Vue 一直情有獨鍾，因為它易上手又靈活。隨著 Vue 3 上線，Composition API 的導入更是大幅提升可讀性與維護性。這篇文章將帶你快速瞭解 Vue 3 的獨特魅力，並透過簡單範例幫助你更順利地切換到新版本的思維模式。","md",false,{},"\u002Fmobile\u002Fblog\u002Fvue3-composition-api.webp","\u002Fblog\u002Fvue3-composition-api",{"title":5,"description":373},"blog\u002Fvue3-composition-api",[382,383],"Vue3","框架學習","hpcEMFP7HUZIlVmesRhW_6hQ6qFEILSx81YK3aTraIo",[386,389,392,395,398,401,404,405,408,411,414,416],{"slug":387,"path":387,"date":388},"\u002Fblog\u002Fstart-from-scratch","2024-10-21",{"slug":390,"path":390,"date":391},"\u002Fblog\u002Freact-intro","2024-10-11",{"slug":393,"path":393,"date":394},"\u002Fblog\u002Fgood-resume","2024-09-07",{"slug":396,"path":396,"date":397},"\u002Fblog\u002Fcss-magic","2024-09-03",{"slug":399,"path":399,"date":400},"\u002Fblog\u002Fmental-journey","2024-07-09",{"slug":402,"path":402,"date":403},"\u002Fblog\u002Fjob-interview","2024-07-08",{"slug":378,"path":378,"date":372},{"slug":406,"path":406,"date":407},"\u002Fblog\u002Fgit","2024-05-04",{"slug":409,"path":409,"date":410},"\u002Fblog\u002Fseo","2024-05-01",{"slug":412,"path":412,"date":413},"\u002Fblog\u002Fautomation","2024-02-17",{"slug":415,"path":415,"date":413},"\u002Fblog\u002Ftypescript",{"slug":417,"path":417,"date":418},"\u002Fblog\u002Funit-test","2024-02-07",1793785242305]