Vue–diff algorithm
Before we mention the vue–diff algorithm, let’s talk about the compilation process of vue.
1. The compilation process of Vue is mainly divided into the following steps:
1. Parse the template : Vue will parse the template into the syntax tree AST and mark the instructions and elements in it.
2. Optimize static content : Vue optimizes the static content in the template to reduce performance consumption during updates.
3. Generate a rendering function : Vue will generate a rendering function based on the AST, which will convert the template into executable JavaScript code. There are two ways to generate a rendering function, one is to compile it into a render function through a template, and the other is to compile it into a virtual DOM through a template.
4. Execute the rendering function : We need to execute the generated rendering function. The execution here is to convert the virtual DOM into a real DOM node and render it to the page.
2. Use of Vue’s diff algorithm
Definition: Vue's diff algorithm is mainly an algorithm used to compare the differences between virtual DOMs . By comparing the differences between the two virtual DOMs before and after, and then minimizing updates based on the differences , it avoids re-rendering the entire page and improves the performance of the page. .
Vue's diff algorithm is mainly divided into three steps:
1. Create new and old virtual nodes with differences
During the comparison process of new and old virtual nodes, in order to improve the comparison efficiency, it is necessary to create a mapping table for the old and new virtual nodes, and record the corresponding relationship between the old nodes to facilitate search and matching in the subsequent comparison process.
2. Compare the differences between the old and new search nodes.
During the comparison process, Vue uses depth-first traversal to compare the differences between the old and new virtual nodes level by level. If the old and new virtual nodes are the same, no update is required; if they are different, the corresponding update operation needs to be performed based on the difference type.
3. Update of page view
After the comparison is completed, the corresponding update operation is performed according to the difference type, the DOM nodes are updated, and finally a new page view is rendered.
Vue two-way data binding principle
Vue's two-way data binding is mainly implemented through data hijacking (Object.defineProperty()). The specific implementation process is as follows:
When Vue is instantiated, the data is observed, that is, each property is hijacked using Object.defineProperty().
When the data changes, the setter method will be triggered. In the setter method, all views related to the data will be notified to update.
For instructions in the template (such as v-model), they will be processed through the directive, that is, the instructions will be parsed to obtain the bound data object and corresponding key.
In the directive, a Watcher instance will be added to the key attribute of the data object to detect changes in the data and update the view.
When the data changes, the setter method of the data will be triggered, and the setter method will notify all Watcher instances that rely on the data to update the view.
Specifically, Vue's data binding is divided into three parts:
1. Observer: Data listener , which can monitor each attribute of the data object. When the data changes, it can trigger the corresponding callback function.
2. Watcher: Observer binds the properties of the data object to the template instructions. When the data changes, it can trigger the corresponding update operation.
3. Compiler: Compiler , converts template instructions into corresponding DOM operations, and associates Watcher with Observer to achieve two-way binding of data.
Among these three parts, Observer is the core part. Its principle is to recursively traverse each attribute of the data object and add getter/setter to it. When the attribute is read or modified, the corresponding callback function can be triggered. , thereby realizing data monitoring and updating.
It should be noted that because Observer needs to recursively traverse the entire data object, it may cause certain performance problems in the case of large-scale data binding. In order to solve this problem, Vue provides technologies such as virtual DOM and asynchronous updates, thereby optimizing the efficiency of data binding.
Task splitting:
Render the data in the vue instance to the page.
Synchronize the data changes on the page to the vue instance.
Data data changes in the vue instance. Data synchronization changes on the page.