Vue computed() 简介

computed()

computed()计算属性。在setup内该函数返回ref类型，所以也是要求用.value取值，赋值。但在模板中可以自动解勾。

computed与methods的区别在于：computed它是有缓存的，即无论访问多少次，只要其依赖的数据没有变化，其结果都是从缓存中获取，不是重新计算。而method每访问一次都会重新计算结果。

computed与watch区别：watch类似于定时侦听变量，它很耗资源。而computed是被动触发，只有当变量发生变化才触发。

computed与watchEffect都是在函数体内，提取要变化的变量。

 

computed()在使用前需要引入：

import { computed } from 'vue'

 

computed()有二种属性，分别是get与set。

简洁定义computed，是get属性，只读，代码如下：

const plusOne = computed(() => count.value + 1)

 

同时定义get与set属性，代码如下：

const writableComputed = computed({
    get() {
        // return count.value
    },
    set(val) {
        // to do...
    }
})

writableComputed.value = 50 // 计算属性赋值
const a = writableComputed.value // 计算属性取值

 

代码示例：

<template>
    <view>
        总班费金额: {{studentNumber}}人 * {{money}}元 = {{allMoney}}元
    </view>
    <view>
        请输入已收到的金额：
        <uni-easyinput v-model="allMoney" type="text" placeholder="输入已收到金额" :inputBorder="true" > </uni-easyinput>
    </view>
    <view>{{complateNums}}</view>
</template>

<script setup>
    import {
        ref,
        computed
    } from 'vue'

    const studentNumber = ref(40) // 班里学生数
    const money = ref(50) // 每个学生要交的班费
    const complateNums = ref('') // 已上交人数    
    
    const allMoney = computed({
        get(){
            // 计算总的班费金额
            // 只有 studentNumber 和 money 发生化时，取值才会变化。所以template中，总班费金额数一直不会变化。
            return studentNumber.value * money.value
        },
        set(getMoney){
            // 设置所有钱时，计算已上交学生数量
            complateNums.value = '已上交' + getMoney/money.value + '人'
        }
    })
</script>