4_Setup()

setup() 함수는 composition API를 사용하기 위한 진입점 역할을 하며 인스턴스가 생성되기 전에 실행됨.

 

1.기본적인 사용

:setup 함수 안에 반응형 상태를 선언하고, 객체로 반환하여 template안에 보여줄 수 있음. 선언한 상태는 반드시 return 안에 작성해줘야함.

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 템플릿 및 기타 Options API hook에 노출
    return {
      count
    }
  },
  mounted() {
    console.log(this.count) // option API도 사용가능하고 this를 이용하여 상태확인 가능.
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

 

2. setup함수의 매개변수

-첫번째 매개변수는 props , 반응형 객체.

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title) // 그냥 사용하면 객체 분할 할당 하지말고 props.xxx 으로 처리해야함
  }
}

 

-toRef, toRefs

만약 props의 반응성을 유지하면서 구조 분해 할당을 해야 한다면(예: 외부 함수에 prop을 전달해야 하는 경우) toRefs() 및 toRef() 유틸리티 API를 사용하여 이를 수행할 수 있음

import { toRefs, toRef } from 'vue'

export default {
  setup(props) {
    // turn `props` into an object of refs, then destructure
    const { title } = toRefs(props)
    // `title` is a ref that tracks `props.title`
    console.log(title.value)

    // OR, turn a single property on `props` into a ref
    const title = toRef(props, 'title')
  }
}

 

-두번째 매개변수는  Context , setup 함수 내에서 유용하게 사용할 속성들. 객제 분해 할당 가능.

export default {
  setup(props, context) {
    // 속성($attrs와 동일한 비반응형 객체)
    console.log(context.attrs)

    // 슬롯($slots에 해당하는 비반응성 개체)
    console.log(context.slots)

    // 이벤트 발생($emit에 해당하는 함수)
    console.log(context.emit)

    // Public한 속성, 함수를 외부에 노출시에 사용
    console.log(context.expose)
  }
}

//객체 분해 할당 가능
export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

 

- attrs, slots

attrs와 slots은 컴포넌트 자체가 업데이트될 때 항상 업데이트되는 상태 저장 객체.

이러한 것들은 구조 분해 할당을 피해야 하며 항상 속성을 attrs.x 또는 slot.x로 접근해야 한다는 것을 의미함.

또한 props와 달리 attrs과 slots의 속성은 반응형이 아님.

attrs 또는 slots 변경에 따라 다른 작업을 하려고 하는 경우 onBeforeUpdate 라이프사이클 훅 내에서 수행가능.

 

 

[강의에서 설명하진 않았지만 추가적인 내용]

 

-expose은 template refs(템플릿 참조)를 통해 상위 컴포넌트에서 컴포넌트의 인스턴스에 접근할 때 노출되는 속성을 명시적으로 제한하는 데 사용할 수 있는 함수

export default {
  setup(props, { expose }) {
    // make the instance "closed" -
    // i.e. do not expose anything to the parent
    expose()

    const publicCount = ref(0)
    const privateCount = ref(0)
    // selectively expose local state
    expose({ count: publicCount })
  }
}

 

 

 

- Render 함수 사용

setup은 동일한 범위에서 선언된 반응형 상태를 직접 사용할 수 있는 render function 를 반환할 수 있다.

import { h, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}

render function을 반환하면 다른 것을 반환할 수 없다. 내부적으로는 문제가 되지 않지만 template refs(템플릿 참조)를 통해 이 컴포넌트의 메서드를 상위 컴포넌트에 노출하려는 경우 문제가 될 수 있으므로,  이때 expose()를 호출하여 이 문제를 해결할 수 있다.

import { h, ref } from 'vue'

export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}