This article was adapted from: Lebyte
This article mainly explains: Vue implementation principle
For more VUE related information and projects, you can follow the public account “LeByte” to send: 999
1. Introduction to Vue
At present, the big front-end era is a turbulent and conflicted era, and there are many schools in the arena, mainly led by Vue, React and Angular, forming a situation of three front-end frameworks. Vue is in front end frameworks what jQuery used to be, and because it is easy to understand and efficient to develop, it has become an essential skill for front end engineers.
Vue is an incremental JavaScript framework that seamlessly blends third-party plugins with a library of UI components. The biggest difference between Vue and jQuery is that Vue can change the page rendering content without requiring developers to manipulate DOM nodes directly. In the application developers have a certain HTML, CSS, JavaScript on the basis of quick start, the development of elegant, concise application module.
But when we talk about Vue, we focus more on its usage than learning how it solves front-end problems, which is somewhat sub-healthy. People with front-end development experience must have encountered strange problems in the development process, and then confused to solve them. If we encounter similar problems again, we will be at a loss. As a front-end engineer, when we encounter problems, can we accurately locate the causes of the problems and solve them in time? It depends on how deep our understanding of the front-end framework is.
2. Implementation principle of Vue
2.1 Virtual DOM (DOM)
With the development of The Times, the page interaction effect of Web applications is more and more complex, page functions are more and more rich, more and more states need to be maintained, and DOM operations are more and more frequent. DOM manipulation, while simple and easy to use, can cause problems that are difficult to maintain.
In the process of program execution, Watcher will associate and map each node and state one by one when it is initialized. Setter will notify Watcher when the state of Data changes, and Watcher will notify DOM that has been recorded and nodes related to these states of these changes. This triggers the rendering process of the page. After the component receives the state change, it will convert the template into Render function through compilation, and the execution of Render function will get a virtual DOM tree. By comparing the old virtual DOM with the newly generated virtual DOM tree, the corresponding actual DOM node will be updated and the page rendering will be performed.
The virtual DOM is almost always used by mainstream front-end frameworks, but when using the virtual DOM, Angular and React don’t know exactly which state has changed, requiring violent comparisons between the old virtual DOM and the new one. But Vue has updated views with fine-grained bindings since version 1.0. That is, when the state changes, Vue can know which state and which nodes need to change and perform updates on that node. However, such fine-grained change detection has some memory overhead that affects performance, and the more complex a project is, the more expensive it is.
Vue since version 2.0, in order to optimize performance, introduces the virtual DOM, chose a compromise solution, neither need to contrast the old and the new virtual DOM violence, also do not need through the fine-grained binding to realize the view updates, i.e., according to the component Watcher monitor for the unit, that is to say, even if a component with multiple nodes using a state, Only a Watcher is needed to monitor the state change, and when the state changes, Watcher notifies the component, which uses the virtual DOM to compare and re-render nodes.
2.2 Implementation principles of common Instructions
Instructions refer to the “V -” prefixed features provided by Vue. When the content of the expression in the instruction changes, it will affect the DOM content to change. Vue.directive global API can create custom directives and obtain global directives. In addition to custom directives, Vue also built-in some commonly used directives in the development process, such as V-if, V-for, etc. When the Vue template is parsed, the instructions are parsed to the AST, and the functions of the instructions are realized when the AST is used to generate strings.
Directives on the node are parsed out and added to the AST’s Directives property when the template is parsed. Directives send the data to the VNode, which triggers some hook functions when the virtual DOM renders the page, and when the hook functions are triggered, the directives take effect.
2.2.1 Principle of V-IF instruction
Using the V-if directive in an application:
Generates at compile time:
When the code executes, it selects which node to create based on the value of create.
2.2.2 Principle of V-for instruction
Using the V-for directive in an application:
Generates at compile time:
_L is the alias for renderList. When the code executes, the _L function loops through the list variable, calling the function passed in the second argument, passing two arguments: item and index. When the _c function is called, the _v function is executed, creating a node.
2.2.3 Principle of custom instruction
In the application program, the processing logic of the instruction listens to create function, update function and destory function respectively, which is implemented as follows:
When the hook function is triggered, the updateDirectives function is executed as follows:
In this function, as long as there is an old virtual node or not, the _UPDATE function is executed as follows: directives
IsCreate: checks whether the virtual node is a new node.
IsDistory: determines whether to delete an old virtual node.
OldDirs: Old set of instructions, stored in oldVnode.
NewDirs: a new set of instructions, stored in vNode.
DirsWithInsert: List of instructions that trigger the INSERTED instruction hook function.
DirsWithPostpatch: List of instructions that trigger the componentUpdated hook function.
The results of fetching the directives used in the template from the user-registered custom directives collection using the normalizeDirectives function are as follows:
The code of the custom instruction is:
The virtual DOM triggers different hook functions for comparison and rendering depending on the situation, the Create hook function is triggered when a new actual node is created using the virtual node, and the INSERT hook function is triggered when a DOM node is inserted into the parent node.
The callHook function executes the hook function as follows:
Parameter meanings of callHook function are as follows:
Dir: instruction object.
Hook: The name of the hook function to be fired.
Vnode: indicates a new virtual node.
OldVnode: old virtual node.
IsDestory: determines whether to delete an old virtual node.
All hook functions triggered by the virtual DOM during rendering and their triggering mechanism are as follows:
Note that the remove function is triggered only when an element is removed from its parent, not if that element is a child of the removed element.
Thank you for your recognition and support, xiaobian will continue to forward “LeByte” quality articles