浅谈vue单一组件下动态修改数据时的全部重渲染
作者:Aman920_ 发布时间:2024-04-27 15:51:55
标签:vue,组件,渲染,修改
今天在学习vue的过程中,发现一个有趣的现象。
在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定。可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化
这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如。是不是只要有一个节点变了,node都重新进行了加载???
我想这其中的缘由必定和vue数据的双向绑定的原理有关联,就搜索了一番,果然发现了些东西,就是DocumentFragment,之前好像见过,但没怎么重视。那么它是用来干啥的呢:
DocumentFragment(文档片段)可以看作节点容器,它可以包含多个子节点,当我们将它插入到 DOM 中时,只有它的子节点会插入目标节点,所以把它看作一组节点的容器。使用 DocumentFragment 处理节点,速度和性能远远优于直接操作 DOM。
手动划重点:Vue 进行编译时,就是将挂载目标的所有子节点劫持(真的是劫持,通过 append 方法,DOM 中的节点会被自动删除)到 DocumentFragment 中,经过一番处理后,再将 DocumentFragment 整体返回插入挂载目标。
来源:http://blog.csdn.net/MrZZhou/article/details/72861580


猜你喜欢
- 目录一、ZIP 格式简介二、浏览器解压方案2.1 定义工具类2.2 在线解压 ZIP 文件三、服务器解压方案3.1 根据文件名解压指定 ZI
- 本文实例讲述了Python爬虫之正则表达式基本用法。分享给大家供大家参考,具体如下:一、简介正则表达式,又称正规表示式、正规表示法、正规表达
- 1、最简单的调用方式 直接写到html的body标签里面,如: <html> <body onload="fun
- 一、python代码实现及turtle库简单介绍桌面时钟项目描述1、使用turtle库绘制时钟外形及表针;2、使用datetime获取系统时
- 一、react-reduxreact-redux依赖于redux工作。 运行安装命令:npm i react-redux:使用: 将Prov
- 本篇文章主要是由于计划使用django写一个计划任务出来,可以定时的轮换值班人员名称或者定时执行脚本等功能,百度无数坑之后,终于可以凑合把这
- 1、os.name---判断现在正在实用的平台,Windows返回'nt';linux返回'posix'2、
- Python内建了map()和reduce()函数。如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified
- 模块导入1.1 import导入模块所谓的模块其实就是一个外部的工具包,其中存在的其实就是Python文件,这些文件都实现了某种特定的功能,
- 为什么要实现分页?在大部分网站中分页的功能都是必要的,尤其是在后台管理中分页更是不可或缺分页能带给用户更好的体验,也能减轻服务器的压力对于分
- 需求对于部署在阿里云上的重要系统一般是不让其他人访问的,所以会在负载均衡(SLB)上加上访问控制列表。而使用ASDL拨号上网的宽带来说一般公
- 说明:复制表(只复制结构,源表名:a 新表名:b) select * into b from a where 1<>1说明:拷贝
- 基于python opencv人脸识别的签到系统前言先看下效果实现的功能开始准备页面的构建功能实现代码部分总结前言一个基于opencv人脸识
- argparse是python标准库里面用来处理命令行参数的库命令行参数分为位置参数和选项参数:位置参数就是程序根据该参数出现的位置来确定的
- 有时候,为了获取查询结果的部分数据,需要对变量进行一些处理,在网上查了一圈,只发现了这两个方法:返回查询结果的切片在返回给前端的结果中,通过
- 如下所示:#!/usr/bin/env pythonimport serialimport timeimport threadclass M
- Golang: 接收GET和POST参数GET 和 POST 是我们最常用的两种请求方式,今天讲一讲如何在 golang 服务中,正确接收这
- php数组中元素的存在方式是以键值对的方式('key'=>'value'),有时候我们需要根据键删除数
- Memoization 是一种将函数返回值缓存起来的方法,在 Lisp, Ruby, Perl, Python 等语言中使用非常广泛。随着
- 前言本文主要介绍通过Python提取csv文件中数据,并对数据进行处理。编译器:Anaconda3 语言:Python3一、使用pandas