vue深究第一弾:computedとwatchの異同
2493 ワード
最近、vueを開発する過程で、計算属性(computed)と観察者(watch)が絶えず使われ、論理的に似ていると感じていますが、それらを混用しようとしたとき、またいくつかの問題が発生しました.では、それらにはいったいどんな違いがありますか.
1.computed VS data計算属性が観察者と異なることを問う前に、まず、なぜ計算属性、すなわちcomputed vs dataがあるのかを明確にする.vueでは、データが処理されてから表示される必要がある場合があります.たとえば、次のようにします.
reversedMessageでもgetWelcomeメソッドでも、単純にdataに書くのは優雅ではないので、computedを動的に処理する必要があります.
2.watch VS data vue中のデータとviewが双方向にバインドされている以上、ユーザーがテキストを入力すると、vueはビューの変動を傍受し、変動したデータを私たちに伝えることができる(具体的な変動原理はこれを参照).観察者は,ビューの変動を系統的に監視して呼び出す方法であり,パラメータはそれぞれ古い値と新しい値である.watchを使用するとdata値を変更できます.例:
もちろん、例1のコードも観察者で解決できます.これも私がこの文章を書いた主な原因です.
3.computed vs watchBBはそんなに多くて、すぐに私たちの本題に入ります.
同じ:computedとwatchはいずれも1つのデータを傍受/依存し、処理する役割を果たす.
異同:それらは実はvueのリスナーに対する実現であり、ただ
computedは主に同期データの簡単な処理に用いられ,watchは主にデータ入力時の非同期操作やオーバーヘッドが大きい場合に用いられる.computedを使用できる場合はcomputedを優先し、あるデータに複数のデータが影響する場合にwatchを複数回呼び出すという気まずい状況を回避します.ビューレイヤの変更にはwatchが優先されます.
たとえば、次のようになります.
対応するcomputedバージョン
参考:1)属性とオブザーバーの計算:https://cn.vuejs.org/v2/guide...
1.computed VS data計算属性が観察者と異なることを問う前に、まず、なぜ計算属性、すなわちcomputed vs dataがあるのかを明確にする.vueでは、データが処理されてから表示される必要がある場合があります.たとえば、次のようにします.
var vm = new Vue({
el: '#example',
data: {
message: 'Hello',
name: 'tomczhang'
},
computed: {
// getter
reversedMessage: function () {
// `this` vm
return this.message.split('').reverse().join('')
},
getWelcome: function () {
return this.message + ' ' + this.name
}
}
})
reversedMessageでもgetWelcomeメソッドでも、単純にdataに書くのは優雅ではないので、computedを動的に処理する必要があります.
2.watch VS data vue中のデータとviewが双方向にバインドされている以上、ユーザーがテキストを入力すると、vueはビューの変動を傍受し、変動したデータを私たちに伝えることができる(具体的な変動原理はこれを参照).観察者は,ビューの変動を系統的に監視して呼び出す方法であり,パラメータはそれぞれ古い値と新しい値である.watchを使用するとdata値を変更できます.例:
var vm = new Vue({
el: '#demo',
watch: {
userInput: function (oldValue, newValue) {
this.message = newValue;
}
}
})
もちろん、例1のコードも観察者で解決できます.これも私がこの文章を書いた主な原因です.
var vm = new Vue({
el: '#example',
data: {
message: 'Hello',
name: 'tomczhang',
welcome: ''
},
watch: {
welcome: function () {
this.welcome = this.message + ' ' + this.name;
}
}
})
3.computed vs watchBBはそんなに多くて、すぐに私たちの本題に入ります.
同じ:computedとwatchはいずれも1つのデータを傍受/依存し、処理する役割を果たす.
異同:それらは実はvueのリスナーに対する実現であり、ただ
computedは主に同期データの簡単な処理に用いられ,watchは主にデータ入力時の非同期操作やオーバーヘッドが大きい場合に用いられる.computedを使用できる場合はcomputedを優先し、あるデータに複数のデータが影響する場合にwatchを複数回呼び出すという気まずい状況を回避します.ビューレイヤの変更にはwatchが優先されます.
たとえば、次のようになります.
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
}
}
})
対応するcomputedバージョン
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
参考:1)属性とオブザーバーの計算:https://cn.vuejs.org/v2/guide...