setup() 함수와 반응형 변수

setup() 진입점

ref로 반응형 상태 만들기

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

reactive로 반응형 객체 만들기

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

템플릿에 상태 반환하기

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

템플릿에서 자동으로 래핑 해제하기

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

함수 추가하기

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

템플릿에 연결하기

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

this 키워드가 필요하지 않습니다

setup은 생성 전에 실행됩니다

setup 인수: props와 context

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

완성된 미니 컴포넌트

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

빠른 확인

복습