Vue.js 계산 속성과 메서드의 차이

소개

Vue.js 템플릿 제어 지시어 요약의 연속입니다.

이번에는 산출 프로퍼티와 메소드의 차이를 학습해 갑니다.

계산 속성computed

계산 속성computed은 함수에 의해 계산된 데이터를 반환할 수 있는 속성입니다.

예를 들어, 다음과 같이 마스터 슈 구문에 복잡한 논리를 작성하면 가독성이 나빠집니다.

<!-- 文字列を反転する式 -->
{{ message.split('').reverse().join('') }}

이러한 복잡한 로직을 실행할 때 계산 속성을 사용하는 것이 좋습니다.

또한 로직의 재이용성을 높이고 싶을 때 등에도 이용할 수 있다.
computed를 사용하여 코드를 작성해보십시오.

<div id="app">
  <p>
    {{ reverseMessage }} <!-- !sj.euV olleH -->
  </p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js',
    },
    // 算出プロパティの定義
    computed: {
      // メソッドの定義
      reverseMessage() {
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

어라? 이것 methods과 무엇이 다릅니다 ...
computed와 methods 각각의 차이를 깊이 파고있다.

계산 속성과 방법의 세 가지 차이점

① 속성과 방법
computed는 속성이므로 ()가 필요하지 않습니다.
methods는 메소드이므로 ()가 필요합니다.

<!-- computed -->
{{ reverseMessage }}
<!-- methods -->
{{ reverseMessage() }}

②getter와 setter
computed는 getter와 setter를 정의 할 수 있습니다.
methods 는 getter 밖에 정의할 수 없다.

③캐시
computed는 캐시됩니다.
methods는 캐시되지 않습니다.
methods는 호출 될 때마다 함수를 처리합니다.

요약

실행하고 싶은 처리의 내용에 따라서 computed인가 methods인가 구분하는 것이 좋을 것 같다.

그러나 현상 어떤 경우에 구분할지 이미지가 끓지 않는다.

이 근처는 실제로 응용 프로그램을 개발하면서 익힐 수 있을 것 같다.

지식이 깊어지는 대로, 추기해 갑니다

업데이트 내역

Vue.js의 기본 사용법 요약
Vue.js로 TO DO 앱 만들기
Vue.js 템플릿 제어 지시어 요약
Vue.js 계산 속성과 메서드의 차이 지금 코코