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()에서는 사용 불가
'Vue.js > vue3' 카테고리의 다른 글
| [vue3] Reactivity Utilities (0) | 2020.09.30 |
|---|---|
| [vue3] composition API (0) | 2020.09.30 |
| [vue3] Reactivity APIs (0) | 2020.07.02 |
| [vue3] vue 2 > vue3 (0) | 2020.07.02 |
