Skip to content

Commit

Permalink
[feat](translate) 020/040 patch other attrs
Browse files Browse the repository at this point in the history
  • Loading branch information
miyuesc committed Mar 13, 2024
1 parent 4e3b06e commit 682ec08
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 18 deletions.
2 changes: 1 addition & 1 deletion book/online-book/.vitepress/config/zh-cn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const zhCnConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
link: '/20-basic-virtual-dom/030-scheduler',
},
{
text: '🚧 不支持的 Props',
text: '🚧 不支持的 Props 更新',
link: '/20-basic-virtual-dom/040-patch-other-attrs',
},
],
Expand Down
38 changes: 21 additions & 17 deletions book/online-book/src/20-basic-virtual-dom/040-patch-other-attrs.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,33 @@
# 対応できていない Props のパッチ
# 不支持的 Props 更新

このチャプターでは、現時点で対応できていない Props のパッチを実装していきましょう。
以下にはいくつか例として対応対象を挙げますが、各自で足りてない所を本家の実装を読みながら実装してみましょう!
そうすればより実用的なものにグレードアップするはずです!
在这一章当中,我们将着手实现那些当前还不支持的 `props` 属性的补丁更新。

特に新しいことは出てきません。今までやってきたことで十分実装できるはずです。
以下是一些需要支持的目标属性示例,请大家阅读 Vue.js 的源代码然后自行实现!

注目したいのは、runtime-dom/modules の実装です
这样,你就可以把 Chibivue 升级得更加完善了

## 新旧の比較
这里并没有什么特别新的内容,根据我们目前已经完成的功能就可以实现了。

現状だと n2 の props を元にしか更新ができていません。
n1 と n2 を元に更新しましょう。
其中最值得注意的是 `runtime-dom/modules` 中的内容的实现。

## 新旧属性对比

目前我们只能基于 `n2``props` 来进行页面的更新。

现在让我们根据 `n1``n2` 的区别进行更新。

```ts
const oldProps = n1.props || {}
const newProps = n2.props || {}
```

n1 に存在していて n2n に存在しない props は削除です。
また、両者に存在していても値が変わっていなければ patch する必要はないのでスキップします。
如果 `n1` 中存在但是 `n2` 中不存在的 `props` 属性,说明需要进行删除。

但是如果一个 `props` 属性在 `n1``n2` 中都存在并且值一样,那说明不需要更新,直接略过就可以了。

## class / style (注意)

classstyle には複数のバインディング方法があります
对于 `class``style`,Vue.js 提供了多种绑定方法

```html
<p class="static property">hello</p>
Expand All @@ -34,12 +38,12 @@ class と style には複数のバインディング方法があります。
<p style="static: true;" :style="{ mixed-dynamic: 'true' }">hello</p>
```

これらを実現するには、Basic Template Compiler 部門で説明する `transform` という概念が必要になります。
本家 Vue の設計に則らなければどこに実装してもいいのですが、本書では本家 Vue の設計に則りたいためここではスキップします。
要做到这样的效果,你需要了解 `transform`,但是这个东西我们会在 “基础模板编译器” 中讲解。

如果不用遵循 Vue.js 的源代码的设计思路的话,这个内容其实可以在任何地方进行实现,但是本书的出发点就是要和 Vue.js 的源码设计保持一致,所以这里也就先跳过它。

## innerHTML / textContent

innerHTML と textContent については他の Props と比べて少し特殊です。
というのもこの Prop を持つ要素が子要素を持っていた場合、unmount する必要があります。
与其他 `Props` 相比,`innerHTML``textContent` 有点特殊。这意味着,如果具有此 `Prop` 属性的元素还具有子元素的话,必须卸载掉所有子元素。

TODO: 書く
TODO: 后续更新

0 comments on commit 682ec08

Please sign in to comment.