vue的diff 算法

1. 当数据发生变化时,vue是怎么更新节点的?

要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能够帮助我们。

我们先根据真实DOM生成一颗virtual DOM,当virtual DOM某个节点的数据改变后会生成一个新的Vnode然后VnodeoldVnode作对比,发现有不一样的地方就直接修改在真实的DOM上,然后使oldVnode的值为Vnode

diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁

有点类似这样:

<div><p>123</p>
</div><script>
var Vnode = {tag: 'div',children: [{ tag: 'p', text: '123' }]
};
</script>// 在采取diff算法比较新旧节点的时候,比较只会在同层级进行, 不会跨层级比较。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu中python调用SimpleITK来显示图像

misc.imshow ipython import os from scipy import misc dataDir os.environ["HOME"] "/Downloads/SimpleITK-MICCAI-2001-Tutorial-master/Data" print dataDir image misc.imread(dataDir "FA.png") misc.imshow(image) 或者 ipython i…

Websocket--- long loop--ajax轮询

Websocket--- long loop--ajax轮询,long poll 和 ajax轮询 的原理。 1&#xff0c;首先是 ajax轮询 &#xff0c;ajax轮询 的原理非常简单&#xff0c;让浏览器隔个几秒就发送一次请求&#xff0c;询问服务器是否有新信息。 2&#xff0c;long poll 其实原理跟 ajax轮询 差不多…

Linux下设置环境变量

单独查看PATH环境变量&#xff0c;可用&#xff1a; echo $PATH11 方法一&#xff1a;在用户主目录下的 profile或 bashrc文件 sudo gedit ~/.profile 或者 sudo gedit ~/.bashrc123123 可以在此文件末尾加入PATH的设置如下&#xff1a; export PATH”$PATH:your path1:you…

前端解决一像素问题

一、transform:scale 使用伪类 :after 或者 :before 创建 1px 的边框&#xff0c;然后通过 media 适配不同的设备像素比&#xff0c;然后调整缩放比例&#xff0c;从而实现一像素边框 首先用伪类创建边框 .border-bottom{position: relative;border-top: none !important; }.…

Python缩进问题

Python缩进问题 Python中&#xff0c;是通过代码的缩进&#xff0c;来决定代码的逻辑的。通俗的说&#xff0c;Python中的代码的缩进&#xff0c;不是为了好看&#xff0c;而是觉得代码的含义&#xff0c;上下行代码之间的关系。缩进弄错了&#xff0c;就会导致程序出错&#…

Ubuntu下安装Pycharm及相关设置

下载 Pycharm 社区版本 http://www.jetbrains.com/pycharm/download/#sectionlinux 安装指导 Copy the pycharm-community-2016.2.3.tar.gz to the desired installation location (make sure you have rw permissions for that directory) cp /home/bids/Downloads/pycha…

Python 编码规范 PEP 8

PEP 8 – Style Guide for Python Code 详情可查看官网 https://www.python.org/dev/peps/pep-0008/ 用于查看python代码是否符合风格. sudo apt-get install pep8 使用 pep8 --youfile.py 可以得到以下输出 test2.py是自己写的一个文件): test2.py:1:11: E401 multipl…

NIPS 2016 Highlighted Papers

今天看到NIPS官网开放了部分录用文章的Spotlight Videos&#xff0c;迫不及待撸了一遍&#xff0c;特别将一些有趣、有料的highlight出来分享给大家。文章链接均为油管视频&#xff0c;戳前请翻墙&#xff08;排名不分先后&#xff0c;但根据自己的兴趣在每篇文章后用“★”标记…

深度学习所有文章

所有文章&#xff08;持续更新中&#xff09;&#xff1a; 聊聊语音识别的发展历程 说说重要的贝叶斯公式吧 我对入门深度学习的切身体会 聊聊隐马尔科夫模型&#xff08;HMM&#xff09; 关于防止过拟合的一些想法 我与数据打交道&#xff08;一&#xff09; 我与…

朱松纯:初探计算机视觉三个源头兼谈人工智能

朱松纯 加州大学洛杉矶分校UCLA统计学和计算机科学教授&#xff08;Song-Chun Zhu&#xff1b;www.stat.ucla.edu/~sczhu&#xff09; 杨: 朱教授&#xff0c;你在计算机视觉领域耕耘20余年&#xff0c;获得很多奖项&#xff0c;是很资深的研究人员。近年来你又涉足认知科学、…

