[Vue] Composition API

Compositon API

프로젝트가 커지고 코드가 길어지면 작업하기가 어려워지는데
관련된 코드들을 찢어놓지 않고 개발하는 방법으로 composition API라는걸 제공한다.

Options API

지금까지 했던 방법 : component에서 data()만들고 life cycle hook, components, computed 등 각 항목들을 신설해서 기능개발을 하는 방법을 options API라고 한다.
(API : 사용방법)

Composition API를 사용하면 관련있는 코드를 한 곳에 모아놓을 수 있다.

export default {
  name: 'MyPage',
  setup(){  // create life cycle hook과 비슷함
    // setup() 안에서
    // 데이터 생성, 조작
    // methods, computed, watch 생성
    // hook 걸기 등 가능
    // 거의 모든 기능개발을 setup 한 곳에서 가능
  },

문법

데이터는 ref() 함수 안에 담고, return {} 해줘야 사용이 가능하다.

import { ref } from 'vue';

// created life cycle hook과 비슷함
  setup(props, context){  // props:props / context: attrs, slots, emit등등
    let follower = ref([]);
    return { follower }
},

예제1

export default {
  name: 'MyPage',
  setup(){  // created life cycle hook과 비슷함

    let follower = ref([]);   // 데이터 (array, object가 아닌 데이터를 보관함)
    let test = reactive({});  // 데이터 (reactive한 변수를 만든다, 보통 array,object를 보관함)

    // mounted 후 ajax 요청함, import 필요 (on + lifecyclehook)
    onMounted(()=>{
      axios.get('./follower.json').then( data => {
        follower.value = data.data;   // 데이터를 수정하려면 데이터.value를 수정해야 함
      });
    });
    
    return { follower }
  },
}

ref()

referenct data type
데이터 변경시 실시간 재렌더링 가능한 이유는 reference data 때문임
그래서 모든 데이터를 reference data type으로 감싸야 실시간 재 랜더링이 가능하다.

• ref() : 재렌더링 데이터, Array, Object가 아닌 나머지 데이터

toRefs()

props를 setup()에서 사용할 때
여러개의 항목들을 한번에 ref로 감싸고 싶을 때 toRefs()

import { onMounted, reactive, toRefs } from 'vue';

setup (props, context){  // props:props / context: attrs, slots, emit등등
  let { one, two } = toRefs(props); // 사용할 땐 one,value
  console.log(one.value);
},
props: {
	one: Number,
}

<p>{{ one }}</p>

중괄호로 변수명 만드는 문법 = ES6 Destructuring 문법

Composition API in watch()

import { watch } from 'vue';

setup(props){  // props:props / context: attrs, slots, emit등등
  let { one } = toRefs(props); // 사용할 땐 one,value
  watch(감시할데이터, ()=>{
    // 변경시 실행코드
  });
},

Composition API in computed()

import { computed } from 'vue';

setup(){
  let follower = reactive([]);      // 데이터

  // mounted 후 ajax 요청함, import 필요 (on + lifecyclehook)
  onMounted(()=>{
    axios.get('./follower.json').then( data => {
    follower.value = data.data;   // 데이터를 수정하려면 데이터.value를 수정해야 함

    let result = computed(()=>{
      return follower.value.length;
    });
    console.log(result.value);

    });
  });

  return { follower }
},

composition API in vuex store

mapState는 사용할 수 없음

import { onMounted, reactive, computed } from 'vue';
import axios from 'axios';
import { useStore } from 'vuex';

setup(){  // props:props / context: attrs, slots, emit등등
  let store = useStore();		// store == $store
  console.log(store.state.post);
  // store.commit()
},

composition API in method

setup(){
  function 함수(){

  }
  return { 함수 }
},