Vue中的数据代理

迈不过友情╰ 2022-09-14 09:57 147阅读 0赞

> **何为数据代理**

**数据代理** ：通过一个对象去代理对另外一个对象中属性的操作(读/写)

在控制台上去验证一下数据代理的操作

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_16_color_FFFFFF_t_70_g_se_x_16][]

**以上存在3个步骤：**

1.  直接输出obj2对象，发现，除了原本定义的y属性之外，还存在，x属性，和还存在 对 x 属性的 get() 和 set()
2.  通过 访问obj2 对象的x属性，其实也就是调用了 obj2 内部的 get x 方法，然后返回了 obj1 对象的x属性。 也就是最终是去访问 obj1 对象中的 x 属性，打印出来是 100
3.  修改 obj2 对象上的 x 属性值之后，再度输出 obj1 ，发现obj1 内部的 x 属性，也变成了修改后的值，这是因为，通过 obj2 修改 x 属性时，其实是调用了 set x 方法，最终是将 新的值，赋值给了 obj1 中的 x 属性

> ** Vue中的数据的代理**

上面说完了数据代理的基本模式，那么Vue中的数据是怎么代理的呢？我们也用一个例子来说明

<div id="root">
      <p>姓名：{
       {name}}</p>
      <p>姓别：{
       {six}}</p>
    </div>
    
    <script>
      const vm = new Vue({
        el: '#root',
        data() {
          return {
            name: 'al',
            six: 'man'
          }
        }
      })
    </script>

这是一个最简单的Vue例子，为了方便后续，我使用了变量 来接收这个 Vue 实例，打印一下看看

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_18_color_FFFFFF_t_70_g_se_x_16][]

可以看到，Vue 实例中，是必须存在 name 和 six 属性的，但是这两个属性的值却是没有展示出来，就和我们使用  Object.defineProperty()  代理的数据一样。实际上，我们只在 data 中配置了这两个属性的值，那么我们在 通过**vm 这个Vue实例对象  **去访问或者修改这两个 **data中的属性  **的时候，同样也是调用的 getter 和 setter

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16][]

查看 vm 最下面的属性时，我们也确实发现了 读取和改写 这两个属性的 getter 和 setter

那么这样就完了么，显然不是的，知其然，我们更要知其所以然。下面我们就来验证一下， Vue 究竟是怎么通过 数据代理，访问修改 data中的数据的。分为两条线，

> **getter ：其实就是 get（）\{\} 这个函数，简化叫做 getter**

验证 getter 的方式其实很简单，以 name 属性为例，页面上展示的数据，不是从 data 取的么，我们只要改变 data.name 的值之后，然后 通过 vm.name  访问属性，看看 vm.name 是否和 data.name  相同就是了

![d0035e69b8344b618f8c30d501b0da5c.png][]

![f7648cdfdb6f419488fa9e31d4072124.png][]

事实证明，vm.name === data.name  这就说明了 Vue 确实是通过 vm实例，去代理 data 对象中属性的读取操作

> ** setter ：set （）\{\}**

证明 setter 就要比 证明 getter 复杂麻烦一点了，但是问题也不大，上例子

![76fa4e939a0342e590644065cf03a3d0.png][]

页面上展示的 姓名 ，就是我data中 初始化的数据，我现在在控制台上 通过 vm 改变这个 name 的值，看看会发生什么

![88e5fda5a3c2475cbe16076f63a47c3a.png][]

我们能看到，此时 姓名 的值，已经变成我修改之后的值了。根据我们的 推测，应该是 通过 vn.name = 'hj' 修改属性值之后，调用了 vm 实例 中 关于 name 属性  的 set() 方法，从而造成了页面的变化，但是我们需要怎么验证 data.name  也发生了变化呢？

![2fb1de00ca50457899b4e5d9c87726d2.png][]

在控制台上直接输入 data.name  想看看 name 属性的值是否发生了变化，这显然是行不通的，data 对象根本就找不到。因为我们的data 根本就不是全局随时都能用的变量啊，它只是 Vue 配置对象中的一个属性呀，当然找不到的。

但是我们接着想啊，我们在实例化之后，这个data能放在哪里呢？我们通过 vm.name  访问的时候，vm 是从哪里取的数据呢？这么一想是不是就明白了？

在实例化的时候，vm 把 data对象，通过别的方式保存下来了，而且还是保存在 vm 自身上的，不然 访问的时候，通过 getter 去哪里 取数据呢？这样想明白之后，我们就在 vm 自身上找找，有没有类似的属性。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_13_color_FFFFFF_t_70_g_se_x_16][]

找完了之后，我们发现 ，vm 身上还真有这么个属性，包含了 name 和 six ，但是这个属性不叫 data 而是叫 \_data ，而且，这个 \_data 身上，还有 关于 name 和 six 的 getter 和 setter 方法 ，这样一看是不是就明白了，vm.\_data 其实 就是 构建实例时，传入的 data 属性，我们也可以验证一下

let data = {
      name: 'al',
      six: 'man'
    }
    const vm = new Vue({
      el: '#root',
      data() {
        return data
      }
    })

我们现在不是找不到 data 么，那我们直接将 data 定义在外部，作为一个全局变量来使用，保证哪里都可以访问到。然后在实例化的时候，我们把这个全局的 data 作为参数传递到配置项中，这样，Vue就自动将 data 转化为 \_data 挂载到了 vm实例，此时，我们也可以来验证一下

![09878ea84d064ccebbba4e855c4ef26e.png][]

** 两个是全等的，所以 vm.\_data 就是 data 数据，此时还没有出现对 data 的数据代理，只有Vue 的数据收集**

