The Composition API offers a more flexible and reusable way to organize code compared to the Options API. Here’s an example to illustrate the difference:
<template>
<div id=”app”>
<h1>{{ title }}</h1>
<input type=”text” v-model=”inputVal” />
<button @click=”addTitle”>Add</button>
<button @click=”clearInput”>Clear</button>
</div>
</template>
<script>
import { ref } from ‘vue’;
export default {
setup() {
const inputVal = ref(”);
const title = ref(”);
function clearInput() {
inputVal.value = ”;
}
function addTitle() {
title.value = inputVal.value;
}
return { inputVal, title, clearInput, addTitle };
}
};
</script>