# The role and benefits of key in v-for
1. When the key is not defined, the new and old nodes are compared one by one when the view changes, and the view will be updated once if they are different.
2. In the case of defining the key, when different nodes are found, the number and length of the old and new nodes will be compared, and the different nodes will be proposed first to compare the remaining nodes, and separate different nodes, adding or deleting, to reduce unnecessary The view is updated.
Function: It is convenient for vnode to find the corresponding node in the diff process, and then reuse it successfully.
Benefits: It can reduce the number of view updates and improve performance.
# The process of template compilation in Vue
Template string -> AST object -> Optimize AST (mark static root node) -> string form code -> new Function -> anonymous function (render function)
1、compileToFunctions(template, ...)
-Load the compiled render function from the cache
-Compile(template, options) is not called in the cache
2、compile(template, options)
-Combine options
3、baseCompile(template.trim(), finalOptions)
-parse() converts template to AST tree
- optimize()
-Mark static sub trees in AST tree
-Static subtree is detected, set to static, no need to regenerate nodes every time you re-render
-Skip static subtrees in patch phase
-generate() AST tree generates js creation code
4、compileToFunctions(template, ...)
-Continue to convert the string form js code generated in the previous step into a function
- createFunction()
-The render and staticRenderFns are initialized and mounted to the corresponding properties of the options of the Vue instance