Comme mentionné dans le principe de réponse approfondie dans la documentation officielle de vue, il existe quelques précautions pour détecter les changements .
En raison des limitations de JavaScript, Vue ne peut pas détecter les changements dans les tableaux et les objets. Néanmoins, nous avons encore des moyens de contourner ces restrictions et d'assurer leur réactivité.
Que signifie cette phrase?
Regardons d'abord un petit exemple.
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.user.age = 20; }
}
});
</script>
Tout d'abord, nous écrivons les données dans un objet utilisateur vide , la fonction de hook Created , nous avons l' ajout d'un nom d'attribut d'objet utilisateur , attribué à Ray .
Ensuite, nous avons écrit un bouton. L'accent est mis sur le fonctionnement de ce bouton. Nous voulons continuer à ajouter un attribut d'âge à ce bouton avec une valeur de 20 .
Selon la logique normale, cela ne devrait pas poser de problème.
Jetons un œil au rendu de la page.
Une instruction a été sortie sur la console, indiquant que nous avons déclenché l'événement de clic , mais que la valeur de l'âge n'a pas été rendue sur la page .
Ce qui ne va pas, ce sont les précautions que la vue officielle invite.
En raison des limitations de JavaScript, Vue ne peut pas détecter les changements dans les tableaux et les objets. Néanmoins, nous avons encore des moyens de contourner ces restrictions et d'assurer leur réactivité.
Voyons comment résoudre ce problème? Vue
fournit une API, Vue. $ Set (objet, clé, valeur) , pour éviter ce problème.
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.$set(this.user,'age',20); }
}
});
</script>
Après avoir utilisé cette API fournie par vue, nous examinerons les résultats de rendu de la page.
Effectivement, le contenu de l'attribut age peut être affiché normalement.
Mais l'API ci-dessus, Vue. $ Set (objet, clé, valeur) , ne peut ajouter qu'un attribut à la fois . Et si nous voulons ajouter plusieurs ensembles d'attributs?
Vue nous a également fourni des contre-mesures.
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.user = Object.assign({
},this.user,{
age:20,
phone:18331092918
})
}
}
});
</script>
Object.assign ({}, this.someObject, {clé1: valeur1, clé2: valeur2})
Jetons un coup d'œil à l'effet d'affichage de la page:
Effectivement, c'était très agréable.
Aujourd'hui ce point de connaissance est encore plus important, qu'il s'agisse d'entretiens ou de notre développement quotidien, nous pouvons marcher sur ce gouffre.
Il existe une conception de cours de mini-programme WeChat, des besoins de conception complets, contactez le personnel QQ: 505417246
Faites attention au compte public WeChat suivant, vous pouvez recevoir l'applet WeChat, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python et d'autres supports d'apprentissage pratiques. Le
dernier et le plus complet résumé des connaissances frontales et le code source du projet sera rendu public WeChat dès que possible Non. Veuillez faire attention, merci!
