您的位置:首页 > Web前端 > Vue.js

Vue虚拟DOM和Diff算法

2019-10-24 17:51 537 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/Hcdream/article/details/102728517

虚拟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 核心算法
  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: