From Vue2 to Vue3 Composition API

Vue 3 introduces a new API called the Composition API, which provides a different way of organizing and reusing logic than Vue 2. The Composition API allows logic to be grouped by functionality rather than by component options.

Common Variations and Usage

Here are some common changes and usages from Vue 2 to Vue 3 Composition API:

Import changes:
In Vue 2, you can use import Vue from 'vue'import Vue objects. In the Composition API of Vue 3, you need to use the import { createApp } from 'vue'import createAppfunction to create a Vue application instance.
Component organization:
In Vue 2, options such as data, methods, and are usually used to organize the logic of components. computedWhereas in Vue 3's Composition API, you can use setupfunctions to organize your logic. setupFunctions can return a component's reactive state, computed properties, methods, and more.
Reactive state:
In Vue 2, you can use dataoptions to define a component's reactive state. In the Composition API of Vue 3, functions such refas , reactive, computedand so on can be used to define responsive states.

refFunctions are used to define a basic type of reactive state.
reactiveFunctions are used to define the reactive state of an object or array.
computedFunctions are used to define a computed property.

Lifecycle hooks:
In Vue 2, use the beforeCreate, created, beforeMount, mountedand other options to handle the lifecycle of components. In the Composition API of Vue 3, functions such as onBeforeMount, onMounted, onBeforeUpdate, onUpdatedand so on can be used to handle the life cycle.
Logic reuse between components:
Vue 3's Composition API provides a more flexible way to reuse logic. You can use provideand injectfunctions to implement logic reuse between components. Provide data in parent components through functions, and use functions providein child components to receive data.inject

These are some common changes and usages of Vue 2 to Vue 3 Composition API. The Composition API provides more flexible and powerful tools to organize and reuse component logic, making development more efficient and maintainable. If you are migrating from Vue 2 to Vue 3, it is recommended to read the official documentation of Vue 3 in detail to better understand how to use the Composition API.

Detailed code example

The following is a detailed description of the code for each link of the Vue 2 to Vue 3 Composition API:

Import changes:
In Vue 2, you can use import Vue from 'vue'import Vue objects. In the Composition API of Vue 3, you need to use the import { createApp } from 'vue'import createAppfunction to create a Vue application instance.

// Vue 2
import Vue from 'vue';

// Vue 3
import {
    
     createApp } from 'vue';

Component organization:
In Vue 2, options such as data, methods, and are usually used to organize the logic of components. computedWhereas in Vue 3's Composition API, you can use setupfunctions to organize your logic. setupFunctions can return a component's reactive state, computed properties, methods, and more.

// Vue 2
export default {
    
    
  data() {
    
    
    return {
    
    
      count: 0
    };
  },
  methods: {
    
    
    increment() {
    
    
      this.count++;
    }
  },
  computed: {
    
    
    double() {
    
    
      return this.count * 2;
    }
  }
}

// Vue 3
import {
    
     ref, computed } from 'vue';

export default {
    
    
  setup() {
    
    
    const count = ref(0);
    
    function increment() {
    
    
      count.value++;
    }
    
    const double = computed(() => count.value * 2);
    
    return {
    
    
      count,
      increment,
      double
    };
  }
}

Reactive state:
In Vue 2, you can use dataoptions to define a component's reactive state. In the Composition API of Vue 3, functions such refas , reactive, computedand so on can be used to define responsive states.

// Vue 2
export default {
    
    
  data() {
    
    
    return {
    
    
      message: 'Hello Vue!'
    };
  }
}

// Vue 3
import {
    
     ref } from 'vue';

export default {
    
    
  setup() {
    
    
    const message = ref('Hello Vue!');
    
    return {
    
    
      message
    };
  }
}

Lifecycle hooks:
In Vue 2, use the beforeCreate, created, beforeMount, mountedand other options to handle the lifecycle of components. In the Composition API of Vue 3, functions such as onBeforeMount, onMounted, onBeforeUpdate, onUpdatedand so on can be used to handle the life cycle.

