vue foreach用法_vue 源码探究（第二弹）

vue 源码探究（第二弹）

接着上一篇，继续来讲一个非常有意思的东西documentFragment

解析

六、DocumentFragment: 文档碎片(高效批量更新多个节点)

这里先甩出 2 个概念，什么是 document，以及什么是 documentFragment

document: 对应显示的页面, 包含 n 个 element 一旦更新 document 内部的某个元素界面更新
documentFragment: 内存中保存 n 个 element 的容器对象(不与界面关联), 如果更新 framgnet 中的某个 element, 界面不变

如果说，我们想要批量更新多个节点，可不可以这样理解，放入 documentFragment 中去，更新完了之后，再插入 document 中，因为 documentFragment 也是 document 下的一个节点。

举一个简单的例子：

<ul id="fragment_test"><li>test1</li><li>test2</li><li>test3</li></ul>

如果我们想把ul中li中的文本信息，全部由testx变成zhangjing123，原始的方式是不是这样做：

遍历
更改

这样，是不是document刷新了3次，如果说有1万个li呢，document是不是要刷新1万次？
明显这样很不好，那么文档碎片出场了。

const ul = document.getElementById('fragment_test')// 1. 创建fragmentconst fragment = document.createDocumentFragment()// 2. 取出ul中所有子节点取出保存到fragment// 这里提一个小问题，如果这样的代码，会变成啥样？// let child// while(child=ul.firstChild) { // }// 答案：死循环// 那为什么加了一行 fragment.appendChild(child) 就可以呢？// 因为一个节点只能有一个父亲// NOTICE：ul和li中的换行也是一个文本节点，所以我们使用
//   firstChild用法
//   此属性能够获取指定元素节点下的第一个子节点。
//   如果元素下没有子节点，那么返回null。
//   特别说明：
//  （1）.子节点并不一定都是元素节点，还有可能包含文本节点或者注释节点等节点。
//  （2）.空格或者换行被看做文本节点。let childwhile(child=ul.firstChild) { // 一个节点只能有一个父亲fragment.appendChild(child)  // 先将child从ul中移除, 添加为fragment子节点}// 3. 更新fragment中所有li的文本Array.prototype.slice.call(fragment.childNodes).forEach(node => {if (node.nodeType===1) { // 元素节点 <li>node.textContent = 'zhangjing123'}})// 4. 将fragment插入ulul.appendChild(fragment)

未完待续...
接下来，还有一个更有趣的东西

下一章继续~

vue foreach用法_vue 源码探究（第二弹）相关推荐

tcplayer 源码改造第二弹 - 加入倍速播放
文章目录前序简介人群 git地址源码改造(各位客官请自行格式化代码) 实现倍速切换的函数添加配置参数添加获取当前倍速的方法添加切换倍速的函数参照切换清晰度的代码对控制栏加入倍速播放的节 ...
vue大括号里接受一个函数_vue源码探究（第四弹）
vue源码探究(第四弹) 结束了上一part的数据代理,这一部分主要讲讲vue的模板解析,感觉这个有点难理解,而且内容有点多,hhh. 模板解析废话不多说,先从简单的入手. 按照之前的套路,先举一个 ...
vue 初始化方法_Vue源码解读（一）引入Vue做了什么
本系列文章都是vue版本2.6.11,也就是vuecli3的对应的vue的版本学习一门技术的源码首先当然是从它的入口开始学习,在这里我先扩展一下从引入vue到入口都讲一下首先看下node_modu ...
vue 拷贝数组_vue源码中值得学习的方法
最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大家对深入学习js有所帮助.如果大家都能一眼看懂这些函数,说明技术还是不错的哦. 1. 数据类型判断 Objec ...
Vue 合同模板_vue源码逐行注释分析+40多m的vue源码程序流程图思维导图
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
hdfs源码分析第二弹
以写文件为例,串联整个流程的源码: FSDataOutputStream out = fs.create(outFile); 1. DistributedFileSystem 继承并实现了FileSy ...
new vue 方法参数_vue源码解析 lt;1gt; 数据驱动
intro Vue.js 一个核心思想是数据驱动.所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据. 本文将介绍vue如何将模板和数据渲染成最终的 D ...
Springboot源码分析第一弹 - 自动装配实现
Springboot就不用多了吧,解放Java开发双手的神器. 最显著的特点就是,去配置化,自动装配,自动配置.让开发人员只需要注重业务的开发今天就来了解一下自动装配的源码是怎么实现的预先准备直 ...
Vue源码探究-全局API
Vue源码探究-全局API 本篇代码位于vue/src/core/global-api/ Vue暴露了一些全局API来强化功能开发,API的使用示例官网上都有说明,无需多言.这里主要来看一下全局API ...

vue foreach用法_vue 源码探究（第二弹）

vue 源码探究（第二弹）

解析

六、DocumentFragment: 文档碎片(高效批量更新多个节点)

vue foreach用法_vue 源码探究（第二弹）相关推荐

最新文章

热门文章