Vue 3에서 컴포넌트 내에서 사용할 수 있는 다양한 옵션 및 메서드

Vue 3에서 컴포넌트 내에서 사용할 수 있는 다양한 옵션 및 메서드

Vue 3에서는 Composition API와 Options API를 모두 지원하며, 여기서는 주로 Options API를 중심으로 설명하겠습니다.

 

1. data : 컴포넌트의 상태를 정의하는 데 사용됩니다. 객체를 반환하는 함수로 정의됩니다.

export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};

 

2. methods : 컴포넌트 내에서 사용할 메서드를 정의합니다. 주로 이벤트 핸들러로 사용됩니다.

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

 

3. computed : 종속된 상태가 변경될 때 자동으로 다시 계산되는 계산 속성을 정의합니다.

export default {
  data() {
    return {
      number: 5
    };
  },
  computed: {
    squared() {
      return this.number * this.number;
    }
  }
};

 

4. watch : 특정 데이터 속성이 변경될 때 실행할 반응형 콜백을 정의합니다.

export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    }
  }
};

 

5.created : 컴포넌트 인스턴스가 생성된 후 호출되는 생명주기 훅입니다.

export default {
  created() {
    console.log('Component has been created');
  }
};

 

6. mounted : 컴포넌트가 마운트되고 DOM에 삽입된 후 호출되는 생명주기 훅입니다.

export default {
  mounted() {
    console.log('Component has been mounted');
  }
};

 

7. updated : 데이터가 변경되어 DOM이 갱신된 후 호출되는 생명주기 훅입니다.

export default {
  updated() {
    console.log('Component has been updated');
  }
};

 

8. destroyed (Vue 3에서는 unmounted로 변경) : 컴포넌트가 파괴된 후 호출되는 생명주기 훅입니다.

export default {
  unmounted() {
    console.log('Component has been destroyed');
  }
};

 

9. props : 부모 컴포넌트로부터 전달받는 데이터를 정의합니다.

export default {
  props: {
    title: String
  }
};

 

10. emits : 컴포넌트에서 발생시킬 수 있는 커스텀 이벤트를 정의합니다.

export default {
  emits: ['increment']
};

 

11. setup (Composition API) : Composition API의 핵심 메서드로, 컴포넌트의 초기 상태와 메서드를 정의할 수 있습니다.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

 

12. provide와 inject : 조상 컴포넌트와 자손 컴포넌트 간에 데이터를 주고받기 위해 사용됩니다.

// 조상 컴포넌트
export default {
  provide() {
    return {
      message: 'Hello from ancestor'
    };
  }
};

// 자손 컴포넌트
export default {
  inject: ['message']
};