Option API vs Composition API

Option API

vue 2.x 버전에서 사용되던 기존의 API 스타일로 컴포넌트를 작성할 대 사용되는 방식이다.
data, methods, computed, watch등 속성을 직접 정의하여 컴포넌트를 구성한다.
간단하고 직관적이지만, 큰 규모의 애플리케이션에서는 컴포넌트의 구성 요소들이 증가하고 복잡해질 수 있어 코드가 길고 유지보수가 어려워지는 문제가 발생할 수 있다.

<script>
export default {
  data() {
    return {
      message: "Hello, Vue.js!",
    };
  },
  methods: {
    handleClick() {
      console.log("Button clicked!");
    },
  },
  computed: {
    reversedMessage() {
      return this.message.split("").reverse().join("");
    },
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from "${oldValue}" to "${newValue}"`);
    },
  },
};
</script>

Composition API

vue 3.x 버전부터 Composition API가 도입되었고, 유연하고 조합 가능한 방식으로 컴포넌트를 작성할 수 있게 해준다.
Composition API는 setup() 함수를 사용하여 컴포넌트 로직을 정의하고 reactive, ref, computed등의 함수와 함께 사용해 상태와 동작을 관리한다.
관심사(논리적 관심사)의 구분이 중요한 특징이다.

setup()

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const message = ref("Hello, Vue.js!");

    const handleClick = () => {
      console.log("Button clicked!");
    };

    const reversedMessage = computed(() => {
      return message.value.split("").reverse().join("");
    });

    watch(message, (newValue, oldValue) => {
      console.log(`Message changed from "${oldValue}" to "${newValue}"`);
    });

    return {
      message,
      handleClick,
      reversedMessage,
    };
  },
};
</script>

script setup

script setup을 사용하면 setup() 함수 안의 코드를 그대로 사용할 수 있고, 자동으로 반환되는 객체의 속성들이 컴포넌트의 로컬 상태와 동작으로 사용되 보다 간결하고 직관적인 코드를 작성할 수 있다.
런타임 성능이 더 뛰어나고 setup()함수를 정의하는 부분이 필요가 없기 때문에 return문이 필요없다.

<script setup>
import { ref, computed, watch } from 'vue';

const message = ref("Hello, Vue.js!");

const handleClick = () => {
  console.log("Button clicked!");
};

const reversedMessage = computed(() => {
  return message.value.split("").reverse().join("");
});

watch(message, (newValue, oldValue) => {
  console.log(`Message changed from "${oldValue}" to "${newValue}"`);
});
</script>