Briefly describe the process of Vue’s first rendering.

  1. Vue initialization, instance members, static members

The vUE is initialized first, that is, the instance and static members are initialized.

  1. new Vue()

After initialization, call vue’s constructor new vue (), where this._init() is called.

  1. this.init()

This.init () acts as an entry point for the entire project, and in this method, vm.$mount() is finally called.

  1. vm.$mount()

SRC /platform/ Web /entry-runtime-with-compiler.js () ¶ Mount () is defined in SRC /platform/ Web /entry-runtime-with-compiler.js. If the template doesn’t have one, we’ll use the el as a template and compileToFunctions() to render. Once compiled, render is stored in options.render.

  1. vm.$mount()

Called SRC/platforms/web/runtime/index. The methods of the mount of js file, this method will retrieve el, because if is the runtime version, is not walk entry – the runtime – with – compiler. Js the entry for el, So for the runtime version, we’ll retrieve the EL in $mount() of runtime/index.js.

  1. mountComponent(this,el)

This method in the SRC/core/instance/lifecycle defined in js, first determines whether there is a render options, if there is no but introduced into the template, and the current development environment, the warning (runtime version does not support the compiler), Trigger beforeMount hook function that defines but does not call updateComponents. This function calls render() and update(). Render generates the virtual DOM. Update converts the virtual DOM to the real DOM and mounts it on the page. Mounted () is mounted when the Watcher instance is created. / / Install vue. / / Install vue.

  1. Watcher.get()

After the watcher is created, a call to get is made. Within the get method updateComponent() is called, which returns vNode by calling either the render() passed in during instantiation or the render() generated after compiling the template. Then call vm._update(), call the vm.__patch__ method, convert the virtual DOM to the real DOM and mount it to the page, and record the generated real DOM to vm.$el().

Please briefly describe the principle of Vue responsiveness.

Members in Vue’s data implement reactive data by putting the data passed into the constructor in the instance’s data when creating a Vue instance, then iterating through the data members, converting them into getters/setters using Object.defineProperty and defining them on the Vue instance. Data hijacking is then implemented by calling Observer. This is where the observer converts each member to a getter/setter via object.defineProperty and defines it on that member. Because Vue uses observer mode, all observers of the member are collected in the getter of data’s member (collect dependencies) and send notifications in the setter to trigger the observer’s UPDATE method. After the above processing of data passed into the VUE constructor, the data member becomes responsive data.

Briefly describe the functions and benefits of keys in the virtual DOM.

The key role

Auxiliary flags that track which elements are added, modified, or removed from the list. This allows us to quickly compare two virtual DOM objects, find the modified elements of the virtual DOM object, and then simply replace the modified elements to regenerate the new real DOM.

The key benefit of

You can reduce DOM manipulation, reduce diff and render time, and improve performance.

Describe the template compilation process in Vue.

The main function of Vue is to compile the template string template to generate the render function, which creates the Dom with JS.

  1. Call compileToFunctions(template,options,this) to load the compiled render function from the cache or compile(template,options) if it’s not in the cache.

  2. Options are first merged in compile(template,options) and then baseCompile(template.trim(), finalOptions) is called.

  3. Call the baseCompile function to do the three things at the heart of template compilation.

  4. The template compilation of template strings is converted into an AST abstract syntax tree by the parser (parse)

  5. Optimize – Static node markup for AST, mainly used for rendering optimization of virtual DOM. Static subtrees detected, set to static, no need to regenerate nodes every time you re-render. The patch phase skips static subtrees.

  6. Convert the AST abstract syntax tree to a JS string for the Render function by generate

  7. Convert the render function to an executable function using the createFunction function

  8. Mount the last Render function to the properties corresponding to options in the Vue instance