Vue? ??? ????? ??? ?? JavaScript ????????. ?? HTML, CSS ? JavaScript? ???? ?????? ??? ??? ?????? ????? ???? ? ??? ?? ??? ?? ?? ?? ????? ??? ?????.
Vue ?? ??? ? ?? API ???, ? ?? API? Composition API(?? 2.6 ??? ???)? ??? ? ????. ? ?? ?? ?? ??? ??? ??? ??? ????? ??? ?? ???? ?? ??? ??? ? ? ????.

? ?? ?? ???? ??? ???????

?? API:
?? API? Vue ?? ??? ???? ???? ?????. ???, ???, ??? ??? ?? ?? ??? ???? ????? ??? ??? ?????.
data(): ? ??? ?? ??? ??? ??? ??? ??? ??? ?????. ??? ??? ?? ???? ?? ??? ???? ??? ???????.
???(): ? ??? ?? ??? ????? ?? ??? ??? ??? ? ?? ???(??)? ??? ??? ?????. ??? ???? ???? ????? ??? ??? ? ????.
??? ??: ? ??? ?? ??? ???? ???? ?? ?????. ???(??? ??? ??)? ??? ??? ?? ?????.
?? API? ?? ?? ? ??? ???? ???? ??? ????. ?? ?? ????? ??? ???? ???? ??? ??? Vue ??? ? ????? ????. ?? Vue? ? ???? ????? ?? ??? ???.

??? ?? API?? ? ??? ????? ???? ??? ? ?? ? ?? ?? ??? ????.
?? API? ? ?? ?? ??? ?? ?? ?? ??? ??? ? ???? ??? ? ??? ????.
?? API? ??? ?? ??? ?? ??? ? ??? ? ????. ??? ??? ??? ???? ???? ?? ?? ??? ????? ? ??????.

Options API ???? ?? ???????.

<template>
    <div>
        <h4>{{ name }}'s To Do List</h4>
        <div>
            <input v-model="newItemText" v-on:keyup.enter="addNewTodo" />
            <button v-on:click="addNewTodo">Add</button>
            <button v-on:click="removeTodo">Remove</button>
        </div>
        <ul>
            <li v-for="task in tasks" v-bind:key="task">{{ task }}</li>
        </ul>
    </div>
</template>
<script>
    export default { 
    data() { 
           return 
               {  name: "John", 
                  tasks: ["Buy groceries", "Clean the house"], 
                  newItemText: "", 
                };
            }, 
   methods: { 
          addNewTodo() 
            { 
               if (this.newItemText !== "") 
                {  this.tasks.push(this.newItemText); 
                   this.newItemText = ""; 
                } 
            }, 
         removeTodo(index) { this.tasks.splice(index, 1); }, }, };
</script>

1. ???? API :

Composition API? Vue 3? ??? ?? ??(????? ?? Vue 2?? ?? ??)?, ?? ?? API? ???? ???? ??? ???? ?? ??? ?????. ?? ??? ??? ??? ???? ?? ??? ??? ??? ???? ? ??? ???.
Composition API? ???? ??? API ??? ???? ?? ??? ??? ?????. ?? ???? JavaScript? ?? ??? ???? ?? ?? ??? ??? ? ????.
Composition API? ????? . setup ??? Vue? ? ?? ???? Composition API? ??? ? ??? ??? ?? ??? ????? ?? ?????.
Composition API? ??? Vue? ??? ??? ??????. ref ? Reactive? ?? ??? ?? ??? ??? ? ???? ?????? ??? ???? ?????. ?? ?? API?? getter ? setter? ???? ???? ?? ?? ?? ??? ??????.
Composition API? ?? ? ??? ?? ??? ?? ??? ??? ?????.
Composition API? ??? ?? ??? ?? ?????.

???? ??? ??? ???? ??
?? ??? ?? ???? ????? ????
?? ???? ?? TypeScript? ???? ??????
Composition API? ????? ?? ?? ???? ?? ? ????. ??? Composition API?? ??? ?? ?? ????. ? ?? ??? ???, ??? ?????? ???? ?? ???? ???? ? ??? ? ??? ????.
? ?? ??? Composition API? ????? Vue 2.6 ?? ??? ???? ???? ????. ?? Vue 3.0?? ???????? ????? ?? Composition API? ???? ?? ?????.

Composition API ???? ?? ???????.