[Vue3] Composition API 사용 예시 (Vue2와 비교)

뷰3로 버전업이 되면서 변경된 점 중 하나만 Composition API 의 추가여부이다.

뷰2와 어떤 부분이 달라지는지 다음의 예시로 감을 잡아보자.

 

예시) 할 일 목록에 할 일을 추가하고, 완료 상태를 토글할 수 있는 기능

 

Vue3 컴포지션 API 사용하여 만든 예시(함수 내부에서 상태와 로직을 명확하게 구성하여 관리하여 재사용성 및 가독성이 좋음)

// 화면 표시 부분
<template>
  <input v-model="newTask" @keyup.enter="addTask" placeholder="New Task">
  <button @click="addTask">Add</button>

  <h2>Pending Tasks</h2>
  <ul>
    <li v-for="task in pendingTasks" :key="task.id">
      {{ task.text }} <button @click="toggleTask(task)">Complete</button>
    </li>
  </ul>

  <h2>Completed Tasks</h2>
  <ul>
    <li v-for="task in completedTasks" :key="task.id">
      {{ task.text }} <button @click="toggleTask(task)">Uncomplete</button>
    </li>
  </ul>
</template>

<script>
import { ref, computed } from 'vue';
// 수행 로직 부분
export default {
  setup() {
    const newTask = ref('');
    const tasks = ref([]);

    const addTask = () => {
      if (newTask.value.trim() !== '') {
        tasks.value.push({
          id: tasks.value.length + 1,
          text: newTask.value,
          completed: false
        });
        newTask.value = '';
      }
    };

    const toggleTask = (task) => {
      task.completed = !task.completed;
    };

    const completedTasks = computed(() => {
      return tasks.value.filter(task => task.completed);
    });

    const pendingTasks = computed(() => {
      return tasks.value.filter(task => !task.completed);
    });

    return {
      newTask,
      tasks,
      addTask,
      toggleTask,
      completedTasks,
      pendingTasks
    };
  }
};
</script>

// UI 커스텀
<style scoped>
/* CSS code here */
</style>

 

Vue2 로 만든 예시(data, computed, methods)

<template>
  <input v-model="newTask" @keyup.enter="addTask" placeholder="New Task">
  <button @click="addTask">Add</button>

  <h2>Pending Tasks</h2>
  <ul>
    <li v-for="task in pendingTasks" :key="task.id">
      {{ task.text }} <button @click="toggleTask(task)">Complete</button>
    </li>
  </ul>

  <h2>Completed Tasks</h2>
  <ul>
    <li v-for="task in completedTasks" :key="task.id">
      {{ task.text }} <button @click="toggleTask(task)">Uncomplete</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  computed: {
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    },
    pendingTasks() {
      return this.tasks.filter(task => !task.completed);
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({
          id: this.tasks.length + 1,
          text: this.newTask,
          completed: false
        });
        this.newTask = '';
      }
    },
    toggleTask(task) {
      task.completed = !task.completed;
    }
  }
};
</script>

// UI 커스텀
<style scoped>
/* CSS code here */
</style>

 

앞으로는 더욱 적극적으로 뷰3를 활용해 볼 예정이다.