Vue에서methods(방법), 컴퓨터(계산 속성),watch(탐지기)의 차이
1954 단어 Vue
computed가 실현할 수 있는 기능methods만큼 실현할 수 있다고 믿죠?사실은 그렇다. computed 현실적인 methods는 현실이 될 수 있지만 나타나는 과정은 큰 차이가 있을 수 있다. 나는 모두가 여기에 열을 들어 설명한다. 만약에 쇼핑 카트 결제 장면을 가정하면 사용자가 선택한 상품의 총 금액은 상품의 수량, 선택한 상품의 종류수와 상품 단가에 따라 달라진다.우리는 바로 이렇게 하면 선택한 금액의 총수를 산출할 수 있다.computed:{
totalPrice(){
let totalPrice = 0
this.listOfArticles.forEach(food => {
totalPrice += food.price + food.count
})
return totalPrice // {{ totalPrice }}
}
}여기를 보면 많은 학우들이 의문을 품을지도 몰라요.
methdos로 하나totalPrice를 정의하는 방법은 이것과 차이가 많지 않아요?사실 본질적인 차이가 있다. computed는 。computed 그것과 관련된 의존이 변화해야만 다시 값을 구할 수 있다.본 예에서 가격과 수량에 변화가 발생하면 totalPrice 방법이 실행되고 가격과 수량에 변화가 없으면 여러 번 방문하면 이전의 계산 결과를 즉시 되돌려주며 다시 계산을 실행할 필요가 없다는 것을 의미한다.여기 동창들 보면 왜 캐시가 필요한지 생각할 거예요.만약 우리가 성능 비용이 비교적 큰 계산 속성
A 을 가지고 있다면, 그것은 거대한 그룹을 두루 훑어보고 대량의 계산을 해야 한다.그리고 우리는 다른 계산 속성이 A에 의존할 수 있다.만약 캐시가 없다면 우리는 불가피하게 여러 번 실행할 것이다Agetter!만약 캐시가 있기를 원하지 않는다면, 방법으로 대체하십시오.2 . 이렇게 많은 말을 했는데 다음은
watch와computed에 대한 것이다. 우선 그들은 Vue의 의존 추적 메커니즘을 바탕으로 한다. 그들의 공통점은 의존 데이터가 바뀔 때 의존된 데이터가 미리 정의된 편지에 따라'자동'의 변화를 일으키기를 바라는 것이다.그러나 watch와computed도 현저히 다른 점이 있다. watch와computed 각각 처리된 데이터 관계 장면이 다르다(1).watch 잘 처리하는 장면: 한 데이터가 여러 데이터에 영향을 미친다(2).computed 잘 처리하는 장면: 한 데이터가 여러 데이터의 영향을 받는다대부분의 경우 계산 속성이 더 적합하지만, 때로는 사용자 정의 탐지기도 필요하다.이것이 바로 Vue가 워치 옵션을 통해 데이터의 변화에 응답하는 보다 일반적인 방법을 제공한 이유입니다.데이터가 변할 때 비동기적이거나 비용이 많이 들 때 이 방식이 가장 유용하다.예를 들어 Vue 홈페이지에 있는 이 예: 탐지기
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
