Vue batch update dom implementation steps
Scene Introduction In a SFC (single file component), we often write logic like this:
<template>
<div>
<span>{{ a }}</span>
<span>{{ b }}</span>
</div>
</template>
<script type="javascript">
export default {
data() {
return {
a: 0,
b: 0
}
},
created() {
// some logic code
this.a = 1
this.b = 2
}
}
</script>
As you may know, after completing the assignment operations of this.a and this.b, Vue will put the corresponding DOM update functions of this.a and this.b into a microtask. After waiting for the synchronization task of the main thread to be executed, the microtask will be dequeued and executed. Let's take a look at how Vue's official document "In-depth Responsive Principles - Declaring Responsive Properties" describes it: In case you haven't noticed, Vue does its updates to the DOM asynchronously. As long as data changes are detected, Vue will open a queue and buffer all data changes that occur in the same event loop. So, how does Vue achieve this capability? To answer this question, we need to go deep into the core part of the Vue source code - the responsive principle. Deep responsiveness Let's first take a look at what happens after we assign values to this.a and this.b. If you use Vue CLI for development, there will be a new Vue() instantiation operation in the main.js file. Since Vue's source code is written using flow, the cost of understanding is invisibly increased. For convenience, let's look directly at the vue.js source code in the dist folder in the npm vue package. Searching for 'function Vue', I found the following source code:
function Vue (options) {
if (!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
Very simple source code, the source code is really not as difficult as we imagined! With such an unexpected surprise, we continue to find the _init function and see what this function does:
Vue.prototype._init = function (options) {
var vm = this;
// a uid
vm._uid = uid$3++;
var startTag, endTag;
/* istanbul ignore if */
if (config.performance && mark) {
startTag = "vue-perf-start:" + (vm._uid);
endTag = "vue-perf-end:" + (vm._uid);
mark(startTag);
}
// a flag to avoid this being observed
vm._isVue = true;
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
/* istanbul ignore else */
{
initProxy(vm);
}
// expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
/* istanbul ignore if */
if (config.performance && mark) {
vm._name = formatComponentName(vm, false);
mark(endTag);
measure(("vue " + (vm._name) + " init"), startTag, endTag);
}
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
}
Let’s ignore the above judgments for now and go directly to the main logic below. It can be seen that the _init function executes initLifeCycle, initEvents, initRender, callHook, initInjections, initState, initProvide and the second callHook function in succession. From the naming of the function, we can know the specific meaning. Generally speaking, this code is divided into the following two parts
Among them, the data responsiveness principle part we care about is in the initState function. Let's see what this function does:
function initState (vm) {
vm._watchers = [];
var opts = vm.$options;
if (opts.props) { initProps(vm, opts.props); }
if (opts.methods) { initMethods(vm, opts.methods); }
if (opts.data) {
initData(vm);
} else {
observe(vm._data = {}, true /* asRootData */);
}
if (opts.computed) { initComputed(vm, opts.computed); }
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch);
}
}
Here we see several configuration items that are often seen when writing SFC files: props, methods, data, computed, and watch. We focus our attention on the opts.data part, which executes the initData function:
function initData (vm) {
var data = vm.$options.data;
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {};
if (!isPlainObject(data)) {
data = {};
warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
);
}
// proxy data on instance
var keys = Object.keys(data);
var props = vm.$options.props;
var methods = vm.$options.methods;
var i = keys.length;
while (i--) {
var key = keys[i];
{
if (methods && hasOwn(methods, key)) {
warn(
("Method \"" + key + "\" has already been defined as a data property."),
vm
);
}
}
if (props && hasOwn(props, key)) {
warn(
"The data property \"" + key + "\" is already declared as a prop. " +
"Use prop default value instead.",
vm
);
} else if (!isReserved(key)) {
proxy(vm, "_data", key);
}
}
// observe data
observe(data, true /* asRootData */);
}
When we write the data configuration item, we define it as a function, so the getData function is executed here:
function getData (data, vm) {
// #7573 disable dep collection when invoking data getters
pushTarget();
try {
return data.call(vm, vm)
} catch (e) {
handleError(e, vm, "data()");
return {}
finally
popTarget();
}
}
What the getData function does is very simple, it executes the data function in the context of the component instance. Note that the pushTarget function and popTarget function are executed before and after the data function is executed. We will talk about these two functions later. After executing the getData function, we return to the initData function. There is an error judgment of a loop behind it, which we will ignore for now. So we come to the observe function:
function observe (value, asRootData) {
if (!isObject(value) || value instanceof VNode) {
return
}
var ob;
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__;
} else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
ob = new Observer(value);
}
if (asRootData && ob) {
ob.vmCount++;
}
return ob
}
The observe function creates an observer (ob) for the data object, that is, instantiates the Observer. What does the instantiation of the Observer do specifically? Let's continue looking at the source code:
var Observer = function Observer (value) {
this.value = value;
this.dep = new Dep();
this.vmCount = 0;
def(value, '__ob__', this);
if (Array.isArray(value)) {
if (hasProto) {
protoAugment(value, arrayMethods);
} else {
copyAugment(value, arrayMethods, arrayKeys);
}
this.observeArray(value);
} else {
this.walk(value);
}
}
Under normal circumstances, because the data function we define returns an object, we will not deal with the array here. Then continue to execute the walk function:
Observer.prototype.walk = function walk (obj) {
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
defineReactive$$1(obj, keys[i]);
}
}
For the object returned by the data function, that is, for each enumerable property in the data object of the component instance, execute the defineReactive$$1 function:
function defineReactive$$1 (
obj,
key,
val,
customSetter,
shallow
) {
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key);
if (property && property.configurable === false) {
return
}
// cater for pre-defined getters/setters
var getter = property && property.get;
var setter = property && property.set;
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
var childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
},
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(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) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
dep.notify();
}
});
}
In the defineReactive$$1 function, a dependency collector is first instantiated. Then use Object.defineProperty to redefine the getter (that is, the get function above) and setter (that is, the set function above) of the object property. Triggering getters In a sense, getter and setter can be understood as callback functions. When the value of a property of an object is read, the get function (ie, getter) is triggered; when the value of a property of an object is set, the set function (ie, setter) is triggered. Let's go back to the original example:
<template>
<div>
<span>{{ a }}</span>
<span>{{ b }}</span>
</div>
</template>
<script type="javascript">
export default {
data() {
return {
a: 0,
b: 0
}
},
created() {
// some logic code
this.a = 1
this.b = 2
}
}
</script>
Here, the values of properties a and b of the this object are set, so the setter is triggered. Let's take out the above set function code separately:
function reactiveSetter (newVal) {
var value = getter ? getter.call(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) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
dep.notify();
}
The setter executes the getter first:
function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
}
The getter first checks whether Dep.target exists. When the getData function was executed earlier, the initial value of Dep.target was null. When was it assigned a value? When we talked about the getData function earlier, we saw a pushTarget function and a popTarget function. The source code of these two functions is as follows:
Dep.target = null;
var targetStack = [];
function pushTarget (target) {
targetStack.push(target);
Dep.target = target;
}
function popTarget () {
targetStack.pop();
Dep.target = targetStack[targetStack.length - 1];
}
To execute the getter normally, you need to execute the pushTarget function first. Let's find out where the pushTarget function is executed. Searching for pushTarget in vue.js, we found 5 places, excluding the definition place, there are 4 execution places.
function handleError (err, vm, info) {
// Deactivate deps tracking while processing error handler to avoid possible infinite rendering.
// See: https://github.com/vuejs/vuex/issues/1505
pushTarget();
try {
if (vm) {
var cur = vm;
while ((cur = cur.$parent)) {
var hooks = cur.$options.errorCaptured;
if (hooks) {
for (var i = 0; i < hooks.length; i++) {
try {
var capture = hooks[i].call(cur, err, vm, info) === false;
if (capture) { return }
} catch (e) {
globalHandleError(e, cur, 'errorCaptured hook');
}
}
}
}
}
globalHandleError(err, vm, info);
finally
popTarget();
}
}
The second place where pushTarget is executed. This is to call the corresponding hook function. It will be triggered when the corresponding hook function is executed. However, our current operation is between the beforeCreate hook and the created hook and has not been triggered:
function callHook (vm, hook) {
// #7573 disable dep collection when invoking lifecycle hooks
pushTarget();
var handlers = vm.$options[hook];
var info = hook + " hook";
if (handlers) {
for (var i = 0, j = handlers.length; i < j; i++) {
invokeWithErrorHandling(handlers[i], vm, null, vm, info);
}
}
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook);
}
popTarget();
}
The third place where pushTarget is executed. This is the function that is executed when the watcher is instantiated. Checking the previous code, we don't seem to see the operation of new Watcher:
Watcher.prototype.get = function get () {
pushTarget(this);
var value;
var vm = this.vm;
try {
value = this.getter.call(vm, vm);
} catch (e) {
if (this.user) {
handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
} else {
throw e
}
finally
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value);
}
popTarget();
this.cleanupDeps();
}
return value
}
The fourth place where pushTarget is executed is the previous getData function. But the getData function is executed before the defineReactive$$1 function. After executing the getData function, Dep.target has been reset to null.
function getData (data, vm) {
// #7573 disable dep collection when invoking data getters
pushTarget();
try {
return data.call(vm, vm)
} catch (e) {
handleError(e, vm, "data()");
return {}
finally
popTarget();
}
}
It seems that directly triggering the setter does not allow the logic in the getter to execute normally. Moreover, we also found that since Dep.target is also judged in the setter, if we cannot find the source of Dep.target, the logic of the setter cannot go on. Find Dep.target So, where does the value of Dep.target come from? Don't worry, let's go back to the operation of the _init function and continue looking down:
Vue.prototype._init = function (options) {
var vm = this;
// a uid
vm._uid = uid$3++;
var startTag, endTag;
/* istanbul ignore if */
if (config.performance && mark) {
startTag = "vue-perf-start:" + (vm._uid);
endTag = "vue-perf-end:" + (vm._uid);
mark(startTag);
}
// a flag to avoid this being observed
vm._isVue = true;
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
/* istanbul ignore else */
{
initProxy(vm);
}
// expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
/* istanbul ignore if */
if (config.performance && mark) {
vm._name = formatComponentName(vm, false);
mark(endTag);
measure(("vue " + (vm._name) + " init"), startTag, endTag);
}
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
}
We found that at the end of the _init function, the vm.$mount function was executed. What does this function do?
Vue.prototype.$mount = function (
el,
hydrating
) {
el = el && inBrowser ? query(el) : undefined;
return mountComponent(this, el, hydrating)
}
Let's continue to enter the mountComponent function and take a look:
function mountComponent (
vm,
el,
hydrating
) {
vm.$el = el;
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode;
{
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
warn(
'You are using the runtime-only build of Vue where the template ' +
'compiler is not available. Either pre-compile the templates into ' +
'render functions, or use the compiler-included build.',
vm
);
} else {
warn(
'Failed to mount component: template or render function not defined.',
vm
);
}
}
}
callHook(vm, 'beforeMount');
var updateComponent;
/* istanbul ignore if */
if (config.performance && mark) {
updateComponent = function () {
var name = vm._name;
var id = vm._uid;
var startTag = "vue-perf-start:" + id;
var endTag = "vue-perf-end:" + id;
mark(startTag);
var vnode = vm._render();
mark(endTag);
measure(("vue " + name + " render"), startTag, endTag);
mark(startTag);
vm._update(vnode, hydrating);
mark(endTag);
measure(("vue " + name + " patch"), startTag, endTag);
};
} else {
updateComponent = function () {
vm._update(vm._render(), hydrating);
};
}
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (eg inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, {
before: function before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate');
}
}
}, true /* isRenderWatcher */);
hydrating = false;
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
vm._isMounted = true;
callHook(vm, 'mounted');
}
return vm
}
We were pleasantly surprised to find that there is a new Watcher operation! It is true that after many twists and turns, you may think there is no way out, but suddenly you see another village with willows and flowers! The watcher instantiated here is a watcher used to update the DOM. It will read all the values in the template section of the SFC file in sequence. This means that the corresponding getter will be triggered. Getters At this point, we have finally reached the core of Vue's responsive principle. Let's go back to the getter and see what the getter does after having Dep.target:
function reactiveGetter () {
var value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
if (Array.isArray(value)) {
dependArray(value);
}
}
}
return value
}
Similarly, we will not focus on the details of improving the robustness of the code, but will focus directly on the main line. As you can see, when Dep.target exists, the dep.depend function is executed. What does this function do? Let's look at the code:
Dep.prototype.depend = function depend() {
if (Dep.target) {
Dep.target.addDep(this);
}
}
What you do is also very simple. The Dep.target.addDep function is executed. But Dep.target is actually a watcher, so we have to go back to the Watcher code:
Watcher.prototype.addDep = function addDep (dep) {
var id = dep.id;
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id);
this.newDeps.push(dep);
if (!this.depIds.has(id)) {
dep.addSub(this);
}
}
}
Similarly, we ignore some minor logic processing and focus on the dep.addSub function:
Dep.prototype.addSub = function addSub (sub) {
this.subs.push(sub);
}
It is also a very simple logic, pushing the watcher into the array as a subscriber for caching. At this point, the entire logic of the getter is completed. After that, the popTarget function is executed and Dep.target is reset to null Setters Let's go back to the business code again:
<template>
<div>
<span>{{ a }}</span>
<span>{{ b }}</span>
</div>
</template>
<script type="javascript">
export default {
data() {
return {
a: 0,
b: 0
}
},
created() {
// some logic code
this.a = 1
this.b = 2
}
}
</script>
In the created life cycle, we triggered the setter twice. The logic of the setter execution is as follows:
function reactiveSetter (newVal) {
var value = getter ? getter.call(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) {
setter.call(obj, newVal);
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
dep.notify();
}
Here, we only need to focus on the last function executed by the setter: dep.notify(). Let's look at what this function does:
Dep.prototype.notify = function notify () {
// stabilize the subscriber list first
var subs = this.subs.slice();
if (!config.async) {
// subs aren't sorted in scheduler if not running async
// we need to sort them now to make sure they fire in correct
// order
subs.sort(function (a, b) { return a.id - b.id; });
}
for (var i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
}
Each element of This.subs is a watcher. In the getter section above, we only collected one watcher. Because the setter is triggered twice, subs[0].update(), that is, the watcher.update() function will be executed twice. Let's look at what this function does:
Watcher.prototype.update = function update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true;
} else if (this.sync) {
this.run();
} else {
queueWatcher(this);
}
}
As usual, we jump directly into the queueWatcher function:
function queueWatcher (watcher) {
var id = watcher.id;
if (has[id] == null) {
has[id] = true;
if (!flushing) {
queue.push(watcher);
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
var i = queue.length - 1;
while (i > index && queue[i].id > watcher.id) {
i--;
}
queue.splice(i + 1, 0, watcher);
}
// queue the flush
if (!waiting) {
waiting = true;
if (!config.async) {
flushSchedulerQueue();
return
}
nextTick(flushSchedulerQueue);
}
}
}
Since the id is the same, the watcher's callback function will only be pushed into the queue once. Here we see a familiar face again: nextTick.
function nextTick (cb, ctx) {
var _resolve;
callbacks.push(function () {
if (cb) {
try {
cb.call(ctx);
} catch (e) {
handleError(e, ctx, 'nextTick');
}
} else if (_resolve) {
_resolve(ctx);
}
});
if (!pending) {
pending = true;
timerFunc();
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(function (resolve) {
_resolve = resolve;
})
}
}
The nextTick function wraps the callback function again and executes timerFunc()
var timerFunc;
// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve();
timerFunc = function () {
p.then(flushCallbacks);
// In problematic UIWebViews, Promise.then doesn't completely break, but
// it can get stuck in a weird state where callbacks are pushed into the
// microtask queue but the queue isn't being flushed, until the browser
// needs to do some other work, e.g. handle a timer. Therefore we can
// "force" the microtask queue to be flushed by adding an empty timer.
if (isIOS) { setTimeout(noop); }
};
isUsingMicroTask = true;
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// Use MutationObserver where native Promise is not available,
// eg PhantomJS, iOS7, Android 4.4
// (#6466 MutationObserver is unreliable in IE11)
var counter = 1;
var observer = new MutationObserver(flushCallbacks);
var textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true
});
timerFunc = function () {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
isUsingMicroTask = true;
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
// Fallback to setImmediate.
// Technically it leverages the (macro) task queue,
// but it is still a better choice than setTimeout.
timerFunc = function () {
setImmediate(flushCallbacks);
};
} else {
// Fallback to setTimeout.
timerFunc = function () {
setTimeout(flushCallbacks, 0);
};
}
The timerFunc function is a graceful degradation of the microtask. He will call Promise, MutationObserver, setImmediate and setTimeout in sequence according to the support level of the environment. And execute the callback function in the corresponding microtask or simulated microtask queue.
function flushSchedulerQueue () {
currentFlushTimestamp = getNow();
flushing = true;
var watcher, id;
// Sort queue before flush.
// This ensures that:
// 1. Components are updated from parent to child. (because parent is always
// created before the child)
// 2. A component's user watchers are run before its render watcher (because
// user watchers are created before the render watcher)
// 3. If a component is destroyed during a parent component's watcher run,
// its watchers can be skipped.
queue.sort(function (a, b) { return a.id - b.id; });
// do not cache length because more watchers might be pushed
// as we run existing watchers
for (index = 0; index < queue.length; index++) {
watcher = queue[index];
if (watcher.before) {
watcher.before();
}
id = watcher.id;
has[id] = null;
watcher.run();
// in dev build, check and stop circular updates.
if (has[id] != null) {
circular[id] = (circular[id] || 0) + 1;
if (circular[id] > MAX_UPDATE_COUNT) {
warn(
'You may have an infinite update loop ' + (
watcher.user
? ("in watcher with expression \"" + (watcher.expression) + "\"")
: "in a component render function."
),
watcher.vm
);
break
}
}
}
// keep copies of post queues before resetting state
var activatedQueue = activatedChildren.slice();
var updatedQueue = queue.slice();
resetSchedulerState();
// call component updated and activated hooks
callActivatedHooks(activatedQueue);
callUpdatedHooks(updatedQueue);
// devtool hook
/* istanbul ignore if */
if (devtools && config.devtools) {
devtools.emit('flush');
}
}
The core logic of the callback function is to execute the watcher.run function:
Watcher.prototype.run = function run () {
if (this.active) {
var value = this.get();
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may
// have mutated.
isObject(value) ||
this.deep
) {
// set new value
var oldValue = this.value;
this.value = value;
if (this.user) {
try {
this.cb.call(this.vm, value, oldValue);
} catch (e) {
handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
}
} else {
this.cb.call(this.vm, value, oldValue);
}
}
}
}
Execute the this.cb function, which is the callback function of the watcher. At this point, all the logic is completed. Summarize Let’s go back to the business scenario again:
<template>
<div>
<span>{{ a }}</span>
<span>{{ b }}</span>
</div>
</template>
<script type="javascript">
export default {
data() {
return {
a: 0,
b: 0
}
},
created() {
// some logic code
this.a = 1
this.b = 2
}
}
</script> Although we triggered the setter twice, the corresponding rendering function was only executed once in the microtask. That is to say, after the dep.notify function sends a notification, Vue deduplicates and queues the corresponding watcher and finally executes the callback. It can be seen that the two assignment operations actually trigger the same rendering function, which updates multiple DOMs. This is called batch updating the DOM. This is the end of this article about the implementation steps of Vue batch updating DOM. For more relevant Vue batch updating DOM content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Writing a shell script in Ubuntu to start automatically at boot (recommended)
>>: mysql 8.0.16 winx64.zip installation and configuration method graphic tutorial
Recommend
Native js canvas to achieve a simple snake
This article shares the specific code of js canva...
A brief analysis of the difference between and and where in MySQL connection query
1. Create a table CREATE TABLE `student` ( `id` i...
MySQL 5.7 decompressed version installation, uninstallation and garbled code problem graphic solution
1. Installation of the decompressed version (1). ...
Details of 7 kinds of component communication in Vue3
Table of contents 1. Vue3 component communication...
Detailed explanation of JavaScript onblur and onfocus events
In HTML pages, visual elements such as buttons an...
Solution to index failure in MySQL due to different field character sets
What is an index? Why create an index? Indexes ar...
Example of how to check the capacity of MySQL database table
This article introduces the command statements fo...
Vue-cli creates a project and analyzes the project structure
Table of contents 1. Enter a directory and create...
Two ways to manually implement MySQL dual-machine hot standby on Alibaba Cloud Server
1. Concept 1. The difference between hot backup a...
JavaScript implements simple calculator function
This article example shares the specific code of ...
JavaScript Regular Expressions Explained
Table of contents 1. Regular expression creation ...
How to add docker port and get dockerfile
Get the Dockerfile from the Docker image docker h...
JS implements sliding up and down on the mobile terminal one screen at a time
This article shares with you the specific code of...
Share 6 invitation codes for unlimited activation of Alibaba Cloud Disk. If you don't believe me, you can activate Alibaba Cloud Disk.
It has been a long time since the last update of ...
Problems and experiences encountered in web development
<br />The following are the problems I encou...