해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면
Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기
복잡한 로직을 계산해야한다면 Computed를 사용하세요.
<div id="app">
<p>원본 메시지: "{{ message }}"</p>
<p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>
new Vue({
el: '#app',
data: {
message: '안녕하세요'
},
computed: {
// 계산된 getter
reversedMessage() {
// `this` 는 vm 인스턴스를 가리킵니다.
return this.message.split('').reverse().join('')
}
}
})
참고: https://jsfiddle.net/qudcks0703/y1zef7or/77/
위 코드는 역순으로 메세지를 변경하는 함수를 적용한 결과입니다. 템플릿 문법 {{}} 내에서 로직을 작성할 수 있지만 Vue는 {{}] 내에 복잡한 로직을 작성하는 것을 지양하라고 권고하고 있습니다.
그렇다면 이런생각이 들 수 있겠군요? 지금까지 배웠던 Methods 함수를 생각해보면
Computed와 Methods와 비슷하게 이벤트를 받는다는 점을 보아 같아 보이네요.
그렇지만 Methods와 Computed를 조금 다른 부분이 있습니다.
참고: https://jsfiddle.net/qudcks0703/y1zef7or/92/
위 페이지를 실행해보면 computed는 항상 동일한 값을 출력하는 데에 반해 Methods는 값이 변하는 걸 볼 수 있죠.
Methods와 Computed는 결과를 반환한다는 점은 동일하지만 Computed는 어떤 종속된 대상을 캐싱(저장)하여 값을 출력합니다. 즉 Computed가 바라보는 Vue에 선언한 Data가 변해야지만 값이 변하는 메서드지만 Methods는 매서드를 호출할때마다 계산하여 처리합니다. 이 때문에 복잡한 로직을 계산할때에는 Methods 보단 Computed를 사용하라고 합니다.
++ 추가로 메서드를 사용하는 방법또한 서로 다르네요...? 이건 처음알았다는...
(사실 저는 Computed는 한번도안써봐서.. 모든 걸 Methods로만 사용했답니다...)
☆기억☆ computed는 this.함수 / methods는 this.함수()
Watch는 Vue 인스턴스의 데이터 변경을 관찰하고 그것에 반응하는 속성입니다. 데이터가 변경됬을 때 어떤 훅을 생성하고 싶을 때 사용하면 유요하지만 Vue에선 Computed속성을 사용하는 것을 선호하더군요..
(필자는 Watch 속성이 정말 매력있다라고 생각하고 실무에서 자주 사용하는 것 같습니다. Computed랑은 엄연히
다르다고 생각하구요.)
<div id="app">
<span> Value= {{value }}</span> <br/>
<span>changeValue= {{ changeValue }}</span> <br/><br/>
<button @click="change">
변경
</button>
</div>
new Vue({
el: '#app',
data: {
value:0,
changeValue:'',
},
watch:{
value(){
this.changeValue=this.value;
}
},
methods:{
change(){
this.value++;
}
}
})
참고: https://jsfiddle.net/qudcks0703/y1zef7or/102/
위 코드는 value가 변경시에 watch문이 value()가 실행되면서 changeValue를 변경하고 있습니다.
버튼을 클릭하면 value가 변경되고 watch가 실행되는 샘이죠. 이렇게, 어떤 값이 변경할 때 훅을 만들고 싶을 때
watch를 사용하시면 좋을 것 같습니다.
*watch 종속 방법= data의 속성명과 watch에 메서드 명과 같아야합니다.
++추가
실무에서 watch를 많이 이용하면서 watch가 안되는 data도 있더군요. 그거에 대해 참고 해주세요
Type 배열: https://jsfiddle.net/qudcks0703/y1zef7or/110/
Type 맵: https://jsfiddle.net/qudcks0703/y1zef7or/112
위 결과를 보았을때 배열은 값 변경에 따라 watch문이 실행되지만 key,value를 가지는 map타입 같은 경우는 값을
변경하지 못하더군요. 하지만 deep속성을 주면 map 내부의 값이 변경하면 바꿀 수 있습니다. 이 부분은 추후에 다루도록 하겠습니다.
[Vue.js] 8. 조건부 렌더링(V-if,v-show),리스트 렌더링(v-for)에 대한 심화 이해 및 예제 (0) | 2020.07.17 |
---|---|
[Vue.js] 7. HTML 클래스,스타일 바인딩에 대한 이해와 예제 (0) | 2020.07.16 |
[Vue.js] 5. 템플릿 문법 그리고 v-속성에 대한 이해와 예제 (0) | 2020.07.16 |
[Vue.js] 4. Vue 인스턴스 라이프사이클(생명주기) (0) | 2020.07.15 |
[Vue.js] 3. Vue 인스턴스의 속성과 메소드 그리고 기초 (0) | 2020.07.15 |
댓글 영역