Vue3计算属性与监听

　　接上篇文章 vue学习笔记 https://www.cnblogs.com/jickma/p/16523795.html

　　在之前中介绍了vue3 的特性与响应式数据定义，新的双向绑定，模版等与vue2的差别。

　　在vue2中很重要的两个很重要的东西就是 计算属性 与 监听

　　在vue3中，同样存在只是写法略有不同。

5，计算属性

　　在vue2中计算属性是与data 同级别，直接使用就可以，必须要有 return 值。

　　在3中是需要从vue中引入到代码中然后在使用，也是需要有 return 值

　　看写法

 1 <template>
 2   <div>姓：<input type="text" v-model="firstName"></div>
 3   <div>名：<input type="text" v-model="lastName"></div>
 4   <div>全名：{{ fullname }}</div>
 5   <div>全名：{{ fullname }}</div>
 6   <div>全名：{{ fullname }}</div>
 7   <div>全名：{{ fullname }}</div>
 8   <div>全名：{{ fullname }}</div>
 9 </template>
10 
11 <script lang="ts" setup name="person">
12 import {ref, computed } from 'vue'
13 let firstName = ref('张')
14 let lastName = ref('三')
15 let fullname = computed(() => {
16   console.log('测试打印几次');
17   return firstName.value + lastName.value
18 })
19 console.log(fullname, 'fullname');
20 </script>

　　看输出，初始值为 张 与 三 ，全名调用了五次，但是输出只有一次，说明计算属性只调用了一次，

　　可以看出，计算属性是带有缓存的，

　　第一次计算出结果之后，后来再调用一看就是这个结果，所以说直接使用了缓存结果，并没有再次计算

　　以上写法，计算属性是只读的，并不可以修改，如果说非要修改，则是另一种写法