浅谈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 相关文章推荐
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
详解小程序云开发数据库
May 20 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 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
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
一个实用的php验证码类
2017/07/06 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python 字符串split的用法分享
2013/03/23 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python的依赖管理的实现
2019/05/14 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python中and和or如何使用
2020/05/28 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
JPA的特点
2014/10/25 面试题
小学门卫岗位职责
2013/12/17 职场文书
2014年仓库工作总结
2014/11/20 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
国际贸易实训总结
2015/08/03 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python