집 > 기사 > 웹 프론트엔드 > VUE의 계산된 속성 및 리스너 사용 사례

VUE의 계산된 속성 및 리스너 사용 사례

php中世界最好的语言원래의: 2018-03-10 10:41:031414검색

이번에는 VUE의 계산 속성 및 리스너 사용 사례를 가져오겠습니다. VUE의 계산 속성 및 리스너 사용 시 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 앞에 적었습니다

이전 글에서 vue를 사용하면서 vue

생명주기

, vue 인스턴스, 템플릿 구문에 대해 이야기했습니다. 이번에는 Vue의 계산된 속성과 리스너에 대해 이야기하겠습니다. 계산된 속성

Vue 템플릿의

표현식

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

<div id="example">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

여기서 템플릿은 더 이상 단순한 선언적 논리가 아닙니다. 이 코드 문자열이 무엇을 하는지 이해하려면 잠시 동안 살펴보아야 하며, 템플릿에서 이를 여러 번 참조하려는 경우 처리하기가 훨씬 더 어려워집니다.

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

예를 들어

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

는 여기에서 계산된 reversedMessage 속성을 선언합니다. vue에서 제공하는 함수는 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에 의존하는 모든 바인딩도 업데이트됩니다. 그리고 가장 좋은 점은 Vue가 선언적 방식으로 이러한 종속성을 생성했다는 것입니다. 계산된 속성의 getter 함수에는 부작용이 없으므로 테스트하고 이해하기가 더 쉽습니다.

계산된 속성 캐시와 메서드

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

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

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

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

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

반면, 호출 메서드는 다시 렌더링이 트리거될 때마다 항상 함수를 다시 실행합니다.

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

계산된 속성과 청취 속성

Vue는 Vue 인스턴스의 데이터 변경 사항을 관찰하고 응답하는 보다 일반적인 방법인 청취 속성을 제공합니다. 다른 데이터 변경에 따라 변경해야 하는 일부 데이터가 있는 경우 시계를 남용하기 쉽습니다. 특히 이전에

AngularJS

를 사용한 적이 있는 경우 더욱 그렇습니다. 그러나 명령형 감시 콜백 대신 계산된 속성을 사용하는 것이 더 나은 경우가 많습니다. 다음 예를 고려해 보세요.

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

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

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

계산된 속성에 대한 설정

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

// ...
computed: {
  fullName: {
    // getter
    get: function () {      return this.firstName + &#39; &#39; + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(&#39; &#39;)
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

이제 vm.fullName = 'John Doe' 를 실행하세요. setter가 호출되고 그에 따라 vm.firstName 및 vm.lastName이 업데이트됩니다.

Listeners

대부분의 경우 계산된 속성이 더 적합하지만 때로는 사용자 정의 리스너가 필요할 수도 있습니다. 이것이 Vue가 watch 옵션을 통해 데이터 변경에 응답하는 보다 일반적인 방법을 제공하는 이유입니다. 이 접근 방식은 데이터가 변경될 때 비동기식 또는 비용이 많이 드는 작업을 수행해야 할 때 가장 유용합니다.

예:

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 因为 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: &#39;#watch-example&#39;,
  data: {
    question: &#39;&#39;,
    answer: &#39;I cannot give you an answer until you ask a question!&#39;
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = &#39;Waiting for you to stop typing...&#39;
      this.getAnswer()
    }
  },
  methods: {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {        if (this.question.indexOf(&#39;?&#39;) === -1) {
          this.answer = &#39;Questions usually contain a question mark. ;-)&#39;
          return
        }
        this.answer = &#39;Thinking...&#39;
        var vm = this
        axios.get(&#39;https://yesno.wtf/api&#39;)
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = &#39;Error! Could not reach the API. &#39; + error
          })
      },
      // 这是我们为判定用户停止输入等待的毫秒数      500
    )
  }
})
</script>

결과:

이 예에서 watch 옵션을 사용하면 비동기 작업(API 액세스)을 수행하고, 작업 수행 빈도를 제한하고, 최종 결과를 얻기 전에 중간 상태를 설정할 수 있습니다. 이는 계산된 속성이 수행할 수 없는 작업입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!