VUE3 초보자 가이드: 반응형 데이터 및 계산된 속성

현대 프런트엔드 프레임워크에서 반응형 데이터와 계산된 속성은 매우 중요한 개념입니다. Vue3 초보자로서 이 두 가지 개념을 학습한 후에는 Vue 프레임워크의 기능과 사용법을 더 잘 이해할 수 있습니다.

이 글은 기본 개념, 사용법, 예시를 포함하여 Vue3의 반응형 데이터와 계산된 속성을 설명하는 데 중점을 둘 것입니다. 아직 Vue3에 익숙하지 않다면 Vue3의 기본을 먼저 배워보세요.

1. 반응형 데이터란?

Vue3에서 반응형 데이터는 변경 사항을 자동으로 추적하고 즉시 페이지를 업데이트할 수 있는 데이터입니다. Vue3에서 반응형 데이터는 일반 JavaScript 객체, 기본 데이터 유형, 배열 등이 될 수 있습니다.

Vue3에서 반응형 데이터를 사용하는 것은 매우 간단합니다. 데이터 객체에 해당 속성을 정의하기만 하면 됩니다. Vue 프레임워크는 이러한 속성을 기반으로 데이터 바인딩을 완료하여 반응형 기능을 달성합니다.

예:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue3!"
    };
  }
};
</script>

위 코드에서는 데이터 객체를 정의하고 그 안에 속성 메시지를 정의합니다. 템플릿에서는 차이 표현식 {{ message }}를 사용하여 이 속성을 표시합니다. 메시지 값을 수정하면 페이지의 내용이 자동으로 업데이트됩니다.

2. 계산된 속성이란 무엇입니까?

Vue3에서 계산된 속성은 다른 속성 값을 기반으로 계산되는 템플릿에 사용되는 속성입니다. 계산된 속성의 값은 캐시되며, 해당 속성이 종속된 속성이 변경될 때만 다시 계산됩니다.

Vue3에서 계산된 속성을 사용하는 것도 매우 간단합니다. 계산된 개체에서 해당 속성을 정의하기만 하면 됩니다. 계산된 개체의 각 속성은 함수여야 하며 계산된 값을 반환해야 합니다.

예:

<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

위 코드에서는 firstName과 lastName이라는 두 가지 데이터 속성을 정의합니다. 또한 firstName 및 lastName의 값을 기반으로 새 값인 전체 이름을 계산하는 계산된 속성 fullName을 정의합니다. 이때 fullName의 값은 캐싱되며, firstName 또는 lastName이 변경될 때까지 다시 계산되지 않습니다.

3. 반응형 데이터 및 계산된 속성의 예

다음은 반응형 데이터 및 계산된 속성을 사용하여 간단한 장바구니 기능을 구현하는 방법을 보여주는 간단한 예입니다.

<template>
  <div>
    <div>商品列表：</div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}元
        <button @click="addToCart(item)">加入购物车</button>
      </li>
    </ul>
    <div>购物车：</div>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}元 - 数量: {{ item.quantity }}
        <button @click="removeFromCart(item)">x</button>
      </li>
    </ul>
    <div>总价: {{ totalPrice }}元</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "苹果", price: 8 },
        { id: 2, name: "香蕉", price: 3 },
        { id: 3, name: "橙子", price: 5 }
      ],
      cart: []
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    addToCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx === -1) {
        this.cart.push({ ...item, quantity: 1 });
      } else {
        this.cart[idx].quantity += 1;
      }
    },
    removeFromCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx !== -1) {
        this.cart.splice(idx, 1);
      }
    }
  }
};
</script>

위 코드에서는 항목과 장바구니라는 두 가지 속성을 포함하는 데이터 개체를 정의합니다. items는 제품 목록을 나타내고 cart는 장바구니를 나타냅니다.

또한 계산된 속성 totalPrice를 정의하여 장바구니에 있는 각 항목의 가격과 수량을 기반으로 장바구니의 총 가격을 계산합니다.

마지막으로 addToCart와 RemoveFromCart라는 두 가지 메서드도 정의했습니다. addToCart는 지정된 제품을 장바구니에 추가하는 데 사용되며, RemoveFromCart는 장바구니에서 지정된 제품을 제거하는 데 사용됩니다.

이 컴포넌트를 사용할 때 상위 컴포넌트에 props를 도입하고 전달하기만 하면 Vue3가 자동으로 데이터 바인딩 및 컴포넌트 렌더링을 완료합니다.

요약

Vue3의 반응형 데이터와 계산된 속성은 Vue3 프레임워크의 핵심 기능 중 하나이며 이를 마스터하는 것은 Vue3 개발자에게 매우 중요합니다.

Vue3에서는 반응형 데이터가 자동으로 변경 사항을 추적하고 페이지를 즉시 업데이트할 수 있습니다. 계산된 속성은 다른 속성 값을 기반으로 새로운 속성 값을 계산하고 계산 결과를 캐시할 수 있습니다.

간단한 장바구니 예제를 통해 Vue3의 반응형 데이터와 계산된 속성을 사용하여 매우 동적인 인터페이스를 구현하는 방법을 보여줍니다. Vue3를 더 잘 배우고 싶다면 Vue3 공식 문서 및 기타 관련 글과 연계하여 공부하시기 바랍니다.

위 내용은 VUE3 초보자 가이드: 반응형 데이터 및 계산된 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!