Vue에서 데이터 계산 및 모니터링을 구현하기 위해 계산 및 감시를 사용하는 팁

WBOY

풀어 주다： 2023-06-25 13:00:24

원래의

2412명이 탐색했습니다.

Vue.js는 풍부한 데이터 바인딩과 반응형 기능을 제공하여 웹 애플리케이션의 상태를 쉽게 관리할 수 있게 해주는 인기 있는 JavaScript 프런트 엔드 프레임워크입니다. 그중 Computed와 Watch는 Vue.js의 두 가지 중요한 데이터 처리 및 모니터링 도구입니다. 이 기사에서는 이를 사용하여 데이터 계산 및 모니터링 기술을 구현하는 방법을 소개합니다.

1.computed

computed 속성은 다른 속성의 값에 따라 달라지는 속성입니다. 즉, 다른 속성의 값이 변경되면 계산된 속성이 자동으로 다시 계산됩니다. 계산된 계산 속성에는 두 가지 주요 기능이 있습니다.

는 목록 항목의 총 수를 표시하거나 목록 데이터를 정렬하는 등 새 데이터를 계산하는 데 사용됩니다.
날짜나 금액 형식 등 기존 데이터를 처리합니다.

1.1 새 데이터 계산

Vue 인스턴스의 계산 객체에 여러 계산 속성을 정의할 수 있습니다. 계산된 속성에서 반환된 결과는 템플릿에서 직접 사용할 수 있으며 종속 속성이 변경될 때만 다시 계산됩니다. 예는 다음과 같습니다.

<template>
  <div>
    <p>商品数量: {{ products.length }}</p>
    <ol>
      <li v-for="(product, index) in sortedProducts" :key="index">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: "iPhone 12", price: 799 },
        { name: "MacBook Air", price: 999 },
        { name: "iPad Pro", price: 699 },
        { name: "AirPods Pro", price: 249 },
      ]
    }
  },
  computed: {
    sortedProducts: function() {
      return this.products.sort((a, b) => a.price - b.price);
    }
  }
}
</script>

로그인 후 복사

위 예에서는 속성을 계산하여 제품 목록을 정렬합니다. sortedProducts 계산 속성은 제품 가격을 오름차순으로 정렬한 다음 렌더링을 위해 템플릿의 v-for 지시문에 정렬된 결과를 반환합니다.

계산된 속성은 해당 속성이 변경되는 경우에만 다시 계산된다는 점에 유의해야 합니다. 따라서 sortedProducts 계산 속성에서 this.products를 사용하더라도 제품이 변경되지 않는 한 sortedProducts는 다시 계산되지 않습니다.

1.2 기존 데이터 처리

계산된 속성은 새 데이터를 계산하는 데 사용될 수 있을 뿐만 아니라 날짜나 금액 형식 지정 등과 같은 기존 데이터를 처리하는 데에도 사용할 수 있습니다. 예는 다음과 같습니다.

<template>
  <div>
    <p>订单时间: {{ formattedTime }}</p>
    <button @click="updateTime">更新时间</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderTime: new Date()
    }
  },
  computed: {
    formattedTime: function() {
      return this.orderTime.toLocaleString();
    }
  },
  methods: {
    updateTime: function() {
      this.orderTime = new Date();
    }
  }
}
</script>

로그인 후 복사

위 예에서는 속성을 계산하여 주문 시간을 현지 날짜 및 시간 문자열(toLocaleString)로 형식화하고 형식화된 결과를 템플릿에 표시합니다. 계산된 속성의 특성으로 인해 formattedTime은 orderTime이 변경될 때만 다시 계산됩니다.

2. watch

watch는 통합된 데이터 소스를 심층적으로 모니터링하는 기능입니다. 계산된 것과 달리 watch에서 모니터링하는 데이터 소스가 변경되면 템플릿이 자동으로 다시 렌더링되지 않고 작업을 수동으로 수행해야 합니다. watch는 주로 데이터 변경 사항을 모니터링하여 해당 작업을 트리거하는 데 사용됩니다. 예는 다음과 같습니다.

<template>
  <div>
    <p>剩余字符数: {{ charsLeft }}</p>
    <textarea v-model="text" @keyup="updateChars"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    }
  },
  watch: {
    text: function(val) {
      if (val.length > 10) {
        alert("输入字符数不能超过10个!");
      }
    }
  },
  computed: {
    charsLeft: function() {
      return 10 - this.text.length;
    }
  },
  methods: {
    updateChars: function() {
      this.charsLeft = 10 - this.text.length;
    }
  }
}
</script>

로그인 후 복사

위 예에서는 watch를 사용하여 입력 상자의 텍스트 변수를 모니터링합니다. 텍스트 길이가 10자를 초과하면 watch는 해당 작업을 실행하고 사용자가 계속 입력하지 못하도록 경고 상자를 표시합니다. 동시에 계산된 계산 속성을 통해 남은 문자 수를 계산하면 계산된 charsLeft 속성은 텍스트가 변경될 때만 다시 계산되는 것을 알 수 있습니다.

watch에서 모니터링하는 변수는 함수이며 새 값과 이전 값이라는 두 가지 매개변수를 받습니다. 이 두 매개변수를 기반으로 해당 작업을 수행할 수 있습니다. watch는 또한 특정 요구 사항에 따라 구성할 수 있는 심층 모니터링 및 즉시 실행과 같은 고급 옵션을 제공합니다.

3. 결론

computed와 watch는 Vue.js의 필수 도구로, 데이터의 복잡한 처리와 모니터링에 매우 적합합니다. 계산에서 여러 계산 속성을 정의하고 종속성을 통해 계산 순서와 업데이트 방법을 제어할 수 있습니다. Watch에서는 데이터 소스를 심층적으로 모니터링하고 데이터 소스의 변화에 실시간으로 대응할 수 있습니다. 계산 및 감시에는 특정 학습 및 사용 비용이 있지만 이러한 비용의 증가는 보다 유연하고 효율적인 Vue 애플리케이션을 구축하는 데 도움이 됩니다.

위 내용은 Vue에서 데이터 계산 및 모니터링을 구현하기 위해 계산 및 감시를 사용하는 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!