-
[Vue2] computed와 watchVue 2023. 3. 24. 12:20반응형
1. Computed 속성
vue에서 computed란?
computed란 계산하다라는 뜻이며, 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다.
computed 속성의 장점
컴퓨티드 속성은 단순히 뷰 템플릿 코드의 가독성만 높여줄 뿐만 아니라 컴퓨티드 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해주는 장점이 있습니다.
computed 속성 예
<div>{{ message.split('').reverse().join('') }}</div>위 코드는 message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드입니다. message 값이 만약 Hello라면 화면에 출력되는 값은 olleH입니다. 이처럼 콧수염 괄호 안에는 단순히 데이터 속성의 값만 표시하는게 아니라 자바스크립트의 내장 API를 활용하여 어느 정도 가공할 수 있습니다.
이와 같은 계산식이 템플릿에 많아지면 템플릿의 가독성이 현저히 떨어집니다. 따라서 아래와 같이 computed 속성을 활용해야 합니다.
computed: { reverseMessage() { return this.message.split('').reverse().join(''); } }<div id="app"> {{ reversdMessage }} {{ reversdMessage }} {{ reversdMessage }} </div> <script> new Vue({ el: "#app", data: { message: "안녕하세요", }, methods: {}, computed: { reversdMessage() { return this.message.split("").reverse().join(""); }, }, }); </script>
클릭 이벤트로 message 값 변경
클릭을 하면 메소드 안에 있는 changeMessage 값이 한 번 바뀌고
computed 안에 있는 reversedMessage 함수도 실행이 된다.
2. Watch 속성
vue에서 watch란??
watch란 지켜보다라는 뜻이며, 말 그대로 특정 데이터를 보며 값이 바뀌면 별도의 콜백 함수에서 데이터를 처리하게 되며, lazy하게 실행됩니다.
즉, watch에 등록한 콜백함수는 감시된 소스가 변경된 경우에만 호출됩니다.
이는 vue3에서의 watch() API는 Option API(vue2)에서의 this.$watch 와 동일한 역할을 하는것을 의미합니다.watch에 대한 특징은 다음과 같습니다.
- lazy 하게 수행됩니다.
- 감시된 상태의 이전 값과 현재 값 모두에 액세스합니다.watch 예제, 사용법
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>뷰 기초 익히기</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} <button v-on:click="changeMessage">Click</button> {{ update }} </div> <script> new Vue({ el: "#app", data: { message: "헬로우", update: "아니요", }, methods: { changeMessage() { return (this.message = "코지코더"); }, }, computed: { reversedMessage() { return this.message.split("").reverse().join(""); }, }, watch: { message(newVal, oldVal) { console.log(newVal, oldVal); this.update = "네"; }, }, }); </script> </body> </html>data 안에 message, update 값을 넣는다.
실행 순서가 버튼을 클릭을 하면 changeMessage 함수가 실행이 되면서 헬로우 -> 코지 코더로 바뀌게 되고
watch가 값이 바뀌는 것을 확인 후 update 값도 바뀐다.
사용 방법
watch : { 함수명(newVal, oldVal) { 할일 } }
왼쪽이 클릭 하기 전, 오른쪽이 클릭 한 후 참고
https://v2.ko.vuejs.org/v2/guide/computed.html#watch-%EC%86%8D%EC%84%B1
computed와 watch — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
v2.ko.vuejs.org
총평
사용처는 HTTP 호출, 로컬 저장소에 데이터 저장, 타이머 설정, 디버깅 등 용도에서 watch를 사용할 수 있을겁니다.
쓰다보면서 익숙해지면 유용한것처럼 보이지만, 아직은 마땅히 적극적으로 써본적은 없어서 잘 모르겠습니다.
반응형 데이터를 쓴다거나 computed를 쓰면 watch를 쓸일이 별로 없을거 같은데,
계속해서 vue를 사용해보면서 watch로 코드개선할 수 없는지 고민해보아야겠습니다반응형'Vue' 카테고리의 다른 글
[Vue2] Vue Computed 속성 (0) 2023.04.25 [Vue2] Vue 데이터 양방향 바인딩(Data Two Way Binding) / 폼 입력 바인딩 (0) 2023.04.20 [Vue2] Event 이벤트 핸들링 (0) 2023.04.19 [Vue2] Vue 인스턴스란? (0) 2023.03.25 뷰(Vue 2) 기초 익히기 2일차 (0) 2023.03.23