🕒 阅读时间：1 分钟 📝 字数：365 👀 阅读量： Loading...
默认只读
全名：<span>{{firstName + '-' + lastName}}</span><br />
vue官方不建议我们在模板这么写，这看起来过于 复杂
<template>
<div class="person">
姓：<input type="text" v-model="firstName" /> <br />
名：<input type="text" v-model="lastName" /> <br />
全名：<span>{{fullName}}</span><br />
<button @click="changeName">修改姓名</button>
<!-- 全名 <span>{{firstName}}-{{lastName}}</span> <br> -->
</div>
</template>
<script setup lang="ts" name="Personsss">
import { computed, ref } from "vue";
let firstName = ref("章");
let lastName = ref("礼");
let fullName = computed(
() => firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value,
);
</script>
首先我们需要导入computed
然后使用这个计算属性定义fullName
通过这个方法，使得模板变得简易，可读性变高
事实上如果我在里面定义一个函数
function changeName() {
fullName.value = "李四";
}
这个changeName函数会报错
无法为“value”赋值，因为它是只读属性。
这是计算属性的只读特性
如果想要修改计算属性的值，我们需要get和set方法
例如 来自于vue官方文档
<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>
你发现了吗，这种修改本质上还是修改了firstName和lastName,那我们不禁想到，为什么我们不直接修改这两个的值，来实现通过计算属性更新fullName的值呢？
正如官方文档所言 避免直接修改计算属性值 从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。
所以，这种只读属性是必然的，我们完全可以通过修改那两个值实现计算属性的值的更新！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。