A brief introduction to the way I read the VUE source code, there are suggestions to be added in the comments section

A, source reading posture

1. The whole first, then the details

  • First make clear the source code is divided into which several modules, the whole process is how the various modules string up.
  • Then learn the core principles of each module in detail.

2. Stand on someone’s shoulders

  • Don’t head into the source code warehouse a little bit gnaw, this is very inefficient, suitable for people who understand the source code
  • Recommend to read the source code introduction, source code analysis, clear the context, as well as each part of the general function and core process. With ideas to see the implementation of the source code.
  • Most cases do not need line-by-line code, but some of the core functions need to be detailed, such as virtual DOM, diff algorithm, data-driven, responsive implementation and componensization of the core functions of the core implementation of recommended close look.

3. Read more

  • A rough read: look at the overall process, look at the core functions and responsibilities of each module, realize the usual written code in the source code through what steps reflected on the page.
  • Second intensive reading: to see the details of the implementation, to figure out the implementation of the core module (such as understand the Diff algorithm ideas, it is best to achieve their own hands).
  • Three insights: understanding the overall architecture and design ideas of the source code, understanding how each module works together, and how the architecture is organized.

Second, the steps

  • Dependency analysis assembly: routing, parent-child component hierarchy
  • Template compilation: Parse into an AST syntax tree to build a virtual DOM tree
  • Load page: The virtual DOM is transformed into the real DOM as a whole
  • Local update: responsive data monitors changes, diff compares virtual DOM tree differences before and after data changes, and locally updates DOM
  • Destroy: Destroy the virtual DOM to remove the DOM

Three, VUE source guide

  • Template style, object configuration style
  • Virtual DOM idea (JS object manipulation instead of DOM manipulation)
  • Diff algorithm idea (same layer comparison, add, move, delete)
  • Componentization ideas (component compilation, component communication)
  • Data responsiveness (relying on collection, distributed updates, publish and subscribe)

IV. Understand the new features of VUE3

The pain points of vue2. X:

  • Maintainability of the source code itself;
  • Render and update performance problems caused by large amounts of data;
  • Some want to abandon but for compatibility has been retained chicken ribs API;
  • TypeScript support;

Vue3.0 optimization points:

  • A, the use of monorepo management source code
  • Use TypeScript to develop source code
  • 3, performance optimization 1 source volume optimization 2 data hijacking optimization Proxy 3. Compiler optimization 4. Diff algorithm optimization
  • Composition API: Composition API

For an aside, Xiaobian organized the next VUE 3.0 to write a small program framework PDF material, interested partnersPlease click here to get it

5. Take a closer look at the diff algorithm

The diff vue2

The core of component update is to monitor the changes of data in a responsive way, regenerate the virtual DOM tree, and then calculate the differences of the virtual DOM tree before and after using the Diff algorithm. When updating the DOM, only the changed part is updated. Quick question and quick answer:

1. Why diff?

A: O(n^3) means that if you want to show 1000 nodes, you have to perform billions of comparisons in turn, which is not enough to handle the large amount of data.

Why is the complexity of directly comparing and modifying two trees N ^3?

A: Each node of the old tree traverses the nodes of the new tree until it finds the corresponding node of the new tree. So the process is O(n^2), and then after you find the difference, you compute the minimum change distance and then you modify the node, which is O(n^3).

2. What’s Diff’s strategy? On what grounds?

Answer: 1. There are very few cross-level movement operations of DOM nodes in Web UI, which can be ignored, so only same-level comparison is conducted. 2. If the parent node is different, give up the comparison of the child node, delete the old node and add a new node to re-render; 3. If a child node changes, Virtual DOM does not calculate what has changed, but instead re-renders. 4. Multiple nodes at the same level can compare the similarities and differences through the unique Key;

3. What is the diff process?

Answer: old and new nodes are different: create a new node ➜ update parent placeholder node “delete old node”; Same old and new nodes and no child nodes: unchanged; Both the old and new nodes are the same and have child nodes: traverse the child nodes for comparison at the same level, and perform three operations: move, add and delete, as shown in the figure below.

The diff vue3.0

Deep recursive traversal of the vnode tree. If the label and key of the node are the same, the same node is considered to be updated, and if different, the child nodes are deleted, and then the child nodes are processed. Child nodes are handled in one of several ways: plain text, vnode arrays, and null

Empty often means add or delete; Update innerText directly for the same plain text, delete it when different; The new and old child nodes are VNode arrays, then the diff algorithm is used to deal with them.

Vue3.0 Diff algorithm idea

  • Static analysis was carried out when compiling the template and dynamic nodes were marked. Only dynamic nodes were compared when DIFF was compared for differences (the performance was significantly improved).
  • Diff algorithm first to go to the head and tail, to shorten the traversal comparison array length (array insertion and deletion operation performance optimization);
  • The traversal of O(n^2) complexity is reduced to O(n) by setting up a mapping table for the child node array before and after updating.
  • Through the longest increment subsequence method to diff before and after the child node array, reduce the number of move operation;

Implementation of the longest increasing subsequence algorithm:

/* * find the longest increasing subsequence (s) from p[p[I]] to p[I]; /* * find the longest increasing subsequence (s) from p[p[I]] to p[I]; */ function getSequenceoflis (arr) {const p = [0]; const result = [0]; for (let i = 0; i < arr.length; i ++) { const val = arr[i]; const top = result[result.length - 1]; if (arr[top] < val) { p[i] = top; result.push(i); continue; } let l = 0, r = result.length-1; while(l < r) { const c = (l + r) >> 1; if (arr[result[c]] < val) { l = c + 1; } else { r = c; } } if (val < arr[result[l]]) { if (l > 0) { p[i] = result[l - 1] } result[l] = i; }} let preIndex = result[result.length-1]; for (let i = result.length - 1; i > 0; i --) { result[i] = preIndex; preIndex = p[preIndex] } return result; }

Read the VUE source posture friends you learn to waste, how do you all read it, welcome to leave a comment to tell Xiaobian oh.

Also want to learn to use Vue 3.0 to write a small program framework friends remember to receive!It is also available here

Thumb up for support! I wish my partners a happy May Day in advance!