VUE3 기본 튜토리얼: Vue.js 반응형 프레임워크를 사용하여 계산

Vue.js는 MVVM(Model-View-ViewModel) 패턴을 채택하고 사용자 인터페이스를 구축하는 간단하고 유연한 방법을 제공하는 것을 목표로 하는 오픈 소스 JavaScript 프레임워크입니다. 그중 리액티브 프레임워크는 Vue.js의 가장 중요한 기능 중 하나이며, 이를 통해 개발자는 데이터의 양방향 바인딩 및 반응형 업데이트를 수행할 수 있습니다. Vue.js에서 계산은 중요한 개념 중 하나입니다. 이 기사에서는 계산의 기본 사용법과 예를 소개합니다.

1. 무엇을 계산하나요?

computed는 동적으로 계산되는 속성의 기능을 구현할 수 있는 Vue.js의 속성입니다. 즉, Computed는 자신이 의존하는 데이터를 기반으로 새 값을 동적으로 계산할 수 있으며, 계산된 속성은 의존하는 데이터가 변경될 때 자동으로 업데이트됩니다. 메서드와 달리 계산은 메서드가 아니라 계산된 속성입니다.

2. 계산의 기본 사용

계산 속성은 다음과 같이 정의할 수 있습니다.

new Vue({
  // ...
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

위 코드에서는 메시지 속성을 기반으로 한 계산 결과인 reversedMessage의 계산 속성을 정의합니다.

다음으로 HTML 템플릿에서 계산된 속성을 사용하겠습니다. 계산된 속성의 값을 얻기 위해 더 이상 메시지를 직접 바인딩하지 않고 아래와 같이 계산된 속성을 사용합니다.

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

템플릿에서 차이 표현식 {{ }}을 사용하여 값을 표시할 수 있습니다. 계산된 속성의 reversedMessage를 계산된 속성으로 정의했으므로 Vue.js는 자동으로 계산을 수행하고 뷰를 업데이트합니다.

3. 계산된 속성이 의존하는 데이터가 변경되면 계산된 캐싱 메커니즘이 자동으로 다시 계산되어 뷰를 업데이트합니다. 그러나 계산된 속성이 의존하는 데이터가 변경되지 않는 경우 계산은 마지막 계산 결과를 기억하고 마지막 값을 직접 반환합니다. 이 캐싱 메커니즘은 애플리케이션 성능과 효율성을 향상시킬 수 있습니다.

예를 들어 다음 코드에서는 계산된 속성 fullName을 정의합니다.

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  }
})

처음으로 fullName에 액세스하면 콘솔에서 "계산된" 메시지를 출력합니다. 그러나 firstName 또는 lastName 속성의 값을 수정하면 계산은 매번 다시 계산하지 않고 마지막 계산 결과를 직접 반환합니다.

4. 계산된 것과 메서드의 차이점

계산된 것과 메서드는 모두 속성을 동적으로 계산하는 기능을 구현하는 데 사용될 수 있습니다. 주요 차이점은 계산된 속성의 캐싱 메커니즘에 있습니다.

예제에서는 계산된 속성 fullName과 getFullName 메서드를 정의했습니다.

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    getFullName: function () {
      console.log('method')
      return this.firstName + ' ' + this.lastName
    }
  }
})

템플릿에서 다음과 같은 방법으로 fullName과 getFullName을 호출할 수 있습니다.

<div id="example">
  <p>Computed fullName: "{{ fullName }}"</p>
  <p>Method fullName: "{{ getFullName() }}"</p>
</div>

getFullName 메서드를 호출할 때마다 캐시된 결과를 사용하지 않고 다시 계산됩니다. 따라서 메서드를 자주 호출해야 하는 경우 계산된 속성을 사용하면 애플리케이션의 성능과 효율성을 향상시킬 수 있습니다.

5. 계산된 예

다음은 장바구니의 총 가격을 계산하는 예입니다.

new Vue({
  // ...
  data: {
    items: [
      { name: 'iPhone', price: 6999, count: 1 },
      { name: 'iPad', price: 3888, count: 2 },
      { name: 'MacBook', price: 9888, count: 1 }
    ]
  },
  computed: {
    totalPrice: function () {
      var result = 0
      for (var i = 0; i < this.items.length; i++) {
        result += this.items[i].price * this.items[i].count
      }
      return result
    }
  }
})

템플릿에서 계산된 속성을 사용할 수 있습니다. 장바구니의 총 가격을 표시하려면:

<div id="example">
  <table>
    <thead>
      <tr>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.price * item.count }}</td>
      </tr>
      <tr>
        <td colspan="3">总价：</td>
        <td>{{ totalPrice }}</td>
      </tr>
    </tbody>
  </table>
</div>

위의 예에서는 항목 배열에 있는 모든 항목의 가격과 수량에 따라 계산된 totalPrice 속성을 정의했습니다. 배열에 있는 항목의 가격이나 수량이 변경될 때마다 Vue.js는 총 가격을 다시 계산하고 자동으로 뷰를 업데이트합니다.

6. 요약

Vue.js에서 계산은 매우 강력하고 중요한 기능입니다. 동적으로 계산된 속성을 구현하는 핵심입니다. 계산된 속성의 캐싱 메커니즘은 애플리케이션 성능과 효율성을 향상시킬 수 있습니다. 메서드와 달리 계산은 메서드가 아니라 계산된 속성입니다. 컴퓨팅을 학습하고 사용함으로써 우수한 Vue.js 애플리케이션을 보다 편리하고 효율적으로 구축할 수 있습니다.

위 내용은 VUE3 기본 튜토리얼: Vue.js 반응형 프레임워크를 사용하여 계산의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!