- 函数型组件
- 子组件拆分
- 局部变量
- 活用v-show,减少v-if
- 使用keep-alive
- 活用延迟装载(Defer)
- 分批处理(Time slicing)
- 非响应模式(non-reactive)
- 仅渲染可视化部分
函数型组件
<template>
<div>
<div v-if="value" class="on"></div>
<section v-else class="off"></section>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
<template functional>
<div>
<div v-if="props.value" class="on"></div>
<section v-else class="off"></section>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
子组件拆分
<template>
<div>
<div v-if="value" class="on">{{heavy()}}</div>
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
heavy(){
}
}
}
</script>
<template>
<div>
<ChildComp>
</div>
</template>
<script>
export default {
props: ['value'],
components: {
ChildComp: {
heavy() {}
},
render(h) {
return h('div', this.heavy())
}
}
}
</script>
局部变量
<template>
<div>
<div v-if="value" class="on">{{result}}</div>
</div>
</template>
<script>
export default {
props: ['start'],
computed: {
base(){
return 30
},
result() {
let result = this.start
for(let i = 0; i < 100; i++) {
result += heavy(this.base)
}
return result
}
}
}
</script>
<template>
<div>
<div v-if="value" class="on">{{result}}</div>
</div>
</template>
<script>
export default {
props: ['start'],
computed: {
base(){
return 30
},
result() {
const base = this.base
let result = this.start
for(let i = 0; i < 100; i++) {
result += heavy(base)
}
return result
}
}
}
</script>
活用v-show,减少v-if
<template functional>
<div>
<div v-if="props.value" class="on">test</div>
<section v-else class="off"></section>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
<template functional>
<div>
<div v-show="props.value" class="on">test</div>
<section v-show="!props.value" class="off"></section>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
使用keep-alive
<template >
<div>
<router-view/>
</div>
</template>
<script>
export default {
}
</script>
<template >
<div>
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
}
</script>
活用延迟装载(Defer)
<template >
<div>
<div>hello world</div>
</div>
</template>
<script>
export default {
}
</script>
<template >
<div>
<template v-if="defer(2)">
<div>hello world</div>
</template>
</div>
</template>
<script>
import Defer from '@/mixins/Defer'
export default {
mixins: {
Defer()
}
}
</script>
分批处理(Time slicing)
fetchItems({commit}, {items}) {
commit('clearItems')
commit('addItems', item)
}
fetchItems({commit}, {items, splitCount}) {
commit('clearItems')
const queue = new JobQueue()
splitArray(items, splitCount).forEach(
chunk => queue.addJob(done => {
requestAnimationFrame(() => {
commit('addItems', chunk)
done()
})
})
)
await queue.start()
}
非响应模式(非观察模式,non-reactive)
const data = items.map(
item => ({
id: uid++,
data: item
})
)
const data = items.map(
item => optimizeItem(item)
)
function optimizeItem(item) {
const itemData = {
id: uid++
}
Object.defineProperty(itemData, 'data', {
configurable: false,
value: item
})
return itemData
}
网友评论