【Vue.js】computed와 watch의 구분
소개
일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다 (원래 Angular에서 제품 개발을 하고 있던 것은 있지만 Angular는 안 되는가···).
제대로 기억하지 않으면 우선 그런 것을 비망록으로 1개 1개 남겨 둔다.
computed와 watch의 구분
어느쪽이나 참조처의 값(Vue 인스턴스의 data 프로퍼티의 값)이 갱신되었을 때에 실행된다고 하는 것은 같지만, 이하와 같이 사용법에 차이가 있다.
#
구분
computed
・동기 처리를 실행하는 경우에 사용(return이므로 기본적으로는 동기 처리) ※단 노력하면 비동기적인 처리도 할 수 있다
watch
・비동기 처리를 실행하는 경우에 사용 ・참조처의 값을 가지는 computed property가 HTML상에 기재되어 있지 않을 때 사용
※단, 참조처의 값이 변경되었을 때・・・라는 장면에서 어떠한 처리를 실행할 때의 Best Practice는
computed 를 이용하는 것. 아무래도 대응 불가능한 경우에만 watch 를 이용하도록 하는 것이 포인트.참조 값이있는 computed 속성이 HTML에 나열되지 않은 경우 사용 예
"참조 대상 값이있는 computed 속성이 HTML에 나열되지 않은 경우"는
Vue 인스턴스의 data 속성이 있는 값이 업데이트될 때 무언가를 실행하고 싶지만, 그 값을 종속성으로 가진 computed 속성이 HTML에 존재하지 않고 그것(computed)이 작동하지 않기 때문에 값이 변경됩니다. 도 아무것도 처리를 실행할 수 없다고 하는 경우의 일.
이 동영상에서,
는
counter 의 일이며, 이 counter 가 변화했을 때에 무언가의 처리를 실행하는 것을 상정해 console.log() 를 실행하고 있다.동영상의 소스 코드는 이하.
sample.html
<body>
<div id="app">
<p>{{ counter }}</p>
<button @click="counter += 1">+1</button>
<!-- 参照先の値を持つcomputedプロパティがHTML上に記載されていない -->
<!-- <p>{{ lessThanThree }}</p> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
counter: 0
},
computed: {
lessThanThree: function () {
console.log('computed');
return this.counter > 3 ? '3より上' : '3以下';
}
},
watch: {
counter: function () {
console.log('watch');
}
}
})
</script>
</body>
※위의 소스 코드에서는, Vue 인스턴스에
lessThanThree 있다.동기 · 비동기 예
이 동영상은
counter 가 변경되었을 경우에 watch 가 움직여, 변경의 3 초 후에 counter=0 로 하는 처리를 실행한 것. computed 는 동기, watch 는 비동기로 각각 처리되고 있다.동영상의 소스 코드는 이하.
sample.html
<body>
<div id="app">
<p>{{ counter }}</p>
<button @click="counter += 1">+1</button>
<p>{{ lessThanThree }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
counter: 0
},
computed: {
lessThanThree: function () {
console.log('同期');
return this.counter > 3 ? '3より上' : '3以下';
}
},
watch: {
counter: function () {
const vm = this;
setTimeout(function () {
console.log('非同期');
vm.counter = 0;
}, 3000)
}
}
})
</script>
</body>
※ 상기에서
const vm = this;로하고있는 이유는 여기를 참조Vue.js 공부 메모 목록 기사 링크
Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.
Reference
이 문제에 관하여(【Vue.js】computed와 watch의 구분), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuta-katayama-23/items/65f0183e4ef9de699a89텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
