[ Vue ] [ Vue3 Vite ] 컴포지션 함수 setup

Vue2까지는 Option API만 제공을 했으며, 컴포넌트를 생성할 때 옵션 속성이라 불리는 data, methods, computed등과 같은 것들을 정의해야 했다. 이는 코드가 길어지면 가독성을 낮추는 문제점이 있었기에 다른 컴포지션 프레임워크들과 같이 컴포지션 API를 지원하고자 setup함수를 제공하게 됐다.

 

setup함수의 구조

setup() {
    const data = 1
    return { data }
}

이전 Options API에서 사용하던 computed, watch옵션은 모두 setup함수에서도 구현이 가능하다.

기존 methods옵션으로 제공하던 함수의 경우 다음과 같이 변수로 할당하여 반환하면 된다.

const foo = () => { data = 2 }
return { foo }