Skip to content

Патч для Props, которые не могут быть обработаны

В этой главе давайте реализуем патч для Props, которые не могут быть обработаны в данный момент. Ниже приведены некоторые примеры Props, которые необходимо обработать, но попробуйте реализовать их, обращаясь к оригинальной реализации и самостоятельно заполняя недостающие части! При этом это должно стать более практичным!

Здесь нет ничего особенно нового. Это должно быть возможно реализовать достаточно хорошо на основе того, что мы делали до сих пор.

На чем я хочу сосредоточиться - это реализация runtime-dom/modules.

Сравнение между старым и новым

В настоящее время обновления могут быть сделаны только на основе props из n2. Давайте обновим на основе n1 и n2.

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

Props, которые существуют в n1, но не существуют в n2, должны быть удалены. Также, если значения одинаковы, даже если они существуют в обоих, нет необходимости в патче, поэтому пропускаем его.

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, объясненная в разделе Basic Template Compiler. Это можно реализовать где угодно, если это не отклоняется от дизайна оригинального Vue, но мы пропустим это здесь, потому что мы хотим следовать дизайну оригинального Vue в этой книге.

innerHTML / textContent

innerHTML и textContent немного особенные по сравнению с другими Props. Это потому, что если элемент с этим Prop имеет дочерние элементы, их нужно размонтировать.

TODO: Написать

Released under the MIT License.