**但是当我们改变vm.\_data.name 的值，就是改变 data.name 也就是改变了 vm.name，此时才触发了 数据代理**

接下来，我们就来验证一下 setter 的 过程是如何运行的

数据初始化

![fd07d1b93991425e8201d9b2d52302de.png][]

改变 vm.\_data.name

![9e4af98c130a4cadb31f9e0b46d9e2d1.png][]

查看此时的 vm.name

![9129670822c341eaafe8f9bf692d3e0e.png][]

可以看到，修改了 vm.\_data.name 之后我们可以发现 vm.name 也发生了改变，这就表明，data 中的 name 也是发生改变了的，这就解释了，为什么页面上的 姓名 会发生变化，因为 **一旦 data 中的数据发生改变，页面上所有用到该数据的地方都会同步改变**

> **上述这么大一段逻辑，只是为了证明，vm.\_data === data 且 vm.name 代理的就是 data.name **

那么setter又是怎么工作的呢？

一句话解释就是，通过 vm.name  来修改name数据之后，看看最终能不能修改data.name

初始代码

![e9aebed61b334f44b05fa9b94b78aa38.png][]

通过 vm.name 修改之后，发现页面上的 姓名 已经发生改变了

![b6e2d8e5a3114dd6bfc3f60c28320d5c.png][]

这时候查看 data 数据，发现，data 中的数据也是改变了

![697c8574cbac4ab5aa8daae6539ad6f8.png][]

这就表明了，当我们在修改  vm.name  属性的时候，此时触发了 setter ，通过 数据代理 使得 vm 对象，代理到了 data 对象，通过 vm 操作了 data 对象内部数据

> **数据代理流程**

1、首先， new Vue（）之时，我们传递了 data，在实例化之后，Vue 实例化对象 vm 上存在了一个 \_data 属性，且 \_data 对象就是 === data 对象，

2、Vue 将 \_data 内部的属性，全部取出挂载到了 vm 实例上，具体做法就是，在 vm 上添加同名属性之后，通过 getter 从 \_data  内部取出同名属性且返回，之所以要这样做，是为了方便编码，不然每次都要 \_data.xxx  确实挺麻烦的，其实就算使用 \_data.xxx  也是可以编码的

3、同理，修改了 vm.xxx 属性之后，会通过 setter 同步 映射到 \_data  内部的 xxx 属性上，更新属性值，此时，data 内部的 属性也就同步更改了，页面更新

> **本章总结**

1、Vue 数据代理

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

2、Vue 数据代理的好处

*  更加方便的操作data中的数据，毕竟\_data.xxx 确实挺麻烦的

3、基本原理

*  通过Object.defineProperty()  把 data 对象内所有属性，全部添加到 vm 对象上
 *  为每一个添加到 vm 对象上的属性，都添加 getter 和 setter
 *  在每个 getter 和 setter 内部去操作(读/写) data对象中相对应的属性

4、数据劫持小知识

我们说的 \_data  就是  将 data  赋值给了 \_data ，那么我们肯定希望，看到的 \_data 就和 data 是一样的，但是实际上我们看到的 \_data  却是这样的

![a88d5ebeaa2f4b06bd33d60c99e48a84.png][]

和我们想的并不一样，这里并不是 data 对象，而是另外一个数据代理对象了，这不就是套娃了么，但是，其实这是经过 Vue  特殊处理过的，因为， Vue 承诺过，一旦 data 内部的数据发生改变，页面就会同步变化，那么 Vue  又是怎么监听到 data  数据变化的呢，这个就是我将要说的数据劫持了。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/f667cbff9d4e428cb1c31780ac142eed.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b41ee97358804b488f1677c348889a53.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e018130876ba4d03abd9e3fd7cdd6d34.png
[d0035e69b8344b618f8c30d501b0da5c.png]: /images/20220828/c8eadc8397e44b4c902d4a7553098f77.png
[f7648cdfdb6f419488fa9e31d4072124.png]: /images/20220828/3a151d06299245cc91243b0dd6e3637f.png
[76fa4e939a0342e590644065cf03a3d0.png]: /images/20220828/c3e2b1809d67490fb3a1c9c9265aee20.png
[88e5fda5a3c2475cbe16076f63a47c3a.png]: /images/20220828/be8fec1f134941428cb52d9e60d24d6a.png
[2fb1de00ca50457899b4e5d9c87726d2.png]: /images/20220828/a3024ca71f084ef192f3e21f570e846d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55m95qGD5ZGz56ig6bG854On_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/17d640e44baa456ba9b58e06272d6e9f.png
[09878ea84d064ccebbba4e855c4ef26e.png]: /images/20220828/52f082c5c3e04b3cad2ee95099977d90.png
[fd07d1b93991425e8201d9b2d52302de.png]: /images/20220828/b163ab5ee55c4e17a3c465d3739768c1.png
[9e4af98c130a4cadb31f9e0b46d9e2d1.png]: /images/20220828/0ef196f72d904381a076f38289f90ef7.png
[9129670822c341eaafe8f9bf692d3e0e.png]: /images/20220828/64d526f7c2f24f7b85ed326bacf8aad4.png
[e9aebed61b334f44b05fa9b94b78aa38.png]: /images/20220828/297dc7254484466e9f67cd23b289ec8c.png
[b6e2d8e5a3114dd6bfc3f60c28320d5c.png]: /images/20220828/e84cc655c17c4a64a009c8154a84eb2e.png
[697c8574cbac4ab5aa8daae6539ad6f8.png]: /images/20220828/4b230485dc8541c498321cf25d9cf8d7.png
[a88d5ebeaa2f4b06bd33d60c99e48a84.png]: /images/20220828/323f505ed45a4dd596559f7fe55b4267.png