KB IT's Your Life
Vue [04] Vue 인스턴스
지식보부상님
2025. 3. 27. 16:26
[1] Vue 인스턴스 개요
◈ 애플리케이션 인스턴스
- Vue.createApp() 으로 만든 객체로 전체 컴포넌트 트리는 애플리케이션 인스턴스 마운트할 때 렌더링하게 됨
* 마운트: 트리구조에서 서브트리를 기존트리의 특정 노드에 연결시키는 작업
* 랜더링: 사용자 화면에 출력되는 것
let vm = Vue.createApp({
name: 'App',
data() {
return {};
},
}).mount('#app');
[2] data 옵션
◈ data 옵션
- 컴포넌트가 관리/추적할 데이터 등록시 사용
- 반드시 객체를 리턴하는 함수로 정의해야 => 리턴 객체가 Proxy로 래핑되어 변경 탐지 및 추적 가능하게
* [참고] $, _ 로 시작하는 이름은 특수한 용도로 사용되는 이름이므로, 이러한 이름으로 정의하지 않도록 주의
[3] 계산된 속성(Computed Property)
◈ 계산된 속성
- 다른 속성 변경될 때 함수 실행되서 저장된 캐싱된 값
- 함수 실행은 의존된 속성/data 변경될 때 한번만 호출됨
- computed 옵션에 함수를 등록하고, 함수명이 계산된 속성명이 됨
더보기
<!-- computed property 이용 예제 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
1보다 큰수를 입력하세요 <input type="text" v-model.number="num" />
<div>1부터 입력한 값까지의 합: {{sum}}</div>
<div>1부터 입력한 값까지의 합: {{sum}}</div>
<div>1부터 입력한 값까지의 합: {{sum}}</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
let vm = Vue.createApp({
name: 'App',
data() {
return { num: 0 };
},
computed: {
sum() {
console.log('num: ' + this.num);
let n = parseInt(this.num);
if (Number.isNaN(n)) {
return 0;
}
return (n * (n + 1)) / 2;
},
},
}).mount('#app');
</script>
</body>
</html>
[4] 메서드
◈ 메서드 옵션
- Vue 인스턴스에서 사용할 메서드를 등록하는 옵션
- 인스턴스에서 직접호출, 디렉티브 표현식, {{ }} 표현식에서 호출 가능
더보기
<!-- methods option 이용 예제 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
1보다 큰수 <input type="text" v-model.number="num" />
<div>1부터 입력한 값까지의 합: {{sum()}}</div>
<div>1부터 입력한 값까지의 합: {{sum()}}</div>
<div>1부터 입력한 값까지의 합: {{sum()}}</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
let vm = Vue.createApp({
name: 'App',
data() {
return { num: 0 };
},
methods: {
sum() {
console.log('num: ' + num);
let n = parseInt(this.num);
if (Number.isNaN(n)) {
return 0;
}
return (n * (n + 1)) / 2;
},
},
}).mount('#app');
</script>
</body>
</html>[5] 관찰 속성
◈ 관찰 속성(Watched Property)
- JS 코드에서 데이터 변경된 경우 이를 감지하여 이벤트 처리
watch:{
x(current, old){
...
},
},- x: data 또는 속성명, 관찰하고자하는 데이터명과 함수명이 동일해야 함
- current: 변경 후의 값(=현재값) / old: 변경 전의 값(=예전의 값)
더보기
<!-- watch 옵션 예제 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
x: <input type="text" v-model.number="x" />
<br />
y: <input type="text" v-model.number="y" />
<br />
두 수의 합은: {{sum}}
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
let vm = Vue.createApp({
name: 'App',
data() {
return { x: 0, y: 0, sum: 0 };
},
watch: {
x(cur, old) {
console.log(`x: ${old} -> ${cur}`);
let result = cur + this.y;
if (isNaN(result)) {
this.sum = 0;
} else {
this.sum = result;
}
},
y(cur, old) {
console.log(`y: ${old} -> ${cur}`);
let result = cur + this.x;
if (isNaN(result)) {
this.sum = 0;
} else {
this.sum = result;
}
},
},
}).mount('#app');
</script>
</body>
</html>[6] 생명주기 메서드
◈ Vue 생명주기
◈ 컴포넌트 생명주기 메서드
| 생명주기 메서드 | 설명 |
| beforeCreate | 인스턴스 초기화된 후, 데이터 관찰 가능, 이벤트 설정되기 전 동기적 호출 |
| created | 인스턴스 생성 완료 후 동기적으로 호출됨 watched, computed, method, 이벤트 초기화 등 모두 완료된 상태 |
| beforeMount | 마운팅 시작되기 지전 호출 |
| mounted | mount()에 의해 컴포넌트 인스턴스가 HTML Document 요소에 마운트된 후 호출 |
| beforeUpdate | 데이터 변경되고 DOM 패치되기 전 호출됨 |
| updated | 데이터 변경으로 가상 DOM 다시 렌더링되고 패치된 후 호출됨 컴포넌트 DOM 업데이트된 상태로 DOM에 종속성 있는 처리 이 단계에서 수행 |
| beforeUnmount | 컴포넌트 인스턴스가 언마운트 되기 직전 호출됨 |
| unmounted | 컴포넌트 인스턴스가 언마운트된 후 호출됨(자식도 모두 언마운트된 상태임) 컴포넌트의 모든 디렉티브들 연결 해제되고, 모든 이벤트 리스너 제거됨 |
| errorCaptured | 컴포넌트의 자식 컴포넌트 트리에서 오류가 발생하면 컴포넌트 트리를 거슬러 올라와서 이 메서드 실행됨 컴포넌트 자신에서 발생한 오류 잡아내지 x |
◈ 부모-자식 컴포넌트 관계 실행 흐름
◈ 컴포넌트 트리에서의 에러 처리
