[Vue3] Composition API

Vue3 Composition API

• 짧게 CAPI 라고도 불림
• Vue2를 사용할 경우 별도로 composition-api를 설치해야 함
• Vue3는 이미 포함되어 있어서 별도 설치 필요 없음
• 컴포넌트의 기능과 규모가 커질 수록 복잡도가 올라가서 좀 더 가독성과 정돈이 필요하여 나옴
• 논리적으로 연관된 부분을 그룹으로 묶어서 보여줄 수 있다는 장점이 있음

setup

• setup이라는 옵션API 안에서 거의 모든게 구현됨
• setup의 첫번째 파라미터는 props
• setup의 두번째 파라미터는 context

변수 선언

• 동적인 변수로 사용을 해야할 경우 ref로 선언해줘야 함

import { ref } from "Vue"

...
setup() {
    const name = ref("")
    ...
}
...

• Obejct 또는 Array 를 동적으로 사용하고 싶을 경우에는 reactive를 사용

...
const state = reactive({
    a: 3,
    b: "test",
});
retrun { state }
...

• 원본 데이터와 연결 하여 동적으로 값을 가져가고 싶지만 UI를 업데이트하고 싶지 않을 때는 toRef를 사용

watch

• https://vuejs.org/api/options-state.html#watch
• 특정 데이터 변경 되고 old value를 확인해야 할 때 사용
• immediate
• deep
• flush
• onTrack / onTrigger

import { watch } from "vue"

...
setup() {
...
    watch(name, (newName, oldName) => console.log(newName, oldName),
    
        immediagte: true,   //최초에도 한번 실행
        deep: true,         //
    )
...
}

...

• newValue 와 oldValue가 참조형변수를 사용하면 같은 경우가 있는데 array일 경우에는 아래처럼 사용

watch(() => [...변수명], (new, old) => console.log(new, old));

• watch를 선언을 변수로 받아서 호출하면 stop 처리 됨

watchEffect

• watch의 단순화 버전이라 생각하면 좋음
• 변경되는 시점은 물론이고 선언도 즉시 호출됨
• old value 필요 없을 때 사용
• 마찬가지로 선언을 변수로 받아서 호출하면 stop 됨

const stopWatchEffect = watchEffect(() => {
    //필요한 로직 구현
    // user 또는 cart 값이 변경되면 호출됨
    f({user: user.value, cart: cart.value})
});

//stopWatchEffect을 호출하면 watch 중단 됨

provide / inject

• 부모 -> 자식으로 전달할 값을 provide로 설정
• 자식은 inject로 값을 받아서 사용

//부모 컴포넌트
import { provide } from "vue"

...
setup() {
...
    provide("user", user);
...
}
...

//자식 컴포넌트
import { inject } from "vue"

...
setup() {
...
    const user = inject("user", ref({name: 'Song'}); //두번째 인자는 디폴트 값
    const userName = user.value.name;
...
}
...