(Vue) 산출된 속성에서 로컬 스코프 변수의 성능에 미치는 영향
계산된 속성 내에서 변수를 정의하는 것이 Vue 구성 요소의 성능에 영향을 미칩니까?
배경:전달된 데이터로부터 HTML 테이블을 범용적으로 생성하고 열당 필터, 테이블 전체에 대한 필터, 정렬 키 등을 가진 테이블 컴포넌트를 구축하여 산출된 속성 내에 많은 로컬 변수를 정의하고 있습니다.
다음과 같은 오브젝트가 배열되어 있다고 상상해 보십시오.
let data = [
{ id: "y", a: 1, b: 2, c: 3 },
{ id: "z", a: 11, b: 22, c: 33 }
]
..Vue 컴포넌트에서 데이터를 표시하는 데 사용됩니다.
<template>
<div>
<input type="text" v-model="filterKey" />
</div>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filteredData" :key="item.id">
<td v-for="(value, key) in item" :key="key">
{{ value }}
</td>
</tr>
</tbody>
</table>
</template>
데이터는 입력을 통해 필터링됩니다.
<script>
export default {
props: {
passedData: Array,
},
data() {
return {
filterKey: null,
};
},
computed: {
filteredData() {
// defining local scope variables
let data = this.passedData;
let filterKey = this.filterKey;
data = data.filter((e) => {
// filter by filterKey or this.filterKey
});
return data;
},
},
};
</script>
제 질문 제를 말한다 질문은let data = ..
★★★★★★★★★★★★★★★★★」let filterKey = ..
~하듯이로filteredData()
그의 변경에 의해 트리거됩니다의 변경에서 촉발된를 가져옵니다.filterKey
(정의에 정의된:data()
비록 그들은 뷰 방식으로"반응성"지 않습니다)그래서 지역 변수도 업데이트된다.따라서 로컬 변수도 업데이트되지만 뷰 방식으로"반응적"은 아닙니다.
그 성능에 어떤 영향이 계산된 속성에는 지역 변수를 정의하나요?계산된 속성 내에서 로컬 변수를 정의할 때 성능에영향이 있습니까?당신 다음반응변수를 사용해야 합니까에서 반응성 변수를 사용할까요?data()
(e. g(예:this.filterKey
)직접 계산된 속성 안에?음.A계산 내부에 있습니까 바로 속성의?
어떤 것이 성능에 영향을 미치는지 테스트하는 가장 좋은 방법은 실제로 테스트하는 것입니다.
내 시험 아래에 따르면 일관성이 1000개 이상의% 느리아래 테스트 결과,사용속도가 1000%이상 느립니다를 사용하는 것입니다.this.passedData
대신에 기능의 꼭대기에 있는 변수를 추가하는.함수위에변수를 추가하는 대신,(869ms 29ms 대)(869밀리초 대 29밀리초)
최상의 결과를 얻으려면 응용 프로그램을 작성하는 대상 브라우저에서 벤치마크를 실행해야 합니다.
function time(name, cb) {
var t0 = performance.now();
const res = cb();
if(res !== 20000000) {
throw new Error('wrong result: ' + res);
}
var t1 = performance.now();
document.write("Call to "+name+" took " + (t1 - t0) + " milliseconds.<br>")
}
function withoutLocalVar() {
const vue = new Vue({
computed: {
hi() {
return 1;
},
hi2() {
return 1;
},
test() {
let sum = 0;
for(let i = 0; i < 10000000; i++) { // 10 000 000
sum += this.hi + this.hi2;
}
return sum;
},
}
})
return vue.test;
}
function withLocalVar() {
const vue = new Vue({
computed: {
hi() {
return 1;
},
hi2() {
return 1;
},
test() {
let sum = 0;
const hi = this.hi;
const hi2 = this.hi2;
for(let i = 0; i < 10000000; i++) { // 10 000 000
sum += hi + hi2;
}
return sum;
},
}
})
return vue.test;
}
function benchmark() {
const vue = new Vue({
computed: {
hi() {
return 1;
},
hi2() {
return 1;
},
test() {
let sum = 0;
const hi = 1;
const hi2 = 1;
for(let i = 0; i < 10000000; i++) { // 10 000 000
sum += hi + hi2;
}
return sum;
},
}
})
return vue.test;
}
time('withoutLocalVar - init', withoutLocalVar);
time('withLocalVar - init', withLocalVar);
time('benchmark - init', benchmark);
time('withoutLocalVar - run1', withoutLocalVar);
time('withLocalVar - run1', withLocalVar);
time('benchmark - run1', benchmark);
time('withoutLocalVar - run2', withoutLocalVar);
time('withLocalVar - run2', withLocalVar);
time('benchmark - run2', benchmark);
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
언급URL : https://stackoverflow.com/questions/52299407/vue-impact-on-performance-of-local-scope-variables-in-computed-properties
'programing' 카테고리의 다른 글
Vue.js: 템플릿에서 논리 연산자를 사용하는 방법 (0) | 2022.08.16 |
---|---|
C/C++에서 Mac OS X 고유 코드를 래핑할 매크로 (0) | 2022.08.16 |
왜 CSS는 'npm run dev'와 'npm run build'를 다르게 렌더링합니까? (0) | 2022.08.16 |
(노드:72332) 미처리 약속RejectWarning: 오류: 인수를 직렬화하지 못했습니다. (0) | 2022.08.16 |
Vuex Axios CORS 블록Access-control-allow-origin (0) | 2022.08.16 |