Vue 문서의 계산 속성 함수에 대한 자세한 설명-View.js-php.cn

Vue.js는 개발을 촉진하는 다양한 기능과 구성 요소를 제공하는 인기 있는 프런트 엔드 프레임워크입니다. 매우 중요한 기능 중 하나는 계산된 속성 함수입니다. 계산된 속성은 데이터를 기반으로 새 속성 값을 동적으로 계산할 수 있으므로 템플릿에서 복잡한 표현식을 직접 계산할 필요가 없습니다. 이 글에서는 Vue 문서의 계산된 속성 함수를 자세히 소개합니다.

1. 계산된 속성의 정의 및 사용법

계산된 속성은 Vue의 특수 속성이며 해당 값은 함수입니다. Vue 인스턴스 객체에서 계산된 속성을 정의하는 예:

var vm = new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

로그인 후 복사

위 코드에서 계산된 속성 reversedMessage는 Vue 인스턴스 객체에 정의되어 있으며 해당 값은 함수이며 Reversed를 반환합니다. 메시지. reversedMessage，它的值是一个函数，返回的是一个经过反转的消息。

计算属性可以在模板中像数据属性一样使用，例：

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Reversed message: {{ reversedMessage }}</p>
</div>

로그인 후 복사

在渲染的时候，“Original message:”和“Reversed message:”会分别显示“Hello World”和“dlroW olleH”。

二、计算属性的缓存

计算属性有一个很重要的特性，就是对于相同的输入返回相同的输出，所以它们被缓存了起来。例如，在上述示例中，只要message没有改变，多次使用reversedMessage都会返回相同的字符串。

这个特性在模板中使用计算属性的时候非常有用，因为它避免了在模板中重复计算复杂的表达式。

三、计算属性的getter和setter

在计算属性中，getter函数是必须的，它定义了计算属性的输出值。在一些情况下，你可能需要添加一个setter函数，它定义了计算属性的输入值。

例如，我们可以定义一个计算属性fullName，它的getter返回一个拼接了firstName和lastName的字符串，setter可以分离fullName的内容为firstName和lastName。

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // Getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // Setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

로그인 후 복사

在上述代码中，我们可以通过fullName的getter获取当前的全名，也可以通过setter设置新的全名。例如：

console.log(vm.fullName) // John Doe

vm.fullName = 'Jane Smith'
console.log(vm.firstName) // Jane
console.log(vm.lastName) // Smith

로그인 후 복사

四、计算属性的实时计算

计算属性是对数据属性进行实时计算的最好方法。Vue在数据属性改变后，它会在下一次需要渲染模板的时候计算新的计算属性的值。如果计算属性依赖的数据没有改变，计算属性就会使用之前缓存的值。

var vm = new Vue({
  data: {
    radius: 5
  },
  computed: {
    diameter: function () {
      return this.radius * 2
    },
    circumference: function () {
      return 2 * Math.PI * this.radius
    }
  }
})

로그인 후 복사

在上述代码中，我们定义了一个计算属性diameter和circumference，它们都依赖于radius属性。当radius属性改变时，这些计算属性会重新计算。例如：

console.log(vm.diameter) // 10

vm.radius = 10
console.log(vm.circumference) // 62.83185307179586

로그인 후 복사

五、计算属性和方法的区别

在Vue中，有一个很相似的概念叫做方法，方法可以在模板中用v-on指令来调用。方法和计算属性都可以根据数据属性的变化来改变它们的值。

那么方法与计算属性的区别在哪里呢？

首先，与计算属性不同，方法总是会重新计算，并不能像计算属性一样缓存它们的结果。方法通常适用于需要每次重新计算的复杂逻辑或需要传入特定参数的逻辑。

其次，计算属性只有getter，而方法只有setter。虽然方法可以返回一个值，但是这个返回值并不会被缓存。

最后，计算属性可以像数据属性一样方便地在模板中使用，而对于方法必须使用v-on

계산된 속성은 데이터 속성과 같은 템플릿에서 사용할 수 있습니다. 예:

rrreee

렌더링할 때 "원본 메시지:" 및 "역전된 메시지:"는 각각 "Hello World" 및 "dlroW olleH"를 표시합니다.

