计算属性的getter函数理解
时间: 2023-07-18 11:26:47 浏览: 57
计算属性的getter函数是计算属性的核心部分,它实际上就是一个函数,用来计算并返回计算属性的值。getter函数在计算属性被访问时自动调用,而且只会在相关依赖发生改变时重新计算。这种自动缓存的机制可以大大提高程序的运行效率。
在Vue中,计算属性的getter函数可以通过定义一个没有参数的函数来实现。例如:
```javascript
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
```
在上面的示例中,fullName是一个计算属性,它的getter函数返回firstName和lastName的组合字符串。在模板中使用fullName时,Vue会自动调用该getter函数来计算属性的值。
需要注意的是,计算属性的getter函数中不能直接修改数据属性的值,否则会导致无限循环。如果需要修改数据属性的值,应该使用methods选项中的方法来实现。
相关问题
计算属性getter和setter
计算属性的getter和setter是计算属性的两个方法。getter用于获取计算属性的值,setter用于设置计算属性的值。当获取计算属性时,实际上是在调用计算属性的getter方法,而当设置计算属性的值时,实际上是在调用计算属性的setter方法。计算属性的getter没有参数,而setter只有一个参数,用于接收新的属性值。计算属性会根据依赖的数据进行缓存,只有当依赖的数据发生变化时才会重新计算。而方法则没有缓存,每次调用都会导致重新执行。因此,计算属性通常用于根据已有数据得到其他数据,而方法则用于执行一些操作。在Vue中,计算属性可以被视为和data一样的属性,可以读取和设置值,但是一般情况下计算属性只有getter,没有setter。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [vue计算属性computed--getter和setter](https://blog.csdn.net/weixin_53961451/article/details/125331278)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
- *2* *3* [计算属性computed里面的getter和setter](https://blog.csdn.net/weixin_41646716/article/details/94011430)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]
vue计算属性的getter和setter
Vue计算属性的getter和setter分别用于获取计算属性的值和设置计算属性的值。
在计算属性中,getter函数用于获取计算属性的值,setter函数用于设置计算属性的值。当计算属性的值发生变化时,Vue会自动更新相关的视图。
例如,下面的代码中,计算属性fullName由firstName和lastName计算而来。getter函数返回fullName的值,setter函数用于设置firstName和lastName的值。
```
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(value) {
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
```
在模板中,我们可以直接使用计算属性fullName:
```
<div>{{ fullName }}</div>
```
当我们修改fullName的值时,会自动调用setter函数,更新firstName和lastName的值:
```
this.fullName = 'Jane Smith'
```