美文网首页
vue性能优化方法

vue性能优化方法

作者: 清风昙 | 来源:发表于2022-10-13 11:03 被阅读0次
  • 函数型组件
  • 子组件拆分
  • 局部变量
  • 活用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
}

相关文章

网友评论

      本文标题:vue性能优化方法

      本文链接:https://www.haomeiwen.com/subject/ebbsprtx.html