Vue中的数据代理

什么是数据代理

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

想要更加深刻的理解什么是数据代理，就必须先了解JS中对象的一个方法：Object.defineProperty()，数据代理主要使用Object.defineProperty()的第三个参数中的setter和getter；对其不太了解的小伙伴可以看下小shy之前专门对Object.defineProperty()的讲解 Object.defineProperty()详解。

数据代理案例理解

举例：定义一个对象obj1，给obj1定义一个属性name，再定义一个对象obj2，想让obj2可以访问obj1中name的值，并且也可以修改obj1中的name。

代码如下：

const obj1 = { name: '孙悟空' };
const obj2 = {};

Object.defineProperty(obj2, 'name', {
	// obj2访问obj1中name的值
	get() {
		return obj1.name;
    },
    // 修改obj1中name的值
    set(value) {
    	obj1.name = value;
    }
})

效果如下：
访问数据：

修改数据：

Vue中的数据代理

vue中的数据代理原理和上述例子一样，也是使用了Object.defineProperty()来实现的，使用了其getter 和 setter。下面使用尚硅谷视频讲解来介绍下vue中是如何实现数据代理的。(如需观看视频可在b站搜索尚硅谷vue即可)

首先我们在data中定义一些数据

以下是vue文件

<template>
  <div>
    <h1>名称：{{name}}</h1>
    <h1>地址：{{address}}</h1>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      name: '尚硅谷',
      address: '北京'
    }
  },

  mounted() {
    console.log(this)
  }, 
}
</script>

我们在mounted中打印下this(vue实例对象)，看看里面都有什么。


我们看到vue实例对象身上有这两个属性，但是一开始的状态是…(三个点)，这三个点其实就表示的是该数据是通过Object.defineProperty()来创建的；当然在下面也可以看到name和address这两个数据的getter和setter。

不墨迹，直接开讲：
vue是怎么实现getter 和 setter的呢？
在data中定义name 和 address的时候有如下步骤：

1. 在data中定义name 和 address的时候，vue实例对象在其自身添加了一个_data属性(可以理解为就是data)，用来存储data中定义的name 和 address；
   此时页面只能是通过_data.name的形式才能访问，但是上述代码并不是这样的，是直接访问vue实例对象中的name和address，有意思的来了；
2. 这时候vue会在该vue实例对象上开始加东西(会将data中定义的数据都加到vue实例对象中)，首先会先加一个name属性，name的值则是通过getter来读取_data中name的值；如果修改vue实例对象中name的值，则通过setter映射到_data中的name来进行修改；
3. 同理address也是如此，这种通过getter 和 setter将_data中的数据放到vue实例对象中即为数据代理。（目的就是想让开发者编码相对比较方便一些）

vue数据代理图如下

总结

1.Vue中的数据代理：
	通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
	更加方便的操作data中的数据
3.基本原理：
	通过Object.defineProperty()把data对象中所有属性添加到vm (vue实例对象)上。
	为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

问题

首先我们先看下_data中是什么样的。

我们会发现，_data中也存在数据代理，其实这里面并不是数据代理，而是数据劫持；其实这样做是为了实现响应式，当你修改了vue实例对象中的数据的时候，此时_data中的数据也随之发生了改变，页面中用到该数据的地方则会自动更新，如果想要实现这种效果，就需要让vue知道_data中的数据发生了改变，数据劫持就是来干这个事情的；这里先简单说下，后续会专门出一片文章来解释。