How to use Vue3 advanced theme Composition API

What is Composition API

Composition API is a new API style introduced in Vue3, aiming to improve the readability, maintainability and reusability of code. The Composition API is different from the Options API in Vue2. It adopts a function-based programming method to decompose the logic within the component into smaller composable function units to achieve a more flexible and efficient code organization.

Why Vue3 recommends using the Composition API

The main reason why Vue3 recommends using the Composition API is to better organize and reuse component logic.

In Vue2, we usually use the Options API, where we define the behavior of the component by defining different options (such as data, methods, computed, etc.). There are some disadvantages to this approach, such as:

• Large components become difficult to maintain because related code is scattered among different options.

• Large components may have duplicate logic because the code is difficult to reuse.

• Tracking which data attributes were modified and when they were modified can become difficult.

Let’s take a simple example below. The following code defines a logic for obtaining data:

import { reactive, onMounted } from 'vue'
import axios from 'axios'
export function useData(url) {
  const data = reactive({
    loading: false,
    error: null,
    items: []
  })
  const fetchData = async () => {
    data.loading = true
    try {
      const response = await axios.get(url)
      data.items = response.data
    } catch (error) {
      data.error = error.message
    }
    data.loading = false
  }
  onMounted(() => {
    fetchData()
  })
  return {
    data,
    fetchData
  }
}

This logic covers data acquisition methods, loading status processing and Logic for error messages etc. We can use this logic in multiple components to avoid duplication of code.

For example, use this logic in a component:

import { useData } from './useData'
export default {
  setup() {
    const { data } = useData('https://api.example.com/data')
    return {
      data
    }
  }
}

Of course, Vue2 can also achieve the above function through mixin, but the readability and maintainability are not as good as Composition API:

const dataMixin = {
  data() {
    return {
      loading: false,
      error: null,
      items: []
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      axios.get(this.url)
        .then(response => {
          this.items = response.data
        })
        .catch(error => {
          this.error = error.message
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  mounted() {
    this.fetchData()
  }
}

Then use it in the component:

export default {
  mixins: [dataMixin],
  data() {
    return {
      url: 'https://api.example.com/data'
    }
  }
}

You can see that using mixin can mix public logic into the component, but there are some problems with mixing. , such as naming conflict, calling order of life cycle hooks and other issues.

The above is the detailed content of How to use Vue3 advanced theme Composition API. For more information, please follow other related articles on the PHP Chinese website!