Vue.jsの算出 (computed)プロパティ

算出(computed)プロパティのキーワード：computed。

複雑なロジックには算出(computed)プロパティが非常に役立ちます。

次には文字列を反転する例をご覧ください。

例1

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'ceodata.com'
  }
})
</script>

例1のテンプレートは非常に複雑になり、理解しにくいです。

次には算出(computed)プロパティの例をご覧ください。

例2

<div id="app">
  <p>元の文字列: {{ message }}</p>
  <p>計算後の文字列を反転する: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 算出(computed)プロパティの getter
    reversedMessage: function () {
      // `this`はvmインスタンスを指す例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

例2では、算出(computed)プロパティのreversedMessageが宣言されています。

提供された関数は、プロパティvm.reversedMessageのgetterとして使用されます。

vm.reversedMessageはvm.messageに依存します。vm.messageが変更されると、vm.reversedMessageも更新されます。

computed vs methods

methodsでcomputedを置き換えることができます。どちらも同じ効果ですが、computedは依存関係に基づいてキャッシュされ、関連する依存関係が変更された場合にのみ値が再評価されます。methodsを使用すると、再レンダリング時に、関数が呼び出されて再度実行されます。

例3

<div id="app">
  <p>元の文字列: {{ message }}</p>
  <p>計算後の文字列を反転する: {{ reversedMessage }}</p>
  <p>methodsを使用した後、文字列を反転する: {{ reversedMessage2() }}</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Ceodata.com'
  },
  computed: {
    // 算出(computed)プロパティの getter
    reversedMessage: function () {
      // `this`はvmインスタンスを指す例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computedのパフォーマンスが向上すると言えますが、キャッシュが必要ない場合は、methodsプロパティを使用できます。

computed setter

算出(computed)プロパティにはデフォルトでgetterしかありませんが、必要に応じてsetterを提供することもできます。

例4

<div id="app">
  <p>{{ site }}</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
	name: 'Google',
	url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// setterをコールすると、vm.nameおよびvm.urlはそれに応じて更新される
vm.site = 'Florian Studio http://www.ceodata.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>

実行結果から見ると、 vm.site = ‘Florian Studio http://www.ceodata.com’;を実行する場合、setterが呼び出され(コール)、それに応じてvm.nameとvm.urlが更新されます。