• 7座水库新纳入联合调度 今年汉江防洪能力再提升 2019-09-14
  • 北新建材荣登“中国500最具价值品牌”100强 2019-09-14
  • 【加拿大房产网加拿大新房加拿大房产信息网】 2019-08-27
  • 中考期间广州部分公交线路有调整 2019-08-10
  • 拉萨市第三高级中学举行“四讲四爱”教育实践活动之军民共建协议签订仪式 2019-07-13
  • IP定向新闻--贵州频道--人民网 2019-07-12
  • 国际足联成员也就是亚足联成员的中国(大陆)、朝鲜、中华台北、香港、澳门,也可以有蒙古,可联合申办2038年世界杯。其中,中国大陆、朝鲜,算东道主,直接参赛。 2019-07-02
  • 端午三件套了解一下!这些小知识让你端午更健康 2019-06-28
  • 明星们吃掉一公斤辣椒的瘦身法靠谱吗? 2019-06-28
  • 以仪式守护节日文化(艺海观澜) 2019-06-22
  • 《紫砂的意蕴——宜兴紫砂工艺研究》简介 2019-06-21
  • 点评:世界杯八大热门亮相完毕 西班牙巴西最有冠军相 2019-06-21
  • 大家都误解蔡英文了?台专家酸讽:台湾的问题出在2300万人身上 2019-06-17
  • 五一游记:随华商网乡村游走进安康 游览南宫山 蜀河古镇 2019-06-17
  • 俄罗斯5-0沙特!看球之余俄罗斯还有哪些能玩的地?--旅游频道 2019-06-12
  • 全国咨询热线:400-618-4000

    破解北京pk10漏洞:Vue 的 template 是如何编译成真正的 HTML

    pk10什么叫跨度去一尾 www.9i8s.com.cn 创建时间:2019年01月10日15时32分

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



    作者:传智播客前端与移动开发培训学院

    首发: //web.www.9i8s.com.cn

  • 7座水库新纳入联合调度 今年汉江防洪能力再提升 2019-09-14
  • 北新建材荣登“中国500最具价值品牌”100强 2019-09-14
  • 【加拿大房产网加拿大新房加拿大房产信息网】 2019-08-27
  • 中考期间广州部分公交线路有调整 2019-08-10
  • 拉萨市第三高级中学举行“四讲四爱”教育实践活动之军民共建协议签订仪式 2019-07-13
  • IP定向新闻--贵州频道--人民网 2019-07-12
  • 国际足联成员也就是亚足联成员的中国(大陆)、朝鲜、中华台北、香港、澳门,也可以有蒙古,可联合申办2038年世界杯。其中,中国大陆、朝鲜,算东道主,直接参赛。 2019-07-02
  • 端午三件套了解一下!这些小知识让你端午更健康 2019-06-28
  • 明星们吃掉一公斤辣椒的瘦身法靠谱吗? 2019-06-28
  • 以仪式守护节日文化(艺海观澜) 2019-06-22
  • 《紫砂的意蕴——宜兴紫砂工艺研究》简介 2019-06-21
  • 点评:世界杯八大热门亮相完毕 西班牙巴西最有冠军相 2019-06-21
  • 大家都误解蔡英文了?台专家酸讽:台湾的问题出在2300万人身上 2019-06-17
  • 五一游记:随华商网乡村游走进安康 游览南宫山 蜀河古镇 2019-06-17
  • 俄罗斯5-0沙特!看球之余俄罗斯还有哪些能玩的地?--旅游频道 2019-06-12