Vue.js의 계산 속성 기본 사항: Composition API

계산된 속성

반응형 객체를 생각해 봅시다:

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

이 개체에서는 저자가 책을 출판했는지 여부를 나타내는 메시지를 표시하려고 합니다.

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

author.books를 기반으로 계산을 수행했습니다. 템플릿에 표시되는 메시지는author.books의 값에 따라 다릅니다. 이 계산을 템플릿에서 여러 번 사용할 수 있지만 반복해서 작성하고 싶지는 않습니다. 따라서 반응형 데이터가 포함된 복잡한 로직에는 계산된 속성을 사용해야 합니다.

계산된 속성 사용 예:

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// A computed reference
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

이 예에서는PublishedBooksMessage라는 계산 속성을 정의했습니다. 계산() 함수에는 getter 함수가 필요하며 반환된 값은 계산된 참조입니다. PublishedBooksMessage.value를 사용하여 계산된 결과에 액세스할 수 있습니다. 그러나 템플릿에서는 계산된 참조가 자동으로 언래핑되므로 .value를 추가하지 않고도 참조할 수 있습니다.

계산된 속성은 반응적 종속성을 추적합니다. Vue는PublishedBooksMessage의 계산이author.books의 값에 따라 다르다는 것을 알고 있으며,author.books가 변경되면PublishedBooksMessage에 의존하는 모든 컨텍스트를 업데이트합니다.

계산된 캐싱과 방법

다음 방법을 사용해도 동일한 결과를 얻을 수 있습니다.

<p>{{ calculateBooksMessage() }}</p>

구성요소:

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

계산된 속성 대신 메소드와 동일한 함수를 정의할 수 있습니다. 두 접근 방식 모두 동일한 결과를 산출합니다. 그러나 계산된 속성은 캐시된다는 점을 강조하고 싶습니다. 이는
계산된 속성은 반응적 종속성이 변경될 때만 재평가됩니다. 구성 요소가 다시 렌더링될 때 작성자.books의 값이 변경되지 않은 경우 getter 함수를 다시 실행하지 않고 이전에 계산된 결과를 반환합니다.

캐싱이 필요한 이유는 무엇입니까?

대규모 배열을 반복하고 많은 계산을 수행해야 하는 비용이 많이 드는 계산 목록이 있는 시나리오를 생각해 보세요. 캐싱 없이 목록에 의존하는 다른 계산된 속성이 있는 경우 필요한 것보다 훨씬 더 자주 목록의 getter를 실행하게 됩니다!

모범 사례

게터에는 부작용이 없어야 합니다. 계산된 게터 함수는 순수한 계산만 수행하고 부작용을 피하는 것이 중요합니다.

예를 들어, 다른 상태를 변경하거나, 비동기 요청을 하거나, 계산된 getter 내에서 DOM을 변경하지 마세요! 계산된 속성을 다른 값에서 값을 파생시키는 방법으로 생각하십시오. 유일한 책임은 해당 값을 계산하고 반환하는 것입니다.

결론

Vue.js에서 반응형 데이터로 계산을 수행하는 방법을 배웠습니다. 애플리케이션의 높은 성능을 보장하려면 Vue.js의 반응형 데이터를 기반으로 하는 작업에 계산된 속성을 사용해야 합니다.

위 내용은 Vue.js의 계산 속성 기본 사항: Composition API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!