Table des matières
Implémentation du navigateur :
Entrée en lecture et en écriture :
surveillance de l'attribut de l'auditeur
Implémentation du navigateur :
La propriété dans l'objet écoute :
Adresse du site officiel : Propriétés calculées et auditeurs - Vue.js (vuejs.org)
Propriété calculée calculée
- Le nom de la méthode peut être utilisé directement dans l'objet. Cette propriété est calculée par
- Tout changement de propriété dans cette méthode déclenchera cette méthode
Scénario d'utilisation
Exemple de nom :
Dans cet exemple, il existe des méthodes et des propriétés calculées.
Il est recommandé d'utiliser des propriétés calculées. Il existe un mécanisme de mise en cache et lorsque la page est appelée plusieurs fois à plusieurs reprises, elle n'est exécutée qu'une seule fois.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form>
姓：<input type="text" v-model="firstName">
名：<input type="text" v-model="lastName"><br>
方法只读实现：<input type="text" v-model="getFullName()"><br>
计算属性只读实现：<input type="text" v-model="fullName"><br><!--计算属性直接使用不用带括号-->
计算属性读写实现：<input type="text" v-model="funName"><!--计算属性直接使用不用带括号-->
</form>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
firstName:'史蒂芬',
lastName:'库里',
}
},
methods:{
//只读方式-方法中
getFullName(){
return this.firstName+"-"+this.lastName;
},
},
computed:{
//只读方式-计算属性中
fullName(){
return this.firstName+"-"+this.lastName;
},
//读写方式
funName:{
get(){
return this.firstName+"-"+this.lastName;
},
set(value){
this.firstName=value.split("-")[0];
this.lastName=value.split("-")[1];
}
},
},
});
</script>
</html>Implémentation du navigateur :
Saisie du sexe et du nom :
Si le nom et le prénom sont modifiés, ils seront modifiés ensemble ultérieurement.
Entrée en lecture seule :
L'implémentation en lecture seule et les autres ne seront pas modifiées ensemble, et il y aura des cas où le navigateur signalera une erreur
Entrée en lecture et en écriture :
Les implémentations de lecture et d'écriture peuvent également être modifiées avec d'autres, mais les attributs informatiques sont généralement uniquement en lecture seule, et la lecture et l'écriture ne sont pas beaucoup utilisées.
surveillance de l'attribut de l'auditeur
- Lorsque la propriété surveillée change, la fonction de rappel est appelée pour effectuer les opérations associées
- L'attribut d'écoute doit exister pour l'écoute
Scénario d'utilisation : cette méthode est particulièrement utile lorsque des opérations asynchrones ou coûteuses doivent être effectuées lorsque les données changent, par exemple : opérations sur les données avant et après modification, modification du nom.
Exemple d'exercice :
Cet exemple ne nécessite pas de démonstration du code HTML, mais le code HTML doit écrire une boîte div pour lier el, sinon le navigateur signalera une erreur
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
isSunny:true,
person:{
name:"小明",
age:18
}
}
},
watch:{
//表示要对isSunny这个属性进行侦听
isSunny(newVal,oldVal){
console.log("改变了","修改前的数据：",oldVal,"修改后的数据：",newVal);
},
//深度侦听可以用来监听整个对象的改变，但要慎重使用，因为消耗性能
person:{
immediate:true, //开启初始化调用
deep:true, //开启深度侦听
handler(newVal,oldVal){
console.log("改变了","修改前的数据：",oldVal,"修改后的数据：",newVal);
}
},
// 侦听复杂数据的某个属性，这也是一种简写方式
"person.name"(newVal,oldVal){
console.log("改变了","修改前的数据：",oldVal,"修改后的数据：",newVal);
}
}
});
</script>Implémentation du navigateur :
Écouteur de propriété :
Le type d'interception le plus couramment utilisé, vous pouvez obtenir les données avant et après modification
L'objet écoute :
attribut d'initialisation immédiate : l'actualisation de la page Web exécute automatiquement cette surveillance une fois.
Attribut d'écoute profonde profonde : utilisé pour écouter le changement de l'objet entier, sans cet attribut, l'objet ne peut pas être écouté.
Mais utilisez-le avec prudence, car il consomme trop de performances ; et l'objet avant modification est le même que l'objet après modification, cela devrait être un bug et il pourrait être corrigé dans une future version de Vue.
La propriété dans l'objet écoute :
Si vous souhaitez écouter l'objet, il est recommandé d'utiliser cette méthode ;
Étant donné que le nom correspond aux données de l'objet personne, l'écoute de l'objet est également exécutée
