SoFunction
Updated on 2025-03-09

How to write a single file component to create a vue3 combination API

1 Basic principles and concepts of Vue3 Combination API

1.1 Composition API in Vue3

The Composition API in Vue3 is a new way to write component logic, which provides better code organization, type derivation, test support, and reusability. Compared with Vue2's Options API, the Composition API is more flexible and scalable.

In the Composition API, we use the setup function to define the logical parts of the component. The setup function is a special function that is called before creating a component instance and receives two parameters: props and context. props is a collection of attributes passed to the component, while context contains some methods and data associated with the component.

1.2 Comparison with Vue2 Options API

Compared with Vue2's Options API, the Composition API has the following advantages:

  • Better code organization: By placing relevant logic inside the same function, you can organize your code more clearly.
  • Type derivation: Since the setup function is a normal JavaScript function, it is easier to obtain support for type derivation.
  • Test support: Because the logic is encapsulated in independent functions, unit testing can be performed more easily.
  • Reusability: Logic can be abstracted into a custom Hook and reused in multiple components.

1.3 Why choose to use a combination API

Using a combined API can bring the following benefits:

  • Better code organization: put relevant logic inside the same function to make the code easier to understand and maintain.
  • Better type derivation: Since the setup function is a normal JavaScript function, better type derivation support can be obtained and errors can be reduced.
  • Better testing support: logic is encapsulated in independent functions, allowing for more convenient unit testing.
  • Higher reusability: The logic can be abstracted into a custom Hook and reused in multiple components.

Using a combined API can provide better development experience and code quality, making Vue3 development more flexible and scalable.

2 Install and configure Vue3

In order to install and configure Vue3, you need to follow these steps:

2.1 Introducing the latest version of Vue3

First, you need to introduce the latest version of Vue3 into your project. Vue3 can be installed by using npm or yarn.

If using npm, run the following command:

npm install vue@next

If using yarn, run the following command:

yarn add vue@next

This will install Vue3 and its related dependencies.

2.2 Basic configuration for creating Vue applications

Once you have Vue3 installed, you can start creating basic configurations for Vue applications.

Create a new file in your project, e.g., and add the following code:

import { createApp } from 'vue';
import App from './';
createApp(App).mount('#app');

The above code has been importedcreateAppFunctions and root componentsApp, and then callcreateAppThe function creates a Vue application instance and passes the root component to it. Finally, usemountMethod mounts the Vue application to an element on the HTML page (assuming that there is an id asappelement).

Next, create a name in your project calledand add the following code as a template for the root component:

<template>
  <div >
    <!-- Your application content here -->
  </div>
</template>
<script>
export default {
  // Your component options here
}
</script>
<style>
/* Your component styles here */
</style>

In the above code, you can place the contents of the application in<div >Inside the element.

3 Create a simple single file component

3.1 Create a .vue file

First, create a new one in your project.vueFiles, e.g.。

3.2 Writing component templates

existIn the file, write the template for the component. The template section defines the structure and layout of the component. Here is an example:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

The above code shows a simple component that contains a title and a button. Title bound tomessageVariable, button use@clickDirective binding toincrementmethod.

3.3 Implementing component combination API logic

3.3.1 Refactoring the original code

Next, you need to refactor the original logic into a combined API form. existIn the file, add the following code:

import { ref } from 'vue';
export default {
  setup() {
    const message = ref('Hello, Vue!');
    function increment() {
       += '!';
    }
    return {
      message,
      increment
    };
  }
}

The above code usessetupFunctions to implement the logic of a combined API. existsetupInside the function, we userefThe function creates a responsive datamessage, and defines a name calledincrementmethod.

Finally, byreturnStatements will export the data and methods that need to be used in the template.

3.3.2 Create and export reusable logical functions

If you want to pull some logic code out into reusable functions, you can create and export them. For example, add the following code in the same file:

import { ref } from 'vue';
function useCounter() {
  const count = ref(0);
  function increment() {
    ++;
  }
  return {
    count,
    increment
  };
}
export default {
  setup() {
    const { count, increment } = useCounter();
    return {
      count,
      increment
    };
  }
}

The above code creates a name calleduseCounterThe reusable logic function of the function returns an object containing the counter value and a method to increase the counter.

Then, insetupInside the function, we calluseCounterfunction, and deconstruct its return value intocountandincrementvariable.

Finally, byreturnStatements export these variables for use on the template.

3.4 Using Components in Applications

To use components in a Vue3 application, you need to follow these steps:

Create a Component: First, create a .vue file to define your component. This file contains templates, styles, and logical code. For example, create a file named "".

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      greeting: 'Hello, World!'
    }
  }
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

Import and register components: In your main application file (usually ), import and register your components globally.

import { createApp } from 'vue'
import HelloWorld from './components/'
const app = createApp()
('hello-world', HelloWorld)
('#app')

Using Components in Applications: Now you can use your components in your application's templates. Just add the component name to the template as a custom element.

<div >
  <hello-world></hello-world>
</div>

This way, your component will be displayed in the application and its data and logic will take effect.

Note that in the above example, we used the single file component to write the component. This is the recommended way for Vue to encapsulate the templates, styles, and logic of components in a single file, making the code more modular and maintainable.

4 Common Patterns and Tips for Using Vue3 Combination APIs

When using Vue3's combo API, there are some common patterns and tricks that can help you better organize and manage your code.

