Vue.js 深入理解getter/setter：简明教程

83 浏览量更新于2023-05-09 收藏 78KB PDF 举报

"Vue框架中的getter和setter是实现响应式系统的关键部分，它们使得数据的读取和修改能够触发视图的更新。当Vue实例化时，它会将data对象中的所有属性转化为getter和setter，这是通过JavaScript的Object.defineProperty方法实现的，该方法在ES5中引入且无法被polyfill。由于这个原因，Vue不支持IE8及以下版本的浏览器。在Vue实例创建过程中，data对象的每一个属性会被挂载到vm._data上。例如，如果data对象包含一个msg属性，那么可以通过vm._data.msg来访问它。然而，Vue提供了一种更加直观的访问方式，即通过vm.msg来获取或修改数据。这是通过一个名为proxy的函数实现的，它创建了一个代理，使得对vm[key]的访问实际上是在访问vm._data[key]。 proxy函数的工作原理是定义了两个方法：proxyGetter和proxySetter。proxyGetter作为getter，当访问vm.msg时，它会返回vm._data.msg的值。而proxySetter作为setter，当尝试设置vm.msg的新值时，它会更新vm._data.msg的值。这两个方法都被定义在一个共享的属性描述符(sharedPropertyDefinition)中，然后使用Object.defineProperty将这个描述符应用到target对象的key属性上。此外，Vue还提供了vm.$data属性，它与vm._data相同，但对外公开，用于在组件外部访问和修改数据。虽然它们在内部是同一个对象，但在某些情况下，如在计算属性或侦听器中，可能更倾向于使用vm.$data，因为它更符合API的语义。 Vue中的getter和setter是响应式系统的核心，它们允许Vue跟踪数据变化，从而实现数据驱动视图的更新。通过proxy函数和Object.defineProperty，Vue成功地创建了一个用户友好的接口，使得开发者可以方便地操作数据，同时享受到自动化的视图同步。"

Vue 理解之白话理解之白话 getter/setter详解详解

主要介绍了Vue getter setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习

价值，需要的朋友们下面随着小编来一起学习学习吧

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty

把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8

以及更低版本浏览器

以上摘自深入响应式原理

那么，把这些属性全部转为 getter/setter 具体是怎样一个过程呢？本文不深入具体，简单大致了解其过程，旨在整体把握，理

解其主要思路

假设代码如下：

const vm = new Vue({

el: '#app',

data: {

msg: 'hello world'

}

})

data 选项可以接收一个对象或者方法，这里以对象为例（其实最后都会转为对象）

首先，这个对象的所有键值对都会被挂载在 vm._data 上（此外 vm._data 对象上还有个 __ob__ key，暂时可以忽视），这样

我们便能用 vm._data.msg 访问到数据

但是通常我们是用 vm.msg 这样访问数据，如何做到的呢？其实就是做了个代理，将 data 键值对中的 vm[key] 的访问都代理

到 vm._data[key] 上

proxy(vm, `_data`, key)

export function proxy (target: Object, sourceKey: string, key: string) {

sharedPropertyDefinition.get = function proxyGetter () {

return this[sourceKey][key]

}

sharedPropertyDefinition.set = function proxySetter (val) {

this[sourceKey][key] = val

}

Object.defineProperty(target, key, sharedPropertyDefinition)

}

通常 vm._data （下划线变量）用作内部程序，对外暴露的 API 是 vm.$data，其实这两者也是一个东西，也是做了个代理，

代码大概这样：

const dataDef = {}

dataDef.get = function () { return this._data }

Object.defineProperty(Vue.prototype, '$data', dataDef)

if (process.env.NODE_ENV !== 'production') {

dataDef.set = function () {

warn(

'Avoid replacing instance root $data. ' +

'Use nested data properties instead.',

this

)

}

简单理解就是访问 vm.data.msg 其实就是访问 vm._data.msg。如果直接在开发环境对 vm.data = xxx这样的赋值，而不是

vm.$data.msg = xxx` 这样的赋值，后者是没问题的）

至此，我们理解了为什么能用 vm.msg、vm._data.msg 以及 vm.$data.msg 三种方式获取/改变数据，最原始的数据是

vm._data.msg，而另外两者即代理了 _data 的数据，vm.$data.msg 即为 Vue 向外提供的 API，一般情况下开发我们直接用

vm.msg 这样比较多，也方便，如果要获取整个 data，程序中需要用 this.$data，而不是 this.data

接下来说 getter/setter

将 demo 稍微添点东西：

const vm = new Vue({

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38704485

粉丝: 8
资源: 928

Vue.js 深入理解getter/setter：简明教程

谈谈因Vue.js引发关于getter和setter的思考

vue中getter/setter方法的作用

vue 计算属性的语法及 getter/setter

vue-setter:通过getter和setter进行数据绑定的插件

vue计算属性的getter和setter

vue中的getter和setter

vue2的getter和setter

vue3getter和setter

vue中getter和setter的使用方法和区别

访问器属性之getter、setter函数

最新资源