VueJs에 대한 다섯 가지 빠른 힌트와 팁.

VueJs는 이미 유행하기 시작했습니다. 최근에 최신 주요 버전이 발표됨에 따라, 이를 어떻게 정확하게 사용하는지 배워야 합니다.
만약 네가 너의 기술을 새로운 수준으로 향상시키고 싶다면, 너는 매우 운이 좋다.내가 이미 몇 가지 기본적인 기교와 요령을 컴파일했듯이, 그것들은 너의 코드 출력을 개선할 것이다.이 틀을 최대한 활용하는 방법을 알아보기 위해 계속 읽어라.

1. v 유형(전면 동기화)
If는 폼 필드의 상하문에서 이미 듣고 사용했을 것이다v-model.그러나 이 지령은 실제로 네가 상상한 것보다 더 유용하다.이것은 모든 구성 요소에 적용될 수 있습니다. (이전에 v2에서 폼이 입력되지 않은 요소에 적용하려면 .sync 기호를 사용해야 합니다.
구성 요소에 양방향 데이터 연결을 적용할 때 (기본/벙어리 구성 요소가 일반적으로 필요할 때) 이 기능은 매우 유용하다.
v-model 문서 링크: https://v3.vuejs.org/guide/migration/v-model.html#\_3-x-syntax

2.v-bind
VueJs를 배울 때 사용v-bind:property="foo"이나 약자 기호:property="foo"를 하나하나 전달하는 속성을 자주 볼 수 있다.
불행하게도 상술한 문법은 매우 지루할 수 있고 우리의 html을 매우 바쁘게 할 수 있다.

<myComponent
  :name="user.name"
  :surname="user.surname"
  :age="user.age"
  :gender="user.gender" />

VueJs는 매우 편리한 기능을 가지고 있다.실제로 v-bind 명령은 한 개 이상의 속성에 동시에 사용할 수 있습니다.따라서 위 코드에서는 다음과 같이 요약할 수 있습니다.

<myComponent
 v-bind="user" />

상기 코드는 모든 속성을 자동으로 구성 요소에 적용합니다.이것은 우리의 코드를 더욱 읽을 수 있게 할 뿐만 아니라, 기능 강화 방면에서도 유연성을 가지게 한다
v-bind에 대한 파일: https://v3.vuejs.org/api/directives.html#v-bind

3. 전송
만약 당신이 이미 발전 중인 시간이 충분하다면.중첩, 모드, 팝업 창 등 구성 요소를 처리하기가 어려울 것입니다.
이 구성 요소의 문제는 DOM의 루트에 정의가 필요할 때가 있지만, 실제로는 끼워 넣은 구성 요소가 호출하고 관리한다는 것이다.
다행히도, Vue 3에는 teleport 라는 내장 구성 요소가 있는데, 이것은 우리가 이 점을 실현하는 데 도움을 줄 것이다.
전송 파일: https://v3.vuejs.org/guide/teleport.html#teleport

4. 다중 아이템 유형
Vue Js는 어셈블리 속성을 정의하는 데 유용한 API를 제공합니다.
비록 우리는 이런 상황을 피하고 싶지만, 때로는 그것들이 필요할 뿐이다.이것은 아마도 이상한 API(우리가 모두 사용했던) 및/또는 데이터 흐름에 의한 것일 것이다.
이런 상황은 우리가 부동산 유형에 있어서 유연함을 요구한다.나는 많은 사람들이 이 문제를 해결하기 위해 여러 개의 속성을 정의하는 것을 본 적이 있다.

icon:{
  type: String,
  required: false
},
icons:{
  type: Array,
  required: false
}

상술한 방법은 틀리지 않았지만, 모든 이러한 속성을 관리하는 복잡성 때문에 더러운 코드를 초래하여 더 많은 오류를 도입할 수 있다.
VueJs에서는 속성에서 여러 유형을 정의할 수 있습니다.위의 내용은 다음과 같이 변경할 수 있습니다.

icons:{
  type: [String, Array],
  required: true
}

보시다시피, 이 두 가지를 합병할 수 있기 때문에, 우리는 그것을 필수로 설정할 수 있습니다.
속성 유형 및 유효성 검사 문서는 다음과 같습니다. https://v3.vuejs.org/guide/component-props.html#prop-validation

5.열쇠
마지막으로 가장 중요하지 않은 것은 내가 회사 프로그램에서 복구해야 할 가장 번거롭고 찾기 어려운 버그 중 하나에 대해 이야기하고 싶다는 것이다.v-for 를 사용할 때, '키' 속성을 보고 사용했을 수도 있지만, 사용법을 완전히 이해하지 못했거나, 더 중요한 것은 프로그램에서 제기한 많은 오류일 수도 있습니다. key많은 개발자들은 구성 요소가 화면에 없으면 실제적으로 렌더링되지 않을 뿐만 아니라, 이 구성 요소가 숨겨져 다시 사용되면, 구성 요소가 실제적으로 자신을 리셋하기를 바란다고 생각한다.개발자가 버그와/또는 이상한 행동을 보기 시작할 때, 그들은 문제의 복제를 포획하고 피하기 위해 대량의 watch나methods를 첨가한다.
대부분의 경우 문제는 어셈블리가 한 번 렌더링되고 한 번만 렌더링되며 데이터가 준비되기 전에 여러 번 렌더링되거나 예기치 않은 시간에 렌더링되기 때문입니다.
구성 요소의 렌더링 시간을 제어하고 필요할 때 불러온 생명주기를 호출하려면 key 속성을 사용할 수 있습니다.
이 속성을 구성 요소에 추가하면 값이 바뀔 때마다 구성 요소가 다시 나타납니다.예를 들어, 응용 프로그램 사이드바에 다음과 같은 내용을 추가하면 경로가 변경될 때마다 사이드바를 다시 표시할 수 있습니다.

<Sidebar :key="route.fullPath" />

중요한 것은 추가key 속성은 우리가 구성 요소의 표현과 재표현을 완전히 제어하고 싶은 상황에서만 가능하다는 것을 인식해야 한다. 왜냐하면 그것을 사용하면 성능 비용을 초래하기 때문이다.
키 속성의 문서는 다음과 같습니다. https://v3.vuejs.org/api/special-attributes.html#key
이상의 내용을 읽어 주셔서 감사합니다. 언제든지 저에게 어떤 의견과 건의를 제공하여 글을 개선하고 미래의 독자들을 도와주십시오.