computed中的getter和setter
时间: 2023-04-16 16:03:47 浏览: 133
computed中的getter和setter是用来计算和获取Vue实例中的响应式数据的。getter用于获取计算属性的值,setter用于设置计算属性的值。当计算属性的依赖数据发生变化时,getter会重新计算计算属性的值,并将新的值返回。而当计算属性的值被修改时,setter会被调用,从而更新依赖数据的值。通过使用getter和setter,我们可以方便地实现响应式数据的计算和更新。
相关问题
computed的getter和setter
### Vue.js 中 `computed` 属性的 Getter 和 Setter 使用方法
#### 计算属性默认仅有 Getter
在 Vue.js 中,计算属性通常用于基于数据依赖关系执行一些逻辑并返回处理后的结果。默认情况下,计算属性仅实现 getter 方法[^1]。
```javascript
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
});
```
当页面上使用插值表达式 `{{ fullName }}` 渲染时,会自动调用此 getter 函数来获取组合的名字字符串。
#### 添加 Setter 实现双向绑定
为了使计算属性支持赋值操作(即设置新值),可以为其定义一个 setter 方法。这允许通过修改计算属性间接更新原始的数据源[^2]。
```javascript
var vm = new Vue({
el: '#demo',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: {
get() {
console.log('computed getter...');
return `${this.firstName} ${this.lastName}`;
},
set(newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
```
在这个例子中,每当用户输入新的全名到表单字段或直接改变 `fullName` 的值时,setter 将被激活,并按照空格分割字符串重新分配给 `firstName` 和 `lastName`。
注意,在上述代码片段里还包含了模板部分展示如何利用 `<input>` 组件配合 `v-model` 指令创建可编辑区域以便实时预览变化效果:
```html
<template>
<div id="demo">
<p>{{ fullName }}</p>
<input type="text" v-model="firstName"/>
<input type="text" v-model="lastName"/>
</div>
</template>
```
每次更改任一文本框中的内容都会触发相应观察者机制进而刷新视图显示最新的 `fullName` 值。
vue中getter和setter的使用方法和区别
在Vue中,getter和setter是用于Vue实例中数据属性的访问和修改的方法。getter用于获取数据属性的值,setter用于设置数据属性的值。
getter和setter的使用方法如下:
1. 定义一个对象,其中包含需要设置getter和setter的属性。
```
var obj = {
get name() {
return this._name;
},
set name(value) {
this._name = value;
}
};
```
2. 使用Vue的属性访问器来设置getter和setter。
```
var vm = new Vue({
data: {
name: 'John'
},
computed: {
fullName: {
get: function() {
return this.firstName + ' ' + this.lastName;
},
set: function(newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
```
区别如下:
1. getter和setter是用于访问和修改数据属性的方法。
2. getter用于获取数据属性的值,setter用于设置数据属性的值。
3. getter和setter可以让开发者对数据属性做一些额外的操作,比如数据验证、数据转换等。
4. 在Vue中,getter和setter可以用来监听数据属性的变化,一旦数据属性发生变化,Vue会自动更新视图。
5. 在Vue中,getter和setter可以用来实现计算属性、侦听器等功能。
阅读全文
相关推荐

















