模板中的插值表达式虽然方便，但当要写复杂逻辑时就会变得臃肿，难以维护，遇上复杂逻辑时，推荐使用计算属性来描述以响应式状态的复杂逻辑。这里我们做个对比，先用表达式的方法进行计算，先把页面写好，代码如下：
<template>
<view class="out">
<input type="text"v-model = "firstName" placeholder="请输入名">
<input type="text"v-model = "lastName" placeholder="请输入姓">
<view>全称：{{firstName + "-" + lastName}}</view>
</view>
</template>
<script setup>
import {ref} from "vue" ;
const firstName = ref("") ;
const lastName = ref("") ;
</script>
<style lang="scss" scoped>
.out{
padding: 20px;
input{
border:1px solid #eee ;
height:40px;
padding: 0 10px;
margin:10px 0 ;
}
}
</style>
接下来，加入计算属性，代码如下：
<template>
<view class="out">
<input type="text"v-model = "firstName" placeholder="请输入名">
<input type="text"v-model = "lastName" placeholder="请输入姓">
<view>全称：{{firstName + "-" + lastName}}</view>
<view>全称{{fullName}}</view>
</view>
</template>
<script setup>
import {ref,computed} from "vue" ;
const firstName = ref("") ;
const lastName = ref("") ;
const fullName = computed(()=>firstName.value + "-" + lastName.value )
</script>
<style lang="scss" scoped>
.out{
padding: 20px;
input{
border:1px solid #eee ;
height:40px;
padding: 0 10px;
margin:10px 0 ;
}
}
</style>
第一行全称用的是表达式，第二行用的是计算属性，可以看到，效果是一摸一样的：
计算属性，其实就是把template中比较复杂的逻辑变量，放到了script里。代码量其实跟写个函数差不多，但它们之间是有区别的，区别是计算属性有缓存，若有几组相同的数据就只需调用一次就可以了，方法没有缓存，若有几组相同的数据也必须调用相应的次数，演示一下，首先是计算属性，代码如下：
<template>
<view class="out">
<input type="text"v-model = "firstName" placeholder="请输入名">
<input type="text"v-model = "lastName" placeholder="请输入姓">
<view>全称：{{fullName}}</view>
<view>全称：{{fullName}}</view>
<view>全称：{{fullName}}</view>
</view>
</template>
<script setup>
import {ref,computed} from "vue" ;
const firstName = ref("") ;
const lastName = ref("") ;
// const fullName = function(){
// return firstName.value + "-" + lastName.value
// }
const fullName = computed(()=>{
console.log("计算属性")
return firstName.value + "-" + lastName.value
} )
</script>
<style lang="scss" scoped>
.out{
padding: 20px;
input{
border:1px solid #eee ;
height:40px;
padding: 0 10px;
margin:10px 0 ;
}
}
</style>
可以看到，我们设置了三组表达式，只调用了一次，输入一个字母调用一次：
然后是方法，同样设置三组表达式，注意这里调用的话要在方法名后面写上括号，代码如下：
<template>
<view class="out">
<input type="text"v-model = "firstName" placeholder="请输入名">
<input type="text"v-model = "lastName" placeholder="请输入姓">
<view>全称：{{fullName()}}</view>
<view>全称：{{fullName()}}</view>
<view>全称：{{fullName()}}</view>
</view>
</template>
<script setup>
import {ref,computed} from "vue" ;
const firstName = ref("") ;
const lastName = ref("") ;
const fullName = function(){
console.log("方法")
return firstName.value + "-" + lastName.value
}
// const fullName = computed(()=>{
// console.log("计算属性")
// return firstName.value + "-" + lastName.value
// } )
</script>
<style lang="scss" scoped>
.out{
padding: 20px;
input{
border:1px solid #eee ;
height:40px;
padding: 0 10px;
margin:10px 0 ;
}
</style>
效果如下：
可以看到，三组表达式一开始就被调用了三次，输入一次，会调用三次。
