ホームページ > 記事 > ウェブフロントエンド > vue のウォッチは何をしますか?
vue のウォッチは何をしますか?
- 青灯夜游オリジナル
- 2022-11-30 20:29:513601ブラウズ
vue では、watch はデータ内のデータが変更されたかどうかを監視するために使用され、変更されると、他の操作を実行できます。 Watch は、リスニング関数のために Vue によって内部的に提供される一般的なメソッドであり、データの変更に応答し、特定のデータの変更を通じて一部の操作を実行できます。
時計は何に使われますか?
Vue は、監視オプションを通じてデータの変更に応答するためのより一般的な方法を提供します。このアプローチは、データ変更時に非同期操作またはコストのかかる操作を実行する必要がある場合に最も役立ちます。時計とは何ですか?
オブジェクト。キーは監視対象の式、値は対応するコールバック関数です。値はメソッド名、またはオプションを含むオブジェクトにすることもできます。 Vue インスタンスはインスタンス化時に $watch() を呼び出し、watch オブジェクトの各プロパティを走査します。 例:<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
}
};
</script>
<style></style>
##watchの使い方 #第一: 従来の使用法
(1) 監視対象の name 値を監視対象のメソッド名として扱います。 【第一の書き方】
<template>
<el-card><el-input></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name(newVal, oldVal) {
console.log('newVal', newVal);// 1234
console.log('oldVal', oldVal);// 123
}
}
};
</script>
<style></style>
(2) 監視対象のname値をオブジェクトとして扱い、hanlerメソッドを使用して監視します。 【2つ目の書き方】
<template>
<el-card><el-input></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name:{
handler(newVal,oldVal){
console.log('newVal',newVal); // 1234
console.log('oldVal',oldVal); // 123
}
}
}
};
</script>
<style></style>
上記2つの書き方は、監視リスナーの一般的な使い方ですが、この使い方は、初めて値をバインドすると監視が行われないという特徴があります。関数は値が変更された場合にのみ実行されます。値が最初にバインドされるときに listen 関数を実行する必要がある場合は、immediate 属性を使用する必要があります。
次に、より高度な使用方法について説明します。 2 番目: 高度な使用法
たとえば、親コンポーネントが子コンポーネントに値を動的に転送する場合、子コンポーネントの props が最初に設定されます。親コンポーネントから取得します。デフォルト値を使用する場合は、関数も実行する必要があります。この場合、immediate 属性を true に設定し、ハンドラー メソッドと組み合わせて使用する必要があります。
immediate 属性が true に設定されている場合、値が変更されるかどうかに関係なく常にリッスンします。immediate 属性が false に設定されている場合、通常の使用法ではリッスンします。値が変更された場合のみ。<template>
<el-card><el-input></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
immediate: true
}
}
};
</script>
<style></style>即時実行:
値変更時:
3 番目type : 超高度な使い方（深い深い監視）
(1) 上記2つの方法は通常の変数の変化を監視する場合に使用できますが、変数の値をオブジェクトとして監視する場合は、動作しないでしょう。
たとえば、フォーム オブジェクトの内部プロパティの変更を監視することはできません。<template>
<el-card><el-input></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
form: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
}
}
}
};
</script>
<style></style>
結果から、出力の印刷は確認されなかったため、通常の監視メソッドではオブジェクトの内部プロパティの変更を監視できません。 
<template>
<el-card><el-input></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
form: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
deep: true
}
}
};
</script>
<style></style>
deep 属性値が true の場合、オブジェクトの属性内の変更を監視できます。deep 属性値が false の場合、監視できません。、(2) オブジェクト内の特定の属性値のみを監視する必要がある場合は、オブジェクト属性を監視するための
文字列形式を使用できます。
この監視プロセス中に、詳細を監視するために deep を使用する必要はなく、オブジェクト内の特定の属性の変更を監視できます。
<template>
<el-card><el-input></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
'form.name': {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
}
}
}
};
</script>
<style></style>
(1) (1 次元、多次元) 配列変更はありません。詳細な監視は必要ありません
<template>
<el-card><el-input></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123',
arr1: [1, 2, 3],
arr2: [1, 2, 3, [4, 5]]
};
},
watch: {
arr1(newVal, oldVal) {
console.log('newVal1', newVal);
console.log('oldVal1', oldVal);
},
arr2(newVal, oldVal) {
console.log('newVal2', newVal);
console.log('oldVal2', oldVal);
}
},
methods: {
inputFn(e) {
this.arr1.push(e);
this.arr2.push(e);
}
}
};
</script>
<style></style>
（2）数组对象中对象属性变化监测需要使用deep:true深度监听，多少层内产生变化都可以监测到。
<template>
<el-card><el-input></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123',
arr1: [
{
id: 1,
sex: 11
}
],
arr2: [
{
id: 2,
sex: 22,
list: [
{
id: 3,
sex: 33
}
]
}
]
};
},
watch: {
arr1: {
handler(newVal, oldVal) {
console.log('newVal1', newVal);
console.log('oldVal1', oldVal);
},
deep: true
},
arr2: {
handler(newVal, oldVal) {
console.log('newVal2', newVal);
console.log('oldVal2', oldVal);
},
deep: true
}
},
methods: {
inputFn(e) {
this.arr1[0].sex = e;
this.arr2[0].list[0].sex = e;
}
}
};
</script>
<style></style>
以上がvue のウォッチは何をしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。