Vue虚拟DOM和Diff算法

虚拟DOM

• 所谓的virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点 dom diff 则是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染
  
• virtual dom的渲染流程
  • 通过数据拦截[es5 中 Object.defineProperty 中 getter和setter来实现的]对数据进行设置
  • 通过vdom模拟真实dom结构
  • 通过特定的render方法将vdom解析
  • 渲染真实dom
  • 当数据改变是会再次生成vdom
  • 通过diff算法统计比较新旧vdom，生成patch补丁对象
  • 重新渲染真实dom[只渲染变化的部分]

diff算法

• diss算法来源于后端思想，用于比较两个文件的不同
• vue中diss算法是js层面的尖酸，是同层级比较
• diss算法比较后的结果是生成耦合patch补丁对象
  

jsx

• jsx是javascript + xml ,在js中可以书写dom结构
• 为什么vue要使用jsx？
  • 当dom结构比较复杂的时候，我们要vdom模拟就会变得复杂，复杂度增大
  • jsx -> vdom对象模型 -> diff -> patch
  • vue中提供了一个render,通过createElement来生成vNode
• vue中jsx需要被解析为vdom对象模型
  • core 核心算法