【系列 2】手写vue模板编译

妖狐艹你老母 2022-09-14 15:26 167阅读 0赞

## 模板编译流程是什么？ ##

**1. 获取 outerHTML**

**2. 正则查找转义成 ast 语法树**

ast = { 
        "tag": "div",
        "attrs": [
            { 
                "name": "id",
                "value": "app"
            }
        ],
        "children": [
            { 
                "type": 3,
                "text": "{ {name}}"
            }
        ],
        "parent": null,
        "type": 1
    }

**3. ast 语法树转换成 render 字符串函数**

const code = '_c("div", {id:"app"},_v(_s(name)))'

**4. 执行 redner 函数 生成 vnode**

const render = new Function(`with(this){return ${ code}}`)
    const vnode = render.call(vm) // 目的就是让 render 函数 this 指向 vue 实例， 因为 vue 实例有 _c, _v, _s 这些方法
    
    // vnode 大体结构如下
    vnode = { 
        children: [{ children: null, data: null, key: null, tag: null, text: "小米", vm: Vue}]
        data: { id: 'app'}
        key: undefined
        tag: "div"
        text: null
        vm: Vue { $options: { …}, _data: { …}, $el: undefined, …}
    }

其实 vue 模板编译就上面这几个步骤，拆分一下是不是很清晰，接下来我们一步一步看看是怎么实现的！

## 1. 获取 outerHTML ##

很简单 el 就是用户 `new Vue({ el: '#app' })` 里面的 `#app`， outerHTML 就是获取节点的 html 代码

const el = document.querySelector(el);
     const template = el.outerHTML // <div id="app">{ {name}}</div>

## 2. 正则查找转义成 ast 语法树 ##

复制一下代码放入浏览器执行你会发现 ast 就被解析出来了

const template = '<div id="app">{ {name}}</div>'
    const ast = parserHTML(template)

解析过程：

1.  找到标签头 `<div` 准备对象 \{tagName: ‘div’,attrs: \[\]\}， 删除html上匹配到的内容
2.  找到标签属性 `id="app"` 添加属性，------------------- 删除html上匹配到的内容
3.  找到标签头结尾 `>` 返回 ast 入栈 \[ ast \]，-------------- 删除html上匹配到的内容
4.  找到标签内容 `{ {name}}` ast 添加 children，----------- 删除html上匹配到的内容
5.  找到标签尾 `</div>` 出栈 \[ \]，-------------------------- 删除html上匹配到的内容

![在这里插入图片描述][f02d38177f4c46a9ad43f7320b75485d.png]

看懂了吗？就是将匹配到的一点一点删掉，直到 html 没了

下面的正则理解不了, 可以复制到 [正则解析网站][Link 1] 里看看

## 3. ast 语法树转换成 render 字符串函数 ##

const ast = { "tag": "div","attrs": [{ "name": "id","value": "app"}],"children": [{ "type": 3,"text": "{ {name}}"}],"parent": null,"type": 1}  // 别看了就是上面那个 ast 对象
    
    let code = genCode(ast) // '_c("div", {id:"app"},_v(_s(name)))'

逻辑如下：(看不下去就别看了，放浏览器执行一下看结果吧)

## 4. 执行 redner 函数 生成 vnode ##

`new Function('字符串')` 可以让字符串变成函数  
`with(this){内部的代码}` 可以让内部的代码变量从 this 里获取

function Vue() { }
    const code = '_c("div", {id:"app"},_v(_s(name)))'
    lifeCycleMixin(Vue)  // 给 Vue 实例添加 _c, _v, _s 等方法
    
    const vm = new Vue()
    vm.$options = { 
       render: new Function(`with(this){return ${ code}}`)
    }
    mountComponent(vm)  // 生成 vnode 并且交给 _update 方法将 vnode 渲染成真实 dom

今天就介绍到生成 vnode 了，后续的 \_update 方法里面包含了 diff 算法，这不是本系列的重点，放后面讲吧！

如果你想运行以上代码，ctrl + shift + n 进入无痕模式运行

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Iic5bKz_size_20_color_FFFFFF_t_70_g_se_x_16]

看到这为什么 vue 不直接把 template 一步到位转成 vnode，而是 template 转成 render 再转成 vnode？  
知道就写评论里，不知道就算了我不会告诉你的?

<table> 
 <thead> 
  <tr> 
   <th>手写 vue 代码仓库</th> 
   <th>链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>GitHub</td> 
   <td>https://github.com/shunyue1320/vue-resolve/tree/vue-02</td> 
  </tr> 
  <tr> 
   <td>Gitee</td> 
   <td>https://gitee.com/shunyue/vue-resolve/tree/vue-02/</td> 
  </tr> 
 </tbody> 
</table>

[f02d38177f4c46a9ad43f7320b75485d.png]: /images/20220828/ee2a44ab33ff49ef8eaa591d713cbedf.png
[Link 1]: https://regexper.com/#%60%5Ba-zA-Z_%5D%5B%5C%5C-%5C%5C.0-9_a-zA-Z%5D*%60
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Iic5bKz_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d264ec240aa64a9aa45aa919fb90f241.png