深入Vue2.0底层思想

staticRenderFns: currentStaticRenderFns

}

render函数

个中 genElement 函数(src/compiler/codegen/index.js)是会根据 AST 的属性调用不合的办法生成字符串返回。

function genElement (el: ASTElement): string { 
 
  if (el.staticRoot && !el.staticProcessed) { 
 
    return genStatic(el) 
 
  } else if (el.once && !el.onceProcessed) { 
 
    return genOnce(el) 
 
  } else if (el.for && !el.forProcessed) { 
 
    return genFor(el) 
 
  } else if (el.if && !el.ifProcessed) { 
 
    return genIf(el) 
 
  } else if (el.tag === 'template' && !el.slotTarget) { 
 
    return genChildren(el) || 'void 0' 
 
  } else if (el.tag === 'slot') { 
 
  } 
 
    return code 
 
  } 
 
}

以上就是 compile 函数中三个核心步调的介绍，compile 之后我们获得了 render 函数的字符串情势，后面经由过程 new Function 获得真正的衬着函数。数据发明变更后，会履行 Watcher 中的 _update 函数(src/core/instance/lifecycle.js)，_update 函数会履行这个衬着函数，输出一个新的 VNode 树形构造的数据。然后在调用 patch 函数，拿这个新的 VNode 与旧的 VNode 进行比较，只有产生了变更的节点才会被更新到真实 DOM 树上。

patch

patch.js 就是新旧 VNode 比较的 diff 函数，主如果为了优化dom，经由过程算法使操作dom的行动降到最低，diff 算法来源竽暌冠 snabbdom，是 VDOM 思惟的核心。snabbdom 的算法为了 DOM 操作跨层级增删免得较少的┞封一目标进行优化，它只会在同层级进行, 不会跨层级比较。

(function() { 
 
  with(this){ 
 
    return _c('div',{   //创建一个 div 元素 
 
      attrs:{"id":"app"}  //div 添加属性 id 
 
      },[ 
 
        _m(0),  //静态节点 header，此处对应 staticRenderFns 数组索引为 0 的 render 函数 	
			 5/6   首页 上一页 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　拯救者Linux：我是如何给我的团队引入Linux的
            
            在项目早期就碰到公开的掉败后，一个有名大年夜学的 IT 团队决定将他们的 web 注册体系安排到 Linux上，此举几乎将办事器的最大年夜用户拜访量进步了 3  倍1998年，我在明尼苏达大年夜学为>>>详细阅读


本文标题：深入Vue2.0底层思想–模板渲染
地址：http://www.17bianji.com/lsqh/36398.html
 1/2    1