[{"data":1,"prerenderedAt":254},["ShallowReactive",2],{"blog-vue-composition-api-guide":3,"surroundingPosts-vue-composition-api-guide":245},{"id":4,"title":5,"author":6,"body":7,"date":232,"description":233,"extension":234,"meta":235,"navigation":236,"path":237,"seo":238,"stem":239,"tags":240,"__hash__":244},"blog/blog/vue-composition-api-guide.md","Vue 3 Composition API: A Complete Guide","Jane Smith",{"type":8,"value":9,"toc":222},"minimark",[10,14,19,22,51,55,58,75,79,86,102,106,113,140,144,150,159,163,166,185,189,192,211,215,218],[11,12,13],"p",{},"The Composition API is one of the most significant features introduced in Vue 3. It provides a more flexible way to organize component logic and makes code more reusable and maintainable.",[15,16,18],"h2",{"id":17},"why-composition-api","Why Composition API?",[11,20,21],{},"The Composition API solves several problems with the Options API:",[23,24,25,33,39,45],"ul",{},[26,27,28,32],"li",{},[29,30,31],"strong",{},"Better Logic Reuse",": Easier to extract and reuse logic across components",[26,34,35,38],{},[29,36,37],{},"Better TypeScript Support",": More natural TypeScript integration",[26,40,41,44],{},[29,42,43],{},"Better Code Organization",": Related logic can be grouped together",[26,46,47,50],{},[29,48,49],{},"Better Tree Shaking",": Unused code can be eliminated more effectively",[15,52,54],{"id":53},"basic-setup","Basic Setup",[11,56,57],{},"To use the Composition API, you need to import the necessary functions from Vue:",[59,60,65],"pre",{"className":61,"code":62,"language":63,"meta":64,"style":64},"language-javascript shiki shiki-themes github-light github-dark","import { ref, reactive, computed, watch, onMounted } from 'vue';\n","javascript","",[66,67,68],"code",{"__ignoreMap":64},[69,70,73],"span",{"class":71,"line":72},"line",1,[69,74,62],{},[15,76,78],{"id":77},"reactive-references","Reactive References",[11,80,81,82,85],{},"The ",[66,83,84],{},"ref"," function creates a reactive reference to a value:",[59,87,89],{"className":61,"code":88,"language":63,"meta":64,"style":64},"const count = ref(0);\nconst message = ref('Hello, Vue!');\n",[66,90,91,96],{"__ignoreMap":64},[69,92,93],{"class":71,"line":72},[69,94,95],{},"const count = ref(0);\n",[69,97,99],{"class":71,"line":98},2,[69,100,101],{},"const message = ref('Hello, Vue!');\n",[15,103,105],{"id":104},"reactive-objects","Reactive Objects",[11,107,108,109,112],{},"For objects, use the ",[66,110,111],{},"reactive"," function:",[59,114,116],{"className":61,"code":115,"language":63,"meta":64,"style":64},"const state = reactive({\n  count: 0,\n  message: 'Hello, Vue!',\n});\n",[66,117,118,123,128,134],{"__ignoreMap":64},[69,119,120],{"class":71,"line":72},[69,121,122],{},"const state = reactive({\n",[69,124,125],{"class":71,"line":98},[69,126,127],{},"  count: 0,\n",[69,129,131],{"class":71,"line":130},3,[69,132,133],{},"  message: 'Hello, Vue!',\n",[69,135,137],{"class":71,"line":136},4,[69,138,139],{},"});\n",[15,141,143],{"id":142},"computed-properties","Computed Properties",[11,145,146,147,112],{},"Computed properties are defined using the ",[66,148,149],{},"computed",[59,151,153],{"className":61,"code":152,"language":63,"meta":64,"style":64},"const doubleCount = computed(() => count.value * 2);\n",[66,154,155],{"__ignoreMap":64},[69,156,157],{"class":71,"line":72},[69,158,152],{},[15,160,162],{"id":161},"watchers","Watchers",[11,164,165],{},"Watchers allow you to perform side effects when reactive data changes:",[59,167,169],{"className":61,"code":168,"language":63,"meta":64,"style":64},"watch(count, (newValue, oldValue) => {\n  console.log(`Count changed from ${oldValue} to ${newValue}`);\n});\n",[66,170,171,176,181],{"__ignoreMap":64},[69,172,173],{"class":71,"line":72},[69,174,175],{},"watch(count, (newValue, oldValue) => {\n",[69,177,178],{"class":71,"line":98},[69,179,180],{},"  console.log(`Count changed from ${oldValue} to ${newValue}`);\n",[69,182,183],{"class":71,"line":130},[69,184,139],{},[15,186,188],{"id":187},"lifecycle-hooks","Lifecycle Hooks",[11,190,191],{},"Lifecycle hooks are available as functions:",[59,193,195],{"className":61,"code":194,"language":63,"meta":64,"style":64},"onMounted(() => {\n  console.log('Component mounted!');\n});\n",[66,196,197,202,207],{"__ignoreMap":64},[69,198,199],{"class":71,"line":72},[69,200,201],{},"onMounted(() => {\n",[69,203,204],{"class":71,"line":98},[69,205,206],{},"  console.log('Component mounted!');\n",[69,208,209],{"class":71,"line":130},[69,210,139],{},[15,212,214],{"id":213},"conclusion","Conclusion",[11,216,217],{},"The Composition API provides a more powerful and flexible way to write Vue components. While it might seem different at first, it offers significant benefits for complex applications and better code organization.",[219,220,221],"style",{},"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":64,"searchDepth":98,"depth":98,"links":223},[224,225,226,227,228,229,230,231],{"id":17,"depth":98,"text":18},{"id":53,"depth":98,"text":54},{"id":77,"depth":98,"text":78},{"id":104,"depth":98,"text":105},{"id":142,"depth":98,"text":143},{"id":161,"depth":98,"text":162},{"id":187,"depth":98,"text":188},{"id":213,"depth":98,"text":214},"2024-01-20","Master the Vue 3 Composition API with this comprehensive guide. Learn about reactive refs, computed properties, watchers, and lifecycle hooks with practical examples.","md",{},true,"/blog/vue-composition-api-guide",{"title":5,"description":233},"blog/vue-composition-api-guide",[241,242,63,243],"vue","composition-api","frontend","BfrU8rsg-YJk1k8SKv_q9DMzScN5aZDba6H3H9OPiS4",[246,250],{"title":247,"path":248,"stem":249,"children":-1},"TypeScript Best Practices for Vue Applications","/blog/typescript-best-practices","blog/typescript-best-practices",{"title":251,"path":252,"stem":253,"children":-1},"Getting Started with Nuxt 4","/blog/getting-started-with-nuxt","blog/getting-started-with-nuxt",1764590496321]