Vue.js에서 계산된 메소드와 메소드의 차이점은 무엇입니까? (예제 포함)

이 기사에서는 Vue.js의 계산된 메소드와 메소드의 차이점에 대해 설명합니다. (예시 포함) 참고할만한 가치가 있으니 도움이 필요한 친구들이 참고하시면 좋을 것 같습니다.

공식 문서에 설명되어 있습니다. 여기에 제가 이해한 내용을 기록하겠습니다.

계산된 사용 시나리오

HTML 템플릿의 복잡한 논리 표현식은 논리가 너무 무겁고 유지 관리가 어려운 것을 방지하기 위해 관련 논리를 계산된 속성에 넣어야 합니다.

예를 들어, 이

<div id="root">
     <p>Reversed message: "{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}"</p>
</div>

에서는 템플릿이 더 이상 단순한 선언적 논리가 아닙니다. 변수 메시지를 표시하려는 반전된 문자열은 다음과 같습니다. 복잡한 논리 처리가 포함된 표현식은 계산된 속성을 사용해야 합니다.

computed와 메소드의 차이점

1.computed는 속성 호출이고, 메소드는 함수 호출입니다.

즉, HTML 보간에서

computed로 정의된 메소드는 속성 액세스 형식으로 호출됩니다. {{reversedMessageCompulated}}

methods 정의 메서드와 같은 경우, {{reversedNameMethod()}}와 같은 호출에 ()를 추가해야 합니다. 그렇지 않으면 다음 내용이 view

function에서 렌더링됩니다. () { [native code] }

2. Computed에는 캐싱 기능이 있지만 메서드에는 없습니다. 여기서는 공식 문서를 인용합니다. Computed 속성은 종속성에 따라 캐시됩니다. 관련 종속성이 변경될 때만 재평가됩니다.

<!-- html -->
<div id="root">
    <p>Reversed message: "{{ reversedNameMethod() }}"</p>
    <p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>

// javascript
var vm = new Vue({
    el: '#root',
        data: {
        name: 'Alex',
        message: 'Hello'
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split('').reverse().join('')
      }
    },
    computed: {
        // 计算属性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    }
})

위 예에서 캐싱은 메시지가 변경되지 않는 한 reversedMessageCompulated 계산 속성에 여러 번 액세스하면 함수를 다시 실행할 필요 없이 즉시 이전 계산 결과를 반환한다는 의미입니다. reversedNameMethod() 메서드는 호출될 때마다 함수를 다시 실행합니다.

그러나 동시에 이는 Date.now()가 반응적 종속성이 아니기 때문에 다음 계산된 속성이 더 이상 업데이트되지 않는다는 것을 의미한다는 점에 유의하는 것이 중요합니다.

// javascript
computed: {
    now: function () {
        return Date.now()
    }
}

now 값이 생성됩니다. Vue가 인스턴스화되어 더 이상 변경되지 않을 때.

computed 및 메소드에 대한 기타 명령은 동일한 이름을 가질 수 없습니다.

Vue는 메소드와 데이터의 모든 항목을 Vue에서 생성된 객체로 프록시하여 계산된

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