Vue에서 계산과 메소드의 차이점은 무엇입니까?

이 글에서는 Vue의 계산과 메소드의 차이점을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

1 계산과 메소드의 두 가지 핵심 차이점

공식 문서에서는 계산과 메소드를 구별하는 가장 중요한 두 가지 사항이 강조되어 있습니다.

• 컴퓨팅은 속성 호출이고 메소드는 함수입니다. call

• computed에는 캐싱 기능이 있지만 메소드는

아닙니다. 구체적인 예를 살펴보겠습니다.

<!--HTML部分-->
<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>
<!--script部分-->
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        message: &#39;我是消息，&#39;
    },
    methods: {
        methodTest() {
            return this.message + &#39;现在我用的是methods&#39;
        }
    },
    computed: {
        computedTest() {
            return this.message + &#39;现在我用的是computed&#39;
        }
    }
})

2. Computed 속성 호출

주의 깊은 친구들은 HTML에서 보간법을 발견했을 수도 있습니다.

• 에 정의된 메소드는 속성 접근 형태로 계산되는데, {{computedTest}}

• 그러나 메소드로 정의된 메소드는 호출하기 위해 {{methodTest() }와 같이 ()를 추가해야 합니다. }, 그렇지 않으면 뷰에 test1의 상황이 표시됩니다. 아래 그림을 참조하세요

3.computed의 캐싱 기능

먼저 캐시의 용도를 이해해야 합니까?

HTTP 캐싱의 핵심 기능은 서버에서 업데이트되지 않은 일부 리소스를 재사용하고 불필요한 요청을 피하며 사용자 경험을 최적화하는 것입니다. 위의 예에서는 메소드에 의해 정의된 메소드에 함수 호출 형태로 액세스한 후 test2-1, test2-2 및 test2-3이 methodTest 메소드를 세 번 반복적으로 실행합니다. 시나리오가 발생하면 1,000개의 methodTest가 필요합니다. 그러면 필연적으로 많은 낭비가 발생할 것이라는 데는 의심의 여지가 없습니다

더 무서운 것은 message의 값을 변경하면 1000개의 methodTest 메서드 각각이 다시 계산된다는 것입니다. . . .

이것이 공식 문서에서 복잡한 논리의 경우 계산 속성을 사용해야 함을 반복적으로 강조하는 이유입니다

계산은 데이터의 데이터에 따라 달라지며 관련 종속 데이터가 변경될 때만 재평가됩니다

위와 같이 예를 들어, Vue가 인스턴스화되면 계산은 계산을 수행하고 값을 반환하도록 계산된 테스트 메서드를 정의합니다. 후속 코드 작성에서 계산된 테스트 메서드가 의존하는 메시지 데이터가 변경되지 않는 한 계산된 테스트 메서드는 다시 계산되지 않습니다. 즉, test3-1과 test3-2는 계산된 테스트 메서드에 의한 재계산 결과가 아닌 직접 반환 값을 얻습니다.

이것의 이점도 분명합니다. 마찬가지로 1000개의 계산된 테스트 반환 값이 필요한 시나리오에 직면하면 메소드에 비해 메모리가 크게 절약된다는 것은 의심의 여지가 없습니다.

변경하더라도 메시지의 값은, ComputedTest는 한 번만 계산됩니다

4.computed에 대한 다른 설명은 실제로 속성과 메소드 모두로 액세스할 수 있습니다

computed의 기원에는 중요한 이유가 있습니다. 텍스트 보간 논리가 너무 무거워서 유지 관리가 어려워지는 것을 방지

• 관련 권장 사항:

• 2020 프론트 엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 권장 사항: 최신 2020년 5 vue .js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Vue에서 계산과 메소드의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!