「Vue.js」の「methods」と「watch」について学ぶ
今回は「methods」と「watch」について学んでいきたいと思います。
「Vue.js」で学んだことも増えてきたので、復習も行いながらちょっとずつ覚えていきたいと思います。
methods
「methods」は、「Vueインスタンス」の中に「関数」が作れる機能です。
プログラムを書いてみると、
<div id="app">
<p>{{ number }}</p>
<button v-on:click="incrementNumber">値を増やす</button>
<button v-on:click="decrementNumber">値を減らす</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
incrementNumber: function () {
this.number += 1;
},
decrementNumber: function () {
this.number -= 1;
}
}
})
</script>
のようになります。
このプログラムを実行すると、
のようになります。
「値を増やすボタン」をクリックすると「number」の値が1つ増えます。
「値を減らすボタン」をクリックすると「number」の値が1つ減ります。
「methods」の処理の流れは、
のようになります。
「v-on」はディレクティブというもので、「clickイベント」を検知して処理を実行することができる仕組みです。
ここで気になったのが「computed」と「methods」の違いです。
いろいろ調べていたら「computed」は「キャッシュ」が使えるんだとか。
値が変化していなかったら「以前に計算している値」を保存しておいて表示できるみたいです。
無駄に同じ計算を何度も行わない仕組みが用意されているんですね。
「値が変化するもの」は「computed」を使った方が効率的な処理ができそうですね。
watch
「watch」は「dataに定義された値」を監視し、その値が変更された時に処理を実行することができます。
プログラムを書いてみると、
<div id="app">
<p>{{ number }}</p>
<button v-on:click="incrementNumber">値を増やす</button>
<button v-on:click="decrementNumber">値を減らす</button>
<p>{{ number2 }}</p>
<button v-on:click="incrementNumber2">値を増やす</button>
<button v-on:click="decrementNumber2">値を減らす</button>
<hr>
<p>合計：{{ total }}</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
number: 1,
number2: 1,
total: 2
},
methods: {
incrementNumber: function () {
this.number += 1;
},
decrementNumber: function () {
this.number -= 1;
},
incrementNumber2: function () {
this.number2 += 1;
},
decrementNumber2: function () {
this.number2 -= 1;
}
},
watch: {
number: function (value) {
this.total = value + this.number2
},
number2: function (value) {
this.total = value + this.number
}
}
})
</script>
のようになります。
このプログラムを実行すると、
のようになります。
「値を増やす」または「値を減らす」ボタンをクリックすると「number」または「number2」の値が変化し、「total」の値が再計算されます。
「number」と「number2」の値は「watch」で「監視対象」に設定しているため、値が変化すると、それぞれの「値に設定された処理」が実行されるんですね。
今回は「合計値」を計算する処理を作成してみました。
「全体のイメージ」は下図のようになります。
「watch」を利用出来るようになると逐一「値の変化」を確認しなくても、自動で変化を検知して処理を実行できるので、便利そうですね。
今回は「methods」と「watch」について学んでいきましたが、少しずつ内容が難しくなってきたような気もします。
プログラミングで感じる「難しさ」を克服するためには、「慣れるまで繰り返し学んでいく」しか無さそうなので、引き続き「Vue.js」の学習を進めていきたいと思います。