진스
computed와 watch 본문
출처:
computed와 watch, vue, vuex
computed와 watch, vue, vuex
kyounghwan01.github.io
computed 속성
|
computed는 어떠한 값(props, this.data)을 변화하여 손쉽게 사용하기 위한 메소드 이며, computed를 통해 |
템플릿 내에 들어가는 값이 변환이 되어야 하는 경우 filter (opens new window)를 사용하면 원하는 방향으로 변환 할 수 있습니다.
그런데 많은 연산을 해야 할 경우 위와 같이 할 경우 템플릿이 간단하지 않고, 함수도 매번 정의해야 하기에 절대 좋은 방향이 아닙니다.
또한 store의 값을 getters로 가져와 템플릿 내에 보여줘야 할때도 어떻게 해야 할지 막막합니다.
이럴때 사용하는 것이 computed입니다.
computed는 아래와 같이 사용합니다.
|
<template>
<div>
<p>{{ ticketList }}</p>
<p>{{ increse }}</p>
</div>
</template>
<script>
export default {
data() {
return {
score: 1
};
},
computed: {
increse() {
return score + 1;
//data에 직접 접근하여 계산한 결과를 템플릿에 보일 수 있습니다.
},
ticketList() {
return this.$store.getters["ticket/ticket"];
// ticket.js라는 store에 접근해 ticket state를 가져온 후 템플릿에 보입니다.
}
}
};
</script>
|
cs |
위와 같이 computed속성은 데이터 바인딩이 가능하여 data에 접근 가능하고 data가 바뀜에 따라 computed값도 자동으로 바뀌어 렌더 됩니다.
또한 computed속성의 getter함수는 사이드 이팩트가 없어 코드를 테스트하기 쉽습니다
computed 메소드 호출
위처럼 computed에 선언 가능하고 지금 보여드릴 것과 같이 methods에도 선언 가능합니다.
|
<template>
<div>
<p>{{ increse() }}</p>
</div>
</template>
<script>
export default {
data() {
return {
score: 1
};
},
methods: {
increse() {
return this.score++;
}
}
};
</script>
|
cs |
두 방법의 접근 방식은 서로 동일힙니다
둘의 차이점은 computed는 의존하는 값이 변하는 경우 계속 실행하고 (위의 예제에서는 score), methods는 랜더링 될 때만 함수가 실행되는 점입니다.
즉, 만약 나는 이 값이 랜더링 된 값으로 유지 한다면 methods에 정의를 하고. 계속 캐싱하여 값을 바꾸어 보여주고 싶을 때는 computed를 사용하면 됩니다.
computed getter / setter
getter는 위에서 이미 보았습니다.
|
<script>
export default {
computed() {
return this.$store.getters["ticket/ticket"];
}
};
</script>
|
cs |
이게 getter를 사용 한다는 의미죠. 그렇다면 setter는 뭘까요?
|
<template>
<div id="demo">{{ fullName }}</div>
</template>
<script>
export default {
computed: {
fullName: {
// getter
get: function() {
return this.firstName + " " + this.lastName;
},
// setter
set: function(newValue) {
var names = newValue.split(" ");
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
};
</script>
|
cs |
위 처럼 fullName이 임의의 값으로 바뀌게 되면 set이 실행되고 firstName과 lastName이 동시에 바뀌게 됩니다.
watch 속성
watch는 현업에서 computed와 같이 매우 많이 사용하는 속성입니다. 꼭 인지하셔야합니다.
watch는 캐싱한 값이 바뀜에 따라 어떤 행동을 할지 정하는 속성입니다. 바로 예제로 보겠습니다.
|
<script>
export default {
watch: {
$route: {
handler() {
this.changeData();
},
immediate: true
}
}
};
</script>
|
cs |
굉장히 많이 쓰이는 구문입니다. 쉽게 말해 라우트 값(홈페이지 주소)가 바뀜에 따라 handler()에 있는 함수(changeData)가 실행된다는 것입니다. (immediate는 렌더된 직후 바로 실행 된다는 뜻입니다.)
위 예제 말고도 data에 선언된 값을 추적하여 그 값이 변할 때 마다 함수를 실행 할 수도 있습니다.
|
<template>
<div>
<input v-model="question" />
</div>
<p>{{ answer }}</p>
</template>
<script>
export default {
data(){
return {
question: '',
answer: '선 질문 후 대답'
}
}
watch: {
question: function(newQuestion){
this.getAnswer();
}
}
}
</script>
|
cs |
위 처럼 question이라는 데이터 값이 바뀌면 this.getAnswer()함수가 실행되게 할 수 있습니다.
간단히 말하면 지정된 값이 바뀌면 정해진 콜백 함수가 실행된다
| 예 |
예제 코드 element-ui (클릭)
elementUI 참고
[SI에서 살아남기] ElementUI+Vue에 대한 설명과 이해 el-button [1]
Element UI View에서 페이지를 꾸며주는데 사용함 다양한 이벤트와 속성을 제공한다. 예쁘게 잘만들어져있다. 사용방법은 Element UI 에서 참고하셨으면 좋겠습니다. 문서가 전부 영어로 되어있어서
ddacker.tistory.com
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<template>
<!-- 시간 값 정하는 ui, 예약 제한 시간을 가진다 -->
<el-time-select
format="HH:mm"
value-format="HH:mm"
v-model="bookingLimitTime"
/>
</template>
<script lang="ts">
export default {
data() {
return {
time: "2020-01-23 10:00" as string
};
},
computed: {
bookingLimitTime: {
get(): string {
//this.moment(this.time).format("HH:mm") === '10:00'
return this.moment(this.time).format("HH:mm");
},
set(value: string) {
//value === '12:11'
this.time = `${this.time.slice(0, -6)} ${value}`;
}
}
}
};
</script>
|
cs |
위 처럼 날짜 전체 값이 들어오지만 핸들링 할 값은 시, 분 만 가질때, computed로 시, 분만 가져오고, setter로 바뀐 시, 분을 computed에 쓰인 데이터로 바꾸어주면 된다.
computed vs watch
그러면 어떨 때 computed를 어떨 때 watch를 쓰냐??
computed는 템플릿 내의 값이 data와 종속되었을 경우 사용하는게 유리합니다.왜냐하면 같은 경우에 watch를 사용하면 중복 호출하거나, 코드가 복잡해주기 때문입니다. 또한 computed의 값은 캐싱되기 때문에, 리렌더링 됬을 때, 같은 값이 들어왔다면 연산하지 않습니다. 그에 반해 watch는 같은 값이여도 연산을 다시 합니다. 컴포넌트가 리렌더링이 많이 되나, 값이 바뀔일이 없다면 computed를 필히 써야합니다.
watch는 지정한 값이 변경된 시점에서 내가 원하는 액션(api call, route.push())을 하기 원할 때 사용합니다.
'Vue' 카테고리의 다른 글
| 이벤트 수식어 (0) | 2021.04.30 |
|---|---|
| 파일 전역으로 관리하기/절대 경로 만들기 (0) | 2021.04.30 |
| vue에서 audio 사용하기 (1) | 2021.04.29 |
| 무한스크롤과 라이프사이클 훅 (0) | 2021.04.29 |
| 무한스크롤 (0) | 2021.04.29 |
