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计算属性在复杂的逻辑处理中更有优势