vue 数据代理

前言

想要学习 vue 的数据代理，首先需要知道 Object.defineProperty 方法，vue 的数据劫持，数据代理，计算属性都要到了这个方法

Object.defineProperty 方法

顾名思义，就是给对象定义添加属性首先看一段简单的代码，简单定一个 person 对象

此时我们提需求，需要给 person 对象新增一个 age 属性

浏览器查看打印

这种方法添加属性的方式虽然麻烦，但是也更加的高级，我们简单的验证下如果是直接在对象里面添加属性，发现对象的 key 颜色是一样的

如果是通过方法在对象里面添加属性，发现对象的我们使用方法添加的那个 key 的颜色，和原有的 key 颜色是不一样的

可以看到，后来新增的属性明显颜色有点淡

这个颜色淡说明了什么呢？

它想表达式的是，这个 age(通过方法新增的属性)是可以被枚举的，也就是不参与遍历的，我们简单验证下我们可以使用 object.keys 方法循环遍历对象的全部 key，最终会把对象的 key 放在一起形成一个数组

defineProperty 基本配置项

简单修改下代码，我们首先使用第一种方式，也就是直接添加属性进行遍历 key

可以看到浏览器控制台三个属性全部打印了

然后修改添加属性方式，通过方法添加，可以看到只剩下两个了，最后新增的那个 key 没有了，这就验证了枚举是不能被遍历的

如果我非要通过方法添加属性，还要让他遍历呢？这时候就需要添加一个属性了

再来查看控制台，发现枚举 key 也可以被遍历了

解决了这个问题，我们继续看，如果我们直接在对象里面添加属性，那么我们可以去修改这个属性的值

但是我们通过方法，是不能修改 key 的值的

如果非要修改 key 的值，我们需要新增一个属性

这时候再来修改 key 的值，就没问题了

理解数据代理

我们写一段代码简单理解数据代理

简单来说，数据代理就是：通过一个对象代理另一个对象中属性的操作（读/写）

vue 的数据代理

首先做一个简单的数据绑定

通过 vm 可以访问到 name 和 address，说明 data 是被代理的

总结

1 vue 中的数据代理

通过 vm 对象来代理 data 对象中属性的操作(读/写)

2 vue 中的数据代理的好处

更加方便的操作 data 中的数据

3 基本原理

通过 Object.defineProperty()把 data 对线中所有属性添加到 vm 上

为每一个添加到 vm 上的属性，都准备一个 getter/setter 方法

在 getter/setter 内部去操作(读/写)data 中对应的属性

————————————————

版权声明：本文为 CSDN 博主「小花皮猪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_46713508/article/details/127448897