当前位置：首页 > news >正文

computed计算属性

news 2025/11/9 12:42:39

computed计算属性

前言

首先我们先看一段非常简单的代码

<template><div class="person">姓: <input type="text"> <br>名: <input type="text"> <br>全名：<P></P><br></div>
</template><script lang="ts" setup>
import { readConfigFile } from 'typescript';
import { ref } from 'vue';let firstName = ref('IT');
let lastName = ref('SHARE');</script>

如果我想姓显示出来，我们可以使用v-bind

姓: <input type="text" :value="firstName"> <br>

在这里插入图片描述

但是这样有一个缺点，就是这并不是双向绑定的，我们修改输入框中的IT，并不会同步到代码上

在这里插入图片描述

所以想要双向绑定，我们可以使用v-model,这样当我们修改输入框的内容的时候代码也会立马进行修改；

 姓: <input type="text" v-model="firstName"> <br>

在这里插入图片描述

解决了双向数据绑定，那么我们想要全名显示出来就非常简单了

<template><div class="person">姓: <input type="text" v-model="firstName"> <br>名: <input type="text" v-model="lastName"> <br>全名：<P>{{ firstName }} - {{ lastName }} </P><br></div>
</template>

在这里插入图片描述

当我们进行修改的时候，页面上也会进行响应

在这里插入图片描述

computed计算属性

这里我们也可以使用computed计算属性来实现这个目的

<template><div class="person">姓: <input type="text" v-model="firstName"> <br>名: <input type="text" v-model="lastName"> <br>全名：<P>{{ fullName }} </P><br></div>
</template><script lang="ts" setup>
import { readConfigFile } from 'typescript';
import { computed, ref } from 'vue';let firstName = ref('IT');
let lastName = ref('SHARE');let fullName = computed(() => {return (firstName.value + lastName.value);
})</script><style scoped>.person{background-color: rgb(39, 148, 191);padding-left: 50px;}.btn {display: flex;gap:20px}
</style>

在这里插入图片描述

但是这里的computed计算属性只是可读的，不可以修改

在这里插入图片描述

想要解决的话，可以使用getter和setter，计算属性就可以实现双向绑定了

let fullName = computed({get(){ return (firstName.value + lastName.value)},set(newValue){[firstName.value,lastName.value] = newValue.split('-');}
})function changeFullname() {fullName.value = 'IT-知识一享'
}

在这里插入图片描述

总结

computed计算属性可以使得我们模板中的代码更加的简洁，复杂逻辑的代码都在计算属性中
计算属性会基于其依赖的响应式数据自动缓存结果。只有当依赖发生变化时，才会重新计算。这可以避免不必要的重复计算，提高性能。（这个上面没有进行演示，当我们如果重复输入fullName的时候，你会发现它只会输出一次，因为计算属性是有缓存的）；
可以通过getter和setter，实现计算属性的数据双向绑定；

查看全文

http://www.dtcms.com/a/586586.html