前言

1. 最近在学习vue源码，看到了一个特别亮眼的操作，函数柯里化
2. 之前也了解过，但看完就往，没深刻理解它的意义
3. 大概就是看过就忘，用了也不知道为啥这么用，目前没找到写的特别中意文章，函数柯里化使用的意义和目的到底是啥

vue中的函数柯里化

最重要用途：提升性能,使用柯里化可以缓存一部分能力

vue中案例说明

1. 判断元素
2. 虚拟DOM的render方法

vue本质上市使用HTML的字符串作为模板的，将字符串的模板转换为AST，再转换为VNode
3个过程

1. 模板->AST（抽象语法树）
2. AST->VNode
3. VNode->DOM

AST知识相关了解学习
最消耗性能 是第1个阶段，即对字符串的解析过程

在vue中，每一个标签可以是真正的HTML标签，也可以是自定义组件，如何区分？

在vue的源码中，将所有可用得HTML标签已经存起来了

假设这里只考虑几个标签：

let tags = `div,p,a,ui,li`.split(',')
复制代码

我需要一个函数，判断一个标签名是否为内置标签，

function isHTMLTag(tagName){
  tagName = tagName.toLowerCase()
  for(let i =0;i<tags.length;i++){
    if(tagName ===tags[i]){
      return true
    }
    \\或
    if(tags.indexOf(tag)>-1){
    return true
    }
    return false
  }
}
复制代码

模板是任意去编写的，可以简单，也可以复杂，（使用indexOf情况，indexOf内部也是循环的）
如果有6个内置标签，而模板中有个10个标签需要判断，那么需要执行60次循环

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);//返回的是函数
复制代码

Map和Set
假设有10个标签需要判断，这时已经没有循环存在了，时间复杂度降低，(闭包保存数据)就是相当于用空间换取了时间

思考：vue项目模板转换为抽象语法树需要执行几次

1. 页面一开始加载需要渲染
2. 每个属性在发生变化的时候要渲染
3. watch computed 等等

如果每次修改，模板就解析一次，这样会大大影响性能（操作DOM是非常影响性能的）
render的作用是将虚拟DOM转换为真正得DOM加到页面中
虚拟DOM可以降级理解为AST
一个项目运行的时候模板是不会变的，就标识AST是不会变的
我们可以将代码进行优化，将虚拟DOM缓存起来，生成一个函数，函数只需要传入数据就可以得到真正的DOM