当数据发生变化时，vue是怎么更新节点的？

我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。（即比较新旧节点，一边比较一边给真实的DOM打补丁）

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 数据发生变化时，vue是如何更新节点的？
    前言：真实DOM的渲染会引起整个DOM树的重排重绘，会造成非常大的开销。因此，vue采用了Virtual DOM（...
    ing1023阅读 4,551评论 0赞 0
  • 详解vue的diff算法
    1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据...
    Marting424阅读 3,328评论 0赞 0
  • 理解Vue2.5中diff算法
    vue是现在主流前端框架之一，采用了很多高级特性，如虚拟DOM，那么它是如何批量更新的，我们一起来了解下。 数据变...
    老鼠AI大米_Java全栈阅读 4,419评论 0赞 4
  • 【Vue】Diff算法解析
    概念 DIFF 算法即两颗虚拟 DOM 树做 DIFF，比较两颗树的差异性，只更新产生变化的节点，渲染更新后的节点...
    扎星zuckstar阅读 4,518评论 0赞 0
  • 详解vue的diff算法
    前言 我的目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，目的让看这篇文...
    flyinskybiu阅读 3,177评论 0赞 0