Vueのwatchの高度な使い方
1357 ワード
vueではwatchを用いてデータの変化に応答する.一般的な使い方は多いですが、本文は主に高級な使い方、immediate、handler、deepを紹介します.
一、immediate(初回バインド)
最初にバインドするときも関数を実行したいのでimmediateを使います.傍受されたデータの後ろにはhandlerメソッドとimmediateが含まれているオブジェクト形式が書かれていますが、以前私たちが書いた関数は実はこのhandlerメソッドを書いています.
immediateは、watchで最初にバインドされたときにhandlerを実行するかどうかを表し、値がtrueであればwatchで宣言されたときにhandlerメソッドを直ちに実行し、値がfalseであれば、一般的にwatchを使用するのと同様に、データが変化したときにhandlerを実行します.
二、deep(深さ傍受)
オブジェクト内のすべてのプロパティをリスニングします.オブジェクト内の任意のプロパティが変更されると、関数が実行されます.
三、リスニング対象の特定の属性
オブジェクト内の特定のプロパティをリスニングします.handler関数は、このプロパティが変更された場合にのみ実行されます.
四、関連ドキュメントvueのリスナー:https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8
一、immediate(初回バインド)
最初にバインドするときも関数を実行したいのでimmediateを使います.傍受されたデータの後ろにはhandlerメソッドとimmediateが含まれているオブジェクト形式が書かれていますが、以前私たちが書いた関数は実はこのhandlerメソッドを書いています.
immediateは、watchで最初にバインドされたときにhandlerを実行するかどうかを表し、値がtrueであればwatchで宣言されたときにhandlerメソッドを直ちに実行し、値がfalseであれば、一般的にwatchを使用するのと同様に、データが変化したときにhandlerを実行します.
data(){
return{
appid : '123456'
}
}
----------------------------------------------------------------
watch : {
appid : {
handler(v){
console.log(v)
},
immediate : true
}
}
二、deep(深さ傍受)
オブジェクト内のすべてのプロパティをリスニングします.オブジェクト内の任意のプロパティが変更されると、関数が実行されます.
data(){
return {
obj : {
id : '0',
info : 'one'
}
}
}
---------------------------------------------------------------
watch: {
obj: {
handler(v){
console.log(v)
},
deep:true
}
}
三、リスニング対象の特定の属性
オブジェクト内の特定のプロパティをリスニングします.handler関数は、このプロパティが変更された場合にのみ実行されます.
data(){
return {
obj : {
id : '0',
info : 'one'
}
}
}
---------------------------------------------------------------
watch: {
'obj.id'(v){
console.log(v)
}
}
四、関連ドキュメントvueのリスナー:https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8