“This is the second day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

Write in the front: here actually began to interesting, are some of the more useful knowledge, although it is Vue deep, in fact, is also a more advanced APPLICATION of JS.

It’s about my deeper understanding of Vue

Vue is the process of compiling the template to the real Dom

Parse the template(parse() and codeGen () into an AST tree). Parsing the AST tree structure inside vue grammar AST tree (using the Transform () processing, and then generate () parsing v - if, @ click vue grammar into render function) / / the above two steps to perform the corresponding Vue.com running (template) method; 4. The tag name, attribute, style, sub-attribute and key value of the new and old virtual DOM are compared through patch.js and patchVnode method, resulting in three cases (unchanged, add or delete, modify). Use the updataChildren method to compare the children of the virtual node 5. Finally, the updated virtual DOM is rendered into the real DOM.Copy the code

Advantages: Under the frequent and large amount of data transformation and DOM operation, can find out the most reasonable and efficient compilation method; Js code in essence, not affected by the running environment, cross-platform.

Specific: The Rander function is converted into a structure similar to ast tree, and then the diff algorithm is used to compare the differences between the old and new virtual DOM. The data that needs to be modified is kept unchanged, so as to reduce the time complexity and improve the performance.

The specific difference between Vue2 and Vue3 in responsiveness

Data hijacking is implemented through the object.defineProperty method publisher (subscriber) pattern, by traversing the data in the data, manual getter and setter methods and compatibility with array common methods

Vue2 data response implementation principle

This is done through a publish-subscribe pattern

(photo: www.cnblogs.com/llx1996/p/9)…

    1. The listener, the Observer, iterates over and listens for all properties in the data, and uses object.definProperty to add getters and setters to all properties. If the data changes, the setter is triggered to notify the subscriber of the change (the core is object.def) ineProperty)
    1. The Dep subscriber, which is used for unified management between the Observer listener and the Watcher subscriber, collects the observers with the subs array, and notifies Watcher with the dep.notify.
    1. The Watcher, by subscribing to the Dep class, receives notification of changes to the Dep and updates the view by performing updata operations.

Vue3 Responsive data principle

Through the Porxy proxy pattern

Proxy mode

Intercepts any operation on any properties and methods of data, including reading and writing property values, adding properties, deleting properties, etc.

  • A Proxy is an object created by a new Proxy(target, handler),
    • Target: is the target object used for wrapping
    • Handler: is a custom function that can be {}, but cannot be null
  • Commonly used method
    • Handler. get(Target, Property, Receiver) Gets value interception
    • Handler. Set (target, the property, the value, the receiver) value is set to intercept
    • Intercepts the handler.has(target,prop)in operator

Reflect (reflection)

Relflect objects, like Proxy objects, are new apis provided by ES6 for manipulating objects. They can dynamically perform specific operations on the corresponding properties of the objects being represented

  • Modify the return of some Object methods to make them more reasonable.
  • Make all Object operations function behavior.
  • The methods on the Reflect object correspond to the methods on the Proxy object. As long as the methods on the Proxy object correspond to the methods on the Reflect object. This makes it easy for the Proxy object to call the corresponding Reflect method, completing the default behavior as a basis for modifying the behavior. So whatever Proxy does to change the default behavior, you can always get the default behavior on Reflect, right
<! -- object.defineProperty () throws an error if the property cannot be defined, and reflect.defineProperty () returns false. -- > / / old writing try {Object. DefineProperty (target, the property, the attributes). / / success} the catch (e) {/ / failure} / / new writing the if (Reflect. DefineProperty (target, the property, the attributes)) {/ / success} else { //failure } <! -- such as name inobj and deleteobj[name], and reflect.has (obj,name) and reflect.deleteProperty (obj,name) make them function behavior. Reflect.has(Object,'assign')//true. // Reflect (Object,'assign')//trueCopy the code

In-depth understanding of the VIRTUAL Dom of Vue2

Virtual DOM generation usually takes three steps

  1. element.js

To simulate the real DOM, turn the real DOM node into a JS object

  1. diff.js

Turn the old and new DOM into two virtual DOM trees and compare the differences between the two trees

  1. patch.js

Apply the resulting differences to the real DOM and render them

Vue virtual DOM in-depth

The vue virtual DOM is declared using the VNode class. The important properties in vue are:

  • Tag: indicates the tag name of a node
  • Data: refers to the class,attr,style, and Event events on the node
  • Children: indicates the children of the node
  • Elm: real DOM node of the node
  • Key: a VNode flag used to speed up diff

Creating a VNode

Vue instance initialization (init) --> Vue instance mount (call mount method on prototype) --> Mount executes mountComponent method (instantiate a render Watcher, callback executes updataComponent) --> UpdataComponent calls vm._render,vm._update updates dom and patch nodes --> _render is a private method for the instance ($createElement) --> _createdElement method to create VNode (createElement method function parameters: the context, the tag, the data, the children)Copy the code

The diff process

If (tag element node)else if(isComment annotation node)else (text node) 2. RemoveNode () delete node () 3. Update the nodeCopy the code

End