-
vue14(computed,watch)JS/vue.js 2022. 3. 18. 15:51
<computed>
const vm = new Vue({ el: '#example', data: { message: 'hello' }, computed: { reversedMessage: function() { return this.message.split('').reverse().join('') } } }
→ computed 속성인 reversedMessage 선언
console.log(vm.reversedMessage) //"olleh" vm.message = "Nope!" console.log(vm.reversedMessage) //"!epoN"
→ vm.reversedMessage 값은 항상 vm.message 값에 의존!!!!
→ vm.message가 바뀔 때 vm.reversedMessage 에 의존하는 바인딩을 모두 업데이트!!
○ computed 속성은 종속 대상을 따라 저장(캐싱) (↔ methods)
○ computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행
▶ message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환!
(↔ 메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행)
<watch>
: Vue 인스턴스 데이터 변경을 관찰하고 이에 반응하는 속성
참고
'JS > vue.js' 카테고리의 다른 글
vue13(vuex) (0) 2022.03.16 vue12(vue-router #,/#/ 제거하기) (0) 2022.03.16 vue11(redirect 리다이렉트 ) (0) 2022.03.15 에러6(.env에러/ELIFECYCLE/this is probably not a problem with npm) (0) 2022.03.15 vue10(동적 컴포넌트 component tag / 컴포넌트 갈아끼우기) (0) 2022.03.15