选择题 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钩子函数