Vue3计算属性

computed

说明:我们在开发中通常会有很多对script变量的操作,我们在组件内写简单的表达式的话很方便,但是如果我们的运算逻辑很大的话就会让代码看起来很臃肿,增加了我们在后期维护的难度,vue也发现了这个问题,所以提供了一个计算属性供我们使用。

案例

<template>
	<view class="box">
		<input type="text" v-model="province" placeholder="请输入省份">
		<input type="text" v-model="city" placeholder="请输入城市">
		<input type="text" v-model="county" placeholder="请输入区县">
		<view>方法计算:{{functionArea()}}</view>
		<view>computed计算属性计算:{{area}}</view>
	</view>
</template>

<script setup>
	import {computed, ref} from "vue";
	const province = ref('');
	const city = ref('');
	const county =ref('')
	const area=computed(()=>province.value+"-"+city.value+"-"+county.value)
	function functionArea(){
		return province.value+"-"+city.value+"-"+county.value;
	}
</script>

<style lang="scss" scoped>
	.box{
		margin-top: 20px;
		input{
			border: 1px solid black;
			padding: 0 10px;
			margin: 10px 5px;
			height: 30px;
		}
	}
</style>
结果:

我们可以看到这两个的结果都是一样的看不出区别,但是vue既然创建了这个属性就是有作用的

区别点:

1.使用computed调用的响应式计算属性变量的使用时不用带()的,而定义一个计算方法的话再{{}}中调用就需要带()

	<view>方法计算:{{functionArea()}}</view>
	<view>computed计算属性计算:{{area}}</view>

2.computed计算属性并不是每次在每次调用的时候都计算,而是在值响应式更新的时候才会重新计算,而方法在每次调用都会进行计算,也就是说如果逻辑判断很复杂的话,computed更加节约资源和时间

<template>
	<view class="box">
		<input type="text" v-model="province" placeholder="请输入省份">
		<input type="text" v-model="city" placeholder="请输入城市">
		<input type="text" v-model="county" placeholder="请输入区县">
		<view>方法计算:{{functionArea()}}</view>
		<view>方法计算:{{functionArea()}}</view>
		<view>方法计算:{{functionArea()}}</view>
		<view>computed计算属性计算:{{area}}</view>
		<view>computed计算属性计算:{{area}}</view>
		<view>computed计算属性计算:{{area}}</view>
	</view>
</template>

<script setup>
	import {computed,ref} from "vue";
	const province = ref('广东省');
	const city = ref('深圳市');
	const county = ref('南山区')
	const area = computed(() => {
		console.log("computed被调用")
		return province.value + "-" + city.value + "-" + county.value
	})

	function functionArea() {
		console.log("方法被调用")
		return province.value + "-" + city.value + "-" + county.value;
	}
</script>

<style lang="scss" scoped>
	.box {
		margin-top: 20px;

		input {
			border: 1px solid black;
			padding: 0 10px;
			margin: 10px 5px;
			height: 30px;
		}
	}
</style>

控制台显示调用结果:

可以从这张图中看出我在页面上面用方法调用了3次的话方法就执行了3次,而computed计算属性调用了3次只执行了1次 ,它只会在值背改变的时候在调用,这样就显而易见的看出了他们的区别:computed计算属性在复杂的逻辑处理中更有优势

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值