Vue 인스턴스 속성
- data
- el
- computed
- methods
- watch
Vue 인스턴스 속성
data
Vue에서 사용하는 데이터 객체이다. data는 Vue 객체 내부에 존재하는 것이 아닌 별도의 프록시를 통해서 관리되고 있다. Vue객체를 통해 프록시 처리된 data에 접근하는 방법은 다음과 같다.
var vm = new Vue({...})와 같이 선언된 경우 vm을 통해 접근var sample = new Vue({ data: { name: "홍길동", age: "21" } }); sample.name = "세종대왕"; sample.age = 19 # 위와같이 접근 가능$data를 사용하여 직접 접근sample.$data.name = "세종대왕"; sample.$data.age = 91;
el
Vue 인스턴스와 HTML DOM객체를 selector로 연결해주는 역할을 한다. 단, Vue객체는 반드시 하나의 DOM과 연결된다는 것이다. 그래서 일반적으로 id 속성을 이용하여 연결한다. class와 같이 여러 개가 존재할 수 있는 selector로 연결하려고 하면 첫번째 DOM과 연결된다.
computed
computed는 Vue 객체에서 어떤 계산 결과를 속성으로 이용하기 위해 사용한다.
[sample3.html]
<!DOCTYPE html>
<html>
<head>
<title>sample3</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<div>
모든 과일의 총 합은 {{sum}}입니다.
</div>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
items: [
{name : "사과", price: 2000},
{name : "포도", price: 3000},
{name : "딸기", price: 4000},
{name : "수박", price: 12000},
{name : "참외", price: 1000},
{name : "오렌지", price: 7000}
]
},
computed: {
sum: function() {
var items = this.items;
var total = 0;
items.forEach(function(value) {
var num = Number(value.price);
if(!num) {
total += num;
}
});
return total;
}
}
});
</script>
</body>
</html>
위 예제는 모든 과일 가격의 합을 구하는 예제이다. computed에 sum항목을 추가하며 함수를 선언한다. sum은 과일 가격의 총 합을 계산하여 리턴하는 함수를 정의하였다. 그리고 HTML에 {{sum}}항목을 사용하면 그 결과 값을 data와 같은 방법으로 사용할 수 있다.
주의해야할 점은 data에 접근 할 때 this를 사용했다는 점이다. Vue에서 this는 Vue객체를 가리키지만 내부에서 콜백함수 등을 호출했을 때 어느때나 변경될 가능성이 있기 때문에 사용에 주의해야한다.
그 외에도 Vue의 모든 옵션 정보를 다루는 $options를 이용하여 다른 옵션들도 확인할 수 있다.
methods
Vue객체에서 사용할 함수들을 정의하는 속성이다. computed에서 알아본 sum을 methods로 정의해서 사용하면 다음과 같다.
[sample4.html]
<!DOCTYPE html>
<html>
<head>
<title>sample4</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<div>
모든 과일의 총 합은 {{sum()}}입니다.
</div>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
items: [
{name : "사과", price: 2000},
{name : "포도", price: 3000},
{name : "딸기", price: 4000},
{name : "수박", price: 12000},
{name : "참외", price: 1000},
{name : "오렌지", price: 7000}
]
},
methods: {
sum: function() {
var items = this.items;
var total = 0;
items.forEach(function(value) {
var num = Number(value.price);
if(!num) {
total += num;
}
});
return total;
}
}
});
</script>
</body>
</html>
computed의 사용법과 거의 유사하다. 단지 콧수염표현법(중괄호 ‘{{}}’로 표현되는 표현식을 말함)으로 표현할 때 함수이므로 sum()으로 작성하는 것 외에 동일하다. 이 두 속성의 큰 차이점은 캐싱 여부이다. computed로 적용된 속성은 내부적으로 데이터를 캐싱하고 있다. 따라서 처음에 데이터를 계산하기 위해 실행하고 그 이후론 데이터를 캐싱하여 바로 리턴한다. 반면에 method로 사용하면 매번 새로 호출하여 계산한다. 상황에 따라 알맞은 속성을 사용하기 바란다.
watch
Vue객체의 독특한 속성중의 하나이다. 속성을 감시하여 속성이 변경될 때 마다 호출하는 함수를 지정할 수 있다. 예제를 먼저 보면 다음과 같다.
[sample5.html]
<!DOCTYPE html>
<html>
<head>
<title>v-for Sample</title>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<div>
<ul>
<li v-for="item in items" v-show="item.price < range">{{item.name}}</li>
</ul>
<div>
<input type="text" v-model="range">원 이하만 표시
</div>
</div>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
items: [
{name : "사과", price: 2000},
{name : "포도", price: 3000},
{name : "딸기", price: 4000},
{name : "수박", price: 12000},
{name : "참외", price: 1000},
{name : "오렌지", price: 7000}
],
range: 20000
},
watch: {
range: function(value) {
if (value < 500) {
alert("너무 작은 금액이에요")
}
}
}
});
</script>
</body>
</html>
위 예제를 보면 watch속성에 range가 500미만으로 작아지면 알림을 노출하도록 하였다. 이렇게 range값의 변화가 발생할 때 마다 어떤 작업을 하도록 할 수 있다. 다만 watch도 데이터가 변경될 때마다 호출된다는 점을 알고 있어야한다.
watch가 가장 사용되기 좋은 경우는 데이터를 체크하여 특정 상황에서 동작하도록 해야하는 경우이다. 예를 들면 자동완성 기능을 하는 경우 단어가 완성된 경우에만 조회를 하도록 하거나 1글자 이상 입력 된 경우만 조회를 하도록 하고 싶은 경우 적용하기에 좋다.
