[{"data":1,"prerenderedAt":1693},["ShallowReactive",2],{"blog-post-/blog/vue-composition-api/":3},{"id":4,"title":5,"body":6,"description":1670,"extension":1671,"meta":1672,"navigation":142,"path":1688,"seo":1689,"sitemap":1690,"stem":1691,"__hash__":1692},"content/blog/vue-composition-api.md","Vue 3 Composition API - A Deep Dive",{"type":7,"value":8,"toc":1656},"minimark",[9,13,21,24,29,32,66,70,73,370,374,377,384,390,500,506,511,657,661,664,884,887,967,971,974,1088,1092,1095,1346,1350,1353,1612,1616,1645,1649,1652],[10,11,5],"h1",{"id":12},"vue-3-composition-api-a-deep-dive",[14,15,16],"p",{},[17,18],"img",{"alt":19,"src":20},"Vue 3 Composition API cover","/images/blog.webp",[14,22,23],{},"The Composition API is one of the most exciting features in Vue 3. It provides a new way to organize component logic that's more flexible and reusable than the Options API.",[25,26,28],"h2",{"id":27},"why-composition-api","Why Composition API?",[14,30,31],{},"The Composition API solves several problems:",[33,34,35,43,49,55],"ul",{},[36,37,38,42],"li",{},[39,40,41],"strong",{},"Better code organization"," - Group related logic together",[36,44,45,48],{},[39,46,47],{},"Improved reusability"," - Extract and share logic easily",[36,50,51,54],{},[39,52,53],{},"Better TypeScript support"," - Type inference just works",[36,56,57,65],{},[39,58,59,60,64],{},"No ",[61,62,63],"code",{},"this"," confusion"," - Everything is explicit",[25,67,69],{"id":68},"basic-setup","Basic Setup",[14,71,72],{},"Here's a simple component using the Composition API:",[74,75,80],"pre",{"className":76,"code":77,"language":78,"meta":79,"style":79},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst count = ref(0)\nconst doubled = computed(() => count.value * 2)\n\nfunction increment() {\n  count.value++\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Count: {{ count }}\u003C/p>\n    \u003Cp>Doubled: {{ doubled }}\u003C/p>\n    \u003Cbutton @click=\"increment\">Increment\u003C/button>\n  \u003C/div>\n\u003C/template>\n","vue","",[61,81,82,102,137,144,169,206,211,225,239,245,255,260,270,281,301,319,351,361],{"__ignoreMap":79},[83,84,87,91,95,99],"span",{"class":85,"line":86},"line",1,[83,88,90],{"class":89},"sMK4o","\u003C",[83,92,94],{"class":93},"swJcz","script",[83,96,98],{"class":97},"spNyl"," setup",[83,100,101],{"class":89},">\n",[83,103,105,109,112,116,119,122,125,128,131,134],{"class":85,"line":104},2,[83,106,108],{"class":107},"s7zQu","import",[83,110,111],{"class":89}," {",[83,113,115],{"class":114},"sTEyZ"," ref",[83,117,118],{"class":89},",",[83,120,121],{"class":114}," computed",[83,123,124],{"class":89}," }",[83,126,127],{"class":107}," from",[83,129,130],{"class":89}," '",[83,132,78],{"class":133},"sfazB",[83,135,136],{"class":89},"'\n",[83,138,140],{"class":85,"line":139},3,[83,141,143],{"emptyLinePlaceholder":142},true,"\n",[83,145,147,150,153,156,159,162,166],{"class":85,"line":146},4,[83,148,149],{"class":97},"const",[83,151,152],{"class":114}," count ",[83,154,155],{"class":89},"=",[83,157,115],{"class":158},"s2Zo4",[83,160,161],{"class":114},"(",[83,163,165],{"class":164},"sbssI","0",[83,167,168],{"class":114},")\n",[83,170,172,174,177,179,181,183,186,189,192,195,198,201,204],{"class":85,"line":171},5,[83,173,149],{"class":97},[83,175,176],{"class":114}," doubled ",[83,178,155],{"class":89},[83,180,121],{"class":158},[83,182,161],{"class":114},[83,184,185],{"class":89},"()",[83,187,188],{"class":97}," =>",[83,190,191],{"class":114}," count",[83,193,194],{"class":89},".",[83,196,197],{"class":114},"value ",[83,199,200],{"class":89},"*",[83,202,203],{"class":164}," 2",[83,205,168],{"class":114},[83,207,209],{"class":85,"line":208},6,[83,210,143],{"emptyLinePlaceholder":142},[83,212,214,217,220,222],{"class":85,"line":213},7,[83,215,216],{"class":97},"function",[83,218,219],{"class":158}," increment",[83,221,185],{"class":89},[83,223,224],{"class":89}," {\n",[83,226,228,231,233,236],{"class":85,"line":227},8,[83,229,230],{"class":114},"  count",[83,232,194],{"class":89},[83,234,235],{"class":114},"value",[83,237,238],{"class":89},"++\n",[83,240,242],{"class":85,"line":241},9,[83,243,244],{"class":89},"}\n",[83,246,248,251,253],{"class":85,"line":247},10,[83,249,250],{"class":89},"\u003C/",[83,252,94],{"class":93},[83,254,101],{"class":89},[83,256,258],{"class":85,"line":257},11,[83,259,143],{"emptyLinePlaceholder":142},[83,261,263,265,268],{"class":85,"line":262},12,[83,264,90],{"class":89},[83,266,267],{"class":93},"template",[83,269,101],{"class":89},[83,271,273,276,279],{"class":85,"line":272},13,[83,274,275],{"class":89},"  \u003C",[83,277,278],{"class":93},"div",[83,280,101],{"class":89},[83,282,284,287,289,292,295,297,299],{"class":85,"line":283},14,[83,285,286],{"class":89},"    \u003C",[83,288,14],{"class":93},[83,290,291],{"class":89},">",[83,293,294],{"class":114},"Count: {{ count }}",[83,296,250],{"class":89},[83,298,14],{"class":93},[83,300,101],{"class":89},[83,302,304,306,308,310,313,315,317],{"class":85,"line":303},15,[83,305,286],{"class":89},[83,307,14],{"class":93},[83,309,291],{"class":89},[83,311,312],{"class":114},"Doubled: {{ doubled }}",[83,314,250],{"class":89},[83,316,14],{"class":93},[83,318,101],{"class":89},[83,320,322,324,327,330,332,335,338,340,342,345,347,349],{"class":85,"line":321},16,[83,323,286],{"class":89},[83,325,326],{"class":93},"button",[83,328,329],{"class":97}," @click",[83,331,155],{"class":89},[83,333,334],{"class":89},"\"",[83,336,337],{"class":133},"increment",[83,339,334],{"class":89},[83,341,291],{"class":89},[83,343,344],{"class":114},"Increment",[83,346,250],{"class":89},[83,348,326],{"class":93},[83,350,101],{"class":89},[83,352,354,357,359],{"class":85,"line":353},17,[83,355,356],{"class":89},"  \u003C/",[83,358,278],{"class":93},[83,360,101],{"class":89},[83,362,364,366,368],{"class":85,"line":363},18,[83,365,250],{"class":89},[83,367,267],{"class":93},[83,369,101],{"class":89},[25,371,373],{"id":372},"reactive-state","Reactive State",[14,375,376],{},"Vue 3 provides two ways to create reactive state:",[378,379,381],"h3",{"id":380},"ref",[61,382,383],{},"ref()",[14,385,386,387,389],{},"Use ",[61,388,383],{}," for primitive values:",[74,391,395],{"className":392,"code":393,"language":394,"meta":79,"style":79},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ref } from 'vue'\n\nconst count = ref(0)\nconst message = ref('Hello')\n\n// Access value with .value\nconsole.log(count.value) // 0\ncount.value++\n","javascript",[61,396,397,415,419,435,458,462,468,489],{"__ignoreMap":79},[83,398,399,401,403,405,407,409,411,413],{"class":85,"line":86},[83,400,108],{"class":107},[83,402,111],{"class":89},[83,404,115],{"class":114},[83,406,124],{"class":89},[83,408,127],{"class":107},[83,410,130],{"class":89},[83,412,78],{"class":133},[83,414,136],{"class":89},[83,416,417],{"class":85,"line":104},[83,418,143],{"emptyLinePlaceholder":142},[83,420,421,423,425,427,429,431,433],{"class":85,"line":139},[83,422,149],{"class":97},[83,424,152],{"class":114},[83,426,155],{"class":89},[83,428,115],{"class":158},[83,430,161],{"class":114},[83,432,165],{"class":164},[83,434,168],{"class":114},[83,436,437,439,442,444,446,448,451,454,456],{"class":85,"line":146},[83,438,149],{"class":97},[83,440,441],{"class":114}," message ",[83,443,155],{"class":89},[83,445,115],{"class":158},[83,447,161],{"class":114},[83,449,450],{"class":89},"'",[83,452,453],{"class":133},"Hello",[83,455,450],{"class":89},[83,457,168],{"class":114},[83,459,460],{"class":85,"line":171},[83,461,143],{"emptyLinePlaceholder":142},[83,463,464],{"class":85,"line":208},[83,465,467],{"class":466},"sHwdD","// Access value with .value\n",[83,469,470,473,475,478,481,483,486],{"class":85,"line":213},[83,471,472],{"class":114},"console",[83,474,194],{"class":89},[83,476,477],{"class":158},"log",[83,479,480],{"class":114},"(count",[83,482,194],{"class":89},[83,484,485],{"class":114},"value) ",[83,487,488],{"class":466},"// 0\n",[83,490,491,494,496,498],{"class":85,"line":227},[83,492,493],{"class":114},"count",[83,495,194],{"class":89},[83,497,235],{"class":114},[83,499,238],{"class":89},[378,501,503],{"id":502},"reactive",[61,504,505],{},"reactive()",[14,507,386,508,510],{},[61,509,505],{}," for objects:",[74,512,514],{"className":392,"code":513,"language":394,"meta":79,"style":79},"import { reactive } from 'vue'\n\nconst state = reactive({\n  count: 0,\n  user: {\n    name: 'John',\n    email: 'john@example.com'\n  }\n})\n\n// No .value needed\nconsole.log(state.count) // 0\nstate.count++\n",[61,515,516,535,539,555,568,577,593,607,612,619,623,628,646],{"__ignoreMap":79},[83,517,518,520,522,525,527,529,531,533],{"class":85,"line":86},[83,519,108],{"class":107},[83,521,111],{"class":89},[83,523,524],{"class":114}," reactive",[83,526,124],{"class":89},[83,528,127],{"class":107},[83,530,130],{"class":89},[83,532,78],{"class":133},[83,534,136],{"class":89},[83,536,537],{"class":85,"line":104},[83,538,143],{"emptyLinePlaceholder":142},[83,540,541,543,546,548,550,552],{"class":85,"line":139},[83,542,149],{"class":97},[83,544,545],{"class":114}," state ",[83,547,155],{"class":89},[83,549,524],{"class":158},[83,551,161],{"class":114},[83,553,554],{"class":89},"{\n",[83,556,557,559,562,565],{"class":85,"line":146},[83,558,230],{"class":93},[83,560,561],{"class":89},":",[83,563,564],{"class":164}," 0",[83,566,567],{"class":89},",\n",[83,569,570,573,575],{"class":85,"line":171},[83,571,572],{"class":93},"  user",[83,574,561],{"class":89},[83,576,224],{"class":89},[83,578,579,582,584,586,589,591],{"class":85,"line":208},[83,580,581],{"class":93},"    name",[83,583,561],{"class":89},[83,585,130],{"class":89},[83,587,588],{"class":133},"John",[83,590,450],{"class":89},[83,592,567],{"class":89},[83,594,595,598,600,602,605],{"class":85,"line":213},[83,596,597],{"class":93},"    email",[83,599,561],{"class":89},[83,601,130],{"class":89},[83,603,604],{"class":133},"john@example.com",[83,606,136],{"class":89},[83,608,609],{"class":85,"line":227},[83,610,611],{"class":89},"  }\n",[83,613,614,617],{"class":85,"line":241},[83,615,616],{"class":89},"}",[83,618,168],{"class":114},[83,620,621],{"class":85,"line":247},[83,622,143],{"emptyLinePlaceholder":142},[83,624,625],{"class":85,"line":257},[83,626,627],{"class":466},"// No .value needed\n",[83,629,630,632,634,636,639,641,644],{"class":85,"line":262},[83,631,472],{"class":114},[83,633,194],{"class":89},[83,635,477],{"class":158},[83,637,638],{"class":114},"(state",[83,640,194],{"class":89},[83,642,643],{"class":114},"count) ",[83,645,488],{"class":466},[83,647,648,651,653,655],{"class":85,"line":272},[83,649,650],{"class":114},"state",[83,652,194],{"class":89},[83,654,493],{"class":114},[83,656,238],{"class":89},[25,658,660],{"id":659},"composables","Composables",[14,662,663],{},"Extract reusable logic into composables:",[74,665,667],{"className":392,"code":666,"language":394,"meta":79,"style":79},"// composables/useCounter.js\nimport { ref } from 'vue'\n\nexport function useCounter(initialValue = 0) {\n  const count = ref(initialValue)\n  \n  function increment() {\n    count.value++\n  }\n  \n  function decrement() {\n    count.value--\n  }\n  \n  function reset() {\n    count.value = initialValue\n  }\n  \n  return {\n    count,\n    increment,\n    decrement,\n    reset\n  }\n}\n",[61,668,669,674,692,696,723,740,745,756,767,771,775,786,797,801,805,816,829,833,837,845,852,860,868,874,879],{"__ignoreMap":79},[83,670,671],{"class":85,"line":86},[83,672,673],{"class":466},"// composables/useCounter.js\n",[83,675,676,678,680,682,684,686,688,690],{"class":85,"line":104},[83,677,108],{"class":107},[83,679,111],{"class":89},[83,681,115],{"class":114},[83,683,124],{"class":89},[83,685,127],{"class":107},[83,687,130],{"class":89},[83,689,78],{"class":133},[83,691,136],{"class":89},[83,693,694],{"class":85,"line":139},[83,695,143],{"emptyLinePlaceholder":142},[83,697,698,701,704,707,709,713,716,718,721],{"class":85,"line":146},[83,699,700],{"class":107},"export",[83,702,703],{"class":97}," function",[83,705,706],{"class":158}," useCounter",[83,708,161],{"class":89},[83,710,712],{"class":711},"sHdIc","initialValue",[83,714,715],{"class":89}," =",[83,717,564],{"class":164},[83,719,720],{"class":89},")",[83,722,224],{"class":89},[83,724,725,728,730,732,734,736,738],{"class":85,"line":171},[83,726,727],{"class":97},"  const",[83,729,191],{"class":114},[83,731,715],{"class":89},[83,733,115],{"class":158},[83,735,161],{"class":93},[83,737,712],{"class":114},[83,739,168],{"class":93},[83,741,742],{"class":85,"line":208},[83,743,744],{"class":93},"  \n",[83,746,747,750,752,754],{"class":85,"line":213},[83,748,749],{"class":97},"  function",[83,751,219],{"class":158},[83,753,185],{"class":89},[83,755,224],{"class":89},[83,757,758,761,763,765],{"class":85,"line":227},[83,759,760],{"class":114},"    count",[83,762,194],{"class":89},[83,764,235],{"class":114},[83,766,238],{"class":89},[83,768,769],{"class":85,"line":241},[83,770,611],{"class":89},[83,772,773],{"class":85,"line":247},[83,774,744],{"class":93},[83,776,777,779,782,784],{"class":85,"line":257},[83,778,749],{"class":97},[83,780,781],{"class":158}," decrement",[83,783,185],{"class":89},[83,785,224],{"class":89},[83,787,788,790,792,794],{"class":85,"line":262},[83,789,760],{"class":114},[83,791,194],{"class":89},[83,793,235],{"class":114},[83,795,796],{"class":89},"--\n",[83,798,799],{"class":85,"line":272},[83,800,611],{"class":89},[83,802,803],{"class":85,"line":283},[83,804,744],{"class":93},[83,806,807,809,812,814],{"class":85,"line":303},[83,808,749],{"class":97},[83,810,811],{"class":158}," reset",[83,813,185],{"class":89},[83,815,224],{"class":89},[83,817,818,820,822,824,826],{"class":85,"line":321},[83,819,760],{"class":114},[83,821,194],{"class":89},[83,823,235],{"class":114},[83,825,715],{"class":89},[83,827,828],{"class":114}," initialValue\n",[83,830,831],{"class":85,"line":353},[83,832,611],{"class":89},[83,834,835],{"class":85,"line":363},[83,836,744],{"class":93},[83,838,840,843],{"class":85,"line":839},19,[83,841,842],{"class":107},"  return",[83,844,224],{"class":89},[83,846,848,850],{"class":85,"line":847},20,[83,849,760],{"class":114},[83,851,567],{"class":89},[83,853,855,858],{"class":85,"line":854},21,[83,856,857],{"class":114},"    increment",[83,859,567],{"class":89},[83,861,863,866],{"class":85,"line":862},22,[83,864,865],{"class":114},"    decrement",[83,867,567],{"class":89},[83,869,871],{"class":85,"line":870},23,[83,872,873],{"class":114},"    reset\n",[83,875,877],{"class":85,"line":876},24,[83,878,611],{"class":89},[83,880,882],{"class":85,"line":881},25,[83,883,244],{"class":89},[14,885,886],{},"Use it in any component:",[74,888,890],{"className":76,"code":889,"language":78,"meta":79,"style":79},"\u003Cscript setup>\nimport { useCounter } from '@/composables/useCounter'\n\nconst { count, increment, decrement, reset } = useCounter(10)\n\u003C/script>\n",[61,891,892,902,921,925,959],{"__ignoreMap":79},[83,893,894,896,898,900],{"class":85,"line":86},[83,895,90],{"class":89},[83,897,94],{"class":93},[83,899,98],{"class":97},[83,901,101],{"class":89},[83,903,904,906,908,910,912,914,916,919],{"class":85,"line":104},[83,905,108],{"class":107},[83,907,111],{"class":89},[83,909,706],{"class":114},[83,911,124],{"class":89},[83,913,127],{"class":107},[83,915,130],{"class":89},[83,917,918],{"class":133},"@/composables/useCounter",[83,920,136],{"class":89},[83,922,923],{"class":85,"line":139},[83,924,143],{"emptyLinePlaceholder":142},[83,926,927,929,931,933,935,937,939,941,943,946,948,950,952,954,957],{"class":85,"line":146},[83,928,149],{"class":97},[83,930,111],{"class":89},[83,932,191],{"class":114},[83,934,118],{"class":89},[83,936,219],{"class":114},[83,938,118],{"class":89},[83,940,781],{"class":114},[83,942,118],{"class":89},[83,944,945],{"class":114}," reset ",[83,947,616],{"class":89},[83,949,715],{"class":89},[83,951,706],{"class":158},[83,953,161],{"class":114},[83,955,956],{"class":164},"10",[83,958,168],{"class":114},[83,960,961,963,965],{"class":85,"line":171},[83,962,250],{"class":89},[83,964,94],{"class":93},[83,966,101],{"class":89},[25,968,970],{"id":969},"lifecycle-hooks","Lifecycle Hooks",[14,972,973],{},"All lifecycle hooks are available:",[74,975,977],{"className":392,"code":976,"language":394,"meta":79,"style":79},"import { onMounted, onUnmounted } from 'vue'\n\nonMounted(() => {\n  console.log('Component mounted')\n})\n\nonUnmounted(() => {\n  console.log('Component unmounted')\n})\n",[61,978,979,1003,1007,1020,1040,1046,1050,1063,1082],{"__ignoreMap":79},[83,980,981,983,985,988,990,993,995,997,999,1001],{"class":85,"line":86},[83,982,108],{"class":107},[83,984,111],{"class":89},[83,986,987],{"class":114}," onMounted",[83,989,118],{"class":89},[83,991,992],{"class":114}," onUnmounted",[83,994,124],{"class":89},[83,996,127],{"class":107},[83,998,130],{"class":89},[83,1000,78],{"class":133},[83,1002,136],{"class":89},[83,1004,1005],{"class":85,"line":104},[83,1006,143],{"emptyLinePlaceholder":142},[83,1008,1009,1012,1014,1016,1018],{"class":85,"line":139},[83,1010,1011],{"class":158},"onMounted",[83,1013,161],{"class":114},[83,1015,185],{"class":89},[83,1017,188],{"class":97},[83,1019,224],{"class":89},[83,1021,1022,1025,1027,1029,1031,1033,1036,1038],{"class":85,"line":146},[83,1023,1024],{"class":114},"  console",[83,1026,194],{"class":89},[83,1028,477],{"class":158},[83,1030,161],{"class":93},[83,1032,450],{"class":89},[83,1034,1035],{"class":133},"Component mounted",[83,1037,450],{"class":89},[83,1039,168],{"class":93},[83,1041,1042,1044],{"class":85,"line":171},[83,1043,616],{"class":89},[83,1045,168],{"class":114},[83,1047,1048],{"class":85,"line":208},[83,1049,143],{"emptyLinePlaceholder":142},[83,1051,1052,1055,1057,1059,1061],{"class":85,"line":213},[83,1053,1054],{"class":158},"onUnmounted",[83,1056,161],{"class":114},[83,1058,185],{"class":89},[83,1060,188],{"class":97},[83,1062,224],{"class":89},[83,1064,1065,1067,1069,1071,1073,1075,1078,1080],{"class":85,"line":227},[83,1066,1024],{"class":114},[83,1068,194],{"class":89},[83,1070,477],{"class":158},[83,1072,161],{"class":93},[83,1074,450],{"class":89},[83,1076,1077],{"class":133},"Component unmounted",[83,1079,450],{"class":89},[83,1081,168],{"class":93},[83,1083,1084,1086],{"class":85,"line":241},[83,1085,616],{"class":89},[83,1087,168],{"class":114},[25,1089,1091],{"id":1090},"watch-and-watcheffect","Watch and WatchEffect",[14,1093,1094],{},"Monitor reactive state changes:",[74,1096,1098],{"className":392,"code":1097,"language":394,"meta":79,"style":79},"import { ref, watch, watchEffect } from 'vue'\n\nconst count = ref(0)\n\n// Watch specific source\nwatch(count, (newValue, oldValue) => {\n  console.log(`Count changed from ${oldValue} to ${newValue}`)\n})\n\n// Watch multiple sources\nwatch([count, message], ([newCount, newMessage]) => {\n  console.log('Something changed')\n})\n\n// Auto-track dependencies\nwatchEffect(() => {\n  console.log(`Count is ${count.value}`)\n})\n",[61,1099,1100,1128,1132,1148,1152,1157,1183,1219,1225,1229,1234,1266,1285,1291,1295,1300,1313,1340],{"__ignoreMap":79},[83,1101,1102,1104,1106,1108,1110,1113,1115,1118,1120,1122,1124,1126],{"class":85,"line":86},[83,1103,108],{"class":107},[83,1105,111],{"class":89},[83,1107,115],{"class":114},[83,1109,118],{"class":89},[83,1111,1112],{"class":114}," watch",[83,1114,118],{"class":89},[83,1116,1117],{"class":114}," watchEffect",[83,1119,124],{"class":89},[83,1121,127],{"class":107},[83,1123,130],{"class":89},[83,1125,78],{"class":133},[83,1127,136],{"class":89},[83,1129,1130],{"class":85,"line":104},[83,1131,143],{"emptyLinePlaceholder":142},[83,1133,1134,1136,1138,1140,1142,1144,1146],{"class":85,"line":139},[83,1135,149],{"class":97},[83,1137,152],{"class":114},[83,1139,155],{"class":89},[83,1141,115],{"class":158},[83,1143,161],{"class":114},[83,1145,165],{"class":164},[83,1147,168],{"class":114},[83,1149,1150],{"class":85,"line":146},[83,1151,143],{"emptyLinePlaceholder":142},[83,1153,1154],{"class":85,"line":171},[83,1155,1156],{"class":466},"// Watch specific source\n",[83,1158,1159,1162,1164,1166,1169,1172,1174,1177,1179,1181],{"class":85,"line":208},[83,1160,1161],{"class":158},"watch",[83,1163,480],{"class":114},[83,1165,118],{"class":89},[83,1167,1168],{"class":89}," (",[83,1170,1171],{"class":711},"newValue",[83,1173,118],{"class":89},[83,1175,1176],{"class":711}," oldValue",[83,1178,720],{"class":89},[83,1180,188],{"class":97},[83,1182,224],{"class":89},[83,1184,1185,1187,1189,1191,1193,1196,1199,1202,1205,1207,1210,1212,1214,1217],{"class":85,"line":213},[83,1186,1024],{"class":114},[83,1188,194],{"class":89},[83,1190,477],{"class":158},[83,1192,161],{"class":93},[83,1194,1195],{"class":89},"`",[83,1197,1198],{"class":133},"Count changed from ",[83,1200,1201],{"class":89},"${",[83,1203,1204],{"class":114},"oldValue",[83,1206,616],{"class":89},[83,1208,1209],{"class":133}," to ",[83,1211,1201],{"class":89},[83,1213,1171],{"class":114},[83,1215,1216],{"class":89},"}`",[83,1218,168],{"class":93},[83,1220,1221,1223],{"class":85,"line":227},[83,1222,616],{"class":89},[83,1224,168],{"class":114},[83,1226,1227],{"class":85,"line":241},[83,1228,143],{"emptyLinePlaceholder":142},[83,1230,1231],{"class":85,"line":247},[83,1232,1233],{"class":466},"// Watch multiple sources\n",[83,1235,1236,1238,1241,1243,1246,1248,1251,1254,1256,1259,1262,1264],{"class":85,"line":257},[83,1237,1161],{"class":158},[83,1239,1240],{"class":114},"([count",[83,1242,118],{"class":89},[83,1244,1245],{"class":114}," message]",[83,1247,118],{"class":89},[83,1249,1250],{"class":89}," ([",[83,1252,1253],{"class":711},"newCount",[83,1255,118],{"class":89},[83,1257,1258],{"class":711}," newMessage",[83,1260,1261],{"class":89},"])",[83,1263,188],{"class":97},[83,1265,224],{"class":89},[83,1267,1268,1270,1272,1274,1276,1278,1281,1283],{"class":85,"line":262},[83,1269,1024],{"class":114},[83,1271,194],{"class":89},[83,1273,477],{"class":158},[83,1275,161],{"class":93},[83,1277,450],{"class":89},[83,1279,1280],{"class":133},"Something changed",[83,1282,450],{"class":89},[83,1284,168],{"class":93},[83,1286,1287,1289],{"class":85,"line":272},[83,1288,616],{"class":89},[83,1290,168],{"class":114},[83,1292,1293],{"class":85,"line":283},[83,1294,143],{"emptyLinePlaceholder":142},[83,1296,1297],{"class":85,"line":303},[83,1298,1299],{"class":466},"// Auto-track dependencies\n",[83,1301,1302,1305,1307,1309,1311],{"class":85,"line":321},[83,1303,1304],{"class":158},"watchEffect",[83,1306,161],{"class":114},[83,1308,185],{"class":89},[83,1310,188],{"class":97},[83,1312,224],{"class":89},[83,1314,1315,1317,1319,1321,1323,1325,1328,1330,1332,1334,1336,1338],{"class":85,"line":353},[83,1316,1024],{"class":114},[83,1318,194],{"class":89},[83,1320,477],{"class":158},[83,1322,161],{"class":93},[83,1324,1195],{"class":89},[83,1326,1327],{"class":133},"Count is ",[83,1329,1201],{"class":89},[83,1331,493],{"class":114},[83,1333,194],{"class":89},[83,1335,235],{"class":114},[83,1337,1216],{"class":89},[83,1339,168],{"class":93},[83,1341,1342,1344],{"class":85,"line":363},[83,1343,616],{"class":89},[83,1345,168],{"class":114},[25,1347,1349],{"id":1348},"computed-properties","Computed Properties",[14,1351,1352],{},"Create derived state:",[74,1354,1356],{"className":392,"code":1355,"language":394,"meta":79,"style":79},"import { ref, computed } from 'vue'\n\nconst firstName = ref('John')\nconst lastName = ref('Doe')\n\nconst fullName = computed(() => {\n  return `${firstName.value} ${lastName.value}`\n})\n\n// Writable computed\nconst fullNameWritable = computed({\n  get() {\n    return `${firstName.value} ${lastName.value}`\n  },\n  set(value) {\n    [firstName.value, lastName.value] = value.split(' ')\n  }\n})\n",[61,1357,1358,1380,1384,1405,1427,1431,1450,1479,1485,1489,1494,1509,1518,1543,1548,1561,1602,1606],{"__ignoreMap":79},[83,1359,1360,1362,1364,1366,1368,1370,1372,1374,1376,1378],{"class":85,"line":86},[83,1361,108],{"class":107},[83,1363,111],{"class":89},[83,1365,115],{"class":114},[83,1367,118],{"class":89},[83,1369,121],{"class":114},[83,1371,124],{"class":89},[83,1373,127],{"class":107},[83,1375,130],{"class":89},[83,1377,78],{"class":133},[83,1379,136],{"class":89},[83,1381,1382],{"class":85,"line":104},[83,1383,143],{"emptyLinePlaceholder":142},[83,1385,1386,1388,1391,1393,1395,1397,1399,1401,1403],{"class":85,"line":139},[83,1387,149],{"class":97},[83,1389,1390],{"class":114}," firstName ",[83,1392,155],{"class":89},[83,1394,115],{"class":158},[83,1396,161],{"class":114},[83,1398,450],{"class":89},[83,1400,588],{"class":133},[83,1402,450],{"class":89},[83,1404,168],{"class":114},[83,1406,1407,1409,1412,1414,1416,1418,1420,1423,1425],{"class":85,"line":146},[83,1408,149],{"class":97},[83,1410,1411],{"class":114}," lastName ",[83,1413,155],{"class":89},[83,1415,115],{"class":158},[83,1417,161],{"class":114},[83,1419,450],{"class":89},[83,1421,1422],{"class":133},"Doe",[83,1424,450],{"class":89},[83,1426,168],{"class":114},[83,1428,1429],{"class":85,"line":171},[83,1430,143],{"emptyLinePlaceholder":142},[83,1432,1433,1435,1438,1440,1442,1444,1446,1448],{"class":85,"line":208},[83,1434,149],{"class":97},[83,1436,1437],{"class":114}," fullName ",[83,1439,155],{"class":89},[83,1441,121],{"class":158},[83,1443,161],{"class":114},[83,1445,185],{"class":89},[83,1447,188],{"class":97},[83,1449,224],{"class":89},[83,1451,1452,1454,1457,1460,1462,1464,1466,1469,1472,1474,1476],{"class":85,"line":213},[83,1453,842],{"class":107},[83,1455,1456],{"class":89}," `${",[83,1458,1459],{"class":114},"firstName",[83,1461,194],{"class":89},[83,1463,235],{"class":114},[83,1465,616],{"class":89},[83,1467,1468],{"class":89}," ${",[83,1470,1471],{"class":114},"lastName",[83,1473,194],{"class":89},[83,1475,235],{"class":114},[83,1477,1478],{"class":89},"}`\n",[83,1480,1481,1483],{"class":85,"line":227},[83,1482,616],{"class":89},[83,1484,168],{"class":114},[83,1486,1487],{"class":85,"line":241},[83,1488,143],{"emptyLinePlaceholder":142},[83,1490,1491],{"class":85,"line":247},[83,1492,1493],{"class":466},"// Writable computed\n",[83,1495,1496,1498,1501,1503,1505,1507],{"class":85,"line":257},[83,1497,149],{"class":97},[83,1499,1500],{"class":114}," fullNameWritable ",[83,1502,155],{"class":89},[83,1504,121],{"class":158},[83,1506,161],{"class":114},[83,1508,554],{"class":89},[83,1510,1511,1514,1516],{"class":85,"line":262},[83,1512,1513],{"class":93},"  get",[83,1515,185],{"class":89},[83,1517,224],{"class":89},[83,1519,1520,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541],{"class":85,"line":272},[83,1521,1522],{"class":107},"    return",[83,1524,1456],{"class":89},[83,1526,1459],{"class":114},[83,1528,194],{"class":89},[83,1530,235],{"class":114},[83,1532,616],{"class":89},[83,1534,1468],{"class":89},[83,1536,1471],{"class":114},[83,1538,194],{"class":89},[83,1540,235],{"class":114},[83,1542,1478],{"class":89},[83,1544,1545],{"class":85,"line":283},[83,1546,1547],{"class":89},"  },\n",[83,1549,1550,1553,1555,1557,1559],{"class":85,"line":303},[83,1551,1552],{"class":93},"  set",[83,1554,161],{"class":89},[83,1556,235],{"class":711},[83,1558,720],{"class":89},[83,1560,224],{"class":89},[83,1562,1563,1566,1568,1570,1572,1574,1577,1579,1581,1584,1586,1589,1591,1594,1596,1598,1600],{"class":85,"line":321},[83,1564,1565],{"class":93},"    [",[83,1567,1459],{"class":114},[83,1569,194],{"class":89},[83,1571,235],{"class":114},[83,1573,118],{"class":89},[83,1575,1576],{"class":114}," lastName",[83,1578,194],{"class":89},[83,1580,235],{"class":114},[83,1582,1583],{"class":93},"] ",[83,1585,155],{"class":89},[83,1587,1588],{"class":114}," value",[83,1590,194],{"class":89},[83,1592,1593],{"class":158},"split",[83,1595,161],{"class":93},[83,1597,450],{"class":89},[83,1599,130],{"class":89},[83,1601,168],{"class":93},[83,1603,1604],{"class":85,"line":353},[83,1605,611],{"class":89},[83,1607,1608,1610],{"class":85,"line":363},[83,1609,616],{"class":89},[83,1611,168],{"class":114},[25,1613,1615],{"id":1614},"best-practices","Best Practices",[1617,1618,1619,1627,1633,1639],"ol",{},[36,1620,1621,1626],{},[39,1622,386,1623],{},[61,1624,1625],{},"\u003Cscript setup>"," - It's more concise and performant",[36,1628,1629,1632],{},[39,1630,1631],{},"Extract reusable logic"," - Create composables for shared functionality",[36,1634,1635,1638],{},[39,1636,1637],{},"Keep composables focused"," - Each composable should do one thing well",[36,1640,1641,1644],{},[39,1642,1643],{},"Use TypeScript"," - Get better type inference and autocomplete",[25,1646,1648],{"id":1647},"conclusion","Conclusion",[14,1650,1651],{},"The Composition API is a game-changer for Vue development. It makes your code more organized, reusable, and maintainable. Start using it in your next project!",[1653,1654,1655],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":79,"searchDepth":104,"depth":104,"links":1657},[1658,1659,1660,1664,1665,1666,1667,1668,1669],{"id":27,"depth":104,"text":28},{"id":68,"depth":104,"text":69},{"id":372,"depth":104,"text":373,"children":1661},[1662,1663],{"id":380,"depth":139,"text":383},{"id":502,"depth":139,"text":505},{"id":659,"depth":104,"text":660},{"id":969,"depth":104,"text":970},{"id":1090,"depth":104,"text":1091},{"id":1348,"depth":104,"text":1349},{"id":1614,"depth":104,"text":1615},{"id":1647,"depth":104,"text":1648},"Master the Vue 3 Composition API: setup(), ref, reactive, computed, watch, composables, and lifecycle hooks. Practical examples comparing Options API vs Composition API.","md",{"author":1673,"date":1674,"image":20,"category":1675,"tags":1676,"featured":1687,"draft":1687},"WonderCoder Team","2025-11-12T16:00:00.000Z","Web Development",[78,1677,394,1678,1679,1680,1681,1682,1683,1684,1685,1686],"composition-api","frontend","vue3-tutorial","vue-composition-api-guide","vue3-setup-function","how-to-use-vue-composition-api","vue3-composables","vue3-reactivity","vue3-vs-options-api","vue3-ref-reactive",false,"/blog/vue-composition-api",{"title":5,"description":1670},{"loc":1688},"blog/vue-composition-api","mQhrGE9HYoQZuloea5wVyEB-Q3AMQwGpMS4WaqySm2w",1782986782873]