Brief introduction of personal reading vue source posture, there are suggestions welcome to add ha ~ comments

One, source reading posture

1. Whole first — details later

  • Figure out which modules the source code is divided into first, and how the whole process is strung together.
  • Then understand the core principles of each module in detail.

2. Stand on someone else’s shoulders

  • Do not rush into the source repository a little bit of gnawing, this is very inefficient, suitable for people who understand the source code
  • It is recommended to read others’ source code introduction, source code analysis (recommended: Vue.js technology revealed), figure out the context, and the general function of each part and the core process. In the mind with ideas to see the source code.
  • Most cases do not require line-by-line detail, but the implementation of certain core functions, such as the virtual DOM, diff algorithm, data-driven, responsive implementation, and componentization, is recommended.

3. Read more

  • A rough reading: look at the overall process, look at the core functions and responsibilities of each module, experience usually written code in the source code through what steps reflected on the page.
  • Second intensive reading: see the details of the implementation, make clear the implementation of the core module (such as understand diff algorithm ideas, it is best to do their own implementation).
  • Three times: to understand the overall architecture and design ideas of the source code, to understand how to cooperate between each module, how to organize the architecture.

Second, the steps

  • Dependency analysis assembly: routing, parent-child component level
  • Template compilation: Parses into AST syntax trees to build virtual DOM trees
  • Load page: The entire virtual DOM is converted to the real DOM
  • Local update: Responsive data monitors changes, diFF compares differences in the virtual DOM tree before and after data changes, and locally updates the DOM
  • Destroy: Destroy the virtual DOM and remove the DOM

Three, VUE source code guide

Vue source code core part of the principle of brief: VUE source analysis and understanding of the principle

  • 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 (relies on collecting, distributing updates, publishing and subscribing)

Iv. New features of VUE3

Vue2. X pain points:

  • Maintenance of the source code itself;
  • Performance problems of rendering and updating caused by large amount of data;
  • Some want to abandon but for compatibility has been retained chicken ribs API;
  • TypeScript support;

Vue3.0 optimization points:

  • A, use monorepo management source code
  • Develop source code in TypeScript
  • 3, performance optimization 1. Source code volume optimization 2. Data hijacking optimization Proxy 3. 4. Diff algorithm optimization
  • 4, Syntax API optimization: Composition API

See: Learn about Vue3’s new features

Take a closer look at the Diff algorithm

The diff vue2

The core of component update is to monitor the changes of data in responsive data, regenerate the virtual DOM tree, and then calculate the differences of the virtual DOM tree before and after by diff algorithm, and update only the changed part of DOM. Quick question 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 sequence, and can’t afford to compare large amounts 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 finding the difference, compute the shortest modification distance and then modify the node, which is O(n^3).

2. What is Diff’s strategy? On what basis?

Answer: 1. In Web UI, there are very few DOM node movement operations across hierarchies, which can be ignored. Therefore, only same-layer comparison is carried out. 2. If the parent node is different, abandon the comparison of the child node, delete the old node and add the new node to re-render; 3. If a child node changes, the Virtual DOM does not calculate what the change is, but rerenders it. 4. Multiple nodes at the same level can compare their similarities and differences through unique keys;

3. What is the DIff process?

A: The old and new nodes are different: create a new node ➜ update the parent placeholder node ➜ delete the old node; The old and new nodes are the same and have no children: unchanged; The old and new nodes are the same and have child nodes: traverse the comparison of child nodes at the same level, and perform three operations: move, add and delete, as shown in the following figure.

The diff vue3.0

Deep recursion traverses the VNode tree. If the labels and keys of nodes are the same, they will be updated; if they are different, they will be deleted, and then the child nodes will be processed. Child nodes are handled in one of these cases: plain text, vNode arrays, and empty

Empty usually means add or remove; The innerText is updated directly if the text is plain; otherwise, the innerText is deleted. The old and new child nodes are vNode arrays, then diff algorithm is used to process;

Vue3.0 DIFF algorithm idea

  • Static analysis was performed during template compilation, dynamic nodes were marked, and only dynamic nodes were compared when diFF was used to compare differences (performance was significantly improved).
  • Diff algorithm firstly removes the head and tail to shorten the length of traversal comparison array (the performance of array insertion and deletion operation is obviously optimized).
  • The traversal complexity of O(n^2) is reduced to O(n) by creating a mapping table for the array of child nodes before and after the update.
  • By using the longest incrementing subsequence method, the subnode array before and after diff is obtained to reduce the number of moving operations.

Vue3.0 DiFF algorithm implementation for details, see the DIFF algorithm demo

Longest increasing subsequence algorithm implementation:

Leetcode longest increasing subsequence algorithm

A -> c = a -> b + b -> C * where p array stores the longest increasing subsequence index from p[p[I]] to p[I], i.e. the index of the previous b; The * r array stores the last element, the index of c */
 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;
        }
        // Binary search
        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; }}// go back to the p array to find the longest increasing subsequence
    let preIndex = result[result.length - 1];
    for (let i = result.length - 1; i > 0; i --) {
        result[i] = preIndex;
        preIndex = p[preIndex]
    }
    return result;
}
Copy the code