Vue에서 계산을 사용하여 반응형 데이터를 수신하고 DOM을 업데이트하는 방법

Vue는 반응형 데이터 바인딩과 구성 요소 기반 구성을 결합하여 프런트엔드 개발을 단순화하는 인기 있는 JavaScript 프레임워크입니다. Computed는 Vue의 반응형 데이터를 사용하는 방법으로 종속 데이터를 기반으로 계산된 속성을 동적으로 생성하고 데이터 변환 및 표시를 실현하며 중간 결과를 자동으로 캐시하여 성능을 향상시킬 수 있습니다. 이 기사에서는 계산을 사용하여 반응형 데이터를 수신하고 DOM을 업데이트하는 방법을 소개합니다.

1. 계산의 기본 사용법

Vue에서는 계산 속성을 사용하여 계산 속성을 정의할 수 있습니다. 구문 형식은 다음과 같습니다.

computed: {
  propertyName: function () { /*计算并返回属性的值*/ }
}

여기서 propertyName은 계산된 속성의 이름이고 function()은 특정 계산 방법입니다. 이 메소드에서 Vue 인스턴스의 데이터 속성에 액세스하여 속성 값을 계산할 수 있습니다. 예:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 2, // 商品单价
      amount: 3 // 购买数量
    }
  },
  computed: {
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

이 예에서는 두 가지 응답 데이터인 가격과 금액에 의존하는 계산된 속성 totalPrice를 정의합니다. 해당 값이 변경되면 totalPrice 값도 동적으로 업데이트됩니다. 이 계산된 속성의 값을 표시하기 위해 템플릿에서 {{totalPrice}}를 사용합니다. 우리는 DOM을 직접 업데이트할 필요가 없습니다. Vue는 속성을 계산하는 방법을 자동으로 실행하고 해당 DOM 요소를 업데이트합니다.

2. 계산된 종속성 캐시

계산된 속성의 또 다른 중요한 기능은 종속성 캐시입니다. 즉, 계산된 속성이 의존하는 반응형 데이터가 변경되지 않은 한 계산된 속성은 다시 계산되지 않고 마지막 결과를 직접 반환합니다. 이를 통해 불필요한 계산을 방지하고 프로그램 실행 효율성을 향상시킬 수 있습니다.

예를 들어 위의 예에서는 계산된 totalPrice 속성을 여러 번 읽습니다. 예:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价1：{{totalPrice}}元</p>
    <p>总价2：{{totalPrice}}元</p>
  </div>
</template>

보시다시피 totalPrice를 두 번 읽습니다. 그러나 totalPrice는 가격이나 금액이 변경되는 경우에만 다시 계산되므로 반복 계산을 효과적으로 피할 수 있습니다.

3. 계산된 getter 및 setter

위에 소개된 기본 사용법 외에도 계산에서는 getter 및 setter의 정의도 지원합니다. 이는 계산된 속성을 할당하는 동안 데이터 유효성 검사, 데이터 형식 지정 등과 같은 추가 작업을 수행할 수 있음을 의미합니다.

computed의 getter 및 setter 구문 형식은 다음과 같습니다.

computed: {
  propertyName: {
    get: function () {},
    set: function () {}
  }
}

여기서 propertyName은 계산된 속성의 이름이고, 계산된 속성의 값은 get 함수에 반환되며, 계산된 속성의 값은 집합에 할당됩니다. 기능.

예를 들어 위의 예에서는 setter를 사용하여 제품 단가를 수정하지만 제한 단가는 0보다 작을 수 없습니다.

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      _price: 2, // 商品原始价格(不对外暴露)
      amount: 3 // 购买数量
    }
  },
  computed: {
    price: {
      get: function () {
        return this._price // 返回商品价格
      },
      set: function (value) {
        if (value < 0) {
          console.log("商品单价不能小于0")
          return
        }
        this._price = value // 修改商品价格
      }
    },
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

이 예에서는 밑줄이 붙은 _price 응답 데이터를 사용하여 제품의 실제 단가를 저장하고 getter 및 setter 작업을 통해 가격을 계산된 속성으로 정의합니다. setter에서는 사용자가 입력한 가격이 음수인지 확인하고, 음수이면 오류 메시지를 출력하고, 그렇지 않으면 _price에 할당합니다.

Summary

computed는 Vue에서 반응형 데이터를 사용하는 매우 편리한 방법입니다. 종속 반응형 데이터를 기반으로 계산된 속성을 동적으로 생성하고 중간 결과를 자동으로 캐시하여 성능을 향상할 수 있습니다. 데이터 형식 지정, 데이터 확인 등과 같은 계산된 속성의 getter 및 setter에서 다양한 데이터 작업을 수행할 수 있습니다. 이를 통해 코드를 단순화하고 개발 효율성을 높일 수 있습니다.

위 내용은 Vue에서 계산을 사용하여 반응형 데이터를 수신하고 DOM을 업데이트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!