Research on the principle of vue bidirectional data binding (with demo)

Yesterday, I was called by my tutor to study the principle of two-way data binding of vue. . . I originally thought that the principles were very profound, but I didn’t expect that the two-way binding of vue was really easy to understand. . . I wrote one by myself.

Portal

The idea of ​​two-way binding

The idea of ​​two-way data binding is the synchronization between the data layer and the UI layer. When any of the data changes, it will be updated synchronously to the other.

Some methods of bidirectional binding

At present, there are roughly three methods for front-end to implement bidirectional data binding:

1. Publisher-Subscriber Mode()

Idea: Use custom data attributes to indicate binding in HTML code. All bound JavaScript objects and DOM elements will "subscribe" to a publisher object. Any time a JavaScript object or an HTML input field is detected to change, we will proxy the event to the publisher-subscriber pattern, which in turn will broadcast the change and propagate it to all bound objects and elements.

2. Stolen value detection ()

Idea: Detect data changes through polling. Only when a specific event is triggered, the stolen value detection enters.

It is roughly as follows:

•   DOM events, such as user inputting text, clicking buttons, etc. ( ng-click )

•   XHR response event ($http)

•   Browser Location Change Event ( $location )

•   Timer event ( $timeout , $interval )

•   Execute $digest() or $apply()

3. Data hijacking()

Idea: Use the data object to listen for attributes get and set, and call the node's instructions when there are data reading and assignment operations. In this way, the most common = equal sign assignment can be triggered.

Wue two-way data binding small demo idea

① Construct a Wue object, define the attributes el and data of the object, pass the corresponding data when creating the object, and execute the init() method.

var Wue=function(params){
 =();
 =;
 ();
};

② Init method, execute bindText and bindModel methods. These two methods are to parse the html bound to the w-model and w-text instructions in the dom and perform corresponding processing.

init:function(){
  ();
  ();
 }

③ The bindText method puts the element with the w-text instruction into an array, such as: w-text='demo', and then make its innerHTML value equal to the data[demo] passed in.

bindText:function(){
  var textDOMs=('[w-text]'),
  bindText;
  for(var i=0;i<;i++){
  bindText=textDOMs[i].getAttribute('w-text');
  textDOMs[i].innerHTML=[bindText];
  }
 }

④ The bindModel method puts elements with the w-model directive (usually form-related elements) into an array, such as: w-model='demo', and binds keyup events for each element (compatible with browser writing).

bindModel:function(){
 var modelDOMs=('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i<;i++){
 bindModel=modelDOMs[i].getAttribute('w-model');
 modelDOMs[i].value=[bindModel]||'';
 //Data hijacking (,bindModel);
 if(){
 modelDOMs[i].addEventListener('keyup',function(event) {
  ('test');
  e=event||;
  _that.data[bindModel]=;
 },false);
 }else{
 modelDOMs[i].attachEvent('onkeyup',function(event){
  e=event||;
  _that.data[bindModel]=; 
 },false);
 }
 } 
}

⑤ Use, define the set and get methods, and call the bindText method in the set method. This uses that once the w-model value is changed in the input, the set method will be automatically executed, so only the method that updates w-text is called in this method.

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

⑥Use

html:<br><h3>Two-way data bindingdemo</h3>
<div >
 <input type="text" w-model='demo'>
 <h5 w-text='demo'></h5>
</div><br>js:
 <script src='../js/'></script>
 <script>
 new Wue({
 el:'#wrap',
 data:{
  demo:'winty'
 }
 })
 </script> 

Full demo download:/LuckyWinty/two-way-data

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!