728x90
Vue에는 computed와 watch라는 속성이 존재한다. 두 개의 속성의 역할은 비슷하지만 분명히 차이점이 존재한다. computed와 watch를 어떻게 사용하고 언제 사용하는지 알아보자.
언제 사용할까?
computed와 watch는 비슷하게 동작하여 쉽게 이해되지 않았다. 하지만 언제 사용해야하는지 알고난 후에 이해할 수 있었다. 두 개의 속성은 모두 참조하고 있는 값이 변할 때 작동한다. 하지만 computed는 계산된 결과를 반환하고 watch는 값이 변경될 때 함수가 실행된다.
따라서 watch는 특정 값에 어떠한 조건이 성립되었을 때 실행되는 함수를 등록하고 트리거로 사용할 수 있으며 computed는 일반 methods처럼 사용된다.
어떻게 사용할까?
공식문서에 나와있는 예제는 다음과 같다. 원본 메시지은 message가 변했을 때 reversedMessage가 실행되며 뒤집은 문자열을 반환한다. computed에 정의된 함수는 반드시 리턴값이 존재해야하며 파라미터를 전달받지 않는다.
computed는 의존성이 있는 데이터가 변할 때만 함수를 실행하지만 method는 template 내부에 선언된 method 중에서 update 라이프사이클 훅일 때 함수를 모두 실행한다.
<body>
<div id="app">
<p>원본 메시지: {{ message }}</p>
<p>역순 메시지: {{ reversedMessage }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
},
computed:{
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
아래는 공식문서에 나와있는 watch의 예시 코드이다. watch도 인스턴스 안에 작성을 하며 명령형 프로그래밍으로 동작을 한다. 앞으로 watch는 트리거의 형태로 사용하도록 해야겠다.
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 호이스팅이 발생하는 이유 (0) | 2021.07.06 |
|---|---|
| [Vue] 싱글 파일 컴포넌트(SFC) (0) | 2021.05.11 |
| [Vue] Vue 인스턴스 (0) | 2021.05.09 |
| [Vue] 시작하기 02 (0) | 2021.05.08 |
| [Vue] 시작하기 01 (0) | 2021.05.07 |