vue的computed和filters的性能优化方法

最新推荐文章于 2025-04-24 16:30:22 发布

风吹头皮凉

最新推荐文章于 2025-04-24 16:30:22 发布

阅读量580

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43959276/article/details/116753591

版权

本文介绍了Vue.js项目中提升性能的几种方法，包括使用computed属性减少不必要的计算、通过多条件判断优化视图渲染以及利用filters过滤器提高数据展示效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**computed优化方案**
<template>
//优化前
	<div>
		<ul>
			<li v-for="(item,index) in users" :key="index" v-if="item.isActive">{{item.name}}</li>
		</ul>
	</div>
	//优化后
	<div>
		<ul>
			<li v-for="(item,index) in activeUsers" :key="index">{{item.name}}</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				users:[
					{name:'computed优化1',isActive:false},
					{name:'computed优化2',isActive:true},
					{name:'computed优化3',isActive:true},
				]
			}
		},
	//采用computed优化
		computed:{
			activeUsers() {
			    return this.users.filter((user) =>{return user.isActive})
			}
		}
	}
</script>

**computed优化多判断条件**
**优化前**
<span class="wait-pay-red" v-if="item.stat == 'INIT' && item.orderType == 1">购车待付款</span>
<span class="span-green" v-if="item.stat == 'SUCCESS' && item.orderType == 1">支付成功</span>
<span class="wait-pay-red" v-if="item.stat == 'INIT' && item.orderType == 2">租车待付款</span>
**优化后**
<span class="wait-pay-red">{{statType}}</span>

<script>
	export default{
		data(){
			return{
				users:[
					{stat:'HANDLING',orderType:1}
				]
			}
		},
	//采用computed优化
		computed:{
			statType(){
			    let item = this.users[0]
			    if(item.stat == 'INIT' && item.orderType == 1) return '购车待付款'
			    if(item.stat == 'SUCCESS' && item.orderType == 1) return '支付成功'
			    if(item.stat == 'INIT' && item.orderType == 2) return '租车待付款'
			    if(item.stat == 'RETURNED' && item.orderType == 2) return '已还车'
			    if(item.stat == 'HANDING'&& item.orderType == 1) return '付款中'
			    if(item.stat == 'FAIL'&& item.orderType == 1) return '交易失败'
			},
		}
	}
</script>

**filters过滤器优化**
**优化前**
<div class="order-tabTwo" v-for="(item,index) in users" :key="index">
	<span class="wait-pay-red" v-if="item.stat == 'INIT'">购车待付款</span>
	<span class="span-green" v-if="item.stat == 'SUCCESS'">支付成功</span>
</div>
**优化后**
<div class="order-tabTwo" v-for="(item,index) in users" :key="index">
<span class="span-green">{{item.stat | statText}}</span>
</div>

<script>
	export default{
		data(){
			return{
				users:[
					{stat:'SUCCESS',orderType:1}
				]
			}
		},
	//采用filters优化
		filters:{
		    statText:(value)=>{
		        let str;
		        let list = [
		            {code:'INIT',label:'购车待付款'},
		            {code:'SUCCESS',label:'支付成功'},
		            {code:'HANDLING',label:'付款中'},
		            {code:'RETURNED',label:'购车完成'},
		            {code:'CHACEL',label:'取消交易'}
		        ]
		        for(let o of list){
		            if(o.code == value) str = o.label
		        }
		        return str;
		    }
		},
	}
</script>