Vueリスニング属性
2958 ワード
概要
コンストラクタのwatchオプション.Vueインスタンスのリスニングプロパティを定義します.
リスニング属性は、Vueインスタンス上のデータ変動を観察および応答するために使用することができる.
他のデータの変動に伴ってデータが変動する必要がある場合は、watchを乱用しやすくなります.特に、AngularJSを使用したことがある場合は.しかし、通常、コマンド式のwatchコールバックではなく、計算プロパティを使用するのがより良い方法です.
この例をよく考えてみましょう.
上のコードはコマンド式で繰り返します.計算プロパティのバージョンと比較します.
今、ずっとよくなりました.
リスナー
計算プロパティは多くの場合適切ですが、カスタムリスナーをリスナープロパティで実装する必要がある場合もあります.
これは、Vueがwatchオプションによって、データの変化に応答するより一般的な方法を提供する理由です.リスナーは、データの変化時に非同期またはオーバーヘッドの大きい操作を実行する必要がある場合に最も役立ちます.
この例では、watchオプションを使用すると、非同期操作(APIへのアクセス)を実行し、その操作を実行する頻度を制限し、最終結果が得られる前に中間状態を設定できます.これらは計算プロパティではできません.
watchオプションに加えてvm.$も使用できます.watch .
コンストラクタのwatchオプション.Vueインスタンスのリスニングプロパティを定義します.
リスニング属性は、Vueインスタンス上のデータ変動を観察および応答するために使用することができる.
他のデータの変動に伴ってデータが変動する必要がある場合は、watchを乱用しやすくなります.特に、AngularJSを使用したことがある場合は.しかし、通常、コマンド式のwatchコールバックではなく、計算プロパティを使用するのがより良い方法です.
この例をよく考えてみましょう.
{{ 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
}
}
})
今、ずっとよくなりました.
リスナー
計算プロパティは多くの場合適切ですが、カスタムリスナーをリスナープロパティで実装する必要がある場合もあります.
これは、Vueがwatchオプションによって、データの変化に応答するより一般的な方法を提供する理由です.リスナーは、データの変化時に非同期またはオーバーヘッドの大きい操作を実行する必要がある場合に最も役立ちます.
Ask a yes/no question:
{{ answer }}
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// `question` ,
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// `_.debounce` Lodash 。
// , yesno.wtf/api
// AJAX 。
// `_.debounce` ( `_.throttle`) ,
// :https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
//
500
)
}
})
この例では、watchオプションを使用すると、非同期操作(APIへのアクセス)を実行し、その操作を実行する頻度を制限し、最終結果が得られる前に中間状態を設定できます.これらは計算プロパティではできません.
watchオプションに加えてvm.$も使用できます.watch .