一、情景说明

在Vue2中，我们知道计算数学是通过vc实例中配置computed块来实现

这一篇，来学习Vue3中的计算属性如何实现。

二、案例

1、引入函数

import {ref,computed} from 'vue'

2、只读的计算属性

 let fullName = computed(()=>{return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value})

3、可读可写的计算属性

 let fullName = computed({// 当fullName被读取时，get调用get(){return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value},// 当fullName被修改时，set调用，且会收到修改的值set(val){const [str1,str2] = val.split('-')firstName.value = str1lastName.value = str2}})

4、修改计算属性

我们从这里可以看出，计算属性返回值是一个ref变量

    function changeFullName(){fullName.value = 'li-si'}

三、补充

上述案例中的只读计算属性，其实，可以用方法等效实现

    function fullName2(){return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value}

区别

方法不具备缓存效果
计算属性具有缓存效果
所以，页面插值语法中，多次使用方法获取计算结果时，会多次调用该方法
而计算属性，只会调用1次！