One of Vue's most unique features is a non-invasive response system. The data model is just a normal JavaScript object. And when you modify them, the view will be updated. When talking about the principle of Vue responsive implementation, many developers know that the key to implementation lies in utilization, but how is it implemented specifically? Today we will explore it.
For easy understanding, let's start with a small example:
<body>
<div >
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>We have successfully created our first Vue app! It looks like this is very similar to rendering a string template, but Vue does a lot of work behind the scenes. Now that the data and the DOM have been associated, everything is responsive. How do we confirm? Open the JavaScript console of your browser (opened on this page) and modify the value, and you will see the above example updated accordingly. Modify the data and update it automatically. How does Vue do it?
When creating an instance through the Vue constructor, an initialization operation will be performed:
function Vue (options) {
this._init(options);
}This _init initialization function will initialize life cycles, events, rendering functions, states, etc.:
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm);
initState(vm);
initProvide(vm);
callHook(vm, 'created');Because the topic of this article is responsive principle, we only focus on initState(vm). Its key calling steps are as follows:
function initState (vm) {
initData(vm);
}
function initData(vm) {
// data is the {message: 'Hello Vue!'} we create a Vue instance and pass it in. observe(data, true /* asRootData */);
}
function observe (value, asRootData) {
ob = new Observer(value);
}
var Observer = function Observer (value) {
(value);
}
= function walk (obj) {
var keys = (obj);
for (var i = 0; i < ; i++) {
// Implement responsive key functions defineReactive$$1(obj, keys[i]);
}
};
}Let’s summarize the initState(vm) process above. When the initialization state is started, the application data will be detected, that is, an Observer instance is created, and the walk method on the prototype will be executed internally. The main function of the walk method is to traverse all attributes of the data and convert each attribute into a responsive form. The conversion work is mainly done by the defineReactive$$1 function.
function defineReactive$$1(obj, key, val) {
var dep = new Dep();
(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
var value = getter ? (obj) : val;
if () {
();
if (childOb) {
();
if ((value)) {
dependArray(value);
}
}
}
return value
},
set: function reactiveSetter(newVal) {
var value = getter ? (obj) : val;
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (customSetter) {
customSetter();
}
// #7981: for accessor properties without setter
if (getter && !setter) { return }
if (setter) {
(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
();
}
});
}defineReactive$$1 function is internally used to monitor data changes. Whenever data is read from obj's key, the get function is triggered; whenever data is set into obj's key, the set function is triggered. We say that modifying data triggers the set function, so how does the set function update the view? Take the example at the beginning of this article to analyze:
<div >
{{ message }}
</div>This template uses data message. When the value of message changes, all views in the application that use message can trigger updates. In the internal implementation of Vue, first collect dependencies, that is, collect the places used for data message, and then when the data changes, trigger all the previously collected dependencies. That is to say, we collect dependencies in the above get function and trigger view updates in the set function. The next focus is to analyze the get function and the set function. Let’s look at the get function first, the key calls are as follows:
get: function reactiveGetter () {
if () {
();
}
}
= function depend () {
if () {
(this);
}
};
= function addDep (dep) {
(this);
}
= function addSub (sub) {
(sub);
};
in Dep The constructor is as follows：
var Dep = function Dep () {
= uid++;
= [];
};The value in the above code is an instance of Watcher, and we will analyze when it is assigned later. Let's summarize the work done by the get function in one sentence: add the current Watcher instance (that is,) to the subs array of the Dep instance. Before continuing to analyze the get function, we need to figure out when the value of the watcher instance will be assigned. Here we need to start analyzing from the mountComponent function:
function mountComponent (vm, el, hydrating) {
updateComponent = function () {
vm._update(vm._render(), hydrating);
};
new Watcher(vm, updateComponent, noop, xxx);
}
// Under the Wather constructorvar Watcher = function Watcher (vm, expOrFn, cb) {
if (typeof expOrFn === 'function') {
= expOrFn;
} else {
= parsePath(expOrFn);
}
= ();
}
= function get () {
pushTarget(this);
value = (vm, vm);
}
function pushTarget (target) {
(target);
= target;
}From the above code, we know that the mountComponent function will create a Watcher instance, and the pushTarget function will eventually be called in its constructor to assign the current Watcher instance to . In addition, we noticed that the action of creating a Watcher instance occurs inside the function mountComponent, which means that the Watcher instance is component-level granularity, rather than creating a new Watcher instance where data is used. Now let’s take a look at the main calling process of the set function:
set: function reactiveSetter (newVal) {
();
}
= function notify () {
var subs = ();
for (var i = 0, l = ; i < l; i++) {
subs[i].update();
}
}
= function update () {
queueWatcher(this);
}
= function update () {
// queue is a global array (watcher);
nextTick(flushSchedulerQueue);
}
// flushSchedulerQueue is a global function function flushSchedulerQueue () {
for (index = 0; index < ; index++) {
watcher = queue[index];
();
}
}
= function run () {
var value = ();
}The content of the set function is a bit long, but the above codes are all simplified and should not be difficult to understand. When changing the application data, the set function is triggered. It will call the notify() method of the Dep instance, and the notify method will call the update method of all Watcher instances collected by the current Dep instance to update all view parts that use the data. Let's continue to see what the update method of the Watcher instance does. The update method will add the current watcher to the array queue, and then execute the run method of each watcher in the queue. The run method will execute the get method on the Wather prototype internally. The subsequent calls are described in the previous analysis of the mountComponent function, so I will not repeat them here. To summarize, the final update method will trigger the updateComponent function:
updateComponent = function () {
vm._update(vm._render(), hydrating);
};
._update = function (vnode, hydrating) {
vm.$el = vm.__patch__(prevVnode, vnode);
}Here we notice that the first parameter of the _update function is vnode. vnode, as the name implies, means a virtual node. It is a normal object, and the data required to generate the DOM node is saved on the properties of the object. When it comes to virtual nodes, do you easily think of virtual DOM? Yes, virtual DOM is also used in Vue. As mentioned earlier, Wather is related to components, and the updates inside components are compared and rendered using virtual DOM. The patch function is called internally by the _update function. Through this function, the difference between the old and new vnodes is compared, and then the nodes that need to be updated are found based on the comparison results and updated.
Note: The analysis examples in this article are based on the Vue v2.6.14 version.
This is the end of this article about the detailed explanation of the Vue responsive principle. For more related content on Vue responsive principle, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!