理解Vue中的数据代理/数据劫持

理解数据代理:

1.数据代理是什么。

数据代理的实质是一个对象代理可以对另一个对象的属性操作(读/写) 这里提到了一个对象代理可以对另一个对象属性进行操作得提到一个api Object.defineProperty()。

数据代理的底层是基于Object.defineProperty()方法

Object.defineProperty():本质是往对象身上添加一个定义属性。可以传三个参数:

1.要添加的对象名称

2.要添加对象的属性

3.配置对象的方法

通过案例演示 Object.defineProperty()

这时有人会问 控制台name和sex的颜色与age颜色不同 

这时有三个配置项:

1.所配置的对象属性是否可枚举

   enumerable: true; 默认值为false

  2.所配置的对象属性是否可修改

   writable: true;  默认值为false

 3.所配置的对象属性是否可删除

  configurable: true;  默认值为false

来看案例演示

这时我们看到person对象里已经有age属性 接下来通过案例演示三个配置项 age属性是可被枚举

还有两个配置项修改与删除

看到控制台已经修改成功 person对象里的age值也发生了改变

看到控制台已经删除了name属性 person对象里只有sex和age属性

通过这三个配置项 Object.defineProperty里还有两个更高级的配置项 来操作数据代理 全称是getter与setter这两个配置项 简写形式get和set

案例演示

临时声明了一个变量number值为18

通过get()函数 当有人读取了age属性 get就会被调用 所返回的值是age值

代码演示get和set

通过get()函数 当有人修改了age属性 set就会被调用 所返回的是具体值

当修改了age值 person里的值没有改变 这是什么原因:因为没有把修改最新的值赋值给age 所以要在set(value) 加上这个参数

这时我们看到已经修改成功了 有人好奇为啥age括号是三个点: 可以看到get和set所服务的是age属性 是个函数 点age括号里的三个点会看到是18 这里会在数据代理里讲清楚这个点

通过这个案例初步可以理解什么是数据代理 只要有人读取或者修改属性的值会发生变化

通过一个案例更清楚的理解什么是数据代理

向obj2对象身上添加一个x属性

当有人读取了obj.x 就返回所对应的值

当有人修改了obj.x 就返回所修改的值 

这里有个疑问 obj2.x的值被修改了 obj.x的也随着obj2.x修改了 这里可以看到有人读取了obj2.x 返回的是obj里的x值100 这也会伴随着修改obj2.x obj.x也会修改 这就是一个对象代理可以对另一个对象的属性进行操作(读/写)

现在开始数据代理正题:数据代理对Vue有什么作用

这时页面上呈现的是data中的数据

我们要验证两条线get和set是如何工作的

当然get这条线比较容易验证

代码演示

 当访问了name和age getter就被调用 把data中的name和age打印出来 当我们在编辑器中概name的值

从此可以看出data中的数据发生改变 控制台输出的data数据也随之改变

验证set这条线 

这时我们可以看一个存在问题:不存在  此时在vm不叫data 而是_data

当我们访问_data 是否会有name和age属性

案例演示

此时可以看到控制台输出的结果是data中的数据 由此可以验证下data是否等于data

此时控制台输出data未定义 这时有个简单的办法 把data定义出去

此时控制台输出为true 由此可以验证出_data就是data 只不过vm中不叫data 可以验证一个option

这条也可以验证出来 option这个函数也有age和name

此时可以看出_data里也有name和age属性 有get和set 当然这里是Vue做的一个数据劫持 如果没有数据代理 就要输出vm._data.name 有数据劫持就只需要vm.name就能访问以及修改

数据代理(重点)

首先vm中有data{name:'张三',age:18} data把里面的name和age给到了_data 而_data 一份给到了vm 一份又在_data下面放name和age 如果有人读取name getter开始工作 准备把data中的name给下面的name 如果有人修改name setter开始工作准备把data中修改name的值给到下面的name

由此可以验证 只要有人修改了name属性 页面就立即响应数据 这里要提到一点 当data中的数据发生改变 Vue监测到了进行响应

数据代理对Vue的作用:其实很好理解:数据代理代理的是data中的数据是否发生变化 只要变化 被Vue监测到 页面就立即刷新 如果data中没有此数据 Vue监测不到 页面不会刷新 控制台也不会报错。

这是我对Vue中数据代理的理解过程 也希望能帮助一些在学Vue中数据代理对这个不了解的同学。