虚拟DOM 和 Diff 算法，key的作用，jsx,render函数

Posted 2021-12-05 zhaoyingzi

虚拟DOM 和 Diff 算法

1. 什么是虚拟DOM？
   • 使用javascript模拟了DOM结构的树形结构（对象表示），这个树结构包含整个DOM结构的信息
2. 使用虚拟DOM有什么好处？
   • 操作数据要大大的减少性能损耗，提高渲染效率
   • 越多的真实dom操作，越损耗性能
3. 什么是Diff 算法？
   • 是linux的基础命令，用来比较两个文本文件的差异，是代码版本管理的基石之一
   • vdom中应用diff算法是为了找出需要更新的节点
   • diff算法的实现，关注patch，patch方法中首先判断两个节点是否相同
   • 核心逻辑。createElement和updateChildren
4. diff算法是用来做什么的？
   • vue的diff算法用于视图更新，也可以说是dom更新
5. 接下我们以一个案例的形式告诉大家 ： 列表渲染为什么要加key?
   1. key的作用
      • 主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
6. jsx 在vue采用的原因
   • VDOM对象树太繁琐了， 如果能像dom结构一样书写就好了， 这就引入了 jsx
7. render函数是做什么的
   • 但是jsx始终还是不能直接去用的，必须转换成 对象 才能使用，
   • vue中 使用render 函数 解析jsx语法， 然后换成 对象结构 ，在通过 createElment 生成节点，渲染成真实DOM
8. VDOM的渲染流程
   1. 获取数据
   2. 根据数据创建VDOM （相当于给对象赋值）
   3. 根据VDOM渲染生成真实DOM ( 根据createElmeent(‘DIV’) )
   4. 当数据发生改变后，又会生成新的VDOM
   5. 通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染，
   6. 一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’