vue3【详解】计算属性 computed
用于描述依赖响应式状态的复杂逻辑
- 会缓存计算结果（计算属性仅会在其响应式依赖更新时才重新计算）
<script setup>
import { ref, computed } from "vue";
const firstName = ref("朝");
const lastName = ref("阳");
const fullName = computed(() => firstName.value + " " + lastName.value);
</script>
<template>
<sapn>{{ fullName }}</sapn>
</template>
computed()的参数为一个 getter 函数，返回依赖响应式状态变化的一个值。（与普通函数相比，它能缓存返回值，提升了性能）- getter 函数不能有任何副作用：不能改变其他状态、做异步请求或者更改 DOM （需要随依赖变化，创建副作用时，请使用 侦听器 watch）
- 计算属性返回的值是一个“临时快照”，应该被视为只读的，并且永远不应该直接更改它，而应该更新它所依赖的源状态来触发新的计算。
- 某些特殊场景可能需要通过修改计算属性返回的值更新它所依赖的源状态
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
// getter
get() {
return firstName.value + ' ' + lastName.value
},
// setter
set(newValue) {
// 注意：我们这里使用的是解构赋值语法
[firstName.value, lastName.value] = newValue.split(' ')
}
})
</script>
原文地址：https://blog.csdn.net/weixin_41192489/article/details/140517202
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！