IT评测·应用市场-qidao123.com技术社区

标题: vue3 响应式 API：computed() [打印本页]

作者: 盛世宏图 时间: 2024-8-20 08:58
标题: vue3 响应式 API：computed()
介绍

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

示例

创建一个只读的计算属性

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

复制代码

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

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

<template>
<div>
<div>姓名：<input type="text" v-model="name"></div>
<div>年龄：<input type="number" v-model="age"></div>
<div>信息：<input type="text" v-model="info"></div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
let name = ref('张三')
let age = ref(18)
let info = computed({
get: () => `${name.value}-${age.value}`,
set: newValue => {
// setVal 是用户写入的计算属性的值
// 如果需要处理 set 逻辑，可以在这里添加代码
}
})
</script>

复制代码

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

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

复制代码

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

欣赏器控制台输出错误：

Uncaught RangeError: Maximum call stack size exceeded...

复制代码

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

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

复制代码

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

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

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)