Vue 최적화: 자주 발생하는 메모리 유출 문제 및 최적화 상세 정보
다음은 제가 개발하는 과정에서 만났고 자료를 찾아서 정리한 메모리 유출 문제가 계속 업데이트될 예정입니다.
1. vue 사용자 정의 명령은 원소 귀속 이벤트에 적용되지만 귀속 이벤트가 없습니다.
이 문제는 이전 블로그 참조vue 사용자 정의 명령으로 인한 메모리 유출 문제 해결
2. v-if 명령으로 인한 메모리 유출
v-if도 메모리 유출이 쉽게 발생하는 곳이다.왜냐하면:
1. v-if는false에 연결된 값이지만 실제dom 요소는 숨길 때 진실하게 방출되지 않습니다
2. 바로 매우 흔히 볼 수 있는 것이다. 예를 들어 우리는 v-if를 통해 부급 요소를 삭제했지만 부급 요소 중의dom 부분을 제거하지 않았다.일반적으로 제3자 라이브러리를 사용할 때 발생합니다. 예를 들어 아래의 예시에서 우리는 매우 많은 옵션이 있는 선택 상자를 불러왔습니다. 그리고 우리는 v-if 명령을 통해 가상 DOM에서 그것을 추가하거나 제거하는 디스플레이/숨김 단추를 사용했습니다.이 예시의 문제는 이 v-if 명령이 DOM에서 부모 요소를 제거한다는 데 있지만, Choices를 제거하지 않았습니다.js에 새로 추가된 DOM 세션으로 인해 메모리 유출이 발생했습니다.
<link rel="stylesheet prefetch" href="https://joshuajohnson.co.uk/Choices/assets/styles/css/choices.min.css?version=3.0.3" rel="external nofollow" >
<script src="https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js?version=3.0.3"></script>
<div id="app">
<button v-if="showChoices" @click="hide">Hide</button>
<button v-if="!showChoices" @click="show" >Show</button>
<div v-if="showChoices">
<select id="choices-single-default"></select>
</div>
</div>
new Vue({
el: "#app",
data: function () {
return {
showChoices: true
}
},
mounted: function () {
this.initializeChoices()
},
methods: {
initializeChoices: function () {
let list = []
//
//
for (let i = 0; i < 1000; i++) {
list.push({
label: "Item " + i,
value: i
})
}
new Choices("#choices-single-default", {
searchEnabled: true,
removeItemButton: true,
choices: list
})
},
show: function () {
this.showChoices = true
this.$nextTick(() => {
this.initializeChoices()
})
},
hide: function () {
this.showChoices = false
}
}
})
new Vue({
el: "#app",
data: function () {
return {
showChoices: true,
choicesSelect: null
}
},
mounted: function () {
this.initializeChoices()
},
methods: {
initializeChoices: function () {
let list = []
for (let i = 0; i < 1000; i++) {
list.push({
label: "Item " + i,
value: i
})
}
// Vue `choicesSelect`
this.choicesSelect = new Choices("#choices-single-default", {
searchEnabled: true,
removeItemButton: true,
choices: list
})
},
show: function () {
this.showChoices = true
this.$nextTick(() => {
this.initializeChoices()
})
},
hide: function () {
// Choices
// DOM
this.choicesSelect.destroy()
this.showChoices = false
}
}
})상술한 예시에서 우리는 v-if 명령을 사용하여 메모리 유출을 일으켰지만, 더욱 흔히 볼 수 있는 실제 장면은 Vue Router 한 페이지에서 서로 다른 구성 요소로 이동하는 것이다.
이 v-if 명령과 같이 사용자가 응용 프로그램에서 내비게이션을 할 때 Vue Router는 가상 DOM에서 요소를 제거하고 새로운 요소로 바꿉니다.그러나 그 하위 요소dom 부분도 삭제하지 않았습니다.
Vue의 beforeDestroy()라이프 사이클 갈고리는 Vue Router 기반의 응용에서 이러한 문제를 해결하는 좋은 방법이다.다음과 같이 정리 작업을 beforeDestroy () 갈고리에 넣을 수 있습니다.
beforeDestroy: function () {
this.choicesSelect.destroy()
}
대안이 하나 더 있습니다.
우리는 이미 원소를 제거할 때의 메모리 관리를 토론했지만, 만약 당신이 메모리에 상태와 원소를 보존하려고 한다면 어떻게 해야 합니까?이 경우 내장된 keep-alive 구성 요소를 사용할 수 있습니다.
keep-alive로 구성 요소를 감싸면 상태가 보존되어 메모리에 남습니다.
<button @click="show = false">Hide</button>
<keep-alive>
// <my-component>
<my-component v-if="show"></my-component>
</keep-alive>keep-alive를 사용하면 다른 두 개의 생명주기 갈고리: activated와 deactivated에 접근할 수 있습니다.keep-alive 구성 요소가 제거되었을 때 데이터를 정리하거나 변경하려면deactivated 갈고리를 사용하십시오.
deactivated: function () {
// ，
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
