Vue3的computed用法及说明
作者：小储今天暴富了
文章介绍了如何在Vue.js中使用计算属性,包括只计算不修改值的情况和可以修改的计算属性,对于只计算不修改值的情况,可以直接使用computed方法,对于需要修改的计算属性,计算属性可以传入一个对象,包含get和set函数
1.针对只计算不修改值的场景
（1）一个计算属性
<template>
<input type="text" v-model="num1" />
+
<input type="text" v-model="num2" />
=
<input type="text" v-model="num3" />
</template>
<script lang="ts">
import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
export default defineComponent({
setup(){
let num1=ref(1)
let num2=ref(3)
const num3=computed(()=>{
return Number(num1.value)+Number(num2.value)
})
return{
num1,
num2,
num3
}
}
})
</script>上述的例子只是单纯的计算两个数的和，可以直接引入computed方法在方法里进行计算
（2）多个计算属性
<template>
<input type="text" v-model="num1" />
+
<input type="text" v-model="num2" />
=
<input type="text" v-model="num3" />
<hr>
<input type="text" v-model="num1" />
-
<input type="text" v-model="num2" />
=
<input type="text" v-model="num4" />
</template>
<script lang="ts">
import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
export default defineComponent({
setup(){
let num1=ref(3)
let num2=ref(1)
const num3=computed(()=>{
return Number(num1.value)+Number(num2.value)
})
const num4=computed(()=>{
return Number(num1.value)-Number(num2.value)
})
return{
num1,
num2,
num3,
num4
}
}
})
</script>计算属性不是只可以写一个的，可以写任意多个计算属性，代码如上所示，效果如下
2.可以修改的计算属性
问题：如果我们直接修改计算属性的值会报错误
原因：如果传递给 computed 的是一个函数，那么这就是一个 getter 函数，我们只能获取它的值，而不能直接修改它。
如果需要修改计算属性的值，计算属性传入一个对象， 包含get 和 set 函数， 就能实现创建一个可以修改的计算属性。
代码如下：
<template>
<input type="text" v-model="num1" />
+
<input type="text" v-model="num2" />
=
<input type="text" v-model="num3" />
<hr>
<button @click="updata">修改计算属性的值</button>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,toRefs,computed } from 'vue';
export default defineComponent({
setup(){
let num1=ref(3)
let num2=ref(1)
const num3=computed({
get(){
return Number(num1.value)+Number(num2.value)
},
set(value :number){
num2.value=value+1
}
})
const updata=()=>{
num3.value=10
}
return{
num1,
num2,
num3,
updata
}
}
})
</script>效果如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。