[Vue.js] onUpdated 훅을 활용한 컴포넌트 업데이트 감지

Vue.js에서는 컴포넌트가 업데이트된 후에 실행되는 onUpdated 훅을 제공합니다. 이 훅은 컴포넌트의 상태나 속성이 변경되고 나서 추가적인 작업을 수행할 때 유용합니다. 이를 통해 컴포넌트의 업데이트를 감지하고 그에 따른 동작을 처리할 수 있습니다.

아래는 onUpdated 훅을 사용한 Vue 컴포넌트의 예제입니다.

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">메시지 업데이트</button>
  </div>
</template>

<script>
import { ref, onUpdated } from 'vue';

export default {
  setup() {
    const message = ref('초기 메시지');

    function updateMessage() {
      message.value = '새로운 메시지';
    }

    onUpdated(() => {
      console.log('컴포넌트가 업데이트되었습니다.');
      // 여기에 업데이트 후 추가적인 작업을 수행할 수 있습니다.
    });

    return {
      message,
      updateMessage
    };
  }
};
</script>

예제 설명

위 예제는 버튼을 클릭하여 메시지를 업데이트하는 간단한 Vue 컴포넌트입니다.

1. <p> 태그 내에는 message 변수에 저장된 메시지를 표시합니다.
2. 버튼을 클릭하면 updateMessage 메소드가 호출되어 message 변수의 값을 업데이트합니다.

onUpdated 훅은 컴포넌트가 업데이트된 후에 실행되는 함수를 정의할 때 사용됩니다. 이 예제에서는 업데이트 후 콘솔에 메시지를 출력하는 작업이 포함되어 있습니다.

이러한 방식으로 onUpdated 훅을 사용하면 Vue 컴포넌트의 업데이트를 감지하고 이후에 추가적인 작업을 수행할 수 있습니다. 이는 컴포넌트의 상태나 속성이 변경되었을 때 필요한 동작을 처리하는 데 유용합니다.