Parlons des réflexions sur les getters et les setters provoquées par Vue.js

Cause

Lorsque j'ai imprimé les attributs dans l'objet de données sous l'instance Vue, j'ai trouvé une chose intéressante :

Chacun de ses attributs Il y a deux méthodes get et set correspondantes. J'ai pensé que c'était inutile, alors je suis allé en ligne pour vérifier le principe de mise en œuvre de la liaison bidirectionnelle Vue, seulement pour découvrir qu'il est complètement différent du principe de mise en œuvre de la liaison bidirectionnelle Angular.js. Il utilise la détection des données sales. Lorsque le modèle change, il détectera si toutes les vues sont liées aux données pertinentes, puis modifiera les vues. Le modèle de publication-abonnement utilisé par Vue est une liaison de données point à point.

La liaison de données de Vue ne comporte que deux étapes, compile=>link.

J'ai réfléchi à la façon dont Vue surveille les modifications apportées par les utilisateurs au modèle. Ce n'est que lorsque j'ai découvert que chaque attribut des données de Vue avait défini et obtenu des attributs que j'ai compris.

En temps normal, on crée un objet et on modifie ses propriétés, comme ceci :

var obj = {
 val:99
}
obj.val = 100;
console.log(obj.val)//100

Il n'y a pas de problème, mais si on vous a demandé de surveiller et de faire quelque chose lorsque je modifiais les propriétés de cet objet, que feriez-vous ?

Pensées connexes

Cela nécessite l'utilisation de getters et de setters.

Supposons que je veuille ajouter un attribut de nom à un objet codeur, et chaque fois que je mets à jour l'attribut de nom, je dois compléter quelque chose. Nous pouvons faire ceci :

var Coder = function() {
 var that = this;
 return {
  get name(){
   if(that.name){
    return that.name
   }
   return '你还没有取名'
  },
  set name(val){
   console.log('你把名字修成了'+val)
   that.name = val
  }
 }
}
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

< 🎜. >

Sortie :

Vous constaterez que l'effet imprimé de cet objet est le même que l'objet de données dans Vue en haut, les deux ont le mêmes propriétés get et set.

Analysons le code ci-dessus étape par étape, c'est très intéressant.

Nous créons d'abord un objet littéral :

var Coder = function() {...}

Puis mettons en cache ceci :

var that = this;

La chose suivante est la plus importante, on renvoie un objet :

{
 
　　get name(){...},
 
　　set name(val){...}
 
}

Comme son nom l'indique, get est pour l'acquisition de valeur, et set est pour l'affectation. Dans des circonstances normales, nous utilisons obj.prop pour obtenir et attribuer des valeurs, mais cela pose un problème. Comment puis-je savoir que la valeur de l'objet a changé ? C’est donc au tour du décor d’apparaître.

Vous pouvez comprendre get et set en tant que fonctions. Bien sûr, vous ne pouvez les comprendre que de cette façon.

Ensuite, créez une instance du codeur isMe ; pour le moment, isMe n'a pas d'attribut name. Lorsque nous appellerons isMe.name, nous entrerons d'abord get name(){...}. déterminez si isMe a un attribut name. Si la réponse est non, ajoutez un attribut name et attribuez-lui une valeur : "Vous n'avez pas encore donné de nom" ; s'il existe un attribut name, renvoyez l'attribut name.

Après avoir vu cela, vous devez savoir comment utiliser get. Oui, vous pouvez considérer get comme une fonction qui prend une valeur. La valeur de retour de la fonction est la valeur qu'elle obtient.

Je pense que la chose la plus importante est l'attribut set Lorsque j'attribue une valeur à l'instance :

isMe.name="周神"

À ce moment-là. , il entrera le set name( val){...}; Le paramètre formel val est la valeur que j'ai attribuée à l'attribut name. Dans cette fonction, je peux faire beaucoup de choses, comme une liaison bidirectionnelle ! Étant donné que chaque modification de cette valeur doit passer par set, elle ne peut pas être modifiée par d'autres méthodes, ce qui équivaut à un écouteur universel.

Il existe une autre façon d'obtenir cette fonctionnalité.

Le prototype d'objet d'ES5 possède deux nouveaux attributs __defineGetter__ et __defineSetter__, qui sont spécialement utilisés pour lier get et set à des objets.

peut s'écrire ainsi :

var Coder = function() {
}
Coder.prototype.__defineGetter__('name', function() {
 if (this.name) {
  return this.name
 }else{
  return '你还没有取名'
 }
})
Coder.prototype.__defineSetter__('name', function(val) {
 this.name = val
})
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

L'effet est le même. Il est recommandé d'utiliser la méthode suivante car elle est la même. écrit sur le prototype, il peut donc être hérité et réutilisé.

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra être utile aux études ou au travail de chacun. Si vous avez des questions, vous pouvez partir. un message à communiquer.

Pour plus d'informations sur les getters et setters provoqués par Vue.js, veuillez prêter attention au site Web PHP chinois pour les articles connexes !