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节点。这里有两点需要特别注意的地方:
- 当把文档片段插入DOM树的时候,只会把它的子节点插进去,它作为容器本身是不会进入DOM树的。
- 当把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()方法
菜鸟教程
- Vue双向绑定原理(一)文档片段DocumentFragment
- Javascript DocumentFragment 文档片段
- vue双向绑定原理
- vue双向数据绑定原理
- Vue 双向数据绑定原理
- Vue双向绑定原理(二)访问器属性defineProperty()
- Vue双向数据绑定原理分析
- vue双向数据绑定的原理解密
- 剖析Vue原理&实现双向绑定MVVM
- 剖析Vue原理&实现双向绑定MVVM
- Vue.js双向绑定的实现原理
- 剖析Vue原理&实现双向绑定MVVM
- 转-Vue双向绑定的原理
- 剖析Vue原理&实现双向绑定MVVM
- vue双向数据绑定的原理
- Vue.js双向数据绑定原理
- vue实现数据双向绑定原理剖析
- Vue双向数据绑定原理解析
- js中的事件委托或是事件代理详解
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
- React-Native 安装使用
- 代码规范
- Android Studio升级2.3 gradle升级慢的问题 解决方案
- Vue双向绑定原理(一)文档片段DocumentFragment
- spring boot 初识
- 用VIM结合Keil(MDK)写STM32、C51等程序
- c++下RSA和BLOWFISH加解密-使用Crypto库
- oracle虚拟机安装,sqlplus不是内部或外部命令
- python中jieba分词快速入门
- C++中extern “C”含义深层探索
- 正则表达式随记(2)
- linux(centOS) 挂载新硬盘