vue 版本3的computed计算属性和普通方法的区别

代码如下：

//一般写法【写法比较复杂】
<p>我的资料：姓名：{{name}} 年龄： {{age}}</p> 

//普通方法【普通方法】,会调用三次
<p>我的资料：{{myInfo()}}</p> #调用一次
<p>我的资料：{{myInfo()}}</p> #调用二次
<p>我的资料：{{myInfo()}}</p> #调用三次

//高级用法【计算属性】，只会调用一次，有缓存机制，它是属性，后面不能和方法一样加括号
<p>我的资料：{{myInfo}}</p> #调用一次
<p>我的资料：{{myInfo}}</p> #调用二次
<p>我的资料：{{myInfo}}</p> #调用三次

import {ref,computed} from 'vue';

const name = ref("carver");
const age = ref(100);

//**********【普通方法】，没有缓存机制，多次调用就会调用多次**********//

//标准写法
const myInfo = ()=>{
    return "姓名：" + name + "年龄："+age;
}
//简写写法
const myInfo = ()=>"姓名：" + name + "年龄："+age

//**********【计算属性】 computed 有缓存机制，多次调用同一数据只调用一次，但是该属性是只读的，不能修改：例如：myInfo.属性 = xxx 等，但是普通方法是可以的**********//

//标准写法
const myInfo = computed(()=>{
    return "姓名：" + name + "年龄："+age;
})
//简写写法
const myInfo = computed(()=>"姓名：" + name + "年龄："+age)