Recherche sur le principe de la liaison de données bidirectionnelle dans Vue

L'idée de la liaison bidirectionnelle

L'idée de la liaison de données bidirectionnelle est la synchronisation de la couche de données et de la couche d'interface utilisateur. Lorsque l'une des deux change, les données. sera mis à jour de manière synchrone avec l’autre.

Certaines méthodes de liaison bidirectionnelle

Actuellement, il existe environ trois façons d'implémenter la liaison de données bidirectionnelle sur le front-end :

Modèle éditeur-abonné. ( backbone.js)

Idée : utilisez des attributs de données personnalisés pour spécifier la liaison dans le code HTML. Tous les objets JavaScript liés et les éléments DOM seront « abonnés » à un objet éditeur. Chaque fois qu'un objet JavaScript ou un champ de saisie HTML est détecté comme ayant été modifié, nous déléguerons l'événement au modèle éditeur-abonné, qui à son tour diffusera et propagera la modification à tous les objets et éléments liés.

2. Détection des valeurs de corruption (angular.js)

Idée : Détecter les modifications de données via une interrogation. Ce n'est que lorsqu'un événement spécifique est déclenché que la détection de valeur volée sera saisie.

est à peu près le suivant :

• Événements DOM, tels que la saisie de texte par l'utilisateur, le clic sur des boutons, etc. (ng-click)

• Événement de réponse XHR ($http)

• Événement de changement d'emplacement du navigateur ($location)

• Événement de minuterie ($timeout, $interval)

• Exécutez $digest() ou $apply()

3. Détournement de données (vue.js)

Idée : utilisez Object.defineProperty pour attribuer des propriétés aux objets de données. La surveillance de get et set appelle les instructions du nœud lorsqu'il y a des opérations de lecture et d'affectation de données, afin que l'affectation de signe = égal la plus courante puisse être déclenchée.

Petite idée de démonstration de liaison de données bidirectionnelle Wue

① Construisez un objet Wue, définissez les attributs el et les données de l'objet, transmettez les données correspondantes lors de la création de l'objet et exécutez l'initialisation () méthode.

var Wue=function(params){
 this.el=document.querySelector(params.el);
 this.data=params.data;
 this.init();
};

② Les méthodes bindText et bindModel sont exécutées dans la méthode Init. Ces deux méthodes servent à analyser le code HTML lié aux instructions w-model et w-text dans le dom. et créez Handle en conséquence.

init:function(){
  this.bindText();
  this.bindModel();
 }

③ méthode bindText, placez les éléments avec la directive w-text dans un tableau, tel que : w-text='demo', puis définissez la valeur de innerHTML It est égal aux données [demo] transmises.

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute(&#39;w-text&#39;);
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }

④ méthode bindModel, placez les éléments avec des instructions w-model (généralement des éléments liés au formulaire) dans un tableau, tel que : w-model='demo' , liez le événement keyup sur chaque élément (compatible avec l'écriture du navigateur).

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute(&#39;w-model&#39;);
 modelDOMs[i].value=this.data[bindModel]||&#39;&#39;;
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener(&#39;keyup&#39;,function(event) {
  console.log(&#39;test&#39;);
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent(&#39;onkeyup&#39;,function(event){
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }
 }
}

⑤ Utilisez Object.defineProperty pour définir les méthodes set et get, et appelez la méthode bindText dans la méthode set. Ceci est utilisé une fois que la valeur de w-model est modifiée dans l'entrée, la méthode set sera automatiquement exécutée, donc seule la méthode de mise à jour de w-text peut être appelée dans cette méthode.

defineObj:function(obj,prop,value){
  var val=value||'';
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
  
  }catch (err){
  console.log('Browser not support!')
  }
 }

⑥Utilisation

html:<br><h3>双向数据绑定demo</h3>
<div id="wrap">
 <input type="text" w-model=&#39;demo&#39;>
 <h5 w-text=&#39;demo&#39;></h5>
</div><br>js:
 <script src=&#39;../js/wue.js&#39;></script>
 <script>
 new Wue({
 el:&#39;#wrap&#39;,
 data:{
  demo:&#39;winty&#39;
 }
 })
 </script>

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide à l'étude ou à chacun. travailler. En même temps, j'espère également soutenir le site Web PHP chinois !

Pour plus d'articles sur les principes de liaison de données bidirectionnelle de Vue, veuillez prêter attention au site Web PHP chinois !