difference between composition api and option api

==

 difference between vue3 and vue2

setup return vue3

const function_name =()=>{}

direct function name

getData

varaibles const fields = reactive([

vue2

mounted,computed

function_name(){}

this.variable or functin nae

this.getdata

return {

infoModal: {

id: '',

title: '',

content:{},

message:"",

},

in vuejs 2

<template>

</template>

<script>

export default {

components: {

},

data() {

return {

};

},

mounted(){

},

computed: {

},

methods:{

},

};

</script>

in vuejs 3

<template>

</template>

<script>

export default {

name: 'Card Index',

setup() {

return {

};

},

}

</script>

vuejs2 declaration of varaibles 

options: [

{ value: 'option1', text: 'Option 1' },

{ value: 'option2', text: 'Option 2' },

{ value: 'option3', text: 'Option 3' },

],

fields: [

{ key: 'id', label: 'ID' },

{ key: 'name', label: 'Name' },

{ key: 'description', label: 'Description' },

{key: "actions", label: "Actions" }

],

vuejs 3 declaratiuon of varaibles 

const queryBody = reactive({

sort_by: '',

order: '',

page: 1,

per_page: 5,

role: '',

team: '',

});

const fields = reactive([

{ key: 'id', label: 'ID' },

{ key: 'name', label: 'Name' },

{ key: 'description', label: 'Description' },

{ key: 'actions', label: 'Actions' },

]);

functions or methods declaration 

methods:{

refetchData(){

this.getData(this.queryBody);

},

in vuejs 3

const refetchData = () => {

getData(queryBody);

};

we will not use this. in vuejs3

this.functiuon name or this.varaibgle 

const varaible = ref(false) =>vuejs3

variable ;false => vuejs 2

in 

const function_name =()=>{} => vuejs 3

direct function name => vuejs2

in vujs3

return {

infoModal: {

id: '',

title: '',

content:{},

message:"",

},

The Composition API and Options API are both parts of Vue.js, a popular JavaScript framework for building user interfaces. The main difference between them lies in how you structure and organize your code.

Options API

The Options API is the traditional way of writing Vue.js components. In this approach, you define the component's options (data, methods, computed properties, lifecycle hooks) in an object literal.

// Options API Example

<template>

<div>{{ message }}</div>

</template>

<script>

export default {

data() {

return {

message: 'Hello, Options API!'

};

}

};

</script>

In the Options API:

• You define data using a function that returns an object.
• Methods are defined directly inside the component options.
• Computed properties are defined using the computed property.
• Lifecycle hooks like created, mounted, etc., are defined as methods with specific names.

Composition API

The Composition API is a newer addition to Vue.js that provides a more flexible way to organize your component logic, especially for complex components. It allows you to organize code based on logical concerns rather than lifecycle methods.

// Composition API Example
<template>
  <div>{{ message }}</div>
</template>
<script>
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      message: 'Hello, Composition API!'
    });
    return { state };
  }
};
</script>

In the Composition API:

• You use the setup() function to define your component's logic.
• Reactive data is created using the reactive function.
• Methods, computed properties, and other logic are defined inside the setup() function and returned as an object.

Differences

1. Organization:

   • Options API organizes code based on the options available in a Vue component (data, methods, computed properties, etc.).
   • Composition API organizes code based on logical concerns, making it easier to manage complex components.

2. Reactivity:

   • Both APIs support reactivity, but in the Composition API, you explicitly use reactive or ref to create reactive data.

3. Code Reusability:

   • Composition API promotes code reusability by allowing you to extract and reuse logic in multiple components using functions.

4. Readability:

   • Composition API can lead to more readable code, especially for large components, as it separates concerns more clearly.

5. Migration:

   • If you're migrating from Options API to Composition API, you can gradually refactor your code by moving logic into setup() while keeping existing Options API code.

Overall, the Composition API provides more flexibility and scalability for complex components, while the Options API may be simpler for smaller or less complex components.

Code Reusability Example

Suppose you have a logic for handling a counter that you want to reuse in multiple components. With the Composition API, you can create a reusable function to manage this logic

<template>

<div>

<p>Counter: {{ counter }}</p>

<button @click="incrementCounter">Increment</button>

</div>

</template>

<script>

import { ref } from 'vue';

// Reusable logic for managing a counter

function useCounter() {

const counter = ref(0);

function incrementCounter() {

counter.value++;

}

return { counter, incrementCounter };

}

export default {

setup() {

// Using the reusable counter logic

const { counter, incrementCounter } = useCounter();

return { counter, incrementCounter };

}

};

</script>

Now, you can use the useCounter function in any component where you need counter functionality without duplicating the logic.

Readability Example

Consider a scenario where you have a large component that handles user authentication. Using the Composition API, you can separate concerns more clearly, making the code easier to read and maintain:

<template>

<div>

<input type="text" v-model="username" placeholder="Username" />

<input type="password" v-model="password" placeholder="Password" />

<button @click="login">Login</button>

<p v-if="error" style="color: red;">{{ error }}</p>

</div>

</template>

<script>

import { reactive } from 'vue';

import { loginService } from '@/services'; // Assume loginService is a separate service

export default {

setup() {

const state = reactive({

username: '',

password: '',

error: ''

});

async function login() {

try {

await loginService.login(state.username, state.password);

// Redirect or perform other actions on successful login

} catch (err) {

state.error = 'Login failed. Please check your credentials.';

}

}

return { ...state, login };

}

};

</script>

n this example, the concerns related to state management (reactive), authentication logic (login function), and error handling are separated within the setup() function. This separation improves readability by making it clear where each part of the component's logic resides

==

dieference between ref and reactive is 

ref accepts all type of data objec array, 

reactive accepts object

const color =reactive({red:0});

color.value={yellow:4};

const color =ref({red:0});

color={yellow:4};

ref 

==

vue3

slot for b-modal not working

v-show deprecated

b-table @per-page not working

@page-change="pagination"

$bvModal.show('bv-modal-example')

authorisation 

v-if="$can('add','lead')"

==