vue3 컴포서블 사용, 디스터럭쳐링 문법

/composible/useMessage.js

import { ref } from "vue";

function useMessage() {
    //data
    const message = ref('hello');

    //methods
    const changeMessage = () => {
    message.value = 'hi';
    }

    return {message, changeMessage}
}

export { useMessage }



/App.vue

export default {
     setup() {
      const {message, changeMessage} = useMessage;


꺼내기가 가능하다.

 

위처럼 useMessage.message가 아닌 const에서 객체상태로 꺼낼 수 있는 것을 디스터럭쳐링 문법이라한다. es6에서 사용하는 문법이라고 한다.

위처럼 따로 js에 소스를 관심사 분리를 해두는것이 컴포서블 api인데 깔끔하지만, 나중에는 소스를 보기 위해 이 파일 저 파일을 옮겨다녀야 해서 비용이 많이 나가게 된다.

 

const obj = {
  a:10,
  b:'hi'
}

const {a,b} = obj;

이렇게 사용한다.