# 속성 강제 규칙(Attribute Coercion Behavior)
Info
낮은 수준의 API 변경으로 개발자 대부분에게 영향을 주지 않습니다.
# 개요
변경내용:
- 열거형 속성(enumerated attributes)의 내부 개념을 삭제하고 해당 속성을 일반 non-boolean 속성과 동일하게 처리합니다
- BREAKING: 값이 boolean
false인 경우, 더이상 속성을 제거하지 않습니다. 대신 attr="false"로 설정되며, 속성을 삭제하려면null또는undefined를 사용합니다.
더 자세한 설명은 계속 읽으십시오!
# 2.x 구문
2.x에서 v-bind 값을 제어하는 방법:
일부 속성과 일부 엘리먼트는 Vue에서 항상 쌍으로 대응하는 IDL 속성을 사용합니다:
<input>,<select>,<progress>등의value과 같습니다 (opens new window)."boolean 속성 (opens new window)" 및 xlinks (opens new window)의 경우, Vue에서 "거짓(falsy)"(
undefined,null,false(opens new window))인 경우는 삭제하고 그렇지 않으면 추가합니다. (여기 (opens new window)와 여기 (opens new window)를 참조)"열거형 속성(enumerated attributes) (opens new window)"(현재
contenteditable,draggable,spellcheck)의 경우 Vue에서 속성을 문자열로 강제 (opens new window) 변환하려고 합니다. (vuejs/vue#9397 (opens new window) 이슈를 통해 수정되어contenteditable로 특수하게 처리합니다)다른 속성의 경우 "거짓(falsy)" 값(
undefined,null,false)을 제거하고 다른 값을 그대로 설정합니다. (여기 (opens new window) 참조)
다음 표에서는 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'를 강제합니다.
- 이렇게 하면
true와false의 불일치가 해결되고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 | draggable → false |
spellcheck | spellcheck → true |
마이그레이션을 하면서 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-bind 값 2.x | v-bind 값 3.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" |