md.json

{
    "content" : "# Composition API in Vue.js \n\nThe Composition API is a feature introduced in Vue.js 3 that provides a set of functions for organizing and reusing logic in a more flexible and scalable manner. Unlike the Options API, which divides logic based on options like `data`, `methods`, and `computed`, the Composition API allows developers to encapsulate related logic into reusable functions called \"composition functions.\"\n\n ## Key Concepts:**\n\n1. **`setup` Function:**\n   - The entry point for the Composition API.\n   - It runs before the component is created, allowing for setup logic.\n\n2. **Reactive State:**\n   - Uses `ref` and `reactive` functions to create reactive variables.\n   - Enables tracking and automatic reactivity when data changes.\n\n3. **Lifecycle Hooks:**\n   - Lifecycle hooks can be used inside the `setup` function for setup logic.\n\n4. **`watch` and `watchEffect`:**\n   - Allows developers to watch for changes in reactive variables or perform side effects.\n\n5. **`computed`:**\n   - Computes derived values based on reactive dependencies.\n\n6. **Custom Composition Functions:**\n   - Encapsulates logic into reusable functions for better maintainability.\n\n**Advantages:**\n- Improved organization and readability of component logic.\n- Enables better code reuse and composability.\n- Easier to share logic across components.\n\n**Example:**\n```vue [components/NameComponent.vue]{4-6,7} \n<template>\n  <div>\n    <p>{{ message }}</p>\n    <button @click=\"reverseMessage\">Reverse Message</button>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst message = ref('Hello, Vue!');\nfunction reverseMessage() {\n  message.value = message.value.split('').reverse().join('');\n}\n</script>\n```"
}