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