Vue双向绑定原理（一）文档片段DocumentFragment

最新推荐文章于 2023-02-09 10:06:01 发布
最新推荐文章于 2023-02-09 10:06:01 发布
阅读量3.9k 收藏 6
点赞数 3
分类专栏： 学习笔记 JavaScript/jQuery vue.js 前端工程师从初级到高级 文章标签： javascript vue mvvm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Creabine/article/details/60139805
版权
本文介绍了JavaScript创建节点的方法，重点讲解了DocumentFragment的用途，它能提高性能，避免频繁调用appendChild()。在Vue中，DocumentFragment用于在编译模板时临时存放和处理元素，实现数据绑定和指令解析，最终将处理后的节点插入DOM。
摘要由CSDN通过智能技术生成

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"` 的属
最低0.47元/天 解锁文章
Creabine
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端性能优化第三篇-documentFragment
Raaabbt GO!!
06-14 1091
前端性能优化第三篇-documentFragment 虽然说是第三篇，但是其实算作对第二篇的补充比较合适，没有看第二篇的小伙伴可以戳下面的链接～ 前端性能优化第二篇 前戏 在第二篇中提到了回流和重绘，一个重要的优化策略就是在创建dom节点的时候将创建多个节点的操作变为一次操作。下面我以我做的一个小项目——服务中心课表查询中的部分代码为例进行一下说明。 栗子 抱歉抱歉这是...
Vue双向绑定实现原理与方法详解
10-15
主要介绍了Vue双向绑定实现原理与方法,结合实例形式详细分析了发布者-订阅者模式、脏值检查、数据劫持与双向绑定相关实现技巧,需要的朋友可以参考下
Vue 的双向绑定原理与用法揭秘
10-15
主要介绍了Vue 的双向绑定原理与用法,结合实例形式总结分析了Vue 的双向绑定基本原理、功能、用法及注意事项,需要的朋友可以参考下
Vue 3.0双向绑定原理的实现方法
10-16
主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue源码分析之createDocumentFragment()的思考
时清云的博客
07-11 1502
先看一下关于createDocumentFragment的定义： createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。 DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使
DocumentFragment
weixin_42424283的博客
02-02 1596
对于document.createDocumentFragment()，所有浏览器都支持（包括IE6），而构造函数方法就不是所有浏览器都有效了（IE没有实现该方法）。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，
回流和重绘引发思考——DocumentFragment、Vue(keep-alive)
黄彪博客
07-09 1692
https://javascript.ruanyifeng.com/dom/node.html document.createDocumentFragment() keep-alive 虚拟DOM 回流和重绘 文章参考 document.createDocumentFragment() 详解回流和重绘及优化 问题描述 昨天同事培训Vue问了一个“回流”和“重绘”的问题，自己回答的是数据量过大导致浏览器渲染慢和卡顿的问题，Vue解决办法是使用虚拟DOM，缓存DOM组件，应该是没有给出准确答案，会后自己深入
vue 双向绑定原理
weixin_49757430的博客
04-21 344
先看效果图 <div id="app"> <input v-model="name" type="text"> <h1>{{name}}</h1> </div> <script src="./js/observer.js"></script> <script src="./js/watcher.js"></script> <script src="./js/comp...
Vue中fragment.js使用方法小结
11-21
createDocumentFragment 如果要在一个节点上一次性插入多个元素怎么办，比如说一次插入 10000 个节点？ 最简单粗暴的方式就是： var parent = document.getElementById(`'parent'`); for`(`var i = 0; i < 10000; i++) { var child = document.createElement(`'div'`); var text = document.createTextNode(`'' + i);` child.appendChild(text); parent.appendChild(chi
createElement与createDocumentFragment的点点区别小结
09-05
在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段
Vue双向数据绑定原理(面试必问)
梅花寺
10-07 5300
1.obj：必需。目标对象2.prop：必需。需定义或修改的属性的名字3.descriptor：必需。目标属性所拥有的特性传入函数的对象。即第一个参数obj；针对属性，我们可以给这个属性设置一些特性，比如是否只读不可以写；是否可以被for…in或Object.keys()遍历。给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。一、访问器属性Object.defineProperty()函数。
深入了解Vue 2响应式原理，并手写一个简单的Vue
Niall_Tonshall的博客
04-13 2474
1. Vue 2的响应式原理 Vue.js 一个核心思想是数据驱动。所谓数据驱动是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。vue.js里面只需要改变数据，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化，DOM是数据的一种自然的映射。vue.js还会对View操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。
node怎么解析vue代码_【VUE】Vue 源码解析
weixin_42204303的博客
12-24 361
Vue 源码解析Vue 的工作机制在new vue()之后，Vue 会调用进行初始化，会初始化生命周期、事件、props、methods、data、computed和watch等。其中最重要的是通过Object.defineProperty设置setter和getter，用来实现响应式和依赖收集。初始化之后，调用$mount挂载组件。启动编译器compile()，对template进行扫描...
vue3 template编译出来了的，并且出现了#document-fragment，里面的内容显示不出来解决方法
最新发布
BMG-Princess
02-09 467
vue3 template编译出来了的，并且出现了#document-fragment，里面的内容显示不出来解决方法
createDocumentFragment 妙用
qq_45228255的博客
04-16 671
createDocumentFragment
DocumentFragment 的优化小知识
weixin_34249367的博客
05-07 114
作者 ： 混元霹雳手-ziksang 无论在做项目还是学知识，当看到DocumentFragment 这个文档碎片的时候，你并不会去在意他，往往就是这东西就能看的出你对Js的认识，和一个层级的化分，前天我看到一位小兄弟发了一篇文章，上面写着阿里十道面试题，里面有一个问题是这样的 3.请把&lt;body&gt;&lt;p&gt;第1行&lt;/p&gt;&lt;p&gt;第2行&lt;/p&g...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值