Skip to content

无法处理的 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: 编写

基于 MIT 许可证发布。