Vue3 - Composition API 사용법

Setup

• setup()을 통해 Composition API를 사용할 수 있다.
• 변수 선언은 ref 함수를 사용하고, 변수를 사용하기 위해서는 return 해야한다.
• 변수 값에 접근하기 위해서는 value 속성에 접근해야 한다.

<template>
  <h2>{{ message }}</h2>
</tempate>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('안녕하세요');

    return {
      message
    };
  }
};
</script>

 

 

함수

• setup() 안에 사용할 함수를 작성한다.

<template>
  <div>
    <button type="button" @click="changeMessage">클릭</button>
    <p>{{ message }}</p>
  </div>
</tempate>

<script>
export default {
  setup() {
    const message = ref('message');

    function changeMessage() {
      message.value = 'message 변경~!!';
    }

    return {
      message
    };
  }
}
</script>

 

 

라이프사이클

• 라이프사이클을 제어하려면 hook을 import 해야한다.
• mounted -> onMounted
• unmounted -> onUnmounted
• updated -> onUpdated

<script>
import { ref, onMounted, onUnmounted, onUpdated } from 'vue'

export default {
  setup(props) {
    onMounted(() => console.log("mounted"));
    onUnmounted(() => console.log("onUnmounted"));
    onUpdated(() => console.log("onUpdated"));
  }
};
</script>

 

 

Computed

• import 하여 사용할 수 있다.

<template>
  <div>
    <h2>{{ message }}</h2> <!-- 안녕하세요 -->
    <h2>{{ reverseMessage }}</h2> <!-- 요세하녕안 -->
  </div>
</tempate>

<script>
import { ref, computed } from 'vue';

export default {
  setup () {
    const message = ref('hello');

    const reverseMessage = computed(function() {
      return message.value.split('').reverse().join('');
    });
  }
}
</script>

 

 

Watch

• import 하여 사용할 수 있다.

<template>
  <div>
    <h2>{{ message }}</h2> <!-- 안녕하세요 -->
    <h2>{{ reverseMessage }}</h2> <!-- 요세하녕안 -->
  </div>
</tempate>

<script>
import { ref, watch } from 'vue';

export default {
  setup () {
    const message = ref('안녕하세요');
    const reverseMessage = ref('');

    // 참조 대상, 콜백함 수(바뀌는 값, 기존 값)
    watch(message, function(newValue, oldValue){
      reverseMessage.value = oldValue.value.split('').reverse().join('');
    });
  }
}
</script>

 

 

Props

• setup()의 첫 번째 인자는 props이다.
• 함수 내부의 props는 반응형이며, 새 props가 전달되면 업데이트된다.
• props 객체를 분해할 경우 분해 된 변수는 반응성을 잃게 되기 때문에 항상 props.xxx 처럼 접근하는 게 좋다.
  만약 분해해야 하거나 반응성을 유지하면서 외부 함수에 props를 전달해야 하는 경우, toRefs() 또는 toRef()를 사용하여 구현할 수 있다.

<script>
export default {
  props: {
    title: String
  },
  
  setup(props) {
    console.log(props.title);
  }
}
</script>

<script>
import { toRefs, toRef } from 'vue';
  
export default {  
  setup(props) {
    // refs 객체로 props를 변환한 후, 분해 할당
    const { title } = toRefs(props);
    // title은 props.title을 추적하는 ref
    console.log(title.value);

    // 하나의 props 속성만 ref로 변환 가능
    const title = toRef(props, 'title');
  }
}
</script>

 

 

Context

• setup()의 두 번째 인자는 Setup Context 객체이다. setup() 내부에서 유용할 수 있는 다른 값을 노출한다.
• context 객체는 반응형이 아니라, 분해하여 사용하면 된다.

<script>
export default {
  setup(props, context) {
    // 속성 (비-반응형 객체, $attrs에 해당함)
    console.log(context.attrs)

    // 슬롯 (비-반응형 객체, $slots에 해당함)
    console.log(context.slots)

    // 이벤트 발송 (함수, $emit에 해당함)
    console.log(context.emit)

    // 로컬 속성 노출 (함수)
    console.log(context.expose)
  }
}
</script>

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

 

 

 

 

---

참고

- https://v3-docs.vuejs-korea.org/api/composition-api-setup.html#setup-context

- https://jinyisland.kr/post/composition-api/