Comportamiento de Coacción de Atributos

breaking

Info

Este es un cambio de API internal de nivel inferior y no afecta la mayor parte de los desarrolladores.

Visión General

Aquí es una visión general de nivel superior de los cambios:

• Abandona el concepto internal de atributos enumerados y los trata a los atributos como atributos normales que no son booleanos.
• BREAKING: Ya no elimina un atributo si su valor es booleano false. En su lugar, se va a establecer como attr="false". Para eliminar el atributo, utiliza null o undefined.

Para más información, !sigue leyendo!

Sintaxis para 2.x

En 2.x, tuvimos las siguientes estrategias para coaccionar los valores de v-bind:

• Para unos pares de atributo/elemento, Vue siempre utiliza el atributo de IDL correspondiente (propiedad): como value de <input>, <select>, <progress>, etc (opens new window).

• Para "atributos booleanos (opens new window)" y xlinks (opens new window), Vue los elimina si son "falsos" (undefined, null o false (opens new window)) y de lo contrario los agrega (vea aquí (opens new window) y aquí (opens new window)).

• Para "atributos enumerados (opens new window)" (actualmente contenteditable, draggable y spellcheck), Vue trata de coaccionar (opens new window) los a cadena de caracteres (con tratamiento especial para contenteditable por ahora, para corregir vuejs/vue#9397 (opens new window)).

• Para otros atributos, eliminamos valores "falsos" (undefined, null, o false) y establecemos otros valores tal cual (vea aquí (opens new window)).

La siguiente tabla describe cómo Vue coacciona "atributos enumerados" de manera diferente comparada con los atributos normales que no son booleanos.

Expresión de Vinculación	foo normal	draggable enumerado
: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"

Podemos ver desde la tabla arriba, la implementación actual coacciona true a 'true', pero elimina el atributo si es false. Este también conduce a inconsistencia y requiere que los usuarios coaccionen manualmente los valores booleanos a cadena de caracteres en los casos de usuarios muy comunes como atributos de aria-* como por ejemplo aria-selected, aria-hidden, etc.

Sintaxis para 3.x

Pretendemos abandonar este concepto internal de "atributos enumerados" y los tratamos como atributos HTML normales que no son booleanos.

• Este resuelve la inconsistencia entre atributos normales que no son booleanos y "atributos enumerados"
• También hace posible utilizar valores en vez de 'true' and 'false', o incluso palabras de clave (keywords) que van a venir, para atributos como contenteditable

Para atributos que no son booleanos, Vue dejará eliminarlos si son false y los coacciona a 'false' en su lugar.

• Este resuelve la inconsistencia entre true y false y lo hace más fácil producir atributos aria-*

La siguiente tabla describe el nuevo comportamiento:

Expresión de Vinculación	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="" *

*: cambiado

La coacción para atributos booleanos permanece inalterada.

Estrategia para Migración

Atributos enumerados

La ausencia de un atributo enumerado y attr="false" puede producir valores diferentes de atributo IDL (lo que reflejará el estado actual), descrito como el siguiente:

Atributo enumerado ausente	Atributo IDL & valor
contenteditable	contentEditable → 'inherit'
draggable	draggable → false
spellcheck	spellcheck → true

Debido a que ya no coaccionamos null a 'false' para "propiedades enumeradas" en 3.x, en el caso de contenteditable y spellcheck, los desarrolladores necesitarán cambiar estas expresiones de v-bind que fueron utlizadas para resolver a null para resolver a false o 'false' para mantener el mismo comportamiento como 2.x.

En 2.x, los valores inválidos fueron coaccionados a 'true' para los atributos enumerados. Este usualmente no es intencionado y probablemente no deben confiar de este a gran escala. En 3.x true o 'true' deben ser especificados explícitamente.

Coaccionar false a 'false' en vez de eliminar el atributo

En 3.x, null o undefined debe ser utilizado para explícitamente eliminar un atributo.

Comparación entre el comportamiento 2.x & 3.x

Atributo	v-bind value 2.x	v-bind value 3.x	Salida de HTML
2.x “atributo enumerado” i.e. contenteditable, draggable and spellcheck.	undefined	undefined, null	eliminado
	true, 'true', '', 1, 'foo'	true, 'true'	"true"
	null, false, 'false'	false, 'false'	"false"
Otros atributos que no son booleanos eg. aria-checked, tabindex, alt, etc.	undefined, null, false	undefined, null	eliminado
	'false'	false, 'false'	"false"

Indicadores de compilación de migración:

• ATTR_FALSE_VALUE
• ATTR_ENUMERATED_COERCION