2. 계산된 속성 캐싱🎜🎜계산된 속성에는 동일한 입력에 대해 동일한 출력을 반환하므로 캐시되는 매우 중요한 기능이 있습니다. 예를 들어, 위의 예에서 reversedMessage를 여러 번 사용하면 메시지가 변경되지 않는 한 동일한 문자열이 반환됩니다. 🎜🎜이 기능은 템플릿에서 복잡한 표현식을 반복적으로 계산하는 것을 방지하므로 템플릿에서 계산된 속성을 사용할 때 매우 유용합니다. 🎜🎜3. 계산된 속성의 Getter 및 Setter🎜🎜계산된 속성에는 계산된 속성의 출력 값을 정의하는 getter 함수가 필요합니다. 어떤 경우에는 계산된 속성의 입력 값을 정의하는 setter 함수를 추가해야 할 수도 있습니다. 🎜🎜예를 들어, getter가 firstName 및 lastName로 연결된 문자열을 반환하는 계산된 속성 fullName을 정의할 수 있으며, setter는 다음과 같습니다. 분리됨 fullName의 내용은 firstName 및 lastName입니다. 🎜rrreee🎜위 코드에서는 fullName의 getter를 통해 현재 전체 이름을 가져오거나 setter를 통해 새 전체 이름을 설정할 수 있습니다. 예: 🎜rrreee🎜4. 계산된 속성의 실시간 계산🎜🎜계산된 속성은 데이터 속성에 대한 실시간 계산을 수행하는 가장 좋은 방법입니다. Vue는 데이터 속성을 변경한 후 다음에 템플릿을 렌더링해야 할 때 새로 계산된 속성의 값을 계산합니다. 계산된 속성이 의존하는 데이터가 변경되지 않은 경우 계산된 속성은 이전에 캐시된 값을 사용합니다. 🎜rrreee🎜위 코드에서는 radius 속성에 따라 달라지는 계산된 diameter 및 circumference 속성을 정의합니다. 이러한 계산된 속성은 radius 속성이 변경되면 다시 계산됩니다. 예: 🎜rrreee🎜 5. 계산된 속성과 메서드의 차이점 🎜🎜Vue에는 메서드라는 매우 유사한 개념이 있는데 v-on 지시문을 사용하여 템플릿에서 메서드를 호출할 수 있습니다. 메서드와 계산 속성 모두 데이터 속성의 변경에 따라 값을 변경할 수 있습니다. 🎜🎜그럼 메소드와 계산된 속성의 차이점은 무엇인가요? 🎜🎜우선, 계산된 속성과 달리 메서드는 항상 다시 계산되며 계산된 속성처럼 결과를 캐시할 수 없습니다. 메서드는 일반적으로 매번 다시 계산해야 하는 복잡한 논리나 특정 매개 변수를 전달해야 하는 논리에 적합합니다. 🎜🎜둘째, 계산된 속성에는 getter만 있고 메서드에는 setter만 있습니다. 메서드는 값을 반환할 수 있지만 반환 값은 캐시되지 않습니다. 🎜🎜마지막으로 계산된 속성은 데이터 속성만큼 쉽게 템플릿에서 사용할 수 있지만 메서드는 v-on 지시어를 사용하여 호출해야 합니다. 계산된 속성의 값을 템플릿에 표시하려면 계산된 속성을 사용하는 것이 더 나은 선택입니다. 🎜🎜6. 요약🎜🎜Vue에서는 계산된 속성이 실시간으로 데이터 속성을 계산하는 가장 좋은 방법입니다. 캐싱 특성이 있고 반복 계산을 방지하며 복잡한 비즈니스 논리를 구현할 수 있고 코드의 가독성과 유지 관리 가능성이 향상됩니다. 동시에 계산된 속성은 getter 및 setter 기능도 제공할 수 있으므로 계산된 속성을 자유롭게 조작할 수 있습니다. 계산된 속성과 달리 메서드는 항상 다시 계산되므로 매번 다시 계산해야 하는 로직이나 매개변수를 전달해야 하는 로직에 적합합니다. 계산이 자주 필요한 논리의 경우 계산된 속성을 사용하는 것이 좋습니다. 🎜

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