Preface: Recently, the team needs to share, put their feet into their brains, and don’t know how to share. Finally, I thought about thinking about studying the vue source code before, and today I just "take this opportunity" to study it.
There are already many articles studying vue data binding online, but writing and typing demos by yourself is completely different from reading other people's articles, so... the porter is here
Currently, there are three main implementation methods for data binding:
1. Dirty value check () Polling to detect data changes
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()
2. Hijack the object's get and set to realize data monitoring. (vue)
3. Publish/subscriber mode realizes automatic synchronization of data and views
Advantages
- "Dirty value detection" - After the data changes, the binding relationship between all data and views is detected once to identify whether any data has changed and changes are processed, which may further trigger changes in other data. Therefore, this process may be cycled several times until no data changes occur. The changed data is sent to the view and the updated page display is updated.
- () Monitor the operation on data and can automatically trigger data synchronization. Moreover, since synchronization is triggered on different data, changes can be sent to the bound view accurately, rather than performing a detection on all data once.
Usage
var a = {};
(a, "b", {
set: function (newValue) {
("I've been assigned!" + newValue);
},
get: function () {
("I'm valued!");
return 2
}
})
= 3; //I was assigned a value!(); //I've been valued! //Print 2
From the above example, the successor has 3 parameters
The first: object a
The second: the b attribute in the a object
Third: There are many attributes, listing useful values, set, get, and configurable
Data binding principle:
1. Implement an Observer data listener to all attributes of the data object. If there is any change, get the latest value and notify the dep array.
2. Implement a command parser Compile, scan and parse instructions of each element node, and replace data according to the instruction template.
3. Implement a dep array, which can subscribe and receive notifications of each property change, execute the corresponding callback function bound by the instruction, and update the view
1. Implement the observer
var data = {name: 'beidan'};
observe(data);
= 'test'; // The monitor value has changed. beidan becomes testfunction observe(data) { if (!data || typeof data !== 'object') {
return;
}
// Take out all attributes to traverse (data).forEach(function(key) {
defineReactive(data, key, data[key]);
});
}
function defineReactive(data, key, val) {
(data, key, {
enumerable: true, // Enumerable configurable: false, // Can't define anymore get: function() {
return val;
},
set: function(newVal) {
('The monitor value has changed', val, 'Become', newVal);
val = newVal;
}
});
}
2. Maintain an array
function Dep() {
= [];
}
= {
addSub: function (sub) {
(sub);
},
notify: function (val) {
(function (sub) {
(val)
});
}
};
function defineReactive(data, key, val) {
(data, key, {
……
set: function(newVal) {
if (val === newVal) return;
('The monitor value has changed', val, 'Become', newVal);
val = newVal;
(val); // Notify all subscribers }
});
}
3. compile
bindText: function () {
var textDOMs = ('[v-text]'),
bindText,_context = this;
for (var i = 0; i < ; i++) {
bindText = textDOMs[i].getAttribute('v-text');
textDOMs[i].innerHTML = [bindText];
var val = textDOMs[i]
var up = function (text) {
= text
}
_context.({
value: textDOMs[i],
update: up
});
}
},
Finally, attach the source code github/beidan/vue_bind
Reference link:
https:///article/
https:///article/
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!