Comportement de coercition des attributs

breaking

Info

Il s'agit d'un changement d'API interne de bas niveau qui n'affecte pas la plupart des développeurs.

Aperçu

Voici un résumé de haut niveau des changements :

• Abandonner le concept interne d'attributs énumérés et traiter ces attributs de la même manière que les attributs non booléens normaux.
• BREAKING : Ne supprime plus l'attribut si la valeur est booléenne false. A la place, il est défini comme attr="false". Pour supprimer l'attribut, utilisez null ou undefined.

Pour plus d'informations, lisez la suite !

2.x Syntax

En 2.x, nous avions les stratégies suivantes pour contraindre les valeurs v-bind :

• Pour certaines paires attribut/élément, Vue utilise toujours l'attribut IDL correspondant (propriété) : comme value of <input>, <select>, <progress>, etc (opens new window).

• Pour "attributs booléens (opens new window)" et xlinks (opens new window), Vue les supprime s'ils sont "falsy". (undefined, null or false (opens new window)) et les ajoute sinon (voir [ici])(https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L66-L77) et ici (opens new window)).

• Pour "enumerated attributes (opens new window)" (actuellement contenteditable, draggable et spellcheck), Vue essaie de contraindre (opens new window) en chaîne (avec un traitement spécial pour contenteditable pour l'instant, afin de corriger vuejs/vue#9397 (opens new window)).

• Pour les autres attributs, nous supprimons les valeurs "fausses" (undefined, null, ou false) et définissons les autres valeurs telles quelles (voir [ici]).(https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L92-L113)).

Le tableau suivant décrit comment Vue coerce les "attributs énumérés" différemment des attributs non booléens normaux :

Binding expression	foo normal	draggable enumerated
:attr="null"	/	draggable="false"
:attr="undefined"	/	/
:attr="true"	foo="true"	draggable="true"
:attr="false"	/	draggable="false"
:attr="0"	foo="0"	draggable="true"
attr=""	foo=""	draggable="true"
attr="foo"	foo="foo"	draggable="true"
attr	foo=""	draggable="true"

Nous pouvons voir dans le tableau ci-dessus que l'implémentation actuelle convertit true en 'true' mais supprime l'attribut s'il est false. Cela entraîne également des incohérences et oblige les utilisateurs à convertir manuellement les valeurs booléennes en chaînes de caractères dans des cas d'utilisation très courants comme les attributs aria-* tels que aria-selected, aria-hidden, etc.

3.x Syntax

Nous avons l'intention d'abandonner ce concept interne d'"attributs énumérés" et de les traiter comme des attributs HTML non booléens normaux.

• Cela résout l'incohérence entre les attributs non booléens normaux et les "attributs énumérés".
• Cela permet également d'utiliser des valeurs autres que true' et false', ou même des mots-clés à venir, pour des attributs comme contentable.

Pour les attributs non booléens, Vue arrêtera de les supprimer s'ils sont false et les contraindra à 'false' à la place.

• Cela résout l'incohérence entre true et false et facilite la sortie des attributs aria-*.

Le tableau suivant décrit le nouveau comportement :

Binding expression	foo normal	draggable enumerated
:attr="null"	/	/ †
:attr="undefined"	/	/
:attr="true"	foo="true"	draggable="true"
:attr="false"	foo="false" †	draggable="false"
:attr="0"	foo="0"	draggable="0" †
attr=""	foo=""	draggable="" †
attr="foo"	foo="foo"	draggable="foo" †
attr	foo=""	draggable="" †

† : changé

La coercition pour les attributs booléens n'a pas été modifiée.

Stratégie de migration

Attributs énumérés

L'absence d'un attribut énuméré et attr="false" peut produire des valeurs d'attribut IDL différentes (qui reflèteront l'état réel), décrites comme suit :

Absent enumerated attr	IDL attr & value
contenteditable	contentEditable → 'inherit'
draggable	draggable → false
spellcheck	spellcheck → true

Pour conserver l'ancien comportement, et comme nous allons contraindre false à 'false', les développeurs de Vue 3.x doivent faire en sorte que l'expression v-bind soit résolue par false ou 'false' pour contenteditable et spellcheck.

Dans la version 2.x, les valeurs non valides étaient converties en 'true' pour les attributs énumérés. C'était généralement involontaire et il était peu probable que l'on s'en serve à grande échelle. En 3.x, true ou 'true' doivent être explicitement spécifiés.

Coercition false en 'false' au lieu de supprimer l'attribut

En 3.x, null ou undefined doivent être utilisés pour supprimer explicitement un attribut.

Comparaison entre les comportements 2.x et 3.x

Attribute	v-bind value 2.x	v-bind value 3.x	HTML output
2.x “Enumerated attrs” i.e. contenteditable, draggable and spellcheck.	undefined, false	undefined, null	removed
	true, 'true', '', 1, 'foo'	true, 'true'	"true"
	null, 'false'	false, 'false'	"false"
Other non-boolean attrs eg. aria-checked, tabindex, alt, etc.	undefined, null, false	undefined, null	removed
	'false'	false, 'false'	"false"