4.1 Responsive state management

In Vue3, you can userefandreactiveFunction to create responsive states.refResponsive references to create a single value, andreactiveUsed to create responsive objects with multiple attributes.

import { ref, reactive } from 'vue'
// Create a responsive referenceconst count = ref(0)
// Create a responsive objectconst state = reactive({
  message: 'Hello',
  name: 'World'
})

You can then use these responsive states in the component:

export default {
  setup() {
    // Use responsive references    const counter = ref(0)
    // Use responsive objects    const data = reactive({
      message: 'Hello',
      name: 'World'
    })
    return {
      counter,
      data
    }
  }
}

Note that when using responsive state, you need to use it.valueCome and visitrefTypes of data:

export default {
  setup() {
    // Use responsive references    const counter = ref(0)
    // Use responsive objects    const data = reactive({
      message: 'Hello',
      name: 'World'
    })
    return {
      counter,
      data
    }
  }
}

4.2 Alternative methods for life cycle hook functions

In Vue3, the life cycle hook function is replaced withsetupfunction. You cansetupThe logic for initializing the component in the function is executed and returns the data and methods to be exposed to the template.

export default {
  setup() {
    // Component initialization logic    return {
      // Data and methods to be exposed to templates    }
  }
}

If you need to perform some operations after the component is mounted or before it is uninstalled, you can useonMountedandonUnmountedHook function:

import { onMounted, onUnmounted } from 'vue'
export default {
  setup() {
    onMounted(() =&gt; {
      // Operations performed after component mount    })
    onUnmounted(() =&gt; {
      // Operations performed before component uninstallation    })
    return {}
  }
}

4.3 Custom combined API for specific functions

In addition to using the built-in combo API provided by Vue, you can also create your own custom combo API to encapsulate the logic of specific features.

For example, suppose you want to create a reusable timer logic, you could write a custom combo API called "useTimer":

import { ref, watch, onUnmounted } from 'vue'
export function useTimer(initialValue = 0) {
  const timer = ref(initialValue)
  const startTimer = () => {
     = 0
    const interval = setInterval(() => {
      ++
    }, 1000)
    onUnmounted(() => {
      clearInterval(interval)
    })
  }
  watch(timer, (newValue) => {
    ('Timer:', newValue)
  })
  return {
    timer,
    startTimer
  }
}

Then, use the custom combo API in your component:

import { useTimer } from './useTimer'
export default {
  setup() {
    const { timer, startTimer } = useTimer()
    return {
      timer,
      startTimer
    }
  }
}

This way you can reuse timer logic in multiple components.

4.4 Use ref and reactive for data responsive processing

In Vue3, we can userefandreactiveFunctions to create responsive references and objects.

userefFunctions create responsive references:

import { useTimer } from './useTimer'
export default {
  setup() {
    const { timer, startTimer } = useTimer()
    return {
      timer,
      startTimer
    }
  }
}

usereactiveFunctions create responsive objects:

import { reactive } from 'vue'
const state = reactive({
  count: 0,
  name: 'John'
})
() // Output: 0() // Output: 'John'++ // Modify the value() // Output：1

4.5 Use watchEffect and watch for data listening

Vue3 provideswatchEffectandwatchFunctions to listen for data.

usewatchEffectListen to the changes in the responsive state and execute the callback function:

import { watchEffect, reactive } from 'vue'
const state = reactive({
  count: 0
})
watchEffect(() => {
  ('Count changed:', )
})

usewatchThe function listens for a specific responsive state and executes a callback function:

import { watch, reactive } from 'vue'
const state = reactive({
  count: 0
})
watch(
  () => ,
  (newVal, oldVal) => {
    ('Count changed:', newVal, oldVal)
  }
)

4.6 Use offer and inject to achieve communication between components

In Vue3, we can useprovideandinjectto realize communication between components.

Use in parent componentprovideProvide data:

import { provide, reactive } from 'vue'
const state = reactive({
  count: 0
})
provide('state', state)

Use in subcomponentsinjectGet the provided data:

import { provide, reactive } from 'vue'
const state = reactive({
  count: 0
})
provide('state', state)

With these tips, you can better utilize Vue3's combined API to handle data responsiveness, data listening, and communication between components.

5 Summary

Vue3's combined API and single file components bring us a more flexible and maintainable development approach. With a combined API, we can better organize the logic of components and easily reuse and share code logic. The single file component integrates templates, styles and logic into one file, simplifying the development process and improving the readability and maintainability of the code.

In this article, we explain from beginning to end how to build applications using Vue3's combined API and single-file components. We learned how to install and configure Vue3 and explained in detail the steps to create single-file components. In addition, we explore some common combination API patterns and techniques, such as responsive state management, methods of alternative lifecycle hook functions, and communication between components.

By deeply learning and practicing these concepts and techniques, you can improve your skills in Vue development. Whether you are a novice or an experienced developer, Vue3's combined API and single-file components will bring you a better development experience and higher efficiency.

In the future, the development of Vue3 will bring more new features and functions. We encourage you to keep your focus on the Vue ecosystem and continue to learn and explore in depth. Thank you for reading this article. I hope this article will be helpful for you to learn and practice Vue3 combination API and single file components. Wish you greater success in Vue development!

This is the article about how to create single file components for vue3 combination API. For more related vue3 combination API content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!