vue3 响应式 API：computed()

介绍

• 根本概念：
  
  
  
  • computed()接收一个 getter 函数或者一个包含 getter 和 setter 函数的对象作为参数，并返回一个基于原始响应式数据计算得到的新的响应式数据对象。
    
  • 计算属性的值会根据其依赖的响应式数据主动更新，当依赖的数据发生变化时，计算属性的值也会主动重新计算。
    
  
  
• 返回值：
  
  
  
  • 返回一个计算属性的响应式引用对象，可以通过.value属性来访问计算属性的值。
    
  
  
• 特点：
  
  
  
  • 主动更新：计算属性会根据其依赖的响应式数据主动更新，无需手动触发更新。
    
  • 缓存结果：计算属性会缓存其计算结果，只有当依赖的数据发生变化时才会重新计算。
    
  
  

示例

创建一个只读的计算属性

1. <template>
2.   <div>
3.     <div>姓名：<input type="text" v-model="name"></div>
4.     <div>年龄：<input type="number" v-model="age"></div>
5.     <div>信息：{{ info }}</div>
6.   </div>
7. </template>
8. <script setup lang="ts">
9. import { computed, ref } from 'vue';
11. let name = ref('张三')
12. let age = ref(18)
14. let info = computed(() => {
15.   return `${name.value}-${age.value}`
16. })
18. // 报错：无法为“value”赋值，因为它是只读属性。
19. // info.value = name.value
20. </script>

复制代码

在这个例子中，当name.value、age.value 发生改变时，info的值会主动重新计算。
计算属性 info 是只读的。
创建一个可写的计算属性

在 Vue 3 中，使用computed创建的计算属性默认情况下是只读的，只有明确提供了set方法时，它才是可写的。
示例：

1. <template>
2.   <div>
3.     <div>姓名：<input type="text" v-model="name"></div>
4.     <div>年龄：<input type="number" v-model="age"></div>
5.     <!-- 在input中修改info，只能触发计算属性info的setter函数。 -->
6.     <!-- 计算属性info本身的值是没有改变的。 -->
7.     <div>信息：<input type="text" v-model="info"></div>
9.   </div>
10. </template>
11. <script setup lang="ts">
12. import { computed, ref } from 'vue';
14. let name = ref('张三')
15. let age = ref(18)
17. let info = computed({
18.   get: () => `${name.value}-${age.value}`,
19.   set: newValue => {
20.     // setVal 是用户写入的计算属性的值
21.     // 如果需要处理 set 逻辑，可以在这里添加代码
22.   }
23. })
24. </script>

复制代码

这里创建了一个可写的计算属性 info ，它的 getter 函数根据name和age的值返回一个自我介绍，setter 函数则根据传入的值更新info的值。
留意：操纵<input type="text" v-model="info">修改info的值，实际上只是触发了计算属性info的set方法调用。计算属性info本身的值是没有任何改变的。
在set方法中直接修改计算属性本身是不正确的，会导致无穷循环：

1. let info = computed({
2.   get: () => `我是${name.value}，今年${age.value} 岁`,
3.   set: newValue=> {
4.     // newValue是用户写入的计算属性的值
5.     // 在计算属性的set方法中，直接修改计算属性本身
6.     info.value = newValue
7.   }
8. })

复制代码

在计算属性的set方法中，直接修改计算属性本身，不会触发数据的双向绑定：

欣赏器控制台输出错误：

1. Uncaught RangeError: Maximum call stack size exceeded...

复制代码

要实现双向绑定的结果，应该在 set 方法中修改计算属性所依赖的响应式数据源：

1. let info = computed({
2.   get: () => `${name.value}-${age.value}`,
3.   set: newValue => {
4.     // newValue 是用户写入的计算属性的值
5.     const [newName, newAge] = newValue.split('-')
6.     name.value = newName
7.     age.value = Number(newAge)
8.   }
9. })

复制代码

当修改info的值时，set方法则根据传入的值（newValue）会正确地更新name和age，get方法根据name和age的值主动更新info的值，从而实现双向绑定的结果。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。