Composition API

Compostiton API 는 왜 쓰게되었는가..?

.vue 파일이 좀 길어지면 문제가 생긴다.
기존 Vue 방식에는

data() {

},
methods() {

},

computed(){

//lifeCycle

}
이런식으로 구성이 되어있다 하지만

안에 데이터 , 메소드 computed 가 있으면,

특정 데이터와 관련된 메소드를 찾으려면 멀리 여러곳을 이동해야한다는 단점이 있다.

age라는 데이터를 다루는 곳을 찾고 싶으면 각각 메소드 Computed 를찾고 이래야 하는 왔다갔다 해야된다.

이게 싫으시면 Vue 3버전 부터는 코딩스타일을 하나 더 제공한다.

Composition API 라는 건데 computed, methods, watch, data() 이런걸로 파일을 쪼갤 필요 없이

관련 기능을 한 곳에서 몰아서 사용함으로써, 가독성이 좋아지고, 유지보수하기 용이해진다.

Composition API 식으로 데이터만드는 법

기존에 있는 데이터를 담는 data() -> setup() 으로 변경이된다.

import { ref } from 'vue'
export default {
  name : 'mypage',
  setup(){
    let follower = ref([]);
    return { follower }
    },
   }

이렇게 적으면 follower : [] 이라는 데이터를 만든거랑 똑같은 형태가 된다.

ref() 라는 함수를 import 해와서

var 데이터이름 = ref(데이터) 안에 항상 데이터를 저장해줘야한다.

안그러면 데이터 변경시 실시간 재렌더링이 안된다..

그리고 마지막에 return { 데이터이름 } 이렇게 퉤 뱉어주셔야

위에 HTML란에 가서 {{데이터이름}} 이렇게 사용이 가능합니다.

안그러면 데이터바인딩 이 되지 않는다..

Ajax 요청 및 데이터 변경 방법

import { ref } from 'vue'
import axios from 'axios'
export default {
  name : 'mypage',
  setup(){
    let follower = ref([]);
    axios.get('/follower.json').then((a)=>{
      follower.value = a.data
    })
    return { follower }
  },
}

get요청을 통하여 json 파일에 저장된 파일을 가져온다.
그럼 통신 성공한 a.data 에 [{},{},{},{},{}] 생긴 데이터들이 들어오는데
이 데이터를 follower 에 저장을 하고 싶다
follower.value = a.data 라고 써주어야 한다.