# 속성 강제 규칙(Attribute Coercion Behavior)

Info

낮은 수준의 API 변경으로 개발자 대부분에게 영향을 주지 않습니다.

# 개요

변경내용:

  • 열거형 속성(enumerated attributes)의 내부 개념을 삭제하고 해당 속성을 일반 non-boolean 속성과 동일하게 처리합니다
  • BREAKING: 값이 boolean false인 경우, 더이상 속성을 제거하지 않습니다. 대신 attr="false"로 설정되며, 속성을 삭제하려면 null 또는 undefined를 사용합니다.

더 자세한 설명은 계속 읽으십시오!

# 2.x 구문

2.x에서 v-bind 값을 제어하는 방법:

다음 표에서는 Vue가 "열거형 속성(enumerated attributes)"을 어떻게 일반 non-boolean 속성으로 변환하는지 설명합니다.

표현식 foo 일반 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"

위의 표에서 볼 수 있듯이 현재 구현(2.x)에서는 true에서 'true'로 변환되지만, false의 경우는 속성을 제거합니다. 이로 인해 불일치가 발생하였으며, 사용자는 aria-*, aria-selected, aria-hidden등의 속성과 같은 매우 일반적인 사용 사례에서 boolean 값을 수동으로 문자열로 강제 변환해야 했습니다.

# 3.x 구문

우리는 "열거형 속성(enumerated attributes)"의 내부 개념을 삭제하고 일반적인 non-boolean HTML 속성으로 취급하려고 합니다.

  • 일반적인 non-boolean 속성과 "열거형 속성(enumerated attributes)"의 불일치를 해결합니다
  • contenteditable과 같은 속성에 'true', 'false'이외의 값과 향후 추가되는 키워드를 사용할 수 있습니다.

non-boolean 속성의 경우 Vue는 속성이 false인 경우 삭제를 중단하고 대신 'false'를 강제합니다.

  • 이렇게 하면 truefalse의 불일치가 해결되고 aria-* 속성의 출력이 쉬워집니다

다음 표는 새로운 동작을 설명합니다.

표현식 foo 일반 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=""

†: 변경점

boolean 속성에 대한 강제는 그대로 유지됩니다.

# 마이그레이션 방법

# 열거형 속성(Enumerated attributes)

열거된 속성이 없고 attr="false"는 다음과 같이 다른 IDL 속성값 (실제 상태를 반영함)을 생성할 수 있습니다.

열거된 속성 없음(Absent enumerated attr) IDL 속성 & 값
contenteditable contentEditable'inherit'
draggable draggablefalse
spellcheck spellchecktrue

마이그레이션을 하면서 false'false'로 강제변경되므로, 이전 동작(2.x)을 유지하기 위해서 Vue 3.x에서는 contenteditable, spellcheck를 위해 false'false'를 확인하는 v-bind표현식을 만들어야합니다.

2.x에서 열거된 속성(enumerated attributes)에 대해 유효하지 않은 값이 'true' 로 강제 변환되었습니다. 이것은 일반적으로 의도하지 않았으며, 대규모로 의존 할 가능성은 작습니다. 3.x에서는 true 또는 'true'를 명시적으로 지정해야 합니다.

# 속성을 삭제하는 대신 false'false'로 강제

3.x에서는 null 또는 undefined 를 사용하여 속성을 제거합니다.

# 2.x & 3.x 동작 비교

속성 v-bind2.x v-bind3.x HTML 출력
2.x "열거된 속성(Enumerated attrs)"
contenteditable, draggable, spellcheck
undefined, false undefined, null 제거
true, 'true', '', 1, 'foo' true, 'true' "true"
null, 'false' false, 'false' "false"
기타 non-boolean 속성(Other non-boolean attrs)
예. aria-checked, tabindex, alt, 등.
undefined, null, false undefined, null 제거
'false' false, 'false' "false"

Deployed on Netlify.
Last updated: 2021-01-13, 05:23:36 UTC