Vue3의 계산 함수에 대한 자세한 설명: 계산된 속성의 편리한 사용

Vue3의 계산 함수에 대한 자세한 설명: 계산된 속성의 편리한 사용

계산된 속성은 Vue에서 일반적으로 사용되는 방법으로 개발자가 데이터 조작 및 표시를 용이하게 하기 위해 템플릿에 논리적 계산을 배치하는 데 사용됩니다. Vue3에서는 계산된 속성은 여전히 ​​매우 중요한 함수이며, 계산된 속성을 사용하는 것이 계산된 함수보다 더 편리합니다. 이 글에서는 Vue3의 계산 함수에 대한 자세한 소개와 설명을 제공합니다.

계산 함수란 무엇인가요?

계산 함수는 Vue3에 내장된 함수로 주로 계산 속성을 생성하는 데 사용됩니다. 계산된 함수를 사용하면 계산된 속성을 쉽게 생성하여 코드를 더욱 간결하고 읽기 쉽게 만들 수 있습니다. 계산된 함수는 컴포넌트 인스턴스에서 기능적으로 선언되며, 계산된 속성이 의존하는 반응형 변수가 변경될 때마다 자동으로 업데이트됩니다.

계산 함수의 기본 사용법

계산 함수를 사용하여 계산 속성을 생성하려면 컴포넌트에서 함수 속성만 선언하면 됩니다. 다음은 계산 함수를 사용하여 계산 속성을 생성하는 간단한 예제 코드입니다.

<template>
  <div>
    <p>原来的值：{{ multiplied }}</p>
    <p>改变后的值：{{ multipliedByTwo }}</p>
    <button @click="updateValue">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10,
    }
  },
  computed: {
    multiplied() {
      return this.value * 2
    },
    multipliedByTwo() {
      return this.multiplied * 2
    },
  },
  methods: {
    updateValue() {
      this.value = 20
    }
  }
}
</script>

위 예제 코드에서는 계산 속성의 원래 값을 나타내기 위해 데이터 속성 값을 정의했습니다. 계산 함수를 통해 두 개의 계산 속성, 즉 곱셈과 곱셈ByTwo가 생성됩니다. 그 중 곱셈은 데이터 속성의 값 변수에 따라 달라지며, multipliedByTwo는 곱셈에 따라 달라집니다. 이러한 방식으로 우리는 계산된 속성을 쉽게 활성화하고 관련 값을 실시간으로 계산할 수 있습니다.

계산 함수의 고급 사용법

계산 함수에는 계산된 속성의 동작을 더 잘 제어할 수 있는 몇 가지 고급 사용법도 있습니다. 아래에서 하나씩 소개하겠습니다.

1. Getters 및 Setters

계산 함수는 getter 및 setter를 통해 계산된 속성의 읽기 및 업데이트를 제어할 수 있습니다. 게터는 계산된 속성에 대한 읽기 함수이고, 세터는 계산된 속성에 대한 업데이트 함수입니다. 기본적으로 계산된 속성은 읽기 전용이며 변경할 수 없지만 setters 함수를 통해 계산된 속성의 값을 직접 수정하여 강제 업데이트 목적을 달성할 수 있습니다.

다음은 getter 및 setter를 사용하여 계산된 속성의 예제 코드입니다.

<template>
  <div>
    <p>原来的价格：{{ price }}</p>
    <p>折扣后的价格：{{ discountedPrice }}</p>
    <button @click="applyDiscount">打折</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discountPercentage: 10
    }
  },
  computed: {
    price: {
      get() {
        return this.originalPrice
      },
      set(newPrice) {
        this.originalPrice = newPrice
      }
    },
    discountedPrice() {
      const discount = this.discountPercentage / 100
      return this.price - (this.price * discount)
    }
  },
  methods: {
    applyDiscount() {
      this.price = this.price - 10
    }
  }
}
</script>

위 예제 코드에서는 계산된 속성 가격을 선언하고 해당 getter 및 setter 함수를 정의합니다. 할인 가격은 가격에 따라 달라집니다. 할인 가격은 자동으로 업데이트됩니다. 또한 이 메소드를 실행하여 계산된 속성 가격을 직접 수정할 수 있는 applyDiscount 메소드도 정의하여 계산된 속성의 강제 업데이트가 가능하도록 했습니다.

2. 계산된 속성 캐싱

Vue3에서는 계산된 속성 캐싱이 기본적으로 활성화되어 있습니다. 즉, 계산된 속성의 종속 변수가 변경되지 않은 경우 계산된 속성은 다시 계산하는 대신 마지막 결과를 직접 반환합니다. 이를 통해 컴퓨팅 시간과 성능이 절약되고 코드 실행 효율성이 향상됩니다.

다음은 계산된 속성 캐싱을 위한 샘플 코드입니다.

<template>
  <div>
    <p>原来的数量：{{ count }}</p>
    <p>倍数：{{ multiplier }}</p>
    <p>计算结果：{{ computedValue }}</p>
    <button @click="updateCount">更新数量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      multiplier: 2
    }
  },
  computed: {
    computedValue() {
      console.log('计算属性执行')
      return this.count * this.multiplier
    }
  },
  methods: {
    updateCount() {
      this.count++
    }
  }
}
</script>

위의 샘플 코드에서는 개수와 승수의 곱을 계산하는 데 사용되는 계산된 속성인 계산된 값을 선언합니다. 마운트된 라이프사이클 후에는 계산된 속성이 한 번 실행되고 계산된 속성의 캐시가 활성화됩니다. updateCount 메소드에서는 count 변수의 값을 업데이트하여 계산된 값의 재계산을 트리거합니다. 이때 계산된 속성은 값이 변경될 때만 다시 계산되는 것을 콘솔에서 확인할 수 있습니다.

계산된 속성의 캐싱을 활성화하지 않으려면 계산된 함수에서 ref 함수를 사용할 수 있습니다. ref 함수는 반응형 객체를 반환하며, 객체에 접근할 때마다 계산 함수가 다시 계산됩니다.

import Vue, { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const computedValue = () => {
      console.log('计算属性执行')
      return count.value * 2
    }

    return {
      count,
      computedValue
    }
  }
}

Summary

계산 함수는 Vue3에서 매우 중요한 함수입니다. 계산된 속성을 생성하여 데이터를 조작하는 매우 편리한 방법을 제공합니다. 이 기사의 서문을 통해 독자들은 계산 기능에 대한 기본적인 이해를 갖추고 일부 고급 사용법과 기술을 숙달했다고 믿습니다. Vue3 개발에서 계산 기능의 사용을 익히는 것은 코딩 작업에 확실히 큰 도움이 될 것입니다.

위 내용은 Vue3의 계산 함수에 대한 자세한 설명: 계산된 속성의 편리한 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!