浅谈vue单一组件下动态修改数据时的全部重渲染


Posted in Javascript onMarch 01, 2018

今天在学习vue的过程中,发现一个有趣的现象。

在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定。可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化

这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如。是不是只要有一个节点变了,node都重新进行了加载???

我想这其中的缘由必定和vue数据的双向绑定的原理有关联,就搜索了一番,果然发现了些东西,就是DocumentFragment,之前好像见过,但没怎么重视。那么它是用来干啥的呢:

DocumentFragment(文档片段)可以看作节点容器,它可以包含多个子节点,当我们将它插入到 DOM 中时,只有它的子节点会插入目标节点,所以把它看作一组节点的容器。使用 DocumentFragment 处理节点,速度和性能远远优于直接操作 DOM。

手动划重点:Vue 进行编译时,就是将挂载目标的所有子节点劫持(真的是劫持,通过 append 方法,DOM 中的节点会被自动删除)到 DocumentFragment 中,经过一番处理后,再将 DocumentFragment 整体返回插入挂载目标。

以上这篇浅谈vue单一组件下动态修改数据时的全部重渲染就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
vue 虚拟dom的patch源码分析
Mar 01 #Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 #Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 #Javascript
React Native 图片查看组件的方法
Mar 01 #Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 #Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 #Javascript
vue中使用cropperjs的方法
Mar 01 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
php设计模式 Composite (组合模式)
2011/06/26 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
php中如何执行linux命令详解
2018/11/06 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
js数组操作常用方法
2014/05/08 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python中的高级数据结构详解
2015/03/27 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
庆八一活动方案
2014/01/25 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
统计学教授推荐信
2014/09/18 职场文书
旅游安全责任协议书
2016/03/22 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
送给客户微信问候语!
2019/07/04 职场文书