标签：Vue const computed get 简介 value money ref

computed()

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

computed与methods的区别在于：computed是计算结果变化时触发，而methods是主动调用才触发。

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>

标签：Vue,const,computed,get,简介,value,money,ref
来源： https://www.cnblogs.com/wm218/p/16696645.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。