视觉研究的前世今生(上)王天珍(武汉理工大学)

视觉是人类最重要的知觉&#xff0c;没有视觉人类很难定位&#xff0c;识别物体&#xff0c;了解坏境&#xff0c;得以生存发展。20世纪两次世界大战&#xff0c;使得西方各国&#xff0c;不论是为了飞机安全着陆&#xff0c;还是导弹精确制导&#xff0c;都对视觉研究有了非常…

视觉研究的前世今生(中)王天珍(武汉理工大学)

视觉研究的前世今生&#xff08;三&#xff09; 王天珍 3 空间知觉 3-1概述 学术界一致同意空间知觉是视觉的最高层次&#xff0c;也是视觉中最抽象&#xff0c;最难以理解的。众所周知。物体上一点发出的光线落到视网膜上只是一个点&#xff0c;但我们怎么能单凭视觉知道物体的…

看了数百个PPT封面,我只想告诉你这两个套路!

做PPT离不开的一个词就是封面&#xff0c;封面即门面&#xff0c;很大程度上决定了你的作品给人的第一印象。 我们经常能够在网上看到一些大神做的封面&#xff0c;比如阿文、珞珈&#xff0c;非常酷炫。 这类封面也许不需要太多技巧&#xff0c;但一定是花了很多心思并且需要…

caffe 框架梳理(待续)

本文更多资料来源于罗韵北京深度学习资料和Ian Goodfellow的书籍《Deep Learning》 链接: http://pan.baidu.com/s/1jIRJ6mU 提取密码&#xff1a;xehi caffe&#xff1a;全称Convolutional Architecture for Fast Feature Embedding&#xff0c;是一个计算CNN 相关算法的框…

NIPS 2016上22篇论文的实现汇集

日前&#xff0c;LightOn CEO 兼联合创始人 Igor Carron 在其博客上放出了其收集到的 NIPS 2016 论文的实现&#xff08;一共 22 个&#xff09;。他写道&#xff1a;「在 Reddit 上&#xff0c;peterkuharvarduk 决定编译所有来自 NIPS 2016 的可用实现&#xff0c;我很高兴他…

深度学习 - 强化学习 -迁移学习(杨强教授报告)

李宏毅机器学习课程&#xff0d;Transfer Learning 深度学习 -> 强化学习 ->迁移学习&#xff08;杨强教授报告) 链接: http://pan.baidu.com/s/1nu6DMRn 密码: an9q 深度学习的局限 表达能力的限制。因为一个模型毕竟是一种现实的反映&#xff0c;等于是现实的镜像&…

Caffe: 贾扬清2015年讲座

链接: http://pan.baidu.com/s/1jIRJ6mU 提取密码&#xff1a;xehi 一、讲座正文 大家好&#xff01;我是贾扬清&#xff0c;目前在GoogleBrain&#xff0c;今天有幸受邀来和大家聊聊Caffe。没有太多准备&#xff0c;所以讲的不好的地方还请大家谅解。 大家最近一段时间应该已…

李开复 6000 字长文,揭开 AI 创业的 10 个真相

全文见 http://mp.weixin.qq.com/s?__bizMzI5NTIxNTg0OA&mid2247485140&idx1&sn9a92d9cfa6c4461a4fc0f59705ac84bb&chksmec57b153db203845f65a0ce76324f1b3ea329d5cc5612f2b973b34f3f21a8fe78dc22dd61849&scene0#rd AI 创业现在是科学家的天下&#xff…

关于机器学习的领悟与反思(张志华北大数学系教授)

张志华教授&#xff1a;机器学习——统计与计算之恋 COS访谈第十九期&#xff1a;张志华教授 张志华老师教学之感悟 部分共享资料见链接: https://pan.baidu.com/s/1bpGc0nP 密码: 49ei ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆…

再论数据科学竞赛中的Data Leakage

越来越多的数据爱好者把注意力放在了数据竞赛上&#xff0c;像Kaggle数据竞赛。这类数据竞赛中&#xff0c;有时会遇到Data Leakage。而大部分人对Data Leakage的概念理解都是错误的。这次&#xff0c;我们来梳理一下Data Leakage&#xff0c;希望能让大家对数据中的因果关系更…