Vue3快速上手（九）计算属性computed

一、应用场景

vue3里强调尽量让<template>,也就是模版，变得更加简单。所以涉及到转换、计算等操作的，还是建议在<script>标签里进行。如此我们可以用到computed。

二、实际用法

2.1 示例1

一个简单的加法计算

<template>
    <div class="person">
        <h2>加法</h2>
        <h3>A：<input type="text" v-model="a" /></h3>
        <h3>B：<input type="text" v-model="b" /></h3>
        <h2>{{ sum }}</h2>
    </div>
</template>
<script lang='ts' setup name="Computed">
// 引入computed
import { computed, ref } from 'vue'

let a = ref(1)
let b = ref(2)

let sum = computed(() => {
    return Number(a.value) + Number(b.value)
})

</script>

输出：
发现sum也是一个ref的实现，属于是响应式数据

效果如下：

2.1 示例2：有setter方法的computed

<script lang='ts' setup name="Computed">
// 引入reactive
import { computed, ref } from 'vue'
// reactive包裹的数据即为响应式对象
let a = ref(1)
let b = ref(2)

let sum = computed({
    get(){
        return Number(a.value) + Number(b.value)
    },
    set(val){
        console.log('setter-val: ',val);
        let [one, two] = (val+'').split('')
        a.value = Number(one)
        b.value = Number(two)
    }
})

function resetSum() {
    sum.value = 12
}
console.log(sum);

</script>

这里呢，是将computed拆成get，set两个方法。set方法呢可以接受一个参数，从而对要计算的值进行修改，本质上还是修改a和b的值，从而在get里重新计算。

页面效果如下：

END