Vue implements two-way data binding

Vue implements two-way data binding, the specific content is as follows

How does Vue implement two-way data binding? The answer is front-end data hijacking. Through the () method, this method can set the getter and setter functions. In the setter function, the data changes can be listened to, thereby updating the value of the bound element.

Implement object attribute changes binding to UI

The general idea is:

1. Determine the bound data and use() to listen for its data changes (corresponding to defineGetAndSet)
2. Once the data is changed, the setter function will be triggered. Therefore, the callback function should be called within the setter function to trigger the update of the bound element.
3. The update of the binding element is to traverse all binding elements, determine the call of the function through the value of the binding attribute, and pass in the modified value. (corresponding scan)

Implement UI changes binding to object properties

This is relatively simple, because changes in the UI will trigger some events, such as keyup. Data changes are achieved by listening to events. As mentioned above, changes in data will in turn cause the UI of the element that binds its value to change.

accomplish

var data = {
 value: 'hello world!'
}
var bindValue;
//Determine the bound elementvar bindelems = [('p'), ('input')];
// Method to modify the value of the bound elementvar command = {
 text: function(str) {
  = str;
 },
 value: function(str) {
  = str;
 }
};
//Transaction of bound elements to modify their valuevar scan = function() {
 ('in scan');
 for(var i = 0; i < ; i++) {
 var elem = bindelems[i];
 ('elem',elem);
 for(var j = 0; j < ; j++) {
 var attr = [j];
 if(('q-')>=0) {
 command[(2)].call(elem, data[]);
 }
 }
 }
}
//Set hijackingvar defineGetAndSet = function(obj, propname) {
 (obj, propname, {
 get: function() {
 return bindValue;
 },
 set: function(value){
 bindValue = value;
 scan();
 },
 enumerable: true,
 configurable: true
 })
} 
//Initialize at the beginning, so that all bound elements are initial valuesscan();
//Set the elements that need to be hijackeddefineGetAndSet(data, 'value');
// Listen to UI changesbindelems[1].addEventListener('keyup', function(e) {
  = ;
});
setTimeout(function() {
  = 'change';
}, 1000);

refer to:

Three ways to implement bidirectional data binding in javascript

Analyzing the principle of Vue & implementing two-way binding MVVM

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.