黑马程序员技术交流社区

标题: Vue 的 template 是如何编译成真正的 HTML [打印本页]

---

作者: 庭院深深深几许    时间: 2019-4-19 15:02
标题: Vue 的 template 是如何编译成真正的 HTML

---

　　传智的web前端培训课程一直紧随市场发展脚步，实时更新前沿、深度、覆盖面广的前端课程。
　　传智全新升级的前端与移动开发课程新增了大热的小程序+小游戏、人脸识别、机器学习、大数据可视化等前沿技术，还加入了前所未有的全终端大型项目，让学员通过一个大型项目掌握从需求到开发再到上线部署的各项技能，为学员高薪就业增加砝码。
　　更多的相关web前端培训课程请访问：http://www.itcast.cn/web/


1. 首先第一步实例化一个vue项目
                2. 模板编译是在vue生命周期的mount阶段进行的
                3. 在mount阶段的时候执行了compile方法将template里面的内容转化成真正的html代码
                4. parse阶段是将html转化成ast(抽象语法树)，用来表示代码的数据结构。在 Vue 中我把它理解为嵌套的、携带标签名、属性和父子关系的 JS 对象，以树来表现 DOM 结构。
                                [JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
                                                [color=white !important]

[color=white !important]?

               

01                         02                         03                         04                         05                         06                         07                         08                         09                         10                         11                         12                         13                         14                         15                         16                         17                         18                         19                         20                         21                         22

html: "<div id="test">texttext</div>"                             //html转换成ast                             ast: {                             // 标签类型                             type: 1,                             // 标签名                             tag: "div",                             // 标签行内属性列表                             attrsList: [{name: "id", value: "test"}],                             // 标签行内属性                             attrsMap: {id: "test"},                             // 标签关系 父亲                             parent: undefined,                             // 字标签属性列表                             children: [{                                 type: 3,                                 text: 'texttext'                               }                             ],                             plain: true,                             attrs: [{name: "id", value: "'test'"}]                           }

               
               
               
               
                5. optimize 会对parse生成的ast树进行静态资源优化(静态内容指的是和数据没有关系，不需要每次都刷新的内容)
                6. generate 函数，会将每一个ast节点创建一个内部调用的方法等待后面的调用。
                                [JavaScript] [color=rgb(51, 102, 153) !important]纯文本查看 [color=rgb(51, 102, 153) !important]复制代码
                                                [color=white !important]

[color=white !important]?

               

1                         2                         3                         4                         5                         6                         7                         8                         9

<template>                           <div id="test">                             {{val}}                             <img src="http://xx.jpg">                           </div>                         </template>                                                 //最后输出                         {render: "with(this){return _c('div',{attrs:{"id":"test"}},[[_v(_s(val))]),_v(" "),_m(0)])}"}

               
               
               
               
                7. 在complie过程结束之后会生成一个render字符串 ，接下来就是 new watcher这个时候会对绑定的数据执行监听，render 函数就是数据监听的回调所调用的，其结果便是重新生成 vnode。当这个 render 函数字符串在第一次 mount、或者绑定的数据更新的时候，都会被调用，生成 Vnode。如果是数据的更新，那么 Vnode 会与数据改变之前的 Vnode 做 diff，对内容做改动之后，就会更新到我们真正的 DOM 上啦

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2