【Vue2.x-源码学习】- 虚拟DOM - 思考题

368 阅读1分钟

选择题 1、下面关于虚拟 DOM 的说法正确的是:(ABCD)

  • A. 使用虚拟 DOM 不需要手动操作 DOM,可以极大的提高程序的性能。
  • B. 使用虚拟 DOM 不需要手动操作 DOM,可以极大的提高开发效率。
  • C. 虚拟 DOM 可以维护程序的状态,通过对比两次状态的差异更新真实 DOM。
  • D. 虚拟 DOM 本质上是 JavaScript 对象,可以跨平台,例如服务器渲染、Weex 开发等。

2、下面关于 Snabbdom 库的描述错误的是:(CD)

  • A. Snabbdom 库是一个高效的虚拟 DOM 库,Vue.js 的虚拟 DOM 借鉴了 Snabbdom 库。
  • B. 使用 h() 函数创建 VNode 对象,描述真实 DOM 结构。
  • C. Snabbdom 库本身可以处理 DOM 的属性、事件、样式等操作。
  • D. 使用 patch(oldVnode, null) 可以清空页面元素

简答题 1、请简述 patchVnode 函数的执行过程。

  • 判断是否定义了hook.prepatch钩子函数,如果有,则触发prepatch钩子函数
  • 遍历执行update钩子
  • 判断新节点是否有text属性,且不等于旧节点的text属性
    • 判断如果旧节点有children,则调用removeVnodes,移除旧节点的children
    • 使用setTextContent设置新节点的textContent
  • 判断新老节点是否都有children
    • 如果新老节点的children不相等,调用updateChildren,对比子节点,更新差异
  • 否则,如果只有新节点有children
    • 判断如果旧节点有text属性,则使用setTextContent,清空textContent
    • 使用addVnodes添加所有子节点
  • 否则,如果只有旧节点有children,使用removeVnodes移除所有子节点
  • 否则,只有旧节点有text属性,则使用setTextContent,清空textContent
  • 最后调用postpatch钩子函数