Vue first render process

First, the Vue is initialized, that is, the instance members and static members of the Vue are initialized.

When initialization is complete, the constructor is called, and this._init() is called within the constructor, which acts as an entry point for our entire Vue.

In _init() we finally call this.mount (), there are two mounts (), there are two mounts (), there are two mounts (), The first one Mount () is entry− Runtime −with− Compiler.js The mount() of the entry file is entry-Runtime-with-compiler.js the mount() of the entry file is entry− Runtime −with−compile The mount() of the r.js entry file, the core function of this $mount() is to help us compile the template into the render function, but it will first determine if the render option is currently passed in, and if not, it will retrieve our template option. If template is not available, it will take the el as our template and compile it into render function, which compileToFunctions(). When we compile the render function, It will store the render function in our options.render.

The mount() method in Runtime /index.js will be called. In this method, we first retrieve our EL, because the runtime version does not retrieve the EL from entry− Runtime −with− Compiler.js. So for the runtime version, we will retrieve our EL first in the runtime/index.js mount() method, because the runtime version does not retrieve the EL in the entry-runtime-with-compiler.js entry. So for the runtime version, we will retrieve our EL in the runtime/index.js mount() method first, because the runtime version does not retrieve the EL from entry− Runtime −with− Compiler.js. So for the runtime version, we’ll retrieve the EL in mount() of runtime/index.js.

Then called mountComponent (), mountComponent () is in the SRC/core/instance/lifecycle. Js, defined in the mountComponent (), will first render options, if there is no but introduced into the template, And if it is currently a development environment, it will send a warning that the runtime version does not support the compiler.

The beforeMount hook function in the lifecycle is then triggered, just before mounting begins.

We then define updateComponent(), in which we define _render to generate the virtual DOM, and _update to convert the virtual DOM to the real DOM and mount it to the page.

The next step is to create the Watcher object. When you create Watcher, you pass in the updateComponent function, which is ultimately called from within Watcher. After Watcher is created, the get method is also called, and in the get method, updateComponent() is called.

Mounted, the mounted hook function, returns Vue instance.

Reactive processing

initState() –> initData() –> observe()

observe(value)

Location: SRC/core/observer/index, js function: to determine whether the value object, if not have __ob__ object directly return to determine whether a value object, if you have returned directly If not, create the observer object to return to the observer

Observer

Location: SRC/core/observer/index, js function: to define an enumeration __ob__ value object attribute, record the current observer object array of reactive processing object of reactive processing, call walk method

defineReactIve

Location: SRC/core/observer/index. The js function: Create a DEP object for each property. If the value of the current property is an object, call Observe to define the getter to collect the property’s value. If the setter returns the property’s value, save the new value.

Collect rely on

Call pushTarget in the get method of the Watcher object to record when the dep. target property accesses a member in data. Collect dependencies in the getter of defineReactive Adds the property’s corresponding Watcher object to deP’s subs array to collect dependencies for childOb, in order to send notifications when child objects add and delete members

Watcher

Dep.notify () calls queueWatcher() on the watcher’s update() method to determine whether the watcher has been processed and if not added to the queue, FlushScheduleQueue () triggers the beforeUpdate hook function by calling watcher.run() : Run () –> Get () –> Getter () –> updateComponent empties the last dependent trigger actived’s hook function fires its updated hook function

The role of the virtual DOM

Avoid direct manipulation of DOM, improve development efficiency As an intermediate layer can be cross-platform virtual DOM does not necessarily improve performance when first rendering will increase overhead when complex view cases improve rendering performance

What is the virtual DOM

The virtual DOM uses JavaScript objects to describe the virtual DOM in a real DOM Vue, borrowing Snabbdom and adding Vue features, such as directives and component mechanisms

The functions and benefits of keys in the virtual DOM

  1. So that it can track the identity of each node and reorder elements based on key changes when comparing. This reuses and reorders existing elements, and removes elements where the key does not exist. In this way, vNodes can find corresponding nodes during diff and reuse them successfully.
  2. You can reduce DOM manipulation, reduce diff and render time, and improve performance.

The process of compiling templates in Vue

  1. The main purpose of template compilation is to convert a template to render.
  2. Call compileToFunctions(template, {}, this) and return {render, staticRenderFns} to convert template to render function

CreateCompiler (baseOptions) :

A: Define the compile(template,option) function

B: Generate compileToFunctions

C: Returns {compile, compileToFunctions}

CreateCompilerCreator (function baseCompile () {}) :

A: baseCompile(template,options) is passed in

B: baseCompile: core functions: parse; Optimize optimize; Generate the generate;

C: Returns the createCompiler function