vue中的getter和setter
时间: 2023-05-04 10:01:51 浏览: 71
getter和setter是用于访问和修改对象属性的方法。在Vue中,可以通过定义computed属性和watcher来实现getter和setter。getter可以用于计算和返回一个属性的值,而setter可以监听属性的变化并在变化时执行一些逻辑。通过使用getter和setter,可以控制属性的访问和修改,从而实现更加灵活和安全的数据管理。
相关问题
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可以用来实现计算属性、侦听器等功能。
vue3getter和setter
在Vue3中,getter和setter是通过使用属性代理的方式实现的。具体来说,Vue3使用了`Object.defineProperty`方法来对属性进行代理,从而通过`vm.xx`对`vm._data.xx`进行读写操作。在Vue的实例化过程中,会调用`observe`方法来实例化一个`Observe`类,将`vm.xx`由数据属性转变为访问器属性,并设置getter和setter。每个属性的getter都会实例化一个`Dep`类,用于收集依赖,而setter则会通知更新。当数据发生变动时,setter会触发对应属性维护的`dep`的`notify`方法,通知保存在`dep.subs`中的`Watcher`实例进行更新。这样就实现了getter和setter的功能。
然而,`Object.defineProperty`存在一些问题。首先,在`defineReactive`方法中使用getter和setter时,需要遍历递归,并使用闭包存储数据值的副本。当数据量较大时,会导致性能下降。其次,`Object.defineProperty`的代理是针对属性级别的,无法对对象级别进行代理。
为了解决这些问题,Vue3引入了新的代理方式,即`Proxy`。使用`Proxy`可以更灵活地进行属性代理。通过创建一个`Proxy`实例,可以对整个对象进行代理操作。与`Object.defineProperty`相比,`Proxy`可以动态添加和删除属性,并且可以对这些操作做出反应。在控制台修改`Proxy`的值后,页面会自动更新。相比之下,使用`Object.defineProperty`需要在`data`中定义属性并为每个属性调用`Object.defineProperty`方法设置getter和setter,而且无法对delete操作做出反应。
综上所述,Vue3中通过属性代理实现了getter和setter的功能。`Object.defineProperty`是Vue3早期使用的方式,但由于其存在的问题,Vue3后续引入了`Proxy`,使得代码更具有抽象性。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [关于Vue3.x选用proxy放弃访问器属性(setter/getter)的一点理解。](https://blog.csdn.net/weixin_33724059/article/details/91422102)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)