Isn’t it fun talking code over coffee?

Yesterday when I drank Luckin, A Vue’s life chart suddenly appeared in my mind. With this caffeine boost, I drew the following picture:

In each Vue project, new Vue() is called to initialize the root instance. Within Vue, the vue.prototype. _init method is executed and a series of initializations, such as events, rendering, dependency injection, data state, etc., are done. I won’t go into details here, but I’ll write a separate article explaining what each function does.

Here we just look at initState and the instance mount process. When initState is executed, props, data, methods, computed, and watcher are initialized separately.

We only look at initData here, because data is the protagonist in the top diagram. What great thing does initData do to make it so shiny?

With two-thirds of the development environment code removed, initData does only two things — proxy attributes on data to vm (that’s why we can directly access the name of the private _data attribute via vm.name). In order to avoid my description of you confused XX, add a 🌰)

This is the end of Vue initialization. Now it’s data-driven and responsive — starting with the call to observe:

ObserveArray (value); observeArray (value); observeArray (observeArray); observeArray (observeArray); Call walk if it’s an object. DefineReactive is always called:

DefineReactive causes getter functions to fire when the object is read and setter functions to fire when the object is set. When was the first time the getter was triggered?

The answer is when the instance is mounted with $mount. If we’re writing components in SFC, we’ll also go through the compile process — compile, optimize, generate. What was done in each link, we will discuss it later. It then executes to mountComponent:

The above code example is Render Watcher.

The vm._render function that generates the VNode fires the getter for the data, and dependency collection takes place by putting the current Watcher object into the SUBs array of the Dep. When the data is modified, setter functions are triggered to notify the dependencies of the collected results of the update, which triggers the Render Watcher to call Update to rerender. The update rendering here is also not real-time and a queue is maintained for asynchronous updates. The detailed process is explained at 🌰.

The other two details are VNode generation and DOM node generation. A VNode is the process of representing DOM nodes with JavaScript objects. Understanding vNodes is a jump to understanding the virtual DOM.

After the data is updated, the new and old VNode trees (Diff process) are compared to obtain the difference data information. Then the differences are applied to the DOM tree through patchVNode.

So far, you’ve got an idea of the process from new Vue to DOM generation. We continue to drink ☕️.