계산 속성과 방법의 차이

Vue.js의 초학 필???요점算出プロパティとメソッドの違い이므로 차이점을 정리해 봅시다.

이번 주인공.

computed

계산 속성은 함수가 계산한 데이터를 되돌릴 수 있는 속성이다.어쨌든 여러분들이 Getter의 역할이라고 생각할 수 있었으면 좋겠어요.

<div id="app">
  {{ fullName }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: 'Sato',
    lastName: 'Taro'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  } 
})

methods

아까의 예라면 사용 방법도 같은 일을 실현할 수 있다.

<div id="app">
  {{ fullName }}
  {{ fullNameMethod() }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: 'Sato',
    lastName: 'Taro'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    fullNameMethod: function() {
      return this.firstName + ' ' + this.lastName
    }
  } 
})

computed vs methods

계산 속성과 방법의 차이

컴퓨터 속성
메서드
기법
() 필요 없음
() 필요
용도
getter(setter)
getter, setter
캐시
이불
하지 않다

기법의 차이

computed
"("= 매개변수와 함께 처리할 수 없습니다.
methods
매개변수를 사용하여 처리할 수 있는 "("="필요

용도가 다르다

computed
데이터 가공 수반 획득(getter) ※ 1
methods
데이터를 얻는 데 사용될 뿐만 아니라 조작과 데이터 업데이트 등 각종 처리에도 사용된다
(※ 1) Setter 함수 계산
계산 속성은 기본적으로 Getter만 있지만 setter로도 사용할 수 있습니다.

// ...
computed: {
  fullName: {
    // getter 関数
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter 関数
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

참조: 공식 Vue, js

속성 계산 캐시

다음은 이 문장의 주요 내용이다.
속성과 방법을 계산하는 구분 방법으로 캐시가 있는지 없는지를 고려합니다.

캐시 작업 확인

Math의 임의 함수를 사용하여 캐시가 다르다는 것을 설명합니다.

<div id="app">
  メソッド
  <ol>
    <li> {{ getDate() }}</li>
    <li> {{ getDate() }}</li>
    <li> {{ getDate() }}</li>  
  </ol>
  算出プロパティ
  <ol>
    <li>{{ date }}</li>
    <li>{{ date }}</li>
    <li>{{ date }}</li>
  </ol>
</div>

var app = new Vue({
  el: "#app",
  computed: {
    date: function () {
    　console.log("computed");
      return Math.random();
    }
  },
  methods: {
    getDate: function () {
    　console.log("methods");
      return Math.random();
    }
  }
});

결과 내보내기

メソッド
0.523744236259859
0.29754866940841374
0.3024997149055251

算出プロパティ
0.19494595412700444
0.19494595412700444
0.1949459541270044

이렇게 똑같은 매쉬.random () 을 사용해도 계산 속성은 모두 같은 값에 대해 분산된 값으로 변한다.

계산 속성은 세 번 그려졌지만, 컨트롤러 로그는 한 번만 표시됩니다.

속성에 의존하지 않으면, 한 번만computed를 실행합니다

methods는 다시 그릴 때 자주 실행되며, 계산 속성의 처리는 속성 (this.~)이 변할 때만 실행됩니다.
매번 같은 결과가 나오면 한 번 처리했으면 좋겠다는 생각이 주를 이룬다.
공식 문서의 언어 算出プロパティはリアクティブな依存関係にもとづきキャッシュされる 를 사용하면 이것을 표시합니다.

활성 데이터

Vue 클래스 데이터 옵션에 설정된 데이터는 Vue입니다.js의 세계에서 재활동 데이터라고 부른다.
데이터의 변화를 감지해 자동으로 반영할 수 있기 때문이다.
현재 데이터에 대한 의존성

  data: {
    sum: 1,
  },
  computed: {
    date: function () {
    　console.log("computed");
      return Math.random() + this.sum; // sumが更新されたら再実行される
    }
  }

활성 데이터에 의존하지 않음

  computed: {
    date: function () {
      return Math.random(); // キャッシュされ2度と実行されない
    }
  }

캐시 기능은 이 정도의 처리라면 큰 변화가 없지만 대량의 배열 데이터를 순환하는 원가가 높은 처리가 있다면 성능이 크게 달라질 수 있다.

총괄: 계산 속성과 방법의 구분 사용

계산 속성
• 매개 변수가 필요 없는 간단한 처리 시 (용도 이해를 위해)
• 캐시가 유효한 상태에서 처리를 고속화하려는 경우
메서드
・매개 변수 처리 필요
・억지로 캐시하기 싫은 상태에서 수치를 자주 업데이트하려는 경우(아까 랜덤 함수 처리 등)
• 캐시 내용을 잘 모르는 경우 (잘 모르면 계산 속성을 사용하는 오류가 발생할 수 있습니다)

마지막으로 한마디.

계산 속성과 방법의 차이는 キャッシュを意識しろ죠!

참고 자료

Vue.공식 문서
다음으로 시작되는 Vue.js 실천 입문