Vue.js 계산 속성 심층 분석

previous post에서 배운 것처럼 Vue.js 계산 속성은 복잡한 템플릿 표현식을 정리하고 코드를 읽고 유지 관리할 수 있도록 도와줍니다.
이것이 요지입니다. 이 게시물에서 자세히 살펴보겠습니다.

우리를 돕기 위해 새로운 Vue.js 앱을 만들어 봅시다.

<div id="app">
  <p> {{ personalInfo }} </p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
  let app = Vue.createApp({
    data: function () {
      return {
        firstName: 'Vue',
        lastName: 'Noob',
        age: 21,
        locality: 'Vueland',
      };
    },
    computed: {
      personalInfo(){
        return `My name is ${this.firstName} ${this.lastName}, I am ${this.age} years old. I am based in ${this.locality}.`;
      }
    }
  }).mount('#app');
</script>

계산된 속성의 반응성

계산된 속성은 모든 종속성의 변경 사항을 관찰하고 그에 따라 업데이트합니다. 위의 인스턴스에서 personalInfo 계산 속성은 firstName, lastName, age 및 locality 변수의 변경 사항을 관찰하고 해당 값의 변경 사항을 감지하면 변경 사항을 반영하도록 자체 업데이트됩니다.

Try changing the values of those variables to see the results.

계산된 속성의 캐싱

계산된 속성이 갖는 한 가지 필수 기능은 캐싱입니다. 이것은 계산된 속성이 메소드에 비해 갖는 이점입니다. Vue.js 속성은 will be covered later 입니다.

Vue.js 계산 속성의 캐싱에 대한 요점은 계산 속성이 확인되면 Vue.js가 해당 결과 값을 캐시하고, 이 계산 속성에 대한 새로운 참조가 생성되면 캐시된 값이 반환된다는 것입니다. 계산된 속성 내부의 식입니다. 포함된 표현식의 재실행은 methods 의 경우에 발생합니다.

계산된 속성은 종속성 중 하나가 변경된 경우에만 재평가됩니다.
이는 특히 많은 계산이 필요한 복잡한 식을 실행할 때 물리적 리소스를 절약하는 데 도움이 되므로 중요한 특성입니다. 앱이 성장하고 코드베이스가 커질수록 더욱 그렇습니다.

계산된 속성의 단점

계산된 속성 캐싱은 건전하지만 경우에 따라 부족합니다. 마지막 예제에 다음 수정 사항을 복사하여 실행합니다.

<div id="app">
  <p> {{ personalInfo }} </p>
+ <p> {{ morePersonalInfo }} </p>
+ <p> {{ morePersonalInfoDelayed }} </p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
  let app = Vue.createApp({
    data: function () {
      return {
        firstName: 'vue',
        lastName: 'noob',
        age: 21,
        locality: 'Vueland',
+       time: Date.now(),
+       morePersonalInfoDelayed: ''
      };
    },
    computed: {
      personalInfo(){
        return `My name is ${this.firstName} ${this.lastName}, I am ${this.age} years old. I am based in ${this.locality}.`;
      },
+      morePersonalInfo(){
+       return `I'll be travelling on ${new Date(this.time).toUTCString()}.`;
+     }
    },
+   mounted(){
+     setTimeout(() => {
+       this.morePersonalInfoDelayed = this.morePersonalInfo;
+     }, 5000);
+   }
  }).mount('#app');
</script>

The mounted() function in the above example is a lifecycle hook, a topic that will be covered later.

이 예에서는 morePersonalInfo 및 morePersonalInfoDelayed 계산 속성이 모두 5초 후에 해결되는 morePersonalInfoDelayed에도 불구하고 동일한 문자열을 제공한다는 것을 알 수 있습니다. 이것은 Date.now() 및 Math.random()과 같은 비반응적 종속성을 처리할 때 계산된 속성이 부족한 부분입니다.
이러한 경우 methods을 사용하는 것이 적절한 방법입니다.

계산된 속성 사용자 지정

계산된 속성은 특성상 getter 전용입니다. 즉, 속성에서 값을 얻을 것으로 예상하고 값을 할당하면 안 됩니다.
계산된 속성에 값을 변경하거나 할당하는 것은 무의미합니다. 속성에서 얻은 값은 상태의 임시 스냅샷이고 종속성이 변경될 때 변경될 수 있기 때문입니다. 이 기능은 처음에 속성을 사용할 때 사용하도록 목표로 삼았습니다.
또한 이 작업을 시도하면 런타임 경고가 트리거됩니다.

계산된 속성 동작을 수동으로 사용자 지정해야 하는 몇 가지 경우에 getter 및 setter를 제공하여 그렇게 할 수 있습니다.

다음 예를 관찰하십시오.

<div id="app2">
  <p> {{ priceOfAnItem }} </p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
  let app2 = Vue.createApp({
    data: function () {
      return {
        item: 'Apple',
        price: '2'
      };
    },
    computed: {
      priceOfAnItem: {
        get(){
          return `One ${this.item} costs ${this.price} dollars`;
        },
        set(resolvedVal){
          [,this.item,,this.price,] = resolvedVal.split(' ');
        }
      }
    },
    mounted(){
      setTimeout(() => {
        this.priceOfAnItem = `One Orange costs 5 dollars`;
      }, 3000);
    }
  }).mount('#app2');
</script>

위의 예를 실행하면 3초 후에 항목 및 가격 값이 각각 "Orange" 및 5로 변경되는 것을 볼 수 있습니다. 이는 setter의 도움으로 계산된 속성 값을 업데이트한 후에 발생합니다.

이 방법으로 계산된 속성을 업데이트하면 앱에서 런타임 경고 및 예기치 않은 결과가 발생하지 않습니다.

getter 함수를 사용하여 순수 계산만 수행하고 함수 및 DOM 변경 호출과 같은 부작용 생성 활동을 처리하지 않는 것이 좋습니다. 이러한 부작용 생성 로직은 Vue.js 내에서 수행할 수 있습니다watchers.

이 게시물의 예제에 대한 소스 코드는 in this file에서 찾을 수 있습니다.