盒子
盒子
文章目录󰁋
  1. 一、什么是 vdom
  2. 二、设计一个需求场景
  3. 三、vdom 的如何应用,核心 API 是什么
  4. 四、介绍一下 diff 算法
    1. 4.1 vdom 为何使用 diff 算法
    2. 4.2 diff 实现过程

虚拟DOM(一)

一、什么是 vdom

  • JS 模拟 DOM 结构
  • DOM 变化的对比,放在 JS 层来做
  • 提高重绘性能

二、设计一个需求场景

image.png

用jQuery实现

image.png
image.png
image.png

遇到的问题

  • DOM 操作是“昂贵”的,js 运行效率高
  • 尽量减少 DOM 操作,而不是“推倒重来”
  • 项目越复杂,影响就越严重
  • vdom 即可解决这个问题

image.png

三、vdom 的如何应用,核心 API 是什么

什么是 vdom

image.png

介绍 snabbdom

image.png

image.png

介绍 snabbdom - h 函数

image.png

介绍 snabbdom - patch 函数

image.png

重做jQuery的demo

  • 使用 data生成 vnode
  • 第一次渲染,将 vnode 渲染到 #container
  • 并将 vnode 缓存下来
  • 修改 data 之后,用新 data 生成 newVnode
  • vnodenewVnode 对比

image.png

核心 API

  • h(‘<标签名>’, {…属性…}, […子元素…])
  • h(‘<标签名>’, {…属性…}, ‘….’)
  • patch(container, vnode)
  • patch(vnode, newVnode)

四、介绍一下 diff 算法

4.1 vdom 为何使用 diff 算法

  • DOM 操作是“昂贵”的,因此尽量减少 DOM 操作
  • 找出本次 DOM 必须更新的节点来更新,其他的不更新
  • 这个“找出”的过程,就需要 diff 算法

image.png

patch(container, vnode)

image.png

image.png

演示过程

image.png

image.png

image.png

image.png

4.2 diff 实现过程

  • patch(container, vnode)patch(vnode, newVnode)
  • createElment
  • updateChildren
支持一下
扫一扫,支持poetries