Vue3의 계산 기능: 계산된 속성의 사용을 용이하게 합니다.

Vue3의 계산된 함수: 계산된 속성의 사용을 용이하게 합니다

Vue.js는 현재 가장 인기 있는 JavaScript 프레임워크 중 하나입니다. 템플릿 구문, 데이터 바인딩, 구성 요소화 및 기타 기능을 통해 Vue.js는 프런트엔드 개발에서 점점 더 널리 사용되고 있습니다. Vue.js에서 계산된 함수는 코드를 단순화하고, 반복 계산을 줄이고, 코드의 성능과 가독성을 향상시키는 데 도움이 되는 매우 실용적인 기능입니다. Vue.js 3.x 버전의 경우, 이 글에서는 계산 함수의 사용법과 장점을 자세히 소개합니다.

1. 계산 함수의 정의 및 기본 사용법

계산 함수는 Vue.js의 매우 실용적인 기능으로, 템플릿에 사용된 표현식을 기반으로 자동으로 값을 계산하고 결과를 반환하는 데 도움이 됩니다. 메소드 메소드와 달리 계산 함수는 정의된 메소드를 호출할 수 있을 뿐만 아니라 데이터 속성에서 직접 값을 얻을 수도 있으며, 계산 함수는 자신이 의존하는 속성 값이 변경될 때만 다시 계산됩니다.

Vue.js 3.x 버전에서는 계산된 객체를 구성 요소에 추가하여 계산된 속성을 정의할 수 있습니다. 예를 들어 상품의 총 가격을 계산해야 하는 구성 요소에서 코드는 다음과 같습니다.

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      }
    }
  }
</script>

위 코드에서는 totalPrice의 계산 속성을 포함하는 계산 개체를 정의합니다. 템플릿에서는 {{totalPrice}}를 직접 사용하여 제품의 총 가격을 표시할 수 있습니다. 이때 totalPrice는 자동으로 가격과 금액의 곱을 계산하고 그 결과를 템플릿으로 반환합니다.

2. 계산된 함수의 특징

1. 계산된 속성이 캐시됩니다.

Vue.js에서 계산된 함수에는 캐싱 특성이 있습니다. 즉, 계산된 메서드가 의존하는 데이터가 변경되지 않은 경우 계산된 메서드는 다시 계산하는 대신 캐시된 결과를 직접 반환합니다. 이렇게 하면 반복되는 계산이 절약되고 코드 성능이 향상됩니다. 예를 들어 위 코드를 다음과 같이 수정할 수 있습니다.

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
    <p>商品总价（不使用缓存）：{{totalPriceNoCache}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      },
      totalPriceNoCache() {
        return this.price * this.amount + Math.random();
      }
    }
  }
</script>

위 코드에서는 새로운 totalPriceNoCache 계산 속성을 추가했습니다. 계산 결과에 간섭하기 위해 난수를 사용하기 때문에 매번 결과가 달라집니다. 템플릿에서 totalPrice는 한 번만 계산되는 반면 totalPriceNoCache는 매번 다시 계산되는 것을 볼 수 있습니다.

2. 계산된 속성은 다른 속성에 따라 달라질 수 있습니다.

계산 방법의 계산 결과는 현재 구성 요소의 데이터 속성뿐만 아니라 다른 구성 요소의 데이터 속성, 계산 속성 및 props 속성을 기반으로 할 수도 있습니다. 구성 요소. Vue.js는 이러한 종속성을 자동으로 추적하고 종속성이 변경되면 계산된 메서드의 결과를 다시 계산합니다.

예를 들어 다음은 다른 계산된 속성을 기반으로 한 예를 보여줍니다.

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.discount + this.tax;
      },
      discount() {
        return this.price * 0.8;
      },
      tax() {
        return this.price * 0.1;
      }
    }
  }
</script>

위 코드에서는 totalPrice, 할인 및 세금이라는 세 가지 계산된 속성을 정의합니다. 그 중 totalPrice 계산은 계산된 두 가지 속성인 할인과 세금을 사용합니다.

요약

계산 함수는 Vue.js의 매우 실용적인 기능으로, 템플릿에 사용된 표현식을 기반으로 값을 자동으로 계산하고 결과를 반환하는 데 도움이 됩니다. 메소드 메소드와 달리 계산 함수는 정의된 메소드를 호출할 수 있을 뿐만 아니라 데이터 속성에서 직접 값을 얻을 수도 있으며, 계산 함수는 자신이 의존하는 속성 값이 변경될 때만 다시 계산됩니다. Vue.js 3.x 버전에서는 계산 함수에 캐싱 기능이 있어 반복 계산을 절약하고 코드 성능을 향상시킬 수 있습니다. 동시에 계산된 메서드의 결과는 다른 구성 요소의 데이터 속성, 계산된 속성 및 props 속성을 기반으로 할 수 있습니다. Vue.js는 이러한 종속성을 자동으로 추적하여 코드의 가독성과 유지 관리성을 향상시킵니다.

위 내용은 Vue3의 계산 기능: 계산된 속성의 사용을 용이하게 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!