Lifecycle. Js-mountcomponent () = lifecycle. Js-mountcomponent () = lifecycle. A component corresponds to only one Watcher, reducing the granularity of the Watcher.) But there may be many data keys in the component, so how do you determine which key has changed? It’s up to the DIff algorithm (diff knows these changes by comparing the old and new virtual DOM)

Source code analysis 2: execution, patch.js-Patchvnode () patchVnode is the place where diff occurs, the overall strategy: depth first, same layer comparison

Patch. Js-updatechildren ()

Test code:

<! DOCTYPEhtml> 
<html> 
<head> 
    <title>Vue source code analysis</title> 
    <script src=".. /.. /dist/vue.js"></script> 
</head> 
<body> 
    <div id="demo"> 
        <h1>Virtual DOM</h1> 
        <p>{{foo}}</p> 
    </div> 
    <script> 
        // Create an instance
        const app = new Vue({ 
            el: '#demo'.data: { foo: 'foo' }, 
            mounted() { 
                setTimeout(() = > { 
                    this.foo = 'fooooo'                 }, 1000); }});</script> 
</body> 

</html>
Copy the code

conclusion

1. Diff algorithm is an inevitable product of virtual DOM technology: by comparing the old and new virtual DOM (DIFF), the changes are updated on the real DOM; In addition, diff is also required to perform the comparison process efficiently, thus reducing the time complexity to O(n). Web Full stack Architect

2. In vue 2.x, in order to reduce the granularity of Watcher, there is only one Watcher corresponding to each component, and only by introducing diff can we find the changes precisely.

3. When the component instance executes its update function, it compares the last render result oldVnode with the new render result newVnode. This process is called patch. The diff is triggered by a call from Watcher, when we modify a data, because the data responds to the setter, and the setter fires a notification, which updates the queue asynchronously that Watcher added. At the end of each event loop, the queue is cleared. In the process of emptying the queue, all the Watcher attempts to update their update function, which calls the component’s update function and the component’s render function, re-renders the latest virtual DOM, and then executes the update function. Comparing the old and new virtual DOM, this moment is the real trigger moment and execution moment of diff; in the process of comparing the old and new DOM, we call this process “patching”.

4. The diFF process follows the strategy of depth-first and same-layer comparison; The comparison between two nodes will do different operations according to whether they have child nodes or text nodes; Comparing two groups of child nodes is the focus of the algorithm. First, it is assumed that the head and tail nodes may be the same for four times. If the same node is not found, the search will be performed in a general way, and the remaining nodes will be processed according to the situation after the search. With the help of key, the same node can usually be found infrequently, so the whole patch process is very efficient.