Composition API

Code

<script setup>
import { ref, computed, onMounted } from "vue";

const items = ref([1, 2, 3]);
const doubled = computed(() => items.value.map(x => x * 2));

function add() {
  items.value.push(items.value.length + 1);
}

onMounted(() => {
  console.log("Component mounted");
});
</script>

<template>
  <button @click="add">Add</button>
  <ul>
    <li v-for="n in doubled" :key="n">{{ n }}</li>
  </ul>
</template>

Explanation

The Composition API organizes component logic by feature rather than by option. Inside script setup, declared variables and functions are automatically available in the template. ref, computed, and lifecycle hooks replace the Options API's data, computed, and lifecycle methods.

More Vue 3 Snippets