Vue.js에서 Computed와 Mounted의 차이점 이해하기

Vue.js는 현대 웹 애플리케이션을 구축하기 위한 강력하고 직관적인 JavaScript 프레임워크입니다. 이 프레임워크는 다양한 옵션과 훅을 제공하여 개발자가 효율적으로 데이터를 관리하고 UI를 업데이트할 수 있도록 돕습니다. 이 글에서는 Vue.js의 두 중요한 기능인 computed 속성과 mounted 라이프사이클 훅의 차이점에 대해 알아보겠습니다.

Computed 속성
Mounted 라이프사이클 훅

Computed 속성

Vue.js에서 computed 속성은 종속 대상을 기반으로 계산된 데이터를 다룹니다. 이 속성은 데이터 바인딩과 함께 사용되며, 종속된 데이터가 변경될 때만 함수를 재실행하여 결과를 캐싱합니다. 이는 특히 복잡한 로직이나 계산이 필요할 때 성능을 최적화하는 데 유용합니다.

new Vue({
  el: '#app',
  data: {
    firstName: 'Jane',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

위 예제에서 fullName은 computed 속성으로 정의되어 있으며, firstName 또는 lastName이 변경될 때만 재계산됩니다.

Mounted 라이프사이클 훅

mounted는 Vue 인스턴스가 DOM에 마운트된 직후에 실행되는 라이프사이클 훅입니다. 이 단계에서는 템플릿과 렌더링된 DOM에 접근할 수 있으며, DOM을 조작하거나 외부 라이브러리를 초기화하는 등의 작업을 수행할 수 있습니다.

new Vue({
  el: '#app',
  mounted: function () {
    console.log('Component is now mounted.');
  }
});

이 코드는 Vue 인스턴스가 페이지에 마운트된 후 콘솔에 메시지를 출력합니다.