[vue3] setup

setup

• 새로운 옵션
• 컴포넌트 안에서 composition api 사용하는 진입점

호출 시점

• 컴포넌트 instance가 생성될때 props 초기화 이후
• beforeCreate 훅 이전에 호출
• object 반환
• object 속성은 컴포넌트 템플릿에서 사용된다

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // expose to template
      return {
        count,
        object
      }
    }
  }
</script>

setup을 통해서 반환되는 refs는 자동적으로 템플릿 접근 시 감싸있지 않다. 그래서 .value를 사용할 필요가 없다

• setup은 render 함수를 반환 할 수 있음

  같은 범주에 선언되어 있는 reative state를 바로 접근 할 수 있게 해줌

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })

    return () => h('div', [count.value, object.foo])
  }

• aruguments

  • props의 첫번째 인자를 함수에서 받음

      export default {
        props: {
          name: String
        },
        setup(props) {
          console.log(props.name)
        }
      }

  • props 객체는 반응성임

    watchEffect, watch로 새로운 props가 전달될 때 확인할 수 있음

      export default {
        props: {
          name: String
        },
        setup(props) {
          watchEffect(() => {
            console.log(`name is: ` + props.name)
          })
        }
      }

    props객체를 해체를 하면 반응성을 잃음

      export default {
        props: {
          name: String
        },
        setup({ name }) {
          watchEffect(() => {
            console.log(`name is: ` + name) // Will not be reactive!
          })
        }
      }

    props객체는 개발하는 동안 불변

    만약, 사용자 코드를 변경하려고 시도하면 경고함

    setup의 두번째 인자는 context 객체(vue2와 this처럼 ) 제공

      const MyComponent = {
        setup(props, context) {
          context.attrs
          context.slots
          context.emit
        }
      }

    attrs와 slots는 내부 구성요소의 proxy

    이를 통해 항상 최근 값을 노출하고 오래된 참조에 접근 하지 않고도 값을 구조화 할 수 있음

      const MyComponent = {
        setup(props, { attrs }) {
          // 최근 상테를 가져옴
          function onClick() {
            console.log(attrs.foo) // 가장 최근 참조 보장
          }
        }
      }

• this

  setup()에서는 사용 불가