Vue.js Composition API

1. Composition API
    관련된 코드들을 찢어놓지 않고 개발하는 방법
    지금까지 했던 문법은 Options API

2. Composition API 쓰면 관련있는 코드를 한 곳에 모을 수 있음

3. 컴포넌트마다 Options API, Composition API 선택 가능. 적절히 쓰면 됨

4. Composition API 사용법
    setup()은 created() hook과 비슷한 역할

// 시작
import { ref } from 'vue';

export default {
  setup() {
    let follower = ref([]);

    onMounted(() => {
      axios.get("/follower.json").then((payload) => {
        follower.value = payload.data;
      });
    });

    return { follower };
  },
};

    값을 지정할 때 항상 ref()를 써야한다.
    ref()에 담는 이유는 모든 데이터를 reference data type으로 감싸야 실시간 반영이 가능하기 때문.

 

5. css 범위를 지정하고 싶으면 <style> 태그에 scope 을 지정해주면 된다.

6. setup()에서 props를 쓰려면 관습적으로 아래와 같다.
    보통 toRefs() 사용함

export default {
  props: {
    one: Number,
  },
  setup(props) {
    let { one } = toRefs(props);
    console.log(one.value);

    return { follower };
  },
};

7. Composition API에서 watch(), computed() 도 사용 가능함

8. Composition API에서 vuex store 사용하려면 useStore() 사용하면 됨

import {useStore} from 'vuex';

setup() {
	let store = useStore();
}

9. Composition API에서는 mapState 없음
    Vuex5 이상 버전이 나오면 아마 생길듯

10. Composition API에서 당연히 함수도 사용 가능

setup() {
	function doFunc(){
	}
}

export { doFunc };