传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© xiaofeifei112 中级黑马   /  2019-1-10 12:40  /  77 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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

分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马