无法处理的 Props 的补丁
在本章中,让我们为目前无法处理的 Props 实现补丁. 以下是一些需要处理的 Props 示例,但请尝试通过参考原始实现来实现它们,同时自己填补缺失的部分! 通过这样做,它应该变得更加实用!
没有什么特别新的东西.基于我们到目前为止所做的,应该能够充分实现它.
我想关注的是 runtime-dom/modules 的实现.
新旧比较
目前,更新只能基于 n2 的 props 进行. 让我们基于 n1 和 n2 进行更新.
ts
const oldProps = n1.props || {}
const newProps = n2.props || {}
存在于 n1 但不存在于 n2 中的 Props 应该被删除. 另外,如果即使两者都存在但值相同,也不需要补丁,所以跳过它.
class / style(注意)
有多种绑定 class 和 style 的方法.
html
<p class="static property">hello</p>
<p :class="'dynamic property'">hello</p>
<p :class="['dynamic', 'property', 'array']">hello</p>
<p :class="{ dynamic: true, property: true, array: true}">hello</p>
<p class="static property" :class="'mixed dynamic property'">hello</p>
<p style="static: true;" :style="{ mixed-dynamic: 'true' }">hello</p>
要实现这些,需要在基础模板编译器部分解释的 transform
概念. 只要不偏离原始 Vue 的设计,它可以在任何地方实现,但我们在这里跳过它,因为我们想在本书中遵循原始 Vue 的设计.
innerHTML / textContent
innerHTML 和 textContent 与其他 Props 相比有点特殊. 这是因为如果具有此 Prop 的元素有子元素,它们需要被卸载.
TODO: 编写