preface

  1. Recently in the study of VUE source code, saw a particularly bright operation, the function of The curry
  2. I’ve read about it before, but I don’t fully understand it
  3. Probably just read it and forget, I don’t know why I use it so, so far I haven’t found a special favorite article to write, what is the meaning and purpose of the use of function Corrification

Currization of functions in VUE

Most important use: To improve performance, use coriolization to cache some power

Case description in VUE

  1. Judge element
  2. The render method of the virtual DOM

Vue essence listing using HTML string as a template, the string template into AST, and then into VNode three processes

  1. Templates ->AST (Abstract Syntax tree)
  2. AST->VNode
  3. VNode->DOM

The most expensive part of learning the AST is the first stage, which is the parsing of strings

In VUE, each tag can be a real HTML tag or a custom component. How can you tell the difference?

In the vue source code, all available HTML tags have been saved

Suppose only a few tags are considered here:

let tags = `div,p,a,ui,li`.split(', ')
Copy the code

I need a function to determine if a tag name is a built-in tag,

function isHTMLTag(tagName){
  tagName = tagName.toLowerCase()
  for(let i =0; i<tags.length; i++){if(tagName ===tags[i]){
      return true} \ \ orif(tags.indexOf(tag)>-1) {return true
    }
    return false}}Copy the code

Templates can be written arbitrarily, simple or complex, and (in the case of indexOf, which is also looped internally) if you have six built-in tags and a template with 10 tags to check, you need to loop 60 times

let tags = `div,p,a,ui,li`.split(', ')
function makeMap(keys){
  let set = {}
  keys.forEach(key= >{
   set[key] = true
  })
  reutrn function (tagName){
    return!!!!! set[tagName].toLowerCase() } }let isHtmlTag = makeMap(tags);// Return a function
Copy the code

The Map and Set assume that there are 10 labels to determine, at which point there are no loops, time complexity is reduced, and space is traded for time

Consider: The conversion of a VUE project template to an abstract syntax tree takes several times

  1. The page needs to be rendered as soon as it loads
  2. Each attribute is rendered as it changes
  3. Watch the computed, etc.

The render function is to convert the virtual DOM to the real DOM and add the virtual DOM to the page. The virtual DOM can be degraded to understand the AST. The template will not change when a project is running. We can optimize our code, cache the virtual DOM, and generate a function that only needs to pass in data to get the real DOM