Vue双向绑定原理(一)文档片段DocumentFragment

来源:互联网 发布:没有网站怎么做seo 编辑:程序博客网 时间:2024/03/28 20:01

DocumentFragment介绍

JavaScript有以下几种创建节点的方式:

  • createAttribute(name):       用指定名称name创建特性节点
  • createComment(text):        创建带文本text的注释节点
  • createElement(tagname):       创建标签名为tagname的节点
  • createTextNode(text):        创建包含文本text的文本节点
  • createDocumentFragment():     创建文档碎片节点

前几个比较简单,我们也顺便简单说一下:

createAttribute(name)
用于创建一个指定名称name的属性,例如:

var att=document.createAttribute("class");att.value="democlass";//给h1标签添加了一个`class="democlass"` 的属性document.getElementsByTagName("H1")[0].setAttributeNode(att);

createComment(text)
用于创建一个带文本text的HTML注释节点,例如:

var c=document.createComment("My personal comments");document.body.appendChild(c);//结果为  <!-- My personal comments -->

createElement(tagname)
用于创建一个指定名称的HTML元素。这个是最常用的了。例如:

//创建一个<p></p>元素var p=document.createElement("p");

createTextNode(text)
用于创建一个文本为text的文本节点,常跟createElement配合使用。例如:

var h=document.createElement("H1");var t=document.createTextNode("Hello World");h.appendChild(t);

上边几个方法用于创建节点,都非常简单。当我们更新少量dom节点的时候,可以创建他们然后直接appendChild()插入DOM树。但是如果我们要创建大量节点的时候,每次都创建再插入,会调用很多次appendChild()方法,会非常浪费性能。为了解决这个问题,就有了documentFragmeng文档片段,可以先把这些创建的元素放入文档片段,然后在把文档片段插入DOM树,这样就只会调用一次appendChild()方法了。

createDocumentFragment()
用于创建一个文档片段作为容器,其中可以包含多个dom节点。这里有两点需要特别注意的地方:

  1. 当把文档片段插入DOM树的时候,只会把它的子节点插进去,它作为容器本身是不会进入DOM树的。
  2. 当把DOM树种的节点插入文档片段的时候,这些节点,会真的从DOM树种消失。我们也把这个过程叫做劫持。

在Vue中的作用

上边说清楚了documentFragment是干嘛的,现在说说他在vue中的作用。

每个vue实例都有一个根元素id的属性el,Vue对象通过它来找到要渲染的部分。之后使用createDocumentFragment()方法创建一个documentFragment,遍历根元素的所有子元素,依次劫持并插入文档片段,将根元素掏空。然后执行Vue的编译:遍历documentFragment中的节点,对其中的v-for,v-text等属性进行相应的处理。最后,把编译完成后的documentFragment还给根元素。

这也就是为什么,我们写在模板中的HTML,有v-for,v-model等属性,而实际页面F12之后却没有,因为那是Vue编译之后返回的结果。

参考资料:
document的createDocumentFragment()方法
菜鸟教程

0 0
原创粉丝点击