深入Vue2.0底层思想

this.componentOptions = componentOptions

this.componentInstance = undefined

this.parent = undefined

this.raw = false

this.isStatic = false //是否被标记为静态节点

this.isRootInsert = true

this.isComment = false

this.isCloned = false

this.isOnce = false

}

真实DOM存在什愦问题，为什么要用虚拟DOM

我们为什么不直接应用原生 DOM 元素，而是应用真实 DOM 元素的简化版 VNode，最大年夜的原因就是 document.createElement 这个办法创建的┞锋实 DOM 元素会带来机能上的损掉。我们来看一个 document.createElement 办法的例子

let div = document.createElement('div'); 
 
for(let k in div) { 
 
  console.log(k); 
 
}

打开 console 运行一下膳绫擎的代码，会发明打印出来的属性多达 228 个，而这些属性有 90% 多对我们来说都是无用的。VNode 就是简化版的┞锋实 DOM 元素，接洽关系着真实的dom，比如属性elm，只包含我们须要的属性，并新增了一些在 diff 过程中须要应用的属性，例如 isStatic。

Vue 2.0 中模板衬着与 Vue 1.0 完全不合，1.0 中采取的 DocumentFragment (想懂得可以不雅看这篇文┞仿)，而 2.0 中借鉴 React 的 Virtual DOM。基于 Virtual DOM，2.0 还可以支撑办事端衬着(SSR)，也支撑 JSX 语法。

这个函数是经由过程编译模板文件获得的，其运行结不雅是 VNode。render 函数与 JSX 类似，Vue 2.0 中除了 Template 也支撑 JSX 的写法。大年夜家可以应用 Vue.compile(template)办法编译下面这段模板。

div id="app"> 
 
  header> 
 
    h1>I am a template!/h1> 
 
  /header> 
 
  p v-if="message"> 
 
    {{ message }} 
 
  /p> 
 
  p v-else> 
 
    No message. 
 
  /p> 
 
/div>

办法会返回一个对象，对象中有 render 和 staticRenderFns 两个值。看一下生成的 render函数

除了 render 函数，还有一个 staticRenderFns 数组，这个数组中的函数与 VDOM 中的 diff 算法优化相干，我们会在编译阶段给后面不会产生变更的 VNode 节点打上 static 为 true 的标签，那些被标记为静态节点的 VNode 就会零丁生成 staticRenderFns 函数

(function() { //膳绫擎 render 函数 中的 _m(0) 会调用这个办法 
 
  with(this){ 
 
    	
			 2/6   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

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


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