vue 계산 속성 컴퓨터와 탐지기watch 사용 장면
위챗 공식번호: 대사형 2016
특징 및 차이점
vue의 computed 옵션은 데이터 처리를 동기화하는 데 사용되고 watch 옵션은 이벤트 발송에 사용되며 비동기적이다.이 두 가지는 모두 같은 효과를 얻을 수 있지만 그들 각자의 특징을 바탕으로 장면을 사용하면 약간의 구분이 있을 수 있다.
computed 캐시 속성을 가지고 의존하는 데이터가 변화할 때만 관련 데이터가 변화하여 데이터를 계산하거나 포맷하는 장면에 적용된다.watch 감청 데이터는 관련이 있지만 의존하지 않고 특정한 데이터에 변화가 발생하면 일부 데이터를 처리하거나 이벤트를 발송하고 동기화/비동기적으로 실행할 수 있다.계산 속성
추상적인 개념은 이해하기 어렵다. 고주파의 장면을 많이 사용하면 자연히 익숙해지고 계산 속성은 동기화 처리 데이터로 나타난다.
금융 분야의 할부금
P2P 연화 수익은 계산 성격을 띠고 모두 우선적으로 고려할 수 있다computed.클릭 이벤트나 다른 데이터에 주목할 필요가 없고 계산 규칙을 속성에 쓰면 해당하는 데이터를 실시간으로 얻을 수 있다.
전자상거래 분야의 카트 통계는 한 데이터가 한 개 혹은 여러 개의 데이터에 의존한다.
카트 수량과 제품이 변할 때 자동적으로 가격*수량의 총계를 계산해 낸다.
쿠폰이나 할인이 있으면 자동으로 할인액을 빼고 할인금액을 계산하면 됩니다.
구매 수량, 구매 가격, 쿠폰, 할인권 등 임의의 변화가 발생하면 총 가격은 자동으로 변화를 추적한다.
탐지기
watch탐지기가 할 수 있는 계산 속성computed도 할 수 있는데 언제 탐지기를 사용하기에 적합합니까?주로 사건과 상호작용과 관련된 장면에 적용되고 데이터 변화를 조건으로 한 데이터가 여러 사물을 동시에 촉발하는 데 적용된다.
만약에 대출 한도가 대출 가능한 한도보다 크면 토스트 알림이 뜨고 현재 대출 한도를 최대 한도로 조정한다.
이를 통해 알 수 있듯이 데이터의 변화는 트리거 탄창 알림이고 일정한 금액 조건에서만 트리거되며 실시간 트리거가 아니다.
추상적 개념
탄창 알림 등 이벤트 상호작용의 적용
watch, 데이터 계산과 문자 처리의 적용computedcomputer 성 입력 상자 하나, 이름 입력 상자 하나, 실시간으로 전체 이름을 보여 줍니다.
{{fullName}}
export default {
name: 'test',
data: {
firstName: 'da',
lastName: 'shixiong',
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
}
watch 하나의 금액 입력 상자, 감청 금액 수치 크기, 조건에 도달할 때 알림
export default {
name: 'test',
data: {
Amount: 100,
},
watch: {
Amount: function (newVal,oldVal) {
if(newVal>5000) {
alert(" 5000 ")
this.Amount=5000
}
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[Vue.js] vue devtools not detected 해결방법크롬 브라우저 기준 오른쪽 상단 확장 프로그램에서 vue.js devtools 옵션 더보기 클릭(세로점 세개) -> 확장 프로그램 관리 -> 파일 URL에 대한 엑세스 허용 체크 예시 2.x 버전 압축버전 사용하지 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
