カテゴリ: notes
タグ: vuejs

算出プロパティ|Vue.js再学習

触れないタイミングが3ヶ月あったり忘れてしまった事に焦りを感じたので、今度は勉強したことをブロクに残していきたいと思います。 内容的には公式ドキュメントの写経のようなものになります。

今日は算出プロパティを見ていきます。

算出プロパティ

算出プロパティ

冒頭

Vue.jsはテンプレート内に式を書けますが、多くのロジックを詰め込むと、それが何をしているのか分からなくなります。 また、再利用性もありません。

このため宣言的な算出プロパティを利用するのが良いです。

具体的な例

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: "#example",
  data: {
    message: "Hello",
  },
  computed: {
    // 算出 getter 関数
    reversedMessage: function() {
      // `this`はvmインスタンスを指します
      return this.message.split('').reverse().join('')
    }
  }
})

Original message: "Hello"

Computed reversed message: "olleH"

ここでは算出プロパティreversedMessageを宣言しました。私たちが提供した機能は、プロパティvm.reversedMessageに対するgetter関数として利用されます。

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

コンソールを開いて、vmで遊んでみてください。vm.reversedMessageの値は、常にvm.messageの値に依存しています。

通常のプロパティと同じように、テンプレート内の算出プロパティにデータバインドすることもできます。

Vueはvm.reveersedMessagevm.messageに依存していることを知っているので、vm.messageが変わるとvm.reversedMessageに依存する全てのバインディングを更新します。

さらに、最も良いところは、この依存関係が宣言的に作成されていることです。算出getter関数は副作用がないので、テストや値の推論が容易になります。

算出プロパティ vs メソッドプロパティ

<p>Reversed message: "{{ reverseMessage() }}"</p>
// コンポーネント内
methods: {
  reverseMessage: function() {
    return this.message.split('').reverse().join('')
  }
}

上記のようにメソッドプロパティで算出プロパティと同じ結果を実現することも可能です。 2つのアプローチの完全に同じ結果になりますが、*算出プロパティは依存関係にもとづきキャッシュされる*という違いがあります。

算出プロパティは、それの依存関係にあるものが更新されたときにだけ再評価されます。これはつまり、messageが変わらない限り、reverseMessageに何度アクセスしても、関数を再び実行せず、以前計算された結果を即時に返すということです。

Date.now()はリアクティブな依存にならないので、次の算出プロパティは二度と更新されないことを意味します。

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

対照的に、メソッドプロパティでの呼び出しは、再描画が起きると*常に関数を実行する*という違いがあります。

キャッシングしたくない場合は、メソッドプロパティを使うのが良いでしょう。

算出プロパティ vs 監視プロパティ

VueはVueインスタンス上のデータの変更を監視し反応させることができる、より汎用的な*監視的プロパティ(watched property)*を提供しています。 しかし、命令的なwatchコールバックよりも、多くの場合では算出プロパティを利用するほうが良いでしょう。次の例で考えてみましょう。

<div id="demo">{{ fullName }}
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
    }
  }
})

算出プロパティのほうがスマートに見えます。

算出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.firstNamevm.lastNameが適切に更新されます。

About

はらぺこ

職業:フロントエンドエンジニア
趣味:自転車/テニス/空手
愛車:
 ✓ブリヂストン オルディナs5
 ✓アンカー RS8 EL

神戸にて爆誕。
友人から「お前がマスターして教えてくれ」と渡された『HTML&スタイルシート ポケットリファレンス』がキッカケでWeb業界への一歩を踏み出す事になる。

2013年7月にクロスバイクを購入して自転車にドハマリする。
全力で遊ぶ合間に、ほどほどに頑張る日々を過ごしています。

飼い主 はっぴー

2014年10月20日(誕生日)の引っ越し日、捨て猫になっていた所、運命の出会いを果たす。 
(その日は雨で、3日間雨が続く寒い日だった。このまま放っておけないと自転車生活と秤にかけて、はっぴーを選択する)
5時間かけて油断させ、近づいてきた所をガッと拾い上げ、そのまま家へ猛ダッシュ、玄関の鍵を閉めて家族になる。以後オレたちはファミリーだ。

助けたつもりが、実際は自分の方が精神的に救われている。はっぴーなしでは生きていけない。(最早「飼い主」と言って差し支えないだろう)

「はっぴー」という名前の由来は、『幸せになってほしい』という想いで名付けた。