Vue 개발 경험 및 기술 공유

이 시리즈는 Vue 개발 1년 동안 제가 요약한 경험과 기술 중 일부를 기록합니다.

성능 향상을 위해 Object.freeze() 사용

Object.freeze()는 ES5의 새로운 기능으로, 객체가 수정되는 것을 방지하기 위해 객체를 고정할 수 있습니다.

vue 1.0.18+에서는 이를 지원합니다. 데이터 또는 vuex에서 고정을 사용하여 고정된 객체의 경우 vue는 getter 및 setter를 변환하지 않습니다.

대규모 배열이나 객체가 있고 데이터가 수정되지 않을 것이라고 확신하는 경우 Object.freeze()를 사용하면 성능이 크게 향상될 수 있습니다. 실제 개발에서 이러한 개선은 약 5~10배이며, 데이터 양에 따라 그 배수도 증가합니다.

게다가 Object.freeze()는 값을 고정하고 변수에 대한 참조를 계속 대체할 수 있습니다. 예:

ba1544044c98f7037eb68819b71c75ba{{ item.value }}94b3e26ee717c64999d7867364b1b4a3

new Vue({
 data: {
 // vue不会对list里的object做getter、setter绑定
 list: Object.freeze([
  { value: 1 },
  { value: 2 }
 ])
 },
 created () {
 // 界面不会有响应
 this.list[0].value = 100;
 
 // 下面两种做法，界面都会响应
 this.list = [
  { value: 100 },
  { value: 200 }
 ];
 this.list = Object.freeze([
  { value: 100 },
  { value: 200 }
 ]);
 }
})

Vue의 문서에는 이 기능이 언급되어 있지 않지만 순수하게 표시되는 빅 데이터의 경우 Object.freeze를 사용하여 성능을 향상시킬 수 있는 매우 실용적인 접근 방식입니다.

vm.$compile을 사용하여 dom 컴파일

$compile 함수를 사용하여 vue를 수동으로 호출하여 dom을 컴파일할 수 있습니다. 이 기능은 jQuery 플러그인에서 생성된 html이나 서버에서 반환된 html을 처리해야 할 때 유용할 수 있습니다. 그러나 이는 비공개 API이므로 언제든지 변경될 수 있으며 이러한 접근 방식은 Vue의 철학에 어긋납니다. 최후의 수단으로만 사용하십시오.

new Vue({
 data: {
 value: 'demo'
 },
 created () {
 let dom = document.createElement('div');
 dom.innerHTML = '{{ value }}';
 this.$compile(dom);
 }
})

track-by="$index"의 합리적인 사용

track-by는 Vue for 루프에서 제공하는 최적화 방법입니다. . 여러 v-for에서 동일한 ID로 DOM을 재사용할 수 있습니다. 데이터에 고유 ID가 없는 경우 track-by="$index"를 사용하도록 선택할 수도 있지만 몇 가지 부작용을 알고 있어야 합니다.

예:

new Vue({
 data: {
 list: [1, 2, 3]
 }
})
<div id="demo-1">
 <p v-for="item in list">{{ item }}</p>
</div>
<div id="demo-2">
 <p v-for="item in list" track-by="$index">{{ item }}</p>
</div>

이때 this.list = [4, 5, 6]을 실행합니다. F12를 통해 관찰합니다. 이때 데모-1의 DOM은 모두 삭제된 후 목록을 재활용하여 DOM을 생성합니다. 그러나 데모-2에서는 DOM을 삭제하지 않고 텍스트 그리드만 4, 5, 5로 변경합니다. 그리고 6. 이는 v-for에서 동일한 $index가 있는 dom을 두 번 재사용하는 track-by="$index"의 효과입니다.

이것은 좋은 최적화 방법이지만 모든 시나리오에 적용할 수 있는 것은 아닙니다. 예를 들어 루프에 양식 컨트롤이나 하위 구성 요소가 포함되어 있으면 DOM이 삭제되고 재생성되지 않으므로 두 번째 실행이 발생합니다. v-for, 원래 양식 컨트롤의 값은 변경되지 않습니다. https://jsfiddle.net/jysboza9/1/

지시문을 남용하지 마세요

. 인터넷에는 모든 DOM 작업이 명령어로 캡슐화되어야 한다는 말이 있습니다. 실제 개발에서는 이 도그마를 따라서는 안 된다고 생각합니다. 명령어 사용 여부는 DOM 조작 여부가 아니라 구현하는 기능에 따라 달라집니다. 예를 들어 vue를 사용하여 jQuery 플러그인을 캡슐화하려는 경우 다음 캡슐화 방법 중 어떤 것이 더 좋은지 살펴보겠습니다.

<!-- component -->
<datepicker></datepicker>
<!-- directive -->
<div v-datepicker="{options}"></div>

개인적으로 , 나는 그것이 의심할 여지 없이 첫 번째 방법이라고 생각합니다. Datepicker는 독립적인 구성 요소이므로 내부적으로 DOM을 작동하는지 또는 jQuery 플러그인을 캡슐화하는지 여부를 신경 쓸 필요가 없습니다.

그럼 언제 명령어를 사용하시나요? 브라우저에서 기본적으로 제공하는 명령을 살펴보겠습니다.

<a title="这是一个指令"></a>
<p title="这是一个指令"></p>
<div title="这是一个指令"></div>

제목 속성은 다양한 태그에 대한 도구 설명 기능을 제공하는 명령입니다. 지시어는 다양한 태그와 구성 요소에 동일한 기능을 제공할 수 있는 독립적인 기능을 나타내야 합니다.