基礎から学ぶVue.js 輪読会 #4

データの監視と加工

  • 算出プロパティ (computed)
  • ウォッチャ (watch)
  • フィルタ (filters)
  • nextTick
  • カスタムディレクティブ (directives)

資料



算出プロパティ

  • テンプレート中の式をシンプルにする

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>
<div id="app">
  {{ reversedMessage }}
</div>

基本文法

new Vue({
  // ...
  computed: {
    propertyName: function () {
      return 'value'
    }
  }
})

例1


利点

  • 評価された値がキャッシュされる
  • 依存するデータが更新されるまでは、1回しか評価されない

例2


ウォッチャ