选择题
1、下面关于虚拟 DOM 的说法正确的是:ACD
A. 使用虚拟 DOM 不需要手动操作 DOM,可以极大的提高程序的性能。
B. 使用虚拟 DOM 不需要手动操作 DOM,可以极大的提高开发效率。
C. 虚拟 DOM 可以维护程序的状态,通过对比两次状态的差异更新真实 DOM。
D. 虚拟 DOM 本质上是 JavaScript 对象,可以跨平台,例如服务器渲染、Weex 开发等。
2、下面关于 Snabbdom 库的描述错误的是:D
A. Snabbdom 库是一个高效的虚拟 DOM 库,Vue.js 的虚拟 DOM 借鉴了 Snabbdom 库。
B. 使用 h() 函数创建 VNode 对象,描述真实 DOM 结构。
C. Snabbdom 库本身可以处理 DOM 的属性、事件、样式等操作。
D. 使用 patch(oldVnode, null) 可以清空页面元素
简答题
1、请简述 patchVnode 函数的执行过程。
功能就是对比新旧节点
如果 oldVnode.children 和 vnode.children 都有值,调用 updateChildren(),使用 diff 算法对比子节点,更新子节点
如果 vnode.children 有值, oldVnode.children 无值,清空 DOM 元素,调用 addVnodes() ,批量添加子节点
如果 oldVnode.children 有值, vnode.children 无值,调用 removeVnodes() ,批量移除子节点
如果 oldVnode.text 有值,清空 DOM 元素的内容
如果设置了 vnode.text 并且和 oldVnode.text 不同,如果老节点有子节点,全部移除,设置 DOM 元素的 textContent 为 vnode.text