En vue, la montre est utilisée pour surveiller si les données contenues dans les données ont été modifiées, elle peut effectuer d'autres opérations. Watch est une méthode générale fournie en interne par Vue pour les fonctions d'écoute. Elle peut répondre aux modifications de données et piloter certaines opérations via des modifications de données spécifiques.
L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.
A quoi sert la montre ?
Vue fournit une méthode plus générale pour répondre aux modifications de données via l'option de surveillance. Cette approche est particulièrement utile lorsque vous devez effectuer des opérations asynchrones ou coûteuses lorsque les données changent.
Qu'est-ce qu'une montre ?
Un objet, la clé est l'expression à observer, et la valeur est la fonction de rappel correspondante. La valeur peut également être un nom de méthode ou un objet contenant des options. L'instance Vue appellera $watch() une fois instanciée, traversant chaque propriété de l'objet watch. Transmission de documents
Exemple :
<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>
Comment utiliser watch
Première méthode : Utilisation générale
(1) Traitez la valeur du nom à surveiller comme le nom de la méthode. [Première façon d'écrire]
<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'
};
},
watch: {
name(newVal, oldVal) {
console.log('newVal', newVal);// 1234
console.log('oldVal', oldVal);// 123
}
}
};
</script>
<style></style>(2) Traitez la valeur du nom à surveiller comme un objet et utilisez la méthode hanler pour surveiller. [Deuxième façon d'écrire]
<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'
};
},
watch: {
name:{
handler(newVal,oldVal){
console.log('newVal',newVal); // 1234
console.log('oldVal',oldVal); // 123
}
}
}
};
</script>
<style></style>Les deux façons d'écrire ci-dessus sont des usages courants des écouteurs de montre. Cet usage a la particularité que lorsque la valeur est liée pour la première fois, la fonction d'écoute ne sera pas exécutée, uniquement lorsque la valeur est liée pour la première fois. la valeur se produit Sera exécuté uniquement lorsqu'il est modifié. Si nous devons exécuter la fonction d'écoute lorsque la valeur est initialement liée, nous devons utiliser l'attribut immédiat.
Parlons maintenant d’une utilisation plus avancée.
Deuxième : utilisation avancée
Par exemple, lorsque le composant parent transfère dynamiquement des valeurs au composant enfant, les accessoires du composant enfant doivent également exécuter la fonction lorsqu'il obtient pour la première fois la valeur par défaut transmise par le Composant parent. À ce stade, il est nécessaire de définir l'attribut immédiat sur true et de l'utiliser conjointement avec la méthode du gestionnaire.
Lorsque l'attribut immédiat est défini sur true, il écoutera à tout moment, que la valeur change ou non ;
Lorsque l'attribut immédiat est défini sur false, en utilisation normale, il n'écoutera que lorsque la valeur change.
<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'
};
},
watch: {
name: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
immediate: true
}
}
};
</script>
<style></style>Exécuter immédiatement :
Lorsque la valeur change :
Troisième méthode : utilisation super avancée (surveillance approfondie)
(1) Pour surveiller les changements dans les variables ordinaires, vous pouvez utiliser le au-dessus de deux méthodes, mais cela ne fonctionne pas lorsque la valeur de la variable surveillée est un objet.
Par exemple, si nous surveillons les modifications des propriétés internes de l'objet de formulaire, nous ne pouvons pas les surveiller.
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></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>Ensuite, à en juger par les résultats, nous n'avons vu aucune impression de sortie, donc la méthode de surveillance ordinaire ne peut pas surveiller les changements dans les propriétés internes de l'objet.
Alors, que pouvons-nous faire pour surveiller les changements dans les propriétés internes de l'objet ?
La méthode watch fournit un attribut profond (surveillance approfondie), qui peut surveiller les changements dans les attributs internes de l'objet.
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></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>Définissez deep : true pour surveiller les modifications dans le formulaire. Si le formulaire a plus d'attributs, cet écouteur sera ajouté à tous les attributs du formulaire et chaque changement de valeur d'attribut sera exécuté.
Lorsque la valeur de l'attribut profond est vraie, vous pouvez surveiller les changements dans les attributs de l'objet ;
Lorsque la valeur de l'attribut profond est fausse, vous ne pouvez pas la surveiller.
(2) Si nous avons seulement besoin de surveiller une certaine valeur d'attribut dans l'objet, nous pouvons utiliser : Écoutez l'attribut de l'objet sous la forme d'une chaîne,
Dans ce processus de surveillance, vous n'avez pas besoin utiliser deep pour surveiller en profondeur un changement dans un attribut d’un objet.
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></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>Le quatrième type : expansion (réseau de surveillance)
(1) les changements (unidimensionnels, multidimensionnels) dans le tableau ne nécessitent pas de surveillance approfondie
<template>
<el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></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 class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