// Vue 2
export default {
    
    
  created() {
    
    
    console.log('Component created');
  },
  mounted() {
    
    
    console.log('Component mounted');
  }
}

// Vue 3
import {
    
     onMounted } from 'vue';

export default {
    
    
  setup() {
    
    
    onMounted(() => {
    
    
      console.log('Component mounted');
    });
  }
}

Logic reuse between components:
Vue 3's Composition API provides a more flexible way to reuse logic. You can use provideand injectfunctions to implement logic reuse between components. Provide data in parent components through functions, and use functions providein child components to receive data.inject

// Vue 2
// Parent component
export default {
    
    
  data() {
    
    
    return {
    
    
      message: 'Hello from parent'
    };
  }
}

// Child component
export default {
    
    
  created() {
    
    
    console.log(this.message); // Hello from parent
  }
}

// Vue 3
import {
    
     provide, inject } from 'vue';

// Parent component
export default {
    
    
  setup() {
    
    
    const message = 'Hello from parent';
    provide('message', message);
  }
}

// Child component
export default {
    
    
  setup() {
    
    
    const message = inject('message');
    console.log(message); // Hello from parent
  }
}

These are code details for each link of the Vue 2 to Vue 3 Composition API. The Composition API provides more flexible and powerful tools to organize and reuse component logic, making development more efficient and maintainable. If you are migrating from Vue 2 to Vue 3, it is recommended to read the official documentation of Vue 3 in detail to better understand how to use the Composition API.

Difference between composition API and options API

Vue 3 introduced the Composition API as a new way of organizing components, with some important differences from the Options API in Vue 2. Below is a detailed explanation of the main differences between the Composition API and the Options API:

Organization:

Options API: The Options API is the default organization in Vue 2. It spreads the logic of the component in different options like data, methods, computed, watch, etc. This approach can lead to code that is difficult to maintain and understand when dealing with complex components.
Composition API: Composition API is a new way of organization introduced in Vue 3. It makes component code more centralized and easier to maintain by grouping related logic together. Using the Composition API, you can put related states, computed properties, and methods together, improving the readability and maintainability of your code.

Reactive state:

Options API: The Options API uses data options to define the reactive state of a component. In the component instance, these states can be accessed and modified directly through this.
Composition API: The Composition API uses functions such as ref and reactive to define reactive states. These functions return a reactive reference that needs to be accessed and modified via .value. This approach makes accessing and modifying reactive state more explicit and consistent.

Lifecycle function:

Options API: The Options API uses a series of lifecycle hook functions to handle the lifecycle of components, such as created, mounted, updated, etc. These hook functions are called at different stages and can be used to perform specific operations.
Composition API: The Composition API uses functions such as onMounted, onUpdated, etc. to handle the life cycle of components. These functions can perform specific actions during different lifecycle phases of the component. Compared with the Options API, the Composition API provides a more flexible way of handling the life cycle.

Logic multiplexing:

Options API: The Options API implements logic reuse through mixins. A mixin is an object that can be mixed in multiple components to share logic.
Composition API: Composition API implements logic reuse through provide and inject functions. Through the provide function, the data is provided in the parent component, and the inject function is used to receive the data in the child component. This way is more explicit and flexible.

TypeScript supports:

Options API: The Options API has relatively weak support in TypeScript. Since options are scattered in different places, type inference may not be accurate enough.
Composition API: Composition API is more powerfully supported in TypeScript. Type inference is more accurate because the logic is grouped together. You can also use generics to specify the parameter and return types of a function.

Overall, the Composition API provides a more flexible, maintainable, and powerful way to organize components. It makes the code more structured and readable, and provides better logic reuse and TypeScript support. If you are starting a new Vue project or migrating an existing Vue project, it is recommended to consider using the Composition API to organize your component logic.