虚拟dom

虚拟dom

  • 虚拟dom本质上是js的对象
    用js对象形式来描述dom节点
var element = { 
tagName: 'ul', 

// 子节点
 children: [
{tagName: 'li', props: {class: 'item'}, children: ["Item 1"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]}, ]
    // ....
}
  • 操作虚拟dom更快
    因为虚拟dom为js对象，操作js对象永远比真实dom节点更快
    操作虚拟dom比操作dom更快
    当数据发生改变时，会形成一个新的虚拟dom,
    通过diff算法，比较新旧虚拟dom的差别，后作用于是dom上
    更新真实的dom
  • key
    而key的作用就是为了性能优化
    通过key来比较新旧虚拟dom相同层次的比较，
    更快的比较差异，最后来更新真实dom

posted on 2019-06-10 22:01 染烛墨笺 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为yCodeMan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yCodeMan/p/11000616.html