🐷
Vue2 算出プロパティの使い方のメモ
なぜ算出プロパティが必要か？
前提として、Vueインスタンスのdataプロパティにオブジェクト（プロパティ）を追加するとリアクティブになり、UI上で更新できるようになる。
changeTextプロパティでは、inputTextプロパティを使っているがこういった書き方はエラーになる。おそらく、２つのプロパティは上からではなく、同時に定義されるのでchangeTextを読み込む際にinputTextが読み込まれていないからだと思う。
dartだとこういう時は、lateキーワードを使っていた。
<!-- 算出プロパティの使い方 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<div id="app">
{{ inputText }}
{{ changeText }}
</div>
new Vue({
el: "#app",
data: {
inputText: '',
// ↓ こういうのはできない。
changeText: inputText+'abcdefg',
},
})
viewに直接書き込むやり方があるが、複雑なロジックになる場合がある。2回以上使うとさらに面倒になるし。ドキュメントだと文字を反転する例が紹介されている。
<!-- 算出プロパティの使い方 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<div id="app">
{{ inputText }}
{{ inputText + 'abcdefg'}}
</div>
new Vue({
el: "#app",
data: {
inputText: '',
},
})
これをできるようにするのが算出プロパティ
<!-- 算出プロパティの使い方 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<div id="app">
{{ inputText }}
{{ changeTextCapitalize }}
</div>
// js
new Vue({
el: "#app",
data: {
inputText: '',
},
computed: {
changeTextCapitalize: function () {
// TODO 入力された文字列を大文字にする処理を書きましょう
return this.inputText+'abcdefg';
}
}
})
メソッドでも同じことができる。
算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価される。つまり、 inputTextが変わらない限りchangeTextCapitalizeに何度アクセスしても、関数は再び実行されることなく、以前計算された結果を即時に返す。メモ化再帰を思い出した。
対照的に、メソッド呼び出しは再描画が起こると常に関数を実行する。無駄な処理を実行しないためにも基本的に、算出プロパティを使う。
<!-- 算出プロパティの使い方 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<div id="app">
{{ inputText + 'abcdefg' }}
{{ changeTextCapitalize }}
{{ changeTextCapitalize2() }}
</div>
new Vue({
el: "#app",
data: {
inputText: 'aaaaa',
},
computed: {
changeTextCapitalize: function () {
// TODO 入力された文字列を大文字にする処理を書きましょう
return this.inputText + 'abcdefghijkl';
},
},
methods: {
changeTextCapitalize2: function() {
return this.inputText + 'abcdef';
},
}
})
疑問点
- 算出プロパティに引数定義できるか？今のところ、エラーになる
参考サイト
Discussion