Research on the principle of two-way data binding in Vue

The idea of ​​two-way binding

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

Some methods of two-way binding

Currently, there are roughly three ways to implement two-way data binding on the front end:

1. Publisher-subscriber model ( backbone.js)

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

2. Stolen value detection (angular.js)

Idea: Detect data changes through polling. Only when a specific event is triggered will the stolen value detection be entered.

Approximately as follows:

• DOM events, such as users entering 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 (vue.js)

Idea: Use Object.defineProperty to make attributes on the data object The monitoring of get and set calls the node's instructions when there are data reading and assignment operations, so that the most common = equal sign assignment can be triggered.

Wue two-way data binding small demo idea

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

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

② The bindText and bindModel methods are executed in the Init method. These two methods are to parse the html bound to the w-model and w-text instructions in the dom and process them accordingly. .

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

③ bindText method, put the elements with w-text directive into an array, such as: w-text='demo', and then make the value of innerHTML equal to the passed Incoming data[demo].

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];
  }
 }

④ bindModel method, put elements with w-model instructions (generally form-related elements) into an array, such as: w-model='demo', for Each element is bound to the keyup event (compatible with browser writing).

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);
 }
 }
}

⑤ Use Object.defineProperty to define the set and get methods, and call the bindText method in the set method. This is used once the value of w-model is changed in the input, the set method will be automatically executed, so only the method of updating w-text can be called in this method.

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!')
  }
 }

⑥Use

html:<br><h3 id="双向数据绑定demo">双向数据绑定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>

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope that there will be more Support PHP Chinese website!

For more related articles exploring the principles of vue two-way data binding, please pay attention to the PHP Chinese website!