Process from Vue template to render

ZevLin 2021-05-03 20:51:42
process vue template render

process analysis

Vue The template compilation process of is as follows :template->ast->render function .

Vue In template compilation compileToFunctions take template Turn into render function .

// Compile the template as render function 
const { render, staticRenderFns } = compileToFunctions(template, options, this)
 Copy code 

1. call parse Methods will template Turn into ast( Abstract syntax tree )

const ast = parse(template.trim(), options)
 Copy code 

parse The goal of : It's a template Turn into AST, It is a kind of use JavaScript Object form to describe the syntax structure of the whole template .

Analytic process : Using regular expressions to parse templates , When parsing to the start tag 、 Closed label 、 The corresponding callback function will be executed when the text is read , To achieve construction AST The purpose of the tree .

AST There are three types of element nodes :type by 1 Represents a common element 、2 Expression for 、3 For plain text .

2. Optimize static nodes

optimize(ast, options)
 Copy code 

This process mainly analyzes which are static nodes , Mark it , For subsequent update rendering, you can directly skip static nodes for optimization .

Depth traversal AST: Check whether the node elements of each subtree are static nodes or static node roots . If it's a static node , They made it DOM Never change , This greatly optimizes the template update at runtime .

3. The generated code

const code = generate(ast, options)
 Copy code 

generate take ast The abstract syntax tree is compiled into render character string And put the static part in staticRenderFns in , Finally through new Function(render) Generate render function .


  1. Analysis of MVC
  2. [middle stage] please stay and join me in the backstage
  3. Understanding front end garbage collection
  4. [continuous update] front end special style implementation
  5. Flutter product analysis and package reduction scheme
  6. XPath positioning
  7. 前端开发css中的flex布局的使用
  8. The use of flex layout in front end development CSS
  9. JQuery核心函数和静态方法
  10. JQuery core functions and static methods
  11. Node family - understanding of blocking and non blocking
  12. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  13. Vue source code analysis (2) initproxy initialization proxy
  14. What's TM called react diff
  15. Summary of common front end data structure
  16. Useeffect in hooks
  17. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  18. Front end notes: virtual Dom and diff of vue2. X
  19. The best code scanning plug-in of flutter
  20. The simplest plug-in for rights management of flutter
  21. 21. Object oriented foundation "problems and solutions of object traversal"
  22. Discussion on hot micro front end: Google AdWords is a real micro front end
  23. Usecallback and usememo for real performance optimization
  24. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  25. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  26. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  27. Transaction of spring's reactive / imperative relational database
  28. The implementation of hexagonal hexagonal reactjs Janos pasztor
  29. HTTP状态码:402 Payment Required需要付款 - mozilla
  30. HTTP status code: 402 payment required - Mozilla
  31. Factory mode, constructor mode and prototype mode
  32. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  33. Cocos Quick Start Guide
  34. Comparison of three default configurations of webpack5 modes
  35. A case study of the combination of flutter WebView and Vue
  36. CSS: BFC and IFC
  37. A common error report and solution in Vue combat
  38. JS: this point
  39. JS: prototype chain
  40. JavaScript series -- promise, generator, async and await
  41. JS: event flow
  42. Front end performance optimization: rearrangement and redrawing
  43. JS - deep and shallow copy
  44. JavaScript异步编程3——Promise的链式使用
  45. JavaScript asynchronous programming 3 -- chain use of promise
  46. Vue.js组件的使用
  47. The use of vue.js component
  48. How to judge whether a linked list has links
  49. Element UI custom theme configuration
  50. Text image parallax effect HTML + CSS + JS
  51. Spring的nohttp宣言:消灭http://
  52. Vue3 intermediate guide - composition API
  53. Analysis of URL
  54. These 10 widgets that every developer must know
  55. Spring's nohttp Manifesto: eliminate http://
  56. Learn more about JS prototypes
  57. Refer to await to JS to write an await error handling
  58. A short article will directly let you understand what the event loop mechanism is
  59. Vue3 uses mitt for component communication
  60. Characteristics and thinking of ES6 symbol