Vue.jsでは特定のデータやcomputedの状態を監視して、変化があるとその処理を実行する機能があります。このことを監視プロパティは行います。監視プロパティは別にウオッチャーと呼ばれています。
監視プロパティの記述は、コンポーネントのwatchオプションを使います。
Vueはデータの変更を監視して反応させるため監視プロパティが用意されていますが、多くの場合computedで記述できますし、computedの方がスマートに記述できます。
監視プロパティは必要に応じて使用すると良いでしょう。
<div id="app">
<p>firstName<input type="text" v-model:value="firstName"></p>
<p>lastName<input type="text" v-model:value="lastName"></p>
<p>fullName:{{ fullName }}</p>
</div>
監視プロパティを使用した記述
var app = new Vue({
el:'#app',
data:{
firstName:'',
lastName:'',
fullName:''
},
watch:{
firstName: function(value){
this.fullName = value + ' ' + this.lastName
},
lastName: function(value){
this.fullName = this.firstName + ' ' + value
}
}
})
computedを使用した記述
var app = new Vue({
el: '#app',
data: {
firstName: 'Masaharu',
lastName: 'Tahara'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
