Vue:计算属性

发表于 分类于 ， 阅读次数： Waline： 本文字数： 1.9k 阅读时长 ≈ 2 分钟
默认只读

我们为什么需要计算属性

1
全名：<span>{{firstName + '-' + lastName}}</span><br>

vue官方不建议我们在模板这么写，这看起来过于 复杂

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<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
通过这个方法，使得模板变得简易，可读性变高

计算属性默认只可读

事实上如果我在里面定义一个函数

1
2
3
function changeName(){
fullName.value='李四'
}

这个changeName函数会报错
无法为“value”赋值，因为它是只读属性。
这是计算属性的只读特性

如何修改？

如果想要修改计算属性的值，我们需要get和set方法

例如
来自于vue官方文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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的值呢？

官方推荐

正如官方文档所言
避免直接修改计算属性值​
从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。

所以，这种只读属性是必然的，我们完全可以通过修改那两个值实现计算属性的值的更新！