Composition API in Vue3

Totay,let learn Composition API in Vue3

Why the Composition API

Vue 2 limits:

• Readability as components grow.
• Code reuse patterns have drawbacks.
• Limited TypeScript Support.

When

• TypeScript Support.
• Component is too large and needs to be organized by feature.
• Need to reuse code across other components.

How

<template>  <div>Capacity:{{ capacity }}</div></template>
<script>export default {  data() {    return {      capacity: 3,    };  },};</script>

with Composition API(￣_,￣ )

The setup method executes before

• Components
• Props
• Data
• Methods
• Computed Properties
• Lifecycle methods

Doesn't have access to "this"

<template>  <div>Capacity:{{ capacity }}</div></template>
<script>import {ref} from "vue"export default {  setup(){    const capacity = ref(3)    return capacity  }};</script>