vue에서 계산된 속성 메서드를 호출하는 방법-프런트엔드 Q&A-php.cn

vue에서 계산된 속성 메서드를 호출하는 방법

PHPz

풀어 주다： 2023-04-26 16:17:17

원래의

1928명이 탐색했습니다.

Vue에서 계산된 속성은 기존 속성의 값을 기반으로 새로운 속성 값을 계산할 수 있는 특수 속성입니다. 개발 중에는 JS 코드에서 잦은 논리적 계산을 피하면서 계산해야 할 일부 속성을 템플릿에서 직접 사용할 수 있도록 계산된 속성으로 정의하는 경우가 많습니다.

그러나 때때로 Vue 구성 요소에서 계산된 속성의 메서드를 호출해야 할 때가 있습니다(값을 취하는 대신). 이 기사에서는 이 요구 사항을 달성하기 위한 몇 가지 방법을 소개합니다.

계산된 속성 직접 호출

Vue 구성 요소의 계산된 속성은 일반 속성처럼 액세스할 수 있으므로 this.Compulated 속성 이름을 통해 직접 계산된 속성에 액세스하여 해당 메서드를 사용할 수 있습니다. 예: this.计算属性名来访问计算属性，从而使用它的方法。例如：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
  }
}

로그인 후 복사

在上述代码中，我们定义了一个fullName计算属性，在greet方法中直接使用该计算属性来打印出“Hello, 姓氏名字”的字符串。

这种方式非常简单，但是需要注意的是，计算属性对应的方法在数据变化时不会自动执行，需要手动调用它来获取最新的计算结果。

使用计算属性的getter

除了直接调用计算属性本身，还可以使用计算属性的getter函数。计算属性的getter函数会在该属性被访问时自动调用，因此，如果我们将计算属性的逻辑封装在getter函数中，就可以在需要的地方调用该函数来获取计算结果了。例如：

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    }
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
    // 调用计算属性的getter函数
    console.log('Hello, ' + this.fullName.get());
  }
}

로그인 후 복사

在上述代码中，我们使用了计算属性的getter函数来获取计算结果，通过this.fullName.get()来访问。这种方式虽然比直接调用计算属性多了一些代码，但是可以保证在每次调用this.fullName.get()时都能获取到最新的计算结果。

使用watch监听计算属性

除了使用getter函数之外，还可以使用Vue提供的watch功能来监听计算属性的变化，从而在计算属性值发生变化时执行相应的操作。这种方式需要在watch中定义一个与计算属性同名的监听函数，并将计算属性的值作为参数传递进来。例如：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log('计算属性值从', oldVal, '变为', newVal);
  }
},
methods: {
  greet() {
    console.log('Hello, ' + this.fullName);
  }
}

로그인 후 복사

在上述代码中，我们定义了一个与计算属性同名的watch监听函数，用来监听计算属性值的变化。当计算属性的值发生变化时，这个函数就会被执行，从而可以在函数中执行相应的操作。

需要注意的是，在watch监听函数中可以获取到计算属性的新值和旧值，但是不要在监听函数中修改计算属性的值，否则会引起死循环。

总结

上述介绍了三种实现方式，实际使用中可以根据具体场景选择不同的方式。如果只是简单的获取计算属性的值，可以直接调用计算属性本身；如果需要在不同的方法中多次获取计算属性的值，建议使用计算属性的getter函数；如果需要在计算属性值变化时执行一些额外的操作，可以使用watchrrreee

위 코드에서는 fullName 계산 속성을 정의하고 이 계산 속성을 greet 메서드에서 직접 사용하여 "Hello, first name"을 인쇄합니다. 및 성" 문자열입니다.

이 방법은 매우 간단하지만, 계산된 속성에 해당하는 메서드는 데이터가 변경될 때 자동으로 실행되지 않으며, 최신 계산 결과를 얻으려면 수동으로 호출해야 한다는 점에 유의해야 합니다. 🎜🎜계산된 속성의 getter 사용🎜🎜계산된 속성 자체를 직접 호출하는 것 외에도 계산된 속성의 getter 함수를 사용할 수도 있습니다. 계산된 속성의 getter 함수는 속성에 액세스할 때 자동으로 호출됩니다. 따라서 계산된 속성의 논리를 getter 함수에 캡슐화하면 다음과 같이 될 수 있습니다. 필요한 곳에 사용됩니다. 계산 결과를 얻으려면 이 함수를 호출하세요. 예: 🎜rrreee🎜위 코드에서는 계산된 속성의 getter 함수를 사용하여 this.fullName.get()을 통해 액세스되는 계산 결과를 얻습니다. 이 방법을 사용하면 계산된 속성을 직접 호출하는 것보다 더 많은 코드가 필요하지만 this.fullName.get()을 호출할 때마다 최신 계산 결과를 얻을 수 있습니다. 🎜🎜watch를 사용하여 계산된 속성 모니터링🎜🎜getter 함수를 사용하는 것 외에도 Vue에서 제공하는 watch 함수를 사용하여 계산된 속성의 변경 사항을 모니터링할 수도 있습니다. 속성 값을 계산하는 방법 변경이 발생하면 적절한 조치를 수행합니다. 이 방법을 사용하려면 watch의 계산된 속성과 동일한 이름으로 수신 함수를 정의하고 계산된 속성의 값을 매개변수로 전달해야 합니다. 예: 🎜rrreee🎜위 코드에서는 계산된 속성 값의 변화를 모니터링하기 위해 계산된 속성과 동일한 이름을 가진 watch 청취 함수를 정의합니다. 계산된 속성의 값이 변경되면 이 함수가 실행되어 해당 함수에서 해당 작업을 수행할 수 있습니다. 🎜🎜계산된 속성의 새 값과 기존 값은 watch 청취 함수에서 얻을 수 있지만 청취 함수에서 계산된 속성의 값을 수정하지 마세요. 무한 루프가 발생하게 됩니다. 🎜🎜요약🎜🎜위에서는 실제 사용 시 특정 시나리오에 따라 다른 방법을 선택할 수 있는 세 가지 구현 방법을 소개합니다. 단순히 계산된 속성의 값을 가져오려면 계산된 속성 자체를 직접 호출하면 됩니다. 여러 메서드에서 계산된 속성의 값을 여러 번 가져와야 하는 경우 getter를 사용하는 것이 좋습니다. 계산된 속성의 함수, 계산된 속성 값이 변경될 때 몇 가지 추가 작업을 수행해야 하는 경우 watch를 사용하여 계산된 속성을 모니터링할 수 있습니다. 🎜🎜일반적으로 계산된 속성을 사용할 때는 일반 속성으로 취급해야 하지만, 계산된 속성의 값은 기존 속성을 기반으로 계산해야 합니다. 컴포넌트의 속성 계산 방법을 사용해야 하는 경우 위의 세 가지 방법을 통해 특정 시나리오에 따라 가장 적절한 방법을 선택할 수 있습니다. 🎜

위 내용은 vue에서 계산된 속성 메서드를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!