Vue.js 계산 속성을 리스너와 함께 사용하는 방법

이번에는 Vue.js 계산 속성 및 리스너 사용법과 Vue.js 계산 속성 및 리스너 사용 시 주의사항에 대해 알려드리겠습니다.

1. 개요

계산된 속성

템플릿의 expressions은 매우 편리하지만 원래는 간단한 작업을 위해 설계되었습니다. 템플릿에 논리를 너무 많이 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 예:

<p id="example">
 {{ message.split('').reverse().join('') }}
</p>

여기서 템플릿은 더 이상 단순한 선언적 논리가 아닙니다. 여기에 변수 메시지를 표시하려는 반전된 string이 있다는 것을 깨닫기 위해 잠시 지켜봐야 합니다. 여기에서 뒤집힌 문자열을 템플릿에서 여러 번 참조하려는 경우 처리하기가 더 어려워집니다.

따라서 복잡한 논리의 경우 계산된 속성을 사용해야 합니다.

기본 예

<p id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</p>
var vm = new Vue({
 el: '#example',
 data: {
  message: 'Hello'
 },
 computed: {
  // 计算属性的 getter
  reversedMessage: function () {
   // `this` 指向 vm 实例
   return this.message.split('').reverse().join('')
  }
 }
})

결과:

여기서 계산 속성 reversedMessage를 선언합니다. 우리가 제공하는 함수는 vm.reversedMessage 속성의 getter 함수로 사용됩니다.

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

일반 속성처럼 계산된 속성을 템플릿에 바인딩할 수 있습니다. Vue는 vm.reversedMessage가 vm.message에 의존한다는 것을 알고 있으므로 vm.message가 변경되면 vm.reversedMessage에 의존하는 모든 바인딩도 업데이트됩니다. 그리고 가장 좋은 점은 이 종속성을 선언적으로 생성했다는 것입니다. 계산된 속성의 getter 함수에는 부작용이 없으므로 테스트하고 이해하기가 더 쉽습니다.

2. 계산된 속성 캐시 대 메서드

표현식에서 메서드를 호출하여 동일한 효과를 얻을 수 있다는 것을 눈치챘을 것입니다.

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
 reversedMessage: function () {
  return this.message.split('').reverse().join('')
 }
}

계산 속성 대신 메서드와 동일한 함수를 정의할 수 있습니다. 최종 결과는 실제로 두 가지 방법 모두 동일합니다. 그러나 차이점은 계산된 속성이 종속성에 따라 캐시된다는 것입니다. 계산된 속성은 관련 종속성이 변경될 때만 재평가됩니다. 즉, 메시지가 변경되지 않는 한 reversedMessage 계산 속성에 여러 번 액세스하면 함수를 다시 실행할 필요 없이 이전 계산 결과가 즉시 반환됩니다.

이는 Date.now()가 반응적 종속성이 아니기 때문에 아래 계산된 속성이 더 이상 업데이트되지 않는다는 의미이기도 합니다.

computed: {
 now: function () {
  return Date.now()
 }
}

이와 대조적으로 호출 메서드는 다시 렌더링이 트리거될 때마다 항상 함수를 다시 실행합니다.

캐싱이 왜 필요한가요?

상대적으로 성능 오버헤드가 큰 계산 속성 A가 거대한 배열을 탐색하고 많은 계산을 수행해야 한다고 가정해 보겠습니다. 그러면 A에 의존하는 다른 계산된 속성이 있을 수 있습니다. 캐싱이 없으면 필연적으로 A의 getter를 여러 번 실행하게 됩니다! 캐싱을 원하지 않으면 대신 메소드를 사용하십시오.

3. 계산된 속성과 청취 속성

Vue는 Vue 인스턴스의 데이터 변경을 관찰하고 응답하는 보다 일반적인 방법인 청취 속성을 제공합니다. other데이터 변경에 따라 변경해야 하는 일부 데이터가 있는 경우 시계를 남용하기 쉽습니다. 특히 이전에 AngularJS를 사용한 적이 있는 경우 더욱 그렇습니다. 그러나 명령형 감시 콜백 대신 계산된 속성을 사용하는 것이 더 나은 경우가 많습니다.

이 예를 생각해 보세요.

<p id="demo">{{ fullName }}</p>
var vm = new Vue({
 el: '#demo',
 data: {
  firstName: 'Foo',
  lastName: 'Bar',
  fullName: 'Foo Bar'
 },
 watch: {
  firstName: function (val) {
   this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
   this.fullName = this.firstName + ' ' + val
  }
 }
})

위 코드는 필수적이고 반복적입니다. 계산된 속성 버전과 비교해 보세요.

var vm = new Vue({
 el: '#demo',
 data: {
  firstName: 'Foo',
  lastName: 'Bar'
 },
 computed: {
  fullName: function () {
   return this.firstName + ' ' + this.lastName
  }
 }
})

훨씬 낫지 않나요?

4. 계산된 속성을 위한 Setter

계산된 속성에는 기본적으로 getter만 있지만 필요한 경우 setter를 제공할 수도 있습니다

// ...
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]
  }
 }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

五、侦听器

      虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

    例如：

<p id="watch-example">
 <p>
  Ask a yes/no question:
  <input v-model="question">
 </p>
 <p>{{ answer }}</p>
</p>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
 el: '#watch-example',
 data: {
  question: '',
  answer: 'I cannot give you an answer until you ask a question!'
 },
 watch: {
  // 如果 `question` 发生改变，这个函数就会运行
  question: function (newQuestion, oldQuestion) {
   this.answer = 'Waiting for you to stop typing...'
   this.getAnswer()
  }
 },
 methods: {
  // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
  // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
  // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
  // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
  // 请参考：https://lodash.com/docs#debounce
  getAnswer: _.debounce(
   function () {
    if (this.question.indexOf('?') === -1) {
     this.answer = 'Questions usually contain a question mark. ;-)'
     return
    }
    this.answer = 'Thinking...'
    var vm = this
    axios.get('https://yesno.wtf/api')
     .then(function (response) {
      vm.answer = _.capitalize(response.data.answer)
     })
     .catch(function (error) {
      vm.answer = 'Error! Could not reach the API. ' + error
     })
   },
   // 这是我们为判定用户停止输入等待的毫秒数
   500
  )
 }
})
</script>

    结果：当没有输入？号，那么显示如下：

    当有?时候会输出“yes”或者“no”

 具体案例效果地址：侦听器

 在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

有哪些js使用方式（附代码）

如何动态引入JS文件

위 내용은 Vue.js 계산 속성을 리스너와 함께 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!