[Vue] Vue 인스턴스

1. Vue 인스턴스 개요

1.1 Vue 인스턴스란?

• Vue 애플리케이션은 Vue 인스턴스를 통해 시작

const app = Vue.createApp({...});
app.mount('#app');

• `createApp()`은 Vue 애플리케이션 인스턴스를 생성
• `mount()`는 인스턴스를 특정 DOM 요소에 "마운트" (적재)
  → 이후 DOM 렌더링과 반응형 데이터 처리가 연결

✅ Vue에서 모든 컴포넌트 트리는 마운트 된 인스턴스를 기준으로 구성

let vm = Vue.createApp({
  name: "App",
  data() {
    return { name: "" };
  },
}).mount("#app");

---

2. `data` 옵션

2.1 역할

• 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용
• `data()`는 Vue 컴포넌트의 상태(state)를 정의하는 핵심 옵션
• Vue는 이 데이터를 Proxy 객체로 감싸 실시간으로 변경 사항 감지하여 화면 갱신

data() {
  return {
    message: "Hello Vue!",
    count: 0
  };
}

 

✅ 주의사항

• `$`, `_` 로 시작하는 속성명은 Vue 내부에서 사용되므로 사용 자제

---

3. 계산된 속성 (Computed Property)

3.1 정의 및 특징

• data나 다른 속성이 변경될 때 함수가 실행되어 저장된 캐싱 값
• `computed`는 템플릿 내에서 계산된 데이터를 정의할 때 사용
• 함수처럼 정의하지만, 속성처럼 사용

computed: {
  sum() {
    return this.num1 + this.num2;
  }
}

 

<!-- sum은 실제로는 함수지만 속성처럼 사용 -->
<h2>{{ sum }}</h2>

 

✅ 자동 캐싱 지원

• `this.num1`, `this.num2` 가 변경될 때만 `sum()`을 다시 계산
• 의존하는 데이터가 바뀌지 않으면 캐싱된 결과를 사용 → 성능 향상

✅ `this`는 해당 인스턴스를 가리킴

---

4. 메서드 (Methods)

4.1 정의

• 사용자 동작에 따라 호출되는 이벤트 핸들러를 등록할 때 사용
• 인스턴스에서 직접 호출하거나, 디렉티브의 표현식, {{ }}의 표현식에서 호출 가능

methods: {
  increase() {
    this.count++;
  }
}

<button @click="increase">+</button>

✅ 호출 시마다 무조건 실행 (캐싱 X)
✅ `methods`는 주로 사용자 입력에 반응하는 기능 수행

→ 호출 시마다 무조건 실행됨

---

5. 관찰속성(Watched Property)

5.1 정의

• `watch` 옵션은 특정 데이터를 감시하다가 변경되었을 때 콜백 함수를 실행
• data 속성명과 동일하게 함수명 정의
• 실시간 UI 반응이 필요한 기능에 사용
• 특히 서버와의 비동기 통신에 적합
• 첫 번째 인자 : 변경 후의 값 / 두 번째 인자: 변경 전의 값

var vm = Vue.createApp({
  name: "App",
  data() {
  return { x: 0, y: 0, sum: 0 };
  }

watch: {
  x(current, old) {
    console.log(`## x : ${old} --> ${current}`);
    var result = Number(current) + Number(this.y);
    if (isNaN(result)) this.sum = 0;
    else this.sum = result;
  },
  y(current, old) {
    console.log(`## y : ${old} --> ${current}`);
    var result = Number(this.x) + Number(current);
    if (isNaN(result)) this.sum = 0;
    else this.sum = result;
 },

 

5.2 비동기 처리 예제

• ` _.debounce()`로 입력 지연 처리
• 비동기 처리에 매우 유용한 구조

watch: {
  name(current) {
    if (current.length >= 2) {
      this.fetchContacts();
    } else {
      this.contacts = [];
    }
  }
},
methods: {
  fetchContacts: _.debounce(function () {
    this.isLoading = true;
    axios.get(BASEURL + `/contacts/search/${this.name}`).then((res) => {
      this.isLoading = false;
      this.contacts = res.data;
    });
  }, 300)
}

 

5.3 객체 속성 감시 (deep watch)

• 중첩 객체 변경 감지를 위해 `deep: true` 필수

watch: {
  values: {
    handler(current) {
      this.sum = Number(current.x) + Number(current.y);
    },
    deep: true
  }
}

 

✅ 비교 요약

항목	특징
`computed`	템플릿 내 표현에 적합, 자동 캐싱
`watch`	부수 효과(side effect)에 적합, 사용자 정의 반응

---

6. 생명주기 메서드

6.1 Vue 생명주기 개요

• Vue 컴포넌트는 특정 단계마다 Hook 메서드를 실행할 수 있도록 설계

단계	설명
`beforeCreate`	데이터 초기화 전
`created`	data, methods 설정 완료 (DOM 접근 전)
`beforeMount`	DOM에 마운트 직전
`mounted`	DOM에 마운트 완료 후
`beforeUpdate`	반응형 데이터 변경 전
`updated`	DOM 업데이트 완료 후
`beforeUnmount`	컴포넌트 해제 전
`unmounted`	컴포넌트 해제 완료 후
`errorCaptured`	자식 컴포넌트 에러 감지 시

created() {
  console.log("## created");
},
mounted() {
  console.log("## mounted");
},
updated() {
  console.log("## updated");
}

 

✅ `created`

• 컴포넌트 초기화 직후
• 서버에서 데이터 불러올 때 자주 사용

created() {
  axios.get('/api/data').then(res => {
    this.list = res.data;
  });
}

 

✅ `mounted`

• DOM이 화면에 렌더링된 직후
• DOM 관련 직접 조작이 필요한 경우

 

6.2 부모-자식 컴포넌트 흐름

• 자식 컴포넌트가 `mounted`를 마친 후 부모가 마운트됨
• 생명주기 순서를 이해해야 적절한 초기화 위치를 설정 가능

 

6.3 컴포넌트 트리에서의 에러 처리

• 프로젝트 수준이나 주요 모듈 단위로 정의해서 중앙 집중화된 에러 처리를 수행

---

📎 참고자료

• Vue 공식 가이드 - 옵션 API
• Vue 생명주기 상세
• 원쌤의 Vue.js 퀵스타트 (원형섭 저)