Vue3 Composition API

1. Composition API

Vue2(option API)는

data() {

}

methods: {

}

computed: {

}

위와 같은 구조를 가져서 data 안에 값들이 어떤 함수에 의해 변하는지 분산되어있어 추적이 어려웠다. 그러나, Vue3의 등장으로 setup  함수에 데이터가 그룹핑 되어 용이하게 데이터의 흐름을 파악할 수 있다. ex) react 처럼

 

2. setup 훅 내부에 data와 function을 구성한다. (반응형 data 전)

setup() {
	
    let name = "sungjun";
    let age = 30;
    
    const handleClick = () => {
    	console.log(age);
        };
    return { name, age, handleClick };
    }
  };

3. ref, reactive 차이(반응형 data)

<template>
  <div class="home">
    <p>{{ person1.name }} {{ person1.age }}</p>
    <button @click="clickEvent">click</button>
  </div>
</template>
<script>
import { ref, reactive } from "vue";

export default {
  setup() {
    // 데이터를 ref, reactive로 감싸면 반응형으로 바뀐다.
    const person1 = ref({ name: "nkh", age: 29 });
    const person2 = reactive({ name: "nki", age: 26 });

    const clickEvent = () => {
      // ref로 감싼 값을 변경할 때는 value로 한번 들어가주고 값을 바꾼다.
      person1.value.age = 30;

      // reactive는 바로 값을 바꿉니다.
      person2.age = 30;
    };

    // ref값은 return을 거치게되면
    //person1.value.age는 person1.age로 바뀝니다. (template에서는 person1.age로 사용합니다)
    return { person1, handleClick };
  }
};
</script>

1. ref는 function에서 값을 변경할 때 ref.value를 넣어주고 값을 바꾸나 reactive는 바로 값을 바꿀 수 있다.
2. reactive는 원시값에 대해서는 반응형을 가지지 않는다. (string, number 값은 값을 바꾸어도 reactive하게 리렌더링 되지 않는다) 그래서 객체나 배열을 사용하는 경우에만 reactive를 사용할 수 있다, 그러나 ref는 원시값도 반응형 값으로 취급되어 리렌더링 됩니다.
3. reactive나 ref나 둘 중 하나만 사용하는 것이 옳다. 그런데 reactive는 원시값을 반응형으로 사용되지 않기 때문에 ref를 처음부터 끝까지 사용하는 것이 좋다고 생각한다.

4. LifeCycle

setup 함수 내에서도 라이플사이클 훅 사용가능

mounted -> onMounted
unmounted -> onUnmounted
updated -> onUpdated

5. 함수 재사용 : mixins(composable)

 

https://kyounghwan01.github.io/Vue/vue3/composition-api/#%EB%B0%98%EC%9D%91%ED%98%95-data-%EB%A7%8C%EB%93%A4%EA%B8%B0

vue3 composition api 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable