虚拟dom

虚拟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 染烛墨笺 阅读(...) 评论(...) 编辑